Qué es un Mock Up
Lo primero que debes saber que un Mock Up es una representación visual, ya sea estática o interactiva, de un diseño o de una idea. Normalmente, se usa dentro del diseño gráfico, pero es fácil hallarlo también en el mundo del desarrollo web, en diferentes productos digitales o incluso en aplicaciones para smartphone.
Es bastante sencillo: cuando hablamos de un Mock Up, nos referimos a una maqueta que nos permite ver tanto la apariencia de algo como su funcionamiento. Y eso antes de que su implementación sea definitiva. Por ejemplo, un Mock Up podría ser un ejemplo de cómo quedaría el logo de una empresa sobre el papel, antes siquiera de imprimirlo. O en las tarjetas de presentación de la firma. Pero también podría ser un boceto de la web que hemos creado para una empresa, una especie de acercamiento a lo que será si tener que realizar el trabajo completo. De esta manera, nos ahorraría trabajo en caso de que nuestro cliente quisiera realizar algunos cambios.
Los Mock Up se usan también en el ámbito de la ropa, permitiendo ver diferentes diseños antes de su patronaje y producción. ¡Sus utilidades son muchas, y muy amplias! Podríamos definirlo como una especie de maqueta cuyo objetivo es facilitar la comunicación entre aquel que diseña un producto y el cliente final de este.
No solo los realizan los diseñadores de forma totalmente personalizada, sino que también es posible encontrar Mock Up genéricos en internet. E incluso hay algunos gratuitos. Aunque, claro, estos representan una gran desventaja: no mostrarán realmente la imagen de tu empresa, y puede que acabes encontrando otras firmas que tengan el mismo. En el mundo del diseño y de la publicidad, la personalización es siempre un plus.
Qué debe tener un Mock Up
Para que un Mock Up sea realmente efectivo, debe cumplir con ciertas características básicas, que podríamos resumir en las que vamos a ver a continuación. Hemos querido enfocarnos sobre todo en la creación de páginas webs, pero verás que es extrapolable a todos los ámbitos.
- Debe ser fiel al producto final. Si bien es cierto que puede haber cambios, especialmente los que pida el cliente, debe reflejar el producto final de la mejor manera posible. Los colores, las tipografías, los iconos y la disposición en general de todos estos elementos, deben mantenerse. Si no, se perdería esa función de ser un boceto para no tener que realizar el trabajo completo.
- Pese a esa fidelidad de la que acabamos de hablar, también es importante que se incluya cierto grado de flexibilidad y adaptabilidad. Es importante que los clientes puedan aportar su visión, señalar qué quieren cambiar y qué les gustaría mantener. Puede que, durante el branding, ya tuvieran ciertas ideas para este Mock Up que quieran mantener y que el diseñador no haya sabido captar. En ese caso, es vital que la persona encargada sepa adaptarse.
- Los detalles más relevantes del producto deben incluirse siempre en este Mock Up. Imaginemos el caso de una página web: deben aparecer los botones, los menús, los elementos de navegación, los iconos, los colores, las ilustraciones más relevantes… De esta forma, será mucho más fácil poder ver el producto final.
- Este Mock Up debe enfocarse siempre en la experiencia de usuario, debe garantizar su usabilidad y su fluidez.
- Pese a que no es obligatorio, sí que es recomendable que este Mock Up nos permita interactuar con él para simular el cómo los usuarios podrían usar el producto.
Ventajas
Como ya habrás podido vislumbrar al ver todo lo que este concepto trae consigo, ¡son muchas las ventajas añadidas de llevar a cabo un boceto así! Por ejemplo, que permite que los usuarios puedan llevar a cabo una visualización temprana del producto final, antes incluso de que este esté disponible. Eso hará que puedan darnos su opinión, mejorará la comunicación, y nos permitirá ir implementando cambios antes de realizar el trabajo completo. Podremos ver todos los posibles problemas, así como las mejoras que pudiéramos introducir.
Esto no solo hace que nuestra relación con el cliente mejore notablemente, sino que también nos permite ahorrar tiempo y costos de producción. Hay ocasiones en las que realizar un cambio que pudiera parecer sencillo es muy, muy costoso. No obstante, hacerlo en las primeras etapas hace que sea más barato.
Y, por último, no podemos obviar lo positivo de este feedback previo. Porque hará que, cuando llegue la fase de entrega, el producto sea prácticamente perfecto y cumpla con todas las necesidades planteadas.
Diferencia entre MockUp y Wireframe
¿Es lo mismo un Mock Up que un Wireframe?, puede que te estés planteando. Porque es una duda habitual, que suele surgir porque ambos términos se usan de forma indistinta en muchas ocasiones. No obstante, estamos hablando de etapas diferentes dentro del mismo proceso de diseño.
Mientras que el Mock Up es una representación visual muy detallada, que se acerca al producto final, un Wireframe sería casi el paso previo. Mostraría una representación esquemática de la página web o de la interfaz, centrándose únicamente en los elementos que van a aparecer en esta y en la jerarquía visual que se va a seguir. No es tan visual, no presta atención al estilo, sino que se basa en ser útil para continuar con el desarrollo del producto. Más esquemáticos, básicos y, pese a que continúan siendo útiles, menos visuales que los anteriores.
