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.