Prototipado: wireframes, mockups y prototipos

Para llegar al prototipado de una aplicación web, un Arquitecto de información debe ser responsable de los siguientes pasos:

1. Identificar los objetivos del proyecto.
2. Identificar las necesidades de los usuarios.
3. Especificar las funcionalidades y requerimientos de la aplicación web.
4. Definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda.
5. Prototipar, por fin, la aplicación web.

El prototipado se realiza mediante planos y maquetas:

-PLANOS

• Son diagramas de organización y funcionamiento.
• Se conocen como blueprints, diagramas de contenido o flujo, o mapa web.
• Deben ser comprensibles y reflejar con claridad la estructura, el flujo de navegación y la relación entre los elementos.

-MAQUETAS

• Son diagramas de presentación.
• Crean una referencia visual de la estructura, organización e interacción a nivel de página.

Se dividen en:

1. Prototipos de baja fidelidad

• Dibujos estáticos (Sketching, dibujos a lápiz y papel)

• Wireframe (inventariado de contenido más elaborado y comportamiento de la página)

• Cuando tenemos una secuencia de wireframes, hablamos de Storyboard.

2. Prototipos de alta fidelidad

• Llamados funcionales o mockups.
• Maquetas dinámicas, en HTML, que tienen implementadas partes del sistema final a desarrollar.

La importancia de prototipar una aplicación antes de comenzar el diseño gráfico y su implementación es vital, por varias razones:

1. El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual.
2. El cliente ve y comprende cómo será la aplicación, mucho mejor que si se le ofrece escrita en un documento.
3. Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo.
4. Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad.
5. Es un complemento de gran valor en el análisis.
6. El prototipo se modifica con facilidad y rapidez.
7. Se evitan modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando.
8. Se reducen costes y tiempo.
9. Permite realizar pruebas de usabilidad, como tests con usuarios, en etapas tempranas del proyecto.
10. Se detectan y solucionan los problemas antes de comenzar su implementación.
11. El resultado son aplicaciones web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los usuarios.

Consejos para realizar un buen prototipo: 

• Sencillez y claridad.
• Hazlo en blanco y negro.
• Representa los tamaños y proporciones de los bloques de contenido.
• Ten en cuenta las pautas de accesibilidad y usabilidad.
• Diseña para tus usuarios.