PROTOTIPADO: WIREFRAMES, MOCKUPS Y PROTOTIPOS

En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.

Para saber lo que se necesita en una aplicación debemos:

• Identificar los objetivos del proyecto
  
• Identificar las necesidades de los usuarios
  
• Especificar las funcionalidades y requerimientos de la aplicación web
  
• Definir y diseñar los sistemas de navegación, organización, etiquetado y búsqueda
  
• Para finalmente crear el prototipo de la aplicación
  

La idea final del prototipo es que los usuarios puedan gestionar y accesar a la información de una manera efectiva. Se hacen diagramas para especificar la organización, estructura y navegación de la aplicación web.

Los planos son diagramas de organización y funcionamiento y se suelen definir como Blueprint, diagramas de contenido o flujo o mapa web. 

Al momento de hacer un diagrama lo importante es que sea fácil de entender.

En el artículo "La diagramación en la arquitectura de información" de Ronda León en el que recopila propuestas de vocabularios.

Las maquetas son diagramas de representación de la estructura, organización a nivel de página.

En ningún caso se debe tener diseño gráfico en un prototipo pues se realiza en etapas posteriores y es algo que se debe aclarar al cliente al momento de empezar a hacer el prototipo.

Los dibujos de baja fidelidad o Sketching: 

Son dibujos estáticos, que son bocetos de forma rápida e informal para transferir las ideas.

Un buen libro sobre este tema es el de "Sketching User Experiences" de Bill Buxton

Wireframe: 

Es un tanto más elaborado e incluye los contenidos que están presentes en cada página. Y tiene notas sobre cada uno de los elementos en la aplicación.

Prototipos de alta fidelidad o prototipos funcionales:

Son prototipos funcionales también llamados maquetas o Mockups.

Son prototipos dinámicos normalmente en HTML que tienen implementados funciones para el prototipo final.

Nunca se debe prototipar antes de saber los requerimientos del cliente, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.

Algunos consejos para hacer un buen prototipo:

1. Sencillez y claridad
   
2. Harcelo en blanco y negro
   
3. Representar los tamaños y proporciones de los bloques de contenido
   
4. Tener e cuenta las pautas de accesibilidad y usabilidad
   
5. Diseñar para los usuarios, ante todo

En resumen...