Ironhack’s Prework: Wireframing_Challenge2
Los wireframes son utilizados a menudo por los diseñadores para representar el esqueleto y la estructura visual de un sitio web. Estos esquemas se caracterizan por su simplicidad, ya que carecen de estilos tipográficos, colores, gráficas… Resultan muy útiles en las primeras fases del diseño de una página, ya que se centran en la funcionalidad de ésta, evitando las posibles distracciones que podrían generar el resto de elementos puramente estéticos.
Para este challenge se realizará un ejercicio de “ingeniería inversa”, partiendo de un sitio real, en este caso Vinted, una app de compra-venta de moda de segunda mano. Se seleccionará una función concreta de la app, y se simplificará mediante wireframing a su estado más estructural.
User flow
Para el desarrollo de los wireframes se escogerá una de las funciones principales de la app, la función “comprar una prenda”. Partiremos del escaparate que muestra la app en su pantalla de Inicio y terminaremos realizando la compra de la prenda.
- Selecciono la prenda deseada.
- Veo los detalles de la prenda. Me interesa, escribo al vendedor.
- Decido hacer una oferta al vendedor.
- Realizo la oferta.
- Espero a que el vendedor la acepte o la rechace.
- El vendedor acepta mi oferta y compro la prenda.
- Pago la prenda.
Elementos UI
Los wireframes se realizarán con la ayuda del kit de elementos UI de Ironhack. Estos kits sirven de gran ayuda ya que nos ahorran una importante cantidad de tiempo… ¡y ya sabemos que el tiempo es oro!
Se seleccionan los principales elementos que aparecen en las pantallas, y mediante la combinación de todos ellos, se realizará el esqueleto final de la app.
- Botones
- Campos de texto
- Imágenes
- Iconos
Lo-fi wireframe
Prototipo
Puedes probar aquí el prototipo. Se han implementado los clicks necesarios para el user flow seleccionado, y algunos otros como el scroll en la primera pantalla, la selección de favoritos, opción “comprar” desde cualquier pantalla…
Experiencia
Mi experiencia diseñando con Figma ha sido bastante positiva, me resulta un programa sencillo e intuitivo y con una gran cantidad de posibilidades: componentes, estilos, prototipado, exportación… Como conclusión, destacar la importancia de trabajar con componentes y estilos para un posterior ahorro de tiempo; y también, por supuesto, la importancia de la simplicidad en los wireframes.
