Hola,

La Pec 2 consistía en desarrollar un prototipo para una aplicación responsive de acortamiento de enlaces llamada Short.ly

Lo primero que he hecho ha sido visitar diferentes páginas para acortar enlaces y definir la estética y los colores, os adjunto el logotipo

Una vez hecho esto, he definido el UI Kit, lo podréis encontrar dentro de mi archivo de Figma en el siguiente link:

https://www.figma.com/file/lp8V9QWboPVvvrteNCQ6jz/Short.ly—PerezExpositoPaula?node-id=0%3A1&t=Ed5gpGOxBBXrji0E-0

Además de eso os adjunto una captura por si el visionado fallara

Y ahora os dejo el link del vídeo de mi prototipo

loom.com/share/1c86b7baf8094f20b19030cac1b7673f

¡Espero que os guste!

Muchas gracias por leer

Bon dia, en aquesta segona PAC se’ns ha encarregat la creació d’un prototip d’alta fidelitat que cobreixi el servei d’un portal web d’escurçador d’enllaços.

Tant en el vídeo que a continuació s’adjunta com en els enllaços de Figma que es faciliten, es poden veure reflectits dos dels principals fluxos que s’havien de tenir en compte: el retallar un enllaç i el consultar les estadístiques d’un enllaç generat.

Per fer-ho s’ha decidit apostar per un disseny minimalista i senzill que permeti el usuaris cobrir aquestes dues funcionalitats de manera totalment intuïtiva.

A continuació, adjuntem els enllaços als prototips:

Ordinador: https://www.figma.com/proto/GidnGTPUiRNshHDTE271Nq/Short.ly?node-id=1%3A2&scaling=scale-down&page-id=0%3A1&starting-point-node-id=1%3A2

Mòbil: https://www.figma.com/proto/GidnGTPUiRNshHDTE271Nq/Short.ly?node-id=30%3A287&scaling=scale-down&page-id=30%3A286&starting-point-node-id=30%3A287

També pengem a continuació el vídeo mostrant el flux:

Moltes gràcies per la vostra atenció,

Oriol Quintana

La PEC2 ha consistido en realizar un prototipo interactivo y de alta fidelidad de una herramienta web responsive para acortar enlaces.

La herramienta se llama Shortly y toma como parámetro de entrada una dirección de internet (URL) cualquiera, y su función principal es generar una versión corta de la misma.

He creado un universo visual a partir de un moodboard, una guía de estilo y un UI Kit donde se recogen todos los componentes que forman la interfaz.

A continuación se presentan los dos flujos de interacción para los dos breakpoints: Desktop y Mobile. 

Prototipo

Vídeo

DISEÑO Y SISTEMATIZACIÓN DE UNA INTERFAZ GRÁFICA (1/2)

Para el desarrollo de esta práctica se he debido diseñar una interfaz de página para acortar enlaces largos en otros más cortos. Ha sido muy gratificante poder desempeñar todo el trabajo desde cero. Se ha investigado acerca del estado del arte actual, los colores propios de la marca y finalmente se ha diseñado el prototipo que podemos ver a continuación.

El prototipo está diseñado fundamentalmente para dos breakpoints específicos (Escritorio y Móvil), por lo que todos los elementos y páginas son responsive. A continuación, podemos visualizar algunos de los componentes del prototipo en Figma, así como su diseño tanto para escritorio como para móvil:

A continuación, podemos ver el video del funcionamiento y acceder al enlace del prototipo escritorio y móvil.

También dejo por aquí el enlace al video tanto en WeTransfer como en Youtube.