Mockup y wireframe: visualiza el concepto de tu proyecto online

Debido a que, inicialmente, una nueva aplicación o página web no son más que una idea, en el desarrollo web, la visualización y concepción del diseño son bases indispensables para toda implementación técnica. Es así como se persuade al cliente o se muestra al programador cómo se verá y cómo funcionará el proyecto. La maquetación web también permite descubrir anomalías que pueden ser solucionadas de antemano. En este contexto, dos conceptos que suelen mencionarse con mucha frecuencia son mockup y wireframe. Ahora bien, ¿en qué consisten estos modelos de concepción web?

El término mockup también proviene del inglés y significa maqueta o prototipo. Este modelo de diseño sirve para visualizar el concepto y planificar un proyecto web, complementando los wireframes con elementos de diseño y, a menudo, basándose en ellos. Un mockup web no solo se concentra en el diseño básico, incluyendo la descripción de los procedimientos y presentando marcadores para el posicionamiento del contenido, sino que representa la primera versión de los diseños posteriores. Así, la maquetación web con mockups se encarga de definir

• colores,
• tipografía,
• imágenes
• y elementos gráficos

que darán vida a la totalidad del diseño de la web y facilitarán la visualización del proyecto final en diferentes navegadores y dispositivos. Comúnmente, programas gráficos como Photoshop son los preferidos para crear mockups. Adicionalmente, existen herramientas como Balsamiq que permiten la creación de diferentes páginas con sus respectivos enlaces. Los mockups complejos son muy similares a los prototipos de diseño interactivos (p. ej., click dummies), que, sin embargo, sí incluyen código sobre la base de HTML, CSS y cía.

El hecho de utilizar herramientas de visualización en etapas tempranas del desarrollo web aumenta significativamente las probabilidades de éxito de tu proyecto web. Además, el trabajo en equipo encontrará más rápidamente un común denominador. En caso de que hayas puesto tu proyecto en manos de desarrolladores externos, la maquetación web te ayudará a presentar mejor tus ideas. También serás capaz de determinar qué funciones son realizables, dónde podrían surgir problemas y qué aspectos están comprometiendo la usabilidad de la página web. Finalmente, los bocetos realizados en papel son la mejor manera de presentar tu proyecto online a clientes potenciales e inversores.

Por otra parte, el camino que va de la idea a la programación, pasando por la visualización, no siempre tiene lugar mediante la aplicación de ambos modelos de maquetación. Hay algunos escenarios en los que el wireframe ya es suficiente: preparar un mockup es innecesario si, por ejemplo, estás planeando una subpágina interactiva para un proyecto web ya existente, pues la mayor parte del diseño de la web ya ha sido configurado. Esto también es válido en el desarrollo de aplicaciones web. Sin embargo, un wireframe es la mejor forma de visualización si se ha contratado a un diseñador gráfico y se le quiere dar la mayor libertad posible. 

Ahora bien, la creación del mockup para una web es inevitable cuando se trata de presentar las ideas propias respecto a los elementos gráficos del proyecto. Cuanto más detallado sea el diseño de tu wireframe, más fácil será la preparación de la plantilla de diseño web. Lógicamente, la creación de un mockup interactivo con un gran número de páginas y una estructura de enlaces compleja implicará una mayor inversión de dinero, tiempo y esfuerzos. Sin embargo, en algunos casos evita la utilización de prototipos basados en código.

El enfoque cada vez mayor hacia el diseño responsivo ha aumentado notablemente la complejidad de los wireframes y de los mockups. Anteriormente, un simple boceto era suficiente, pero ahora la producción de diferentes versiones dependiendo del tamaño de la pantalla es un paso imprescindible dentro del desarrollo web. Adicionalmente, dentro de la visualización del diseño, también se deben considerar las diferencias funcionales, como medios de entrada (ratón, teclado, pantalla táctil), y los requisitos técnicos (de transmisión de datos, etc.).

Las circunstancias actuales han llevado a que muchos usuarios prescindan de un mockup y prefieran la creación instantánea de un prototipo responsivo que cubra las necesidades de los diferentes dispositivos. Como consecuencia, los desarrolladores de herramientas de creación de wireframes y mockups han reaccionado rápidamente a la demanda del mercado, simplificando significativamente la creación de diferentes versiones para un mismo diseño. Así, quien quiera crear su wireframe a mano, no tiene más opción que crear individualmente borrador por borrador.