¿Por qué usar mockups y cómo hacerlos?

¿Qué es un mockup?

Fuente: Freepik

Al diseñar sitios web y aplicaciones móviles, los requerimientos tanto funcionales como estéticos del cliente son fundamentales, y para llevarlos a la realidad comúnmente se usan los mockups. Anteriormente conocido como maqueta, el mockup es un recurso que sirve para poner ideas en práctica simulando el producto final. Mediante un mockup podrás crear prototipos, evaluar diseños, colores y tipografías, ver la ruta del usuario en un servicio web y su funcionalidad previo al diseño final.

¿Para qué sirve un mockup?

Fuente: Freepik

1. El mockup te permite visualizar y contextualizar tu diseño para ver si tu producto funciona como lo pensaste y para presentarlo al cliente.
2. Los mockups facilitan la comunicacion diseñador-cliente mediante el feedback que el último brinda y mejoran la experiencia de uso de tu producto digital, ya que te señalan cómo puedes perfeccionar el diseño.
3. El uso de esta herramienta te permite reducir costos, ya que gracias a varias pruebas antes de empezar la producción, tendrás la certeza de que tu producto final será de excelente calidad y estará en línea con los requerimientos del cliente.
4. Además, estos prototipos te permiten enriquecer tu portfolio profesional y mostrarle a tu audiencia y clientes potenciales qué experiencia tienes mediante proyectos anteriores.

¿Cuándo usar un mockup?

Fuente: Freepik

La creación de un mockup es uno de los pasos primordiales en el design thinking. Prepara el mockup cuando consideres que tu app o página web está lista para ser testeada (mockup inicial) o cuando esté completa, previo a su lanzamiento (mockup final).

¿Qué tipos de mockups existen?

Los tipos de mockups se dividen según las fases en las que se encuentra tu proyecto.

Fase de exploración:

• Comportamiento: Se enfoca en cómo actúa la función específica de una página o una aplicación web; por ejemplo, te permite ver cómo funcionará el botón “olvidé mi contraseña” al momento de ingresar a la aplicación.
• Estructura: Explora aspectos relacionados al diseño: puedes visualizar la combinación de paletas de colores, la tipografía de los botones, etc.

Fase de evolución y de resultado:

• Exploración: Este prototipo se descarta una vez que cumple su propósito. Puedes usarlo, por ejemplo, para probar diversas paletas de colores en una aplicación móvil.
• Evolución: El mockup evoluciona gradualmente hasta transformarse en la versión final.

Cómo hacer mockups en Figma

Figma es una herramienta gratuita de prototipado web y edición de gráficos vectoriales. Se aloja en el servidor web, y puedes acceder a tus proyectos y compartirlos con tu equipo en línea. Aquí te mostramos cómo hacer un mockup para mostrar el trabajo de una función en una app de mensajería instantánea.

1. Imagina que ya tienes la sección de mensajería diseñada y solo necesitas mejorar el flujo y la comodidad de interacción.
2. En el lado derecho de la interfaz de Figma hay una columna con tres elementos: Design, Prototype e Inspect. La columna Prototype te permite modificar las características de tu mockup. Entra en Device y elige con qué dispositivo quieres que se visualice el prototipo; puedes definir modelos de Android y Apple o simplemente poner uno general. En la sección de Background, eliges qué fondo de pantalla tendrá el prototipo.
3. Una vez elegido el dispositivo y el fondo, Prototype te mostrará frames que componen la función de mensajería instantánea, enmarcados con un borde azul y un círculo blanco a su derecha. Estos círculos se llaman nodos, y te permiten enlazar un elemento con otro.
4. Una vez que enlazas a los elementos, por ejemplo, el botón de contactos con la lista de chats activos, podrás visualizar la versión demo con Play.
5. Dentro de cada elemento enlazado aparece un pop up de las opciones con las que podrás elegir un trigger, es decir, lo que debe pasar cuando pasas de una pantalla a otra si haces click (On tap) o si arrastras un elemento (On drag). También podrás visualizar la transición de una pantalla a otra a través de las opciones: Instant, Dissolve, Animate, Move in/out, Push.
6. Una vez finalizado el prototipo, mediante Share prototype podrás compartirlo con tus colegas y clientes.

Conclusión

Los mockups funcionan como prototipos que ayudan a comunicar visualmente las ideas de diseño y funcionalidades del producto a tu equipo de trabajo y clientes. Determinan la rentabilidad de una plataforma o una aplicación, ya que mediante pruebas puedes mejorar la calidad, ajustar costos y alcanzar la usabilidad deseada.