Clase 38: Wireframes y Prototipos

Esta clase comenzamos con cátedra y el profesor nos mostró una presentación a cerca de wireframes y diseño de prototipo centrado en el usuario. La funcionalidad de los prototipos es plasmar el diseño de la estructura de nuestro producto digital, es algo así como el el storyboard en proyectos audiovisuales. Revisamos los siguientes tipos de prototipado:

“Sketch”: es la fase temprana del wireframe, normalmente son dibujos sencillos, pueden se tanto a mano como digitales y carecen de paleta de colores, texto e imágenes, es algo así como un “esquema”, pasando por prototipos de baja fidelidad.

“Storyboard”: Corresponde al conjunto de “sketch” de manera organizada, cuentan una historia.

“Wireframe”: Un wireframe es un conjunto de dibujos planos sin interacción que pueden ser realizados tanto de manera digital como análoga (dibujo en papel). No necesariamente los desarrolla una sola persona, son un espacio transversal entre distintas áreas, todos pueden participar (diseñadores, IT, equipo de producto, etc). A través de ellos se comprende y representa la interacción entre humano y maquina y cómo debería de responder el sistema y cada uno de los elementos que lo componen.
Existen los de baja y alta fidelidad, por supuesto que los de baja fidelidad carecen de detalle, y ello permite identificar errores más fácilmente. Los de alta fidelidad, son mas detallados y se acercan más a lo que sería el “producto final” .Se pueden hacer en papel, digitales inclusive en html y css.

Algunas de las plataformas en las que podemos desarrollar nuestros prototipos son: Adobe XD, Figma, Balsamic, Origami, Axure, Invision, entre otras.

Una vez claros los contenidos de la cátedra, pasamos a trabajar en nuestras salas para comenzar el desarrollo de los wireframes de nuestra app. Para comenzar, repasamos nuestro site map y fuimos definiendo las pantallas, cruzando información con nuestro userflow, pudimos ir completando los contenidos de cada pantalla. Para este ejercicio, utilizamos la app Figma y si bien logramos avanzar bastante, aún nos quedan lagunas funciones por definir y desarrollar.

Como conclusión definitivamente user flow y site map son fundamentales para que pasar a esta etapa del desarrollo de producto, sin ellos, posiblemente no habría mucha coherencia y sería lentísimo empezar a probar qué queda mejor, qué va antes, qué va después. Esas son preguntas para ir afinando detalles, pero no para comenzar a prototipar. Personalmente me ha gustado mucho esto de ir trabajando por etapas, te ayuda al orden y a la estructura, teniendo nuestros mapas desarrollados, es más fácil ir tomando decisiones (sobre todo a quienes nos cuesta “cortar el queque”) lo que hace del proceso algo muchísimo más eficiente. Pueden parecer muchos pasos y algunos parecidos a otros, pero son fundamentales y si bien es harto trabajo previo, es para ir haciendo cada vez de manera mas sencilla y eficaz la toma de decisiones.

ENLACES:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: