Guía de estilo, importancia en el diseño de interfaces
24/08/2019
Mapas conceptuales, mapas de navegación y sitemaps
25/08/2019
Tabla de contenidos
Los prototipos web son dibujos o diseños de las diferentes páginas y secciones que van a componer un sitio web.
10. Prototipos web
El diseño conceptual de una web está formado por representaciones de las páginas y secciones que van a componer el sitio. Los procesos que se incluyen dentro del prototipado son una parte esencial a la hora de definir los menús y los elementos que constituyen una web.
Hay distintas fases dentro del prototipado web. No es necesario llevarlas todas a cabo pero sí muy recomendable para detectar cualquier problema de concepto. Las fases del prototipado sirven para definir los procesos, realizar cambios y pruebas antes de subir a producción una aplicación web. Además, el uso de prototipos nos ayuda a involucrar al cliente en la fase previa al desarrollo y así adecuar el proyecto a sus necesidades.
Las diferentes fases del prototipado web son: boceto (sketch), esquema de página (wireframe), maqueta (mockup) y prototipo (prototype). En inglés se conoce a este proceso como SWMP, tal y como se puede ver en la siguiente figura.
SWMP
10.1. Boceto (sketch)
El sketch es un dibujo o boceto inicial de un sitio web. Este dibujo poco detallado puede estar realizado sobre papel, pizarra o cualquier formato que permita realizar cambios de manera rápida. Se trata de un diseño de muy bajo detalle en donde se visualiza por primera vez el conjunto de elementos fundamentales de una web.
10.2. Esquema de página (wireframe)
Un wireframe es la representación de la estructura básica de la página web en la que se especifican los elementos de forma esquematizada. Es un diseño a bajo nivel en el que se establece claramente la jerarquía de los elementos, los contenedores y la organización del contenido.
Se suelen utilizar herramientas como las siguientes:
- Balsamiq Mockups: balsamiq.com
- Gliffy: gliffy.com
- Wireframe: wireframe.cc
- Figma: figma.com
Tambien existen los wireflows o árboles de navegación. Se trata de una representación del conjunto de wireframes estructurados en un flujo que nos indica el comportamiento y la navegación entre las distintas pantallas de la web.
- Draw.io: app.diagrams.net
- Omnigraffle: omnigroup.com/omnigraffle
- Wireflow: app.wireflow.co
10.3. Maqueta (mockup)
Un mockup es una representación a medio nivel en el que se incluye imágenes, tipografías y colores, aunque no tiene por qué ser definitivos. La finalidad del mockup es conseguir una versión avanzada del diseño de la web que nos permita evaluarlo en su conjunto, la detección temprana de puntos débiles y la realización de cambios sin que sea demasiado costosa.
- Balsamiq: balsamiq.com
- MockFlow: mockflow.com
10.4. Prototipo (prototype)
El prototipo es la representación más detallada de la web y dispone de interactividad para comprobar el comportamiento y la experiencia de usuario. Es, por tanto, un diseño al más alto detalle y la última fase de conceptualización antes de la implementación web.
Por norma general, los colores, las tipografías, los iconos, y demás artefactos gráficos utilizados en el prototipo serán los que se utilicen en la página web. Sin embargo, en muchos casos, se llama también prototipo a una versión con menos detalle pero que dispone de interactividad.
- Proto.io: proto.io
- Sketch: sketch.com
- Adobe XD: adobe.com
Los prototipos interactivos permiten la realización de pruebas más completas y profundas del diseño web, descubriendo aspectos de esta que de otra manera no habrían sido planteados.
- Marvel: marvelapp.com
- InVision: invisionapp.com