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.

En este trabajo hemos analizado la página Airbnb. Para ello hemos analizado los elementos de la interfaz, desarrollado un UI Kit y finalmente hecho un prototipo de la página.

Todo esto lo hemos construído en base a 3 breakpoints. Escritorio, Ipad y móvil.

Os adjunto unas capturas de mi UI Kit.

Retículas: 

Como se puede ver tenemos diferentes sistemas para cada una de los breakpoints, pero mantuvimos el sistema de columnas.

Iconografía de la web: 

Hemos recogido la iconografía más utilizada

Tipografías: 

Elementos: 

Hemos recogido los elementos que más se repetían a lo largo de los breakpoints

Por último os dejo el vídeo de mi prototipado: https://www.loom.com/share/663e48fa0ffa4f59b260c6d5723f22f4

Y el enlace a mi archivo de figma:

https://www.figma.com/file/GjcK2VZCxD1jRF4cunpurF/Airbnb?node-id=80%3A2250

Muchas gracias por leerme!

Para entender como funciona una web y poder empezar a pensar en como construir una tu mismo, es un muy buen ejercicio deconstruir y reconstruir una ya existente, con el propósito de analizar aquello que sucede en ella.

Se nos proponía el análisis de la web de Airbnb como ejercicio para comprender los componentes, desde los más básicos como saber como se organiza la rejilla o que símbolos se usan hasta la interactividad y los flujos a través de la propia web. Para empezar a diseñar un prototipo es conveniente el crear un manual que recoja y contenga la información sobre la que vamos a trabajar, un manual de estilo que contenga los elementos principales, un UI Kit.

El paso lógico después del manual es la construcción del sitio, pero hemos de tener presente que nuestro diseño no va a comportarse igual en cualquier dispositivo. Nuestro diseño ha de ser responsive, es decir, adaptable a los diferentes anchos de las interfaces en las que se pueda llegar a presentar, por ello para la realización del ejercicio plasmaremos nuestro diseño en 3 dispositivos diferentes para poder ver como ver comporta nuestro proyecto a diferentes saltos o breakpoints.

Por último, nuestro diseño ha de poseer interactividad, el usuario ha de poder moverse libre e intuitivamente por la web que creemos, para ello hemos de añadirle correctamente flujos a nuestra interfaz, para poder navegar por las diferentes páginas que esta posea.

Para ilustrar lo explicado y, como se nos pide, adjuntaré a continuación un video mostrando los prototipos y adjuntaré debajo un enlace a los mismos.

https://www.figma.com/file/v49AmTKxl0nIEPRl6GIVZp/Untitled?node-id=0%3A1 

A partir de la observación, el estudio y la réplica de la página de Airbnb, he podido comprender y mejorar el conocimiento que tenía de la herramienta Inspeccionar de Google Chrome. Muy útil y necesaria en mi día a día cuando se trabaja en un entorno FE y se requiere entender mejor este entorno.

Esta práctica me ha servido para mejorar mi agilidad trabajando con Figma y para seguir profundizando en el pulido de las interacciones y micro-interacciones. He podido explorar cuál es la mejor manera de construir el prototipo para recrear con más exactitud el producto real. Aunque actualmente no se pueda conseguir al 100%, no creo que estemos lejos a poder presenciar nuevas y mejores funcionalidades para Figma.

Me gusta crear Design Systems y el UI KIT sirvió para organizar mejor mi espacio de trabajo.

Aquí os dejo el enlace al prototipo y al vídeo.

P.D: El prototipo de Mobile requiere de mockup. Al estar los 4 prototipos en el mismo archivo (Desktop, Tablet, Mobile y ejemplo de Responsive) no lo he podido dejar predeterminado ya que afectaría a los otros. Es por eso que la barra de navegación parece que no esté bien situada.

Prototipo

Vídeo