Challenge 2: Wireframing

Violeta Robla
2 min readFeb 19, 2020

Este Challenge pertenece al Prework del Bootcamp de UX/UI Design y consiste en crear los wireframes de una app elegida. El resultado final debe ser un prototipo interactivo creado en Marvel o Invision.

Yo escogí Airbnb, la misma app que en el ejercicio anterior (Exercise 2: Design Practice). Además, creé un par de pantallas más para poder plasmar un user flow un poco más completo.

¿Qué es un wireframe?

Es una guía visual que representa el esqueleto de un sitio web o aplicación.​ Ayuda a esquematizar el diseño de la página y el orden de los contenidos. Incluye los elementos de la interfaz y sistemas de navegación y cómo funcionan en conjunto.

Ejercicio

Utilicé el Ironhack wireframe kit que nos habían proporcionado e intenté simplificar al máximo, sin centrarme en detalles de diseño, ni colores.

No obstante, me pareció importante representar con más fidelidad algunos detalles que pudiesen ayudar al usuario en la navegación.

Este fue el resultado:

Challenge 2: Wireframing

Y esta es la comparativa con las pantallas de la app Airbnb:

Comparativa: Pantallas reales / Wireframes

Por último, utilicé InVision para animar mi prototipo. Aquí puedes ver el resultado.

Mi experiencia

Lo que me ha gustado de este challenge es que te obliga a no perderte en los detalles, ser muy esquemático y sintetizar. Me ha parecido muy interesante la tarea de “deconstruir” la app por completo para llegar a la estructura básica.

--

--

Violeta Robla

Senior graphic and editorial designer based in Barcelona. Currently studying UX/UI Design. Feel free to have a look 🚀 www.violetarobla.com