UX/UI Prework 4.0 — UI -Exercise: Wireframing Challenge

[Ironhack][Prework][UI][Sketch] — Cuarto ejercicio — Ironhack Madrid

Alberto García
3 min readApr 18, 2019

A la hora de prototipar no es necesario en unas fases tempranas tener el diseño final, por ello utilizamos recursos rápidos de crear para representar los elementos que más tarde diseñaremos, estos son los wireframes.

Al igual que cuando bocetas a mano los hay de mayor o menor nivel de detalle pero todos tienen una cosa en común, nos ahorran mucho tiempo y podemos trabajar rápidamente en el concepto sin perdernos en detalles visuales.

El ejercicio

En esta ocasión tenemos que elaborar un wireframe de unas pantallas de la aplicación emov.

Para ello nos han facilitado un UI Kit, y aparte he descargado y creado elementos que necesitaba y no estaban.

Al tener símbolos creados y estilos de texto se trabaja muy cómodamente y de manera rápida.

Cuando había listas no he modificado los títulos ni texto para avanzar rápido, algunos textos son falsos en los que he puesto Lorem Ipsum.

He obviado la barra de notificaciones propia del smartphone, en este caso un iPhone.

Este es el modelo que nos dieron:

Pantallas de aplicación emov

Y este es mi resultado final:

Wireframing realizado para representar emov
Load Page — Marco creado para la publicación
Mapa — Marco creado para la publicación
Filtarado del mapa — Marco creado para la publicación
Coches disponibles— Marco creado para la publicación
Menú desplegado — Marco creado para la publicación
Formulario de registro — Marco creado para la publicación
Pantalla de login — Marco creado para la publicación

Conclusión

Gracias a los wireframes he podido representar esta aplicación en muy poco tiempo, tan sólo he tenido que ver qué elementos me faltaban, crearlos y una vez tenía todo ponerme a colocarlos.

El uso de símbolos facilita muchísimo y los estilos de texto agilizan mucho el trabajo.

--

--

Alberto García

UX / UI Designer | Product Designer. In constant evolution, never stop moving always.