Antes de empezar a diseñar y a desarrollar un sitio web, es muy importante hacer un prototipo para poder ver cómo va a ser y desarrollarlo a partir de esa idea.
- Los planos son diagramas de organización y funcionamiento, que se suelen denominar blueprint, diagramas de contenido o flujo, o mapa web.
A la hora de realizar la diagramación de una aplicación web lo más importante es que sea comprensible y refleje con claridad la estructura, el flujo de navegación y la relación entre los elementos.
- Las maquetas son diagramas de presentación, cuyo objetivo es crear una referencia visual de la estructura, organización e interacción a nivel de página.
En ningún caso se debe incluir diseño gráfico en un prototipo, que se realiza en etapas posteriores. No se deben utilizar colores salvo los estrictamente necesarios, y por ello se usan gamas de grises. Los prototipos de baja fidelidad son dibujos estáticos.
- Hablamos de sketching cuando realizamos bocetos de forma rápida e informal para transmitir una idea o concepto con rapidez y claridad.
Antes de comenzar un prototipo más elaborado es conveniente comenzar con este tipo de bocetos para trabajar ágilmente con varias ideas, ir esquematizando las páginas y definiendo las diferentes zonas de las mismas.
- Un wireframe es más elaborado e incluye el inventariado de contenido, es decir, qué contenido debe estar presente en cada página. Este debería incluir el comportamiento mediante notas asociadas a los elementos para indicar cómo deben mostrarse o para definir su comportamiento funcional.
Cuando hay una secuencia de wireframes se denomina storyboard.
- Los prototipos funcionales son prototipos de alta fidelidad, también llamados a menudo maquetas o mockups, que permiten detallar el proceso interactivo de una o varias tareas.
Son prototipos o maquetas dinámicas, normalmente en HTML, que simulan o tienen implementadas partes del sistema final a desarrollar.
Nunca se debe comenzar a prototipar sin haber definido primero los objetivos del cliente, las necesidades de los usuarios, los requisitos del proyecto y la arquitectura de información de la aplicación web.
Por qué es importante prototipar una aplicación antes de comenzar el diseño gráfico y su implementación:
- El equipo y el cliente se centran en el diseño de contenidos e interacción, y no en el diseño visual.
- El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita en un documento.
- Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo.
- Ayuda a especificar los requerimientos y a detectar inconsistencias o falta de funcionalidad.
- Es un complemento de gran valor en el análisis.
- El prototipo se modifica con facilidad y rapidez.
- Se evitan modificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando.
- Se reducen costes y tiempos.
- Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto.
- Se detectan y solucionan los problemas antes de comenzar su implementación.
- 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.
- Hacerlo en blanco y negro.
- Representar los tamaños y proporciones de los bloques de contenido.
- Tener en cuenta las pautas de accesibilidad y usabilidad.
- Diseñar para los usuarios.
