PROTOTIPADO

Nos referimos al proceso de crear un boceto o planos de la estructura y funcionamiento del futuro sitio web.
Lenguajes utilizados:

• Wireframes.
• Mockups.
• Prototipo.

 A este proceso también le llamamos diagramación de una aplicación Web. Existe un vocabulario cuando estamos hablando de diagramación un ejemplo es el libro de James Garret "Vocabulario visual para describir arquitectura de información y diseño de interacción".
Esta diagramación que vamos a realizar debe ser clara y comprensible, es recomendable que tenga una leyenda en la cual se expliquen los símbolos utilizados.
Un artículo que podemos usar como referencia es: "Diagramación en la arquitectura de información".
Nunca debemos usar diseños gráficos, evitar colores, utilizar escala de grises.
Tipos de diagramación:

• Sketching; hecho a lápiz y papel, será rápido y ágil. Muy interesante utilizarle para tener claras nuestras ideas y que el cliente también vaya viendo la futura aplicación web. Libro que nos puede servir: "Sketching User Experiences".
• Wireframes; es mucho más completo. Ya se puede ver como quedará la página olvidando la parte gráfica de la misma. Cuando tenemos una secuencia de wireframes estamos hablando de storyboard.
• Por último se pueden hacer prototipos funcionales o también conocidos por maquetas o mockups, ya tienen un funcionamiento dinámico y se consideran prototipos de alta fidelidad. Los dos que hemos descrito anteriormente se consideran de baja fidelidad. 

Lecturas recomendadas:

• Artículo de Olga Carreras "Arquitectura de información. Fundamentos".
• "Arquitectura de información en entornos Web" Mario Pérez-Montoro Gutiérrez.

Si prototipamos bien, evitamos futuros mal entendidos con el cliente, se reduce el trabajo en el desarrollo y se aumenta la satisfacción final tanto del cliente como del usuario.
Lecturas recomendadas:

• Artículo "Wireframes".
• Artículo "Prototipado" Fundación Sider.
• Enlace a Blog "Wireframes" de Olga Carreras.

5 consejos para un buen Prototipado:

1. Sencillez y claridad.
2. En blanco y negro.
3. Representar tamaños y proporciones.
4. Ten en cuenta usabilidad y accesibilidad.
5. Diseña para tus usuarios.