Ironhack’s prework: Miguel Manzano_Challenge 2

El segundo challenge para el prework de Ironhack corresponde al modulo de UI, o User interface.

Este módulo comprende varios aspectos del diseño de interfaz, y el que nos ocupa en este challenge concreto son los wireframes.

El challenge consiste en emplear Sketch para elaborar los wireframes de una App que conozcamos, y que dichos wireframes representen una task que el usuario realice de forma normal.

En mi caso, he decidido seleccionar una app de comida a domicilio: Just Eat. La task que se muestra en los wireframes es sencilla: Pedir comida a un restaurante concreto en nuestra proximidad.

Esta task consiste en 5 pantallas que corresponden a 5 wireframes y que obedecen al User Flow que sigue el usuario a la hora de completar esta Task:

  1. Establecer una localización.
  2. Escoger un restaurante cercano.
  3. Seleccionar un artículo.
  4. Seleccionar la cantidad que queremos encargar de dicho artículo.
  5. Desglose de precios y pago.

Se ha escogido esta task en concreto por que es sencilla, fácil de comprender y requiere de una serie de pasos que están bien delimitados con pantallas muy distintas entre sí.

Pantallas originales y sus wireframes

En este apartado podemos observar las capturas de pantalla originales, y los wireframes en forma de prototipo en Invision.

Estas son las pantallas empleadas como modelo:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Aquí podemos ver sus wireframes correspondientes:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Asimismo, he realizado un prototipo con invision que permite clickar en los wireframes y demostrar el user flow elegido a través de ellos: https://mike178002.invisionapp.com/public/share/3NX7LOSC9

Conclusiones

El módulo de UI ha sido de los más complicados para mí porque nunca he tenido demasiado contacto con el diseño gráfico, y he tenido que aprender deprisa.

Por fortuna, Sketch ha resultado ser una herramienta muy intuitiva y tanto este challenge como su ejercicio correspondiente (Replicar una aplicación en alta fidelidad) han resultado ser tareas interesantes e incluso divertidas.

Después de realizar este módulo tengo más confianza en mi capacidad para trabajar con interfaces, y he podido entender mejor procesos que antes eran totalmente ajenos para mí.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store