Prototipos en el diseño de interfaces web

Los prototipos web son dibujos o diseños de las diferentes páginas y secciones que van a componer un sitio web.

Una vez que se han estudiado los componentes de una web y comprendido la importancia de la guía de estilo, el siguiente paso es estudiar los prototipos web. Los prototipos son versiones interactivas de un sitio web o aplicación que se utilizan para probar y mejorar el diseño y la funcionalidad antes de su lanzamiento. Al trabajar con prototipos, podemos experimentar con diferentes opciones de diseño y recibir comentarios de los usuarios para mejorar la experiencia del usuario final.

10. Prototipos web (web prototypes)

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

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
• Figma: figma.com

¡Esperamos que hayas encontrado este artículo sobre prototipos útil e inspirador! Si deseas sumergirte más en el mundo del diseño y llevar tus habilidades al siguiente nivel, explora el tutorial de Figma.