27

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

48582Puntos

hace 2 años

Curso de Diseño de Prototipos 2018
Curso de Diseño de Prototipos 2018

Curso de Diseño de Prototipos 2018

Genera una idea clara de lo que puedes lograr con tu producto digital a través de prototipos. Reconoce, comunica y pon a prueba cualquier producto antes de crear su versión definitiva. Evidencia la relación entre diseño e interacción a través de prototipos de alta fidelidad.

¿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.
Diseño de prototipos

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.

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.

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

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.

Curso de Diseño de Prototipos 2018
Curso de Diseño de Prototipos 2018

Curso de Diseño de Prototipos 2018

Genera una idea clara de lo que puedes lograr con tu producto digital a través de prototipos. Reconoce, comunica y pon a prueba cualquier producto antes de crear su versión definitiva. Evidencia la relación entre diseño e interacción a través de prototipos de alta fidelidad.
Demian
Demian
demian

48582Puntos

hace 2 años

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
4
13280Puntos

La única manera en la que aprendí a diseñar UI y UX fue sentándome y hacerlo. Claro, hice basura al principio, pero cada minuto que invertía se convertía 100% en experiencia, y poco a poco se perdía el miedo, frustración y la confusión de no saber que hacer.

1
247Puntos

Para mi concepto la mayor ventaja de utilizar este tipo de herramientas es que desde el programador, pruebas, y PO, sabrán que esperar del producto que estamos desarrollando.

1
15760Puntos

Excelente… Creo que voy a iniciar este curso se ve muy interesante y necesario. Thanks

1
2875Puntos

¡Gracias! Me hacía falta este artículo