Cómo diseñar un prototipo sin morir en el intento

¿Te has encontrado frente a un proyecto y no tienes idea de dónde comenzar?
Generar una idea clara de lo que quieres lograr con tu producto digital resulta complicado cuando no dominamos los procesos de planeación, ejecución, pruebas y exportación de nuestro prototipo.
Desarrollar el diseño, interfaz y navegación con los procesos y herramientas adecuadas nos ayudará a vencer el horror de la hoja en blanco.

¿Cómo diseñar mejores productos?

INICIA TU PROTOTIPO

Recordemos que un prototipo es una simulación de tu producto final a construir donde la fidelidad puede ir desde:

• Baja a través de un boceto
• Mediana a través de un wireframe
• Alta cuando ya tenemos un prototipo interactivo

Antes de iniciar tu boceto recuerda definir el flujo de tareas para entender el alcance del proyecto.

Descubre la importancia de los prototipos en UX, y mira la manera gráfica de simular el resultado de tu producto.

EL BOCETO

El boceto puede hacerse al lado de los desarrolladores pues en él definirán las secciones, botones, navegación, filtros, entre otros. Para ello pueden usar la herramienta Free Hand.

ATOMIC DESIGN

Atomic Design es un framework teórico y un marco de construcción para el sistema de diseño, el cual es una colección de reglas, restricciones y principios para implementar el diseño y código de nuestro producto. Está herramienta busca definir nuestro diseño a través de diferentes componentes:

• Átomos: son la unidad más fundamental de una interfaz, puede ser un button o un label.
• Moléculas: son la unión de varios átomos, por ejemplo, un formulario.
• Organismos: es la unión de varias moléculas, a este punto la interfaz empieza a tener formas definidas, por ejemplo, un header.
• Templates: es lo que denominamos wireframe, se pueden empezar a realizar pruebas de concepto. Es la unión de varios organismos.
• Páginas: también llamados mockups de alta fidelidad, es cuando vacías información real dentro de un template.

Las ventajas de atomic design son:

1. Es de práctica más generalizada.
2. Hace más fácil la comunicación con los clientes.
3. Facilita el aterrizaje de ideas.
4. Es el fundamento de un design system.

Cinco días para ir de un problema a un prototipo con Design Sprint.

EL WIREFRAME

Ya hecho nuestro boceto podemos trabajar en nuestro wireframe. En él se tomarán las decisiones en cuanto a tipografía, ubicación, diseño, arquitectura de la información, etc. Para ello podemos usar Figma, una herramienta en línea que te permite tener centralizado todo tu trabajo de diseño.

OTRAS HERRAMIENTAS

El paso de tu wireframe al prototipo final podemos realizarlo ayudándonos con las siguientes herramientas:

• Zeplin
• Overflow
• Gherkin Syntax

También puedes seguir estos consejos para aprender cómo convertir una idea en un producto exitoso.

Si deseas más detalles sobre el proceso y herramientas para realizar tu prototipo te invito a tomar el Curso de Diseño de Prototipos.