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

Última actualización
01 Jun 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
$ 731,67 MXN
a meses sin intereses con tarjeta de crédito
Precio total
$ 8.780 MXN
$ 17.560 MXN
Inscríbete al curso
Comparte tu opinión
Recibir notificaciones de otros comentarios

O como invitado

Suscribiete Suscribiete Suscribiete Suscribiete Suscribiete

Más artículos relacionados

23 Oct 2023
9 min
¿Qué es la teoría del color y dónde se aplica?

Descubre los conceptos fundamentales de la teoría del color.

23 Oct 2023
9 min
23 Oct 2023
7 min
5 generadores de imágenes con IA que debes conocer

Pinta un cuadro sin pinceles o colores.

23 Oct 2023
7 min
22 Oct 2023
7 min
¿Qué es el paisajismo?

El paisajismo como el diseño basado en la naturaleza: descubre más sobre esta profesión de alta demanda.

22 Oct 2023
7 min
22 Oct 2023
8 min
¿Qué es la experiencia del cliente?

Crear un buen producto ya no es suficiente para competir en el mercado; también debes asegurar una excelente experiencia del cliente.

22 Oct 2023
8 min
22 Sep 2023
7 min
¿Qué es la co-creación?

Descubre cómo la co-creación puede revolucionar tu flujo de trabajo.

22 Sep 2023
7 min
21 Sep 2023
6 min
La vida pixelada de Susan Kare

Descubre la historia de Susan Kare, la mujer creativa que dio una “sonrisa” a tu Mac.

21 Sep 2023
6 min