close

mockup web empresas
[Total:1    Promedio:5/5]

¿Estás empezando a diseñar tu página web? Seguramente ya escuchaste el término mockup. Si aún tienes dudas sobre qué se trata y para qué sirve, no tienes de qué preocuparte, presta atención a este artículo que te aclarará cualquier pregunta que tengas al respecto.

Empecemos por lo más básico, su significado, cuando hablamos de mockups nos referimos a fotomontajes que le permiten a los diseñadores gráficos y de web darle una idea clara a su cliente de cómo quedarán sus diseños. Es decir, en una imagen mostrarán cómo se vería exactamente el diseño en una situación real.

Estos fotos montajes se pueden hacer tanto en logotipos, como tarjetas de presentación, folletos, vallas y por supuesto páginas web.

¿Por qué se usan los mockup web?

Contar con mockups le permite a los clientes y al diseñador ahorrar en gastos de impresión y montajes. Estas maquetas se les muestran al cliente para que vean el diseño en los diferentes formatos que existen y en los que estarán disponibles. Esto le permitirá al cliente o a la marca tener una idea aproximada de cómo se verá en la realidad.

¿Es lo mismo wireframe y mockup?

En ocasiones estos dos términos suelen confundirse, pero no son lo mismo. Hay diferencias en los conceptos. El wireframe conecta la estructura del concepto con lo visual, mientras para hacer el diseño visual de un sitio se emplean los mock ups.

Los wireframe también se pueden denominar como bocetos de baja calidad. Esto se debe a que visualmente son un conjunto de cuadros grises que forman una información y la organiza, también se verá un texto que dará a entender mejor de qué va cada sección de la página web.

Los mock ups por su parte serán un diseño de calidad media o alta. Allí se verán los colores, los distintos tipos de tipografías, cómo será el fondo, etcétera.

Mockups web

Hay que aclarar que algunos identifican al mock up como un prototipo, lo que no es exactamente real en la web, ya que la interacción que se puede hacer con una de estas maquetas es muy mínima. Es por eso que se les conoce como low fidelity prototypes o paper prototypes.

¿Qué sigue después del mockup?

Luego del mock up va el prototipo, que es una simulación de la interfaz de usuario que va a permitir que se interactúe con el menú y el contenido. Esto servirá para probar las principales interacciones que se tendrá en la versión final de la web.

Para hacer esto se trabaja en un conjunto de páginas HTML que se conectan entre sí, con diapositivas con PPT con animaciones navegables.

Cuando se está haciendo una web siempre es recomendable hacer mapas conceptuales de lo que se quiere. Se pueden hacer wireframes y mock ups como elementos que ayudarán a ubicar el contenido de una la página.

En esta parte seguramente surgirá la duda de qué se puede hacer con las opciones del menú, del submenú que corresponde, ya que generalmente no es posible que se haga un árbol donde se establezca la jerarquía de relaciones de forma clara. Esto se logrará mediante la diagramación del contenido.

El uso de mapas conceptuales dará una visión clara y global del sitio web y de cómo se verá durante la navegación, también ayudará a darle una ubicación a las opciones que habrá en el menú y a cada una de las secciones. Esto hará todo más coherente y se evitará la duplicación del contenido.

De esta forma, podrás organizar todo el contenido de tu página de forma que tengas una mayor claridad para diseñarla y que quede justo como estás deseando.

Herramienta online para crear mockups

https://www.canva.com/create/mockups/

¿Qué te pareció el artículo?