Este primer proyecto, en mi caso sirve como toma de contacto con una herramienta de muchas posibilidades, pero desconocida para mí. He encontrado numerosas dificultades, pero en la curva de aprendizaje ha sido increccendo, a pesar de que el márgen de mejora sigue siendo amplio. Aqui os dejo el video de mis prototipos y en enlace.

https://www.figma.com/file/X2KGiiwjStuyBj1blwZYVt/Prototipo-Airbnb?node-id=234%3A2333

Espero aprender mucho más de figma y seguir leyéndoos.

La primera práctica de la asignatura de Prototipado, consistía en la deconstrucción de una interfaz gráfica. Es decir, se debía seguir el orden contrario: creando un prototipo a partir de una interfaz de una página web ya existente. En este caso, se ha elegido como ejemplo Airbnb.

Airbnb es una compañía que ofrece una plataforma digital dedicada a la oferta de alojamientos a particulares y turísticos (alquiler vacacional) mediante la cual los anfitriones pueden publicitar y contratar el arriendo de sus propiedades con sus huéspedes; anfitriones y huéspedes pueden valorarse mutuamente, como referencia para futuros usuarios.

Sin embargo, dada la extensión de la página web, se ha centrado el prototipo en cuatro páginas clave:

• página home, incluyendo el sistema de búsqueda (destino, llegada, salida, viajeros).
• página de resultados de búsqueda, incluyendo los filtros.
• página de un alojamiento concreto, con galería de imágenes/carrusel incluida (no es necesario dotar de interacción)
• página «Confirmar y pagar»

Todo ello para un total de 3 breakpoints: ordenador, tablet en horizontal y móvil.

El desarrollo ha sido:

1. Analizar la web anotando los diferentes tipos de componentes que tenían y los estilos que se habían seguido para crear cada uno de ellos.
2. Crear un UI kit en Figma para poder reutilizar esos estilos a la hora de crear los componentes.
3. Crear componentes en Figma para poderlos adaptar y reutilizar en las distintas páginas y vistas.
4. Crear el prototipo para cada uno de los breakpoints.
5. Introducir interactividad al prototipo para poder simular el comportamiento normal de la web.

De izquierda a derecha se ejemplifica la imagen general de cada parte, siendo: UI kit, componentes, prototipo y prototipo con flujo de interacción.

A continuación se dejan algunas de las partes mencionadas anteriormente. No obstante, el prototipo se puede consultar utilizando el siguiente enlace:

https://www.figma.com/file/lhp5UB10Po7yGIR01T0MXj/Airbnbn_Clara?node-id=1%3A3

Por otro lado, el flujo principal del breakpoint principal (en este caso ordenador), ha quedado explicado en el vídeo que se muestra a continuación:

Ha resultado de especial interés aprender a utilizar el programa de Figma y ver la cantidad de detalles y de estilos diferentes que posee la página. No obstante, resulta de especial interés ver cómo se puede simular una web sin tener absolutamente nada programado y que los usuarios puedan verificar el diseño antes de pasar a la producción en cuanto a implementación.

Sin duda, una forma idónea de validar y verificar de la manera más tangible posible.

Link: https://www.figma.com/proto/G0dGmTzXkZD4AKVyyLi8zC/Airbnb-Mariaucris?page-id=1080%3A15875&node-id=1080%3A16998&viewport=-1048%2C-472%2C0.16&scaling=min-zoom&starting-point-node-id=1080%3A16998

Prototipo Video

En el siguiente prototipo he realizado una versión básica para la navegación en la reserva de un alojamiento. Aunque es bastante básica, os a navegar cada uno de los pasos.

Hola a tod@s!
Luego del análisis de la interfaz puede recocer sus características, estructura y patrones de diseño (airbnb.es). En el proceso de diseño encontré algunas dificultades, mayormente por la cantidad de elementos e interacciones de la página web.

Este fue mi primera experiencia con Figma y el ejercicio me resulto complicado, espero que con los conocimientos adquiridos los siguientes procesos sean más agiles.

Breakpoints desarrollados:
Desktop: 1440×1024
Tablet Horizontal: 1194×834
Mobile: 390×844

Capturas del desarrollo:

Video funcionamiento del flujo:

Video flujo

Enlace a prototipo:

Mobile