Si acabas de llegar al mundo UX/UI quizás todavía no sepas qué significa esto de “wireframe”. Hace unos meses, yo tampoco lo sabía.
Un wireframes es un «esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web». (¡O al menos eso dice Wikipedia…!).
Vamos a adentrarnos un poco más en este concepto y en su desarrollo dentro del diseño web. Son el esqueleto, la representación visual de forma esquemática de la estructura de una aplicación o página web. Realizándolos detectaremos posibles problemas que puedan surgir, ya que con ellos podremos ver cómo interactúan los elementos entre sí, es decir, los flujos (flows). Y, aunque (todavía) no soy una experta, este segundo challenge consiste en desarrollar varios wireframes representando un flujo de una aplicación que utilizamos anteriormente.
En este caso, la aplicación que elegí fue Fintonic. Es una aplicación que, en mi caso, uso a menudo, me ayuda a organizar el dinero y ver de forma clara los pagos y movimientos. Poco a poco esta aplicación ha ido añadiendo diferentes servicios, de manera que hoy en día puedes desde ver tus cuentas en común, contratar un seguro o ver comparativas de precios de telefonía hasta pedir un préstamo de forma rápida, entre otras cosas.
Para el ejercicio he elegido precisamente este último caso. La representación de los wireframes muestran el flow o flujo de los 5 pasos previos a tener que insertar tus datos personales para solicitar un préstamo de forma real.
Aunque lo más importante es centrar la atención en la funcionalidad del sitio que estamos creando, ya en estos bocetos podemos observar que se trata de una app muy visual y, teniendo en cuenta los colores que utiliza la marca, será fácil crear una imagen mental de cómo podría ser el resultado final.
