Definiendo UI

Objetivos del taller

• Implementar herramientas que permitan idear soluciones de diseño y prototipos de interfaz.

​

Productos: wireframes lo-fi y hi-fi.

¿Cómo se verá nuestra propuesta?

En este punto empezaremos a traducir las funcionalidades propuestas en pantallas. Para esto desarrollaremos los wireframes o bocetos de cada una enfocando la discusión en asegurar los objetivos propuestos para la experiencia.

1. CRear wireframes lo-fi

• También conocido como un esquema de página o plano de pantalla, el wireframe es una guía visual que representa el esqueleto o estructura visual de lo que se verá en cada pantalla.
• En este se define el plano, es decir,  los elementos necesarios en cada pantalla.
• Transmite la dirección general y la descripción de la interfaz de usuario.
• No es necesario que sean perfectos. La intención es poder aumentar progresivamente el nivel de detalle.
• Como la discusión debe estar enfocada a la experiencia se recomienda no usar color.
• Puede ser elaborado a mano o digitalmente.

1. CRear wireframes lo-fi

Para asegurar el cumplimiento de los objetivos en el wireframe debemos preguntarnos constantemente:

• ¿Quién es el usuario?
• ¿Cuáles son los objetivos de usuario previstos al interactuar?
• ¿Cuál debería ser el contenido y cómo debería organizarse para a poyar los objetivos?
• ¿Cómo enviar el mensaje principal al usuario?
• ¿Dónde está el llamado a la acción?
• ¿Qué debería ver primero el usuario?
• ¿Qué esperará ver nuestro usuario en la pantalla?

1. CRear wireframes lo-fi

En cada pantalla se deben disponer los elementos necesarios para que nuestro usuario entienda:

• Qué acaba de suceder
• En qué parte del flujo está [dónde]
• Qué puede hacer
• Qué pasará cuando lo haga

2. CRear wireframes HI-fi

• Permite definir con más detalle el formato visual de la propuesta, el tamaño de los elementos, el espacio entre  ellos según el tipo de interacción y priorizar los llamados a la acción
• Es importante tener en cuenta las proporciones o elementos propios de los dispositivos para los que se está diseñando y usar contenido real.
• Es importante que el diseño de nuestras pantallas cumpla los siguientes principios:
  • Claridad
  • Flexibilidad
  • Familiaridad y patrones
  • Feedback
  • Consistencia
• bit.ly/wireframesUX (ejemplos), thenounproject.com (iconos)