Ironhack Prework · Wireframing Challenge

Este ejercicio estará basado en la app de emov

1. INTRODUCCIÓN

Continuamos con los ejercicios entregables del Prework de Ironhack.

En esta ocasión nos centraremos en la creación de Wireframes.

Antes de pasar a la parte práctica me gustaría explicar rapidamente algunos aspectos importantes sobre los wireframes.

2. ¿QUÉ ES UN WIREFRAME Y PARA QUÉ SIRVE?

Simplificando mucho podríamos decir que un Wireframe es un esquema de una pantalla concreta de un producto digital cuyo objetivo es mostrar la funcionalidad, comportamiento y jerarquía de contenidos.

El objetivo de un wireframe es crear el esqueleto y el flujo de nuestra interfaz. Por este motivo, los primeros wireframes deberán ser realizados a mano y sin entrar en un gran nivel de detalle. Además deberán contar con lo mínimo necesario para que puedan ser entendidos por los demás sin perder de vista el objetivo que acabamos de mencionar.

¿Qué ventajas nos ofrecen los wireframes a baja definición frente a wireframes con un alto nivel de detalle?

1. La solución que estamos creando, probablemente tenga fallos de estructura. El contenido visual te distraerá del diseño y del flujo de la aplicación y perderás más tiempo haciéndola lucir bien que volviendo atrás y rediseñando el flujo.
2. Los interesados pueden echar atrás tu propuesta y pedir muchos cambios. Si crearas un wireframe en alta definición en las primeras versiones de nuestro producto, tendrías que volver atrás y rehacer todo ese trabajo, en lugar de hacer algo tan sencillo como rehacer algunas lineas en blanco y negro.
3. Los usuarios de tests y las partes interesadas pueden centrarse en cosas incorrectas. A todos nos distraen los objetos brillantes y es fácil llegar a pensar que un diseño es genial si la UI es moderna y sencilla, olvidando errores graves en el flujo del producto.

3. OBJETIVO DEL EJERCICIO

Vamos a trabajar a partir de la app de emov.

Emov es una plataforma de Carsharing que permite a sus usuarios alquilar coches eléctricos por periodos muy cortos de uso dentro del nucleo urbano.

Estas son 7 pantallas de la app de emov para iOS:

Nuestro objetivo es diseñar utilizando Sketch, los 7 wireframes que se corresponden con estas 7 pantallas.

Es evidente que el proceso normal sigue el orden inverso, sin embargo esta es una forma de que nos familiaricemos con el diseño de wireframes apoyándonos en un diseño ya creado.

4. RESULTADO DEL EJERCICIO

Estos son los wireframes que he creado utilizando Sketch:

5. CONCLUSIONES

• Creo que ha sido relativamente sencillo, ya que al contar con el diseño original unicamente es replicar y simplificar los elementos en pantalla.
• Sigue sorprendiéndome lo sencillo que es Sketch para realizar cualquier trabajo de diseño.
• He dudado si añadir iconos reales en los botones del menú lateral y en la lista de coches disponibles pero al final he decidido priorizar la rapidez en el proceso por encima del nivel de detalle.
• En lugar de utilizar los típicos “dummy text”: Lorem ipsum dolor sit amet, consectetuer… he creido que era mucho más util usar textos que ofrecieran más información como: “Car Registration”, “Street”, “Filter 1”, “Menu 1”…
• I ❤️❤️ Sketch.