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

Última actualización
07 Feb 2023
Tiempo de lectura
5 min
escritorio

Visualiza tu diseño y muéstralo al cliente en un contexto real con los mockups.

¿Qué es un mockup?

la gente piensa

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?

la gente establece metas

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?

la gente encuentra una solución

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.

interfaz figma

  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.

Página de inicio / Diseño
Diseño UI

Aprende a diseñar los elementos visuales y la interacción de productos digitales como aplicaciones y páginas web para hacerlas más intuitivas y fáciles de navegar.

Encuentra el equilibrio digital entre lo estético y lo funcional. Forma parte de una de las profesiones más apasionantes y demandadas en el sector tecnológico.

13 Feb 2023
5 meses
12x de
$ 595 MXN
(a meses sin intereses con tarjeta de crédito)
Costo por curso completo
$ 7,139 MXN
$ 14,278 MXN
Intégrate al curso
Comparte tu opinión
Notificar sobre comentarios

O como invitado

Suscribiete Suscribiete Suscribiete Suscribiete Suscribiete

Más artículos relacionados

22 Mar 2023
7 min
¿Qué es el diseño de moda y qué hace un diseñador de moda?

Aprende sobre el mundo del diseño de moda: qué es, en qué consiste y cuáles son las salidas profesionales.

22 Mar 2023
7 min
07 Feb 2023
5 min
Entrevista con Paulina Solis, la profesora del curso de Diseño de Productos Digitales

Paulina Solis, profesora titular del curso Diseño de Productos Digitales, nos comparte su perspectiva sobre la realidad del mercado actual.

07 Feb 2023
5 min
07 Feb 2023
6 min
¿En qué consiste el curso de Diseño de Productos Digitales?

Contestamos una pregunta frecuente sobre el programa del curso de Diseño de Productos Digitales.

07 Feb 2023
6 min
¿Qué hace un diseñador de interiores y cómo dominar la profesión?

Te contamos cómo convertirte en un diseñador de interiores desde cero y empezar a crear espacios hermosos.

07 Feb 2023
7 min
¿Qué perfiles IT buscan las empresas?

La demanda de los especialistas en áreas tecnológicas sigue superando la oferta, convirtiendo el sector IT en un sector sin desempleo.

06 Feb 2023
8 min
22 Dec 2022
6 min
Cómo desarrollar la creatividad: 7 formas de estimular el pensamiento creativo

Si quieres ser ingenioso, desarrolla tu capacidad creativa en 7 pasos.

22 Dec 2022
6 min