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

DECONSTRUCCIÓN DE UNA INTERFAZ GRÁFICA

Con esta práctica he conseguido aprender un montón de cosas sobre cómo funcionan las interfaces gráficas, dificultades, trucos…. La verdad es que me lo he pasado realmente bien deconstruyendo, fijándome en los detalles, aprendiéndome la página de memoria, para después ser capaz de construir una identidad gráfica en forma de UI Kit y, al final, directamente un prototipo de la página web.

En primer lugar, estudié los diferentes breakpoints, su funcionamiento, los elementos que entraban en juego a la hora de construir la web y también los elementos que se repetían.

Así fui capaz de construir un sistema de diseño que contiene desde los estilos tipográficos hasta componentes, pasando por paleta de colores y retículas principales. A continuación, algunas imágenes descriptivas:

Con todos estos elementos y estilos, creamos los prototipos de los tres breakpoints: escritorio, tablet y móvil.

Por último, se han construido los diferentes flujos para el funcionamiento adecuado de la aplicación, añadiendo utilidades a los componentes y incluyendo los scrolls necesarios.

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

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