Mockup web: ¿Qué es y cómo diseñarlo?

Si estás comenzando a diseñar tu web en estos momentos te va a venir muy bien tener amplios conocimientos en todo lo que atañe al mockup web. Te podrá ser de gran ayuda para que armes un estilo con el que se identifique a tu marca y al mismo tiempo poder estructurar y organizar los objetivos de navegación que entiendas son más convenientes de cara a la experiencia de usuario.

¿Qué significa este concepto?

Básicamente, cuando hablamos de un mockup a escala general, a lo que hacemos referencia es a una especie de fotomontaje que permite que los diseñadores gráficos puedan mostrar un prototipo sobre el producto final. En este caso, una imagen sobre el diseño que acabará teniendo el producto.

Estos montajes se pueden ver en muchas industrias: logotipos, animaciones, ediciones de vídeo, efectos de sonido y, por supuesto, también en el mundo de las páginas web. Por eso, puede ser una excelente oportunidad para que corrijas sobre la marcha algunas de las especificaciones que necesitas para tu sitio web.

¿Cuál es el uso de un buen mockup para una página?

Cabe destacar que tener listo un mockup puede ser de utilidad para facilitar el trabajo del diseñador, pero también para que el cliente esté más conforme con el producto final. Es muy común que, si esta instancia no se respeta y no se muestran posibles prototipos, el resultado no acabe siendo del agrado del usuario.

Esto es debido a que las indicaciones pueden ser muy generales e incluso los usuarios hayan tenido una idea que, al materializarse, no resulta como se esperaba. Por eso, si el diseño tiene distintas maquetas con diferentes formatos disponibles en los cuales trabajar, la marca tendrá una aproximación sobre cómo finalmente quedará el proyecto, por lo que el brief del sitio web podrá ser más preciso.

Al mismo tiempo, al trabajar sobre estos arquetipos, el cliente tendrá mayor facilidad para aclarar cuáles son las modificaciones específicas que solicita para que el trabajo sea personalizado.

Igualmente, un buen website debe seguir ciertos parámetros según el sector del mercado. Por ejemplo, una tienda de comidas rápidas tendrá la siguiente estructura:

• Categorías donde se muestran y se especifican los productos.
• Imágenes de los pedidos que pueden realizar los clientes.
• Preguntas frecuentes.
• Un apartado corporativo que explique los objetivos de la empresa.

Estos mockups comparten un estilo en todas las marcas, pero no todas son idénticas. Cada una tiene sus propias características.

Diferencia con wireframe

Conviene resaltar que hay diferencias con este término, y nos encontramos en muchas ocasiones con que se confunden, pero no son lo mismo. Diferenciemos ambos conceptos:

• Un wireframe sirve para generar una conexión del concepto que tiene el cliente con las características más generales del producto final, sin necesidad de que sea un diseño específico. Es decir, un wireframe es un arquetipo inicial de baja calidad del producto, similar a los bocetos de los artistas a la hora de crear un personaje, por poner un ejemplo. Generalmente están desarrollados en forma de cuadros grises, con el objetivo de organizar la información y comprender cómo podría dividirse cada sección o categoría de la página web o tienda e-commerce.
• En cambio, un buen mockup servirá como un posible diseño final, que tendrá una calidad de trabajo alta. Por ejemplo, podrás apreciar las posibles paletas de colores que tendrá el sitio, el estilo de las tipografías, las imágenes de diseño, las animaciones, entre otras cuestiones. Sin embargo, casi en ningún caso acabará siendo el trabajo final que se otorgará al sitio web. Es decir, que la diferencia entre ambos conceptos, básicamente, radica en el uso que se les da.

Después de ver el mockup de tu sitio

Si entendemos al mockup como un posible diseño, lo que va a continuación es una simulación real del prototipo que permitirá interactuar al usuario con todas las características del menú y ver cómo funciona todo. Es decir, se pasa de la simple estética a la funcionalidad, pues una web no solamente debe tener un buen look and fell, también debe ser funcional e intuitiva.

Si se planificaron bien los mapas conceptuales en el desarrollo web, verás cómo todas las páginas HTML estarán bien conectadas. Por eso, un buen trabajo y planificación del sitemap de Google permitirá que todo el contenido que puedas desarrollar comience a ser rastreado por el buscador y pueda posicionar eficientemente. Mientras más sencillas les pongamos las cosas a los buscadores más nos premiarán.

Sin embargo, en esta etapa empezarás a tener dudas o sugerencias para las opciones del menú. Puede que, si tienes una tienda online, quieras colocar distintos submenús para cada uno de los productos que puedes llegar a ofrecer. Es importante que el contenido esté bien diagramado para que la jerarquía de las relaciones pueda percibirse de forma clara.

Más información sobre el mockup

En Internet encontrarás distintos mockups que podrás editar fácilmente, pero lo cierto es que un buen diseñador web debería crear los suyos propios. En primer lugar, eso ayudará a definir tu propia identidad visual en función del tipo de clientes al que nos dirijamos. Y a su vez podemos conseguir darle una mayor dosis de profesionalismo a nuestro proyecto web: si la plantilla es muy genérica, difícilmente pueda encajar en grandes empresas.

Si los archivos tienen una capa editable se podrán crear distintas bases personalizadas que podrás armar según el rubro al que pueda pertenecer un determinado negocio. Por ejemplo, la estética general de una clínica médica no será igual a la de una agencia de marketing. La primera debe tener una imagen más seria, mientras que en la segunda debemos de mostrar una imagen bastante más creativa que hable bien de nuestras facetas creativas.

Por lo tanto, todas estas maquetas surgirán con el objetivo de que cualquier cliente pueda demostrar lo que quiere en su página o tienda web sin necesidad de tener demasiados conocimientos. Es una relación win to win: por un lado, los diseñadores se ahorrarán trabajo y fases de corrección; por el otro, los clientes obtendrán mejores resultados y podrán dar indicaciones precisas.

Recuerda que la creación de un buen mockup deberá contemplar no solamente la estética posterior dell proyecto web, sino también las posibles funcionalidades que el usuario finalmente dará a sus URLs. O lo que es lo mismo, si es una web con un buen look and feel, agradable a la vista, pero poco accesible a nivel de experiencia de usuario, nos encontraremos con serios problemas de visibilidad en los buscadores. Definitivamente, nuestro sitio web, deberá reunir las dos condiciones: ser atractiva a los ojos de nuestros potenciales clientes e incentivar la navegación en la misma. Todo esto será el resultado de haber hecho un buen trabajo en el diseño del mockup web.