Wireframing en Sketch

Francesca Tozzi
2 min readDec 11, 2019

Hola! os presento un ejercicio del pre-work UX/UI Design Bootcamp Ironhack.

En este ejercicio, como podéis ver del titulo, os contaré y enseñaré cómo funciona el desarrollo del diseño de la aplicación de Cabify. Usando el programa Sketch he aplicado el proceso inverso, de pantallas en alta fidelidad a wireframes.

Que es SKETCH?

Es una herramienta que permite desarrollar bocetos y diseño web.

Que es un WIREFRAME ?

Es un diseño de baja fidelidad que transmite lo suficiente para mostrar la idea central. Un nivel básico de comunicación, estructura y comportamiento durante el diseño de un sistema.

Primera parte — Captura de pantallas de la aplicación Cabify · Segunda parte — Versión wireframes de las mismas pantallas

Ventajas de usar Wireframes

· Rápidos y baratos de crear: Como son bocetos esquemáticos son rápidos de crear.

· Detectar y corregir los problemas antes: Al ser sencillos y rápidos de realizar permiten exponerlos rápidamente a feedback y resolver problemas básicos relacionados con la usabilidad y funcionalidades propuestas.

· Mejoras sencillas: En poco tiempo podrás mostrar los primeros Wireframes.

· Mejor usabilidad: Planear previamente la estructura y los elementos permitirá ofrecer una mejor usabilidad.

Consideración:

En hacer el ejercicio me di cuenta que he podido realizar múltiples versiones hasta encontrar la adecuada. Esta técnica te da la posibilidad de crear en poco tiempo, cambiar y encontrar la funcionalidad.

Probar para encontrar.

Hasta pronto!

F.

--

--