Moqups: una visión general y revisión


¿Cómo sabes que una idea es genial o terrible sin probarla?

Wireframing, maquetas y prototipos son partes necesarias del diseño digital. Visualizar sus conceptos le permite simular sus diseños, probar diferentes experiencias de usuario y probar varios viajes y flujos de usuarios antes de hacer que algo funcione.

En el pasado, los diseñadores tendrían que imprimir sus diseños y presentar al cliente un PDF. Hoy en día, existen herramientas para ayudarlo a encontrar y resolver desafíos de diseño antes de que un diseño se haga público; resolver los componentes estéticos y técnicos de un diseño; y prueba la experiencia antes que nadie.

También suavizará su relación con el cliente: si asumen algo (que lo harán), puede lidiar con eso en las primeras etapas en lugar de escuchar: "Oh, pensé que …" más adelante, cuando sea demasiado tarde. .

Moqups es una herramienta de diseño basada en la web que puede ayudarlo a construir wireframes, maquetas y prototipos, todo en un mismo entorno. Puede navegar entre proyectos y llevar su diseño de baja fidelidad (etapas iniciales y bocetos) a alta fidelidad (más exhaustiva y detallada). En esta publicación, le doy una vuelta y le muestro cómo es ese proceso en cada paso del camino, incluidas mis reflexiones finales al final de la publicación.

¿Qué puedes hacer con Moqups?

Moqups

Hay varios diseños que puede hacer con Moqups: diagramas, diagramas de flujo, mapas de sitio, wireframes, maquetas, cuadros y gráficos. Vamos a repasarlos.

Notarás que no hablo específicamente sobre prototipos aquí. Hay una razón para eso, y lo toco más tarde.

Diagramas y diagramas de flujo

Casi todos los proyectos de diseño web comienzan con un diagrama, un diagrama de flujo o un mapa del sitio, y los miembros del equipo tienden a consultarlo en el camino. Con Moqups, puede crear todo tipo de diagramas:

  • Diagramas de concepto
  • Árboles de decisión
  • Diagramas de flujo con interacciones del usuario
  • Diagramas de flujo para flujos de trabajo de software
  • Mapas mentales
  • Sitemaps
  • Diagramas de casos de uso

Moqups

Con las plantillas de diagrama de flujo, puede obtener una ventaja en todo tipo de diagramas. También puede usar un extensor de diagrama para desarrollar un flujo como lo necesite. Además, puede cambiar el aspecto del diagrama para personalizarlo.

Wireframes y maquetas

Con estructuras alámbricas, su equipo puede descubrir cosas como la jerarquía de información, la densidad de páginas y el flujo de usuarios al comienzo de un proyecto. Las formas simples y el texto de marcador de posición representan los elementos de diseño más avanzados que agregará en el futuro. No tiene que preocuparse por la marca o el diseño todavía; en cambio, solo debe preocuparse por la estructura y los requisitos clave del sitio web.

Moqups

Con maquetas, su equipo puede recibir comentarios en las primeras etapas del diseño. Se basará en el boceto de la estructura alámbrica para visualizar el contenido y demostrar cómo funcionará de una manera muy básica. El diseño se pone en contexto para que se vea mejor y para visualizar el resultado final. En lugar de ver un diseño en una página, los clientes pueden ver cómo se verá el diseño en su sitio web o aplicación.

Crea en el orden que más te convenga

La belleza de Moqups es que puedes saltar de un lado a otro entre tus wireframes y maquetas como quieras, y no necesariamente tienes que crear uno antes que el otro. Por ejemplo, puede comenzar de la manera tradicional, con una estructura alámbrica y luego una maqueta. Luego puede volver a la estructura alámbrica para realizar ajustes que se dio cuenta de que necesitaba al evaluar la maqueta. O bien, puede crear una maqueta primero, luego pasar a la etapa de estructura de alambre para descubrir los detalles. También puede omitir la maqueta por completo y crear un prototipo de baja fidelidad a partir de una estructura alámbrica.

Tablas y Gráficos

Si necesita presentar información visualmente a su equipo, clientes o inversores, Moqups le permite crear todo tipo de cuadros y gráficos:

  • Cartas de área
  • Gráfica de barras
  • Gráficos de columnas
  • Gráficos de donas
  • Gráficos de líneas
  • Gráficos circulares

Moqups

Características de Moqups

Estas son las características principales de Moqups, seguidas de una breve lista de beneficios adicionales.

Biblioteca incorporada con gráficos y fuentes

  • La biblioteca integrada incluye miles de conjuntos de iconos. También hay plantillas listas para usar que se han diseñado para casos de uso populares, además de kits de plantillas personalizados para el diseño de aplicaciones móviles Android e iOS.
  • Alinear, redimensionar, rotar o diseñar objetos. También puede editar en masa, agrupar, bloquear y renombrar elementos. Se pueden hacer ajustes precisos con guías, cuadrículas y reglas personalizadas.
  • Google Fonts está integrado para que pueda elegir entre cientos de fuentes. Los controles avanzados le permiten ajustar el texto para que coincida con sus diseños. (¿Quiere aprender a elegir las mejores fuentes para logotipos? Tenemos un artículo para eso).

Organiza tus proyectos

  • Arrastre y suelte sus páginas para reordenarlas u organizarlas en carpetas.
  • El Panel de páginas facilita la búsqueda y navegación a través de sus carpetas.
  • Con las páginas maestras, puede aplicar automáticamente los cambios a todas las páginas asociadas.

Integraciones y Colaboración

  • Moqups tiene integraciones con herramientas como Dropbox, Google Drive y Slack.
  • Su equipo puede colaborar mientras trabaja de forma remota gracias a la nube (y Aquí hay más formas para que su equipo chatee, también).
  • Obtenga comentarios directamente sobre el diseño en sí y realice modificaciones sin tener que enviarse varias versiones entre sí.

Moqups

Más características

  • Editor fácil de usar de arrastrar y soltar (los principiantes pueden experimentar una curva de aprendizaje, pero no es importante)
  • Sube tus propias imágenes
  • Alineación a presión al alinear elementos
  • Escale sin perder calidad
  • Exporta tu trabajo como PDF o PNG

Usando Moqups

Voy a saltar para contarte mi experiencia con Moqups. Están sucediendo muchas cosas, no es confuso, solo hay muchas allí, así que voy a hablar sobre las características con las que jugué y que pensé que eran geniales o útiles. Al final del artículo, voy a darles mis pensamientos y sentimientos generales sobre Moqups, incluidos los inconvenientes comunes y para quién es mejor.

Comenzando con Moqups

Configurar Moqups es muy fácil, y le sugiero que comience con la cuenta gratuita (más adelante, hablaré de lo que se incluye en la sección de Precios).

Creando un diseño

Realmente me gusta el editor de arrastrar y soltar. En algunos editores, hace clic en un elemento e inmediatamente aparece en el proyecto, y puede ser una molestia deshacerse de él. Moqups me hace sentir que tengo un poco más de control sobre lo que agrego y me permite explorar las opciones sin preocuparme de que haga clic accidentalmente en algo y lo agregue sin darme cuenta. Además, al arrastrar un elemento a su proyecto, puede ver cómo se verá y luego volver a colocarlo si decide que no lo quiere.

Moqups

Trabajando con un diseño

Al pasar el mouse sobre los diferentes elementos de su diseño, aparece un contorno azul para mostrarle los diferentes elementos de la página. Para trabajar con un elemento, haga clic para seleccionarlo. Se abrirá un menú a la derecha con opciones personalizadas.

Moqups

Colores del proyecto

Me gusta la parte "Project Colors" del selector de color. Esto facilitó la coincidencia del color del corazón en la esquina superior izquierda con el color del texto.

Moqups

Guardar elementos como plantillas

Una característica útil de Moqups es que puede guardar elementos como plantillas y luego agregarlos fácilmente a otras páginas tal como están. Se conservará el diseño original: color, tamaño, etc. Esto ayuda a crear continuidad en su diseño.

Funciones de colaboración

Si eres un usuario de Google Drive, los comentarios se verán y se comportarán de una manera con la que estás familiarizado. Agregar un comentario es muy fácil, y puede mover el comentario antes o después de escribirlo para que su ubicación tenga sentido.

Moqups

Sin embargo, si tiene muchos colaboradores y comentarios, ese pequeño panel de comentarios puede salirse de control rápidamente. Es posible que desee crear una regla para su equipo que indique que los comentarios se marcan como resueltos cuando ya no son necesarios.

Precios de Moqups

Con el plan gratuito, puede hacer un proyecto que incluya hasta 200 objetos. Esto es algo a considerar al elegir entre trabajar con un documento en blanco y usar una plantilla. Opté por la plantilla Wireframe de la página de destino, que inmediatamente usó 125 de los 200 objetos. Puedo entrar y eliminar algunos objetos, por supuesto, pero para algunas personas puede tener más sentido comenzar desde cero.

Moqups

Lo único para lo que el plan gratuito es bueno es probar Moqups porque es probable que no tenga que diseñar un solo proyecto. El precio comienza en $ 13 por mes, pagado anualmente. Cada plan le permite crear proyectos ilimitados y usar objetos ilimitados, por lo que la consideración principal es cuántas personas usarán Moqups.

Moqups

A menos que sea un equipo de diseño de uno, querrá el paquete Equipo creativo. Cuantas más personas agregue, menor será el costo por usuario. Por ejemplo, si tiene 50 usuarios, el costo es de $ 3 por usuario para un total de $ 149 por mes (pagado anualmente).

Algunos pueden sentir que el precio de Moqups es una gran oferta, mientras que otros pensarán que es demasiado costoso. Depende de cuánto lo vaya a usar y del valor que obtenga de él.

PD Con el plan gratuito, no es necesaria una tarjeta de crédito: si desea probarla y luego decidir que no es para usted, no tendrá que acordarse de cancelar antes de que se le cobre.

Puntos débiles de Moqups

  • El mayor inconveniente de Moqups es que no puedes usarlo sin conexión. Por otro lado, el hecho de que esté basado en un navegador es muy conveniente para algunas personas.
  • Si tienes necesidades avanzadas de creación de prototipos o eres exigente con las funciones, probablemente esta no sea la herramienta para ti.
  • He leído críticas que dicen que Moqups puede ser lento, tardar mucho tiempo en cargarse e incluso cerrarse inesperadamente, pero no experimenté nada de eso. Sin embargo, es algo a tener en cuenta al agregar contenido enriquecido y crear páginas adicionales. No tenía fotos ni videos en mi diseño, por lo que eso pudo haber ayudado a acelerar las cosas. Si sus proyectos van a contener muchos elementos ricos, aproveche el plan gratuito para probarlo.

¿Para quién es mejor Moqups?

Moqups es ideal para los no desarrolladores para conceptualizar durante las primeras etapas de la planificación del proyecto. Por ejemplo, el propietario de un negocio o el gerente de proyecto pueden transmitir su idea al equipo de desarrollo y diseño, que luego utilizará métodos más avanzados para crear el producto real o una representación de alta fidelidad.

Moqups

Moqups es especialmente útil para maquetas y marcos de alambre, pero no es tan fuerte cuando se trata de prototipos. Moqups no tiene casi tantas funciones como otras herramientas de creación de prototipos, y los elementos de estilo tampoco se pueden personalizar de la misma manera que las herramientas de la competencia. Apenas se menciona en su sitio web.

Moqups

Pensamientos finales

En general, me gustó usar Moqups, y desearía saberlo cuando diseñé mi sitio web porque es mucho más realista que el diseño de lápiz y papel que bosquejé. Funcionó como dice, e incluso con muchas opciones, nada era demasiado difícil de entender. Si alguna vez trabajó con algún tipo de herramienta de diseño gráfico, y supongo que sí, esta no será difícil de aprender. Puede usarlo por primera vez y terminar un proyecto al final del día (o al final de la hora), y luego puede regresar y explorar todas las opciones que perdió la primera vez.

El punto de las herramientas de visualización es obtener un producto final, ¿verdad? Mira nuestro Escaparate de diseño Divi con el trabajo de nuestra increíble comunidad.

Imagen destacada a través de Visual Generation / shutterstock.com