Moqups: una descripción general y revisión

¿Qué puedes hacer con Moqups?

Hay una serie de diseños que puede hacer con Moqups: diagramas, diagramas de flujo, mapas de sitios, estructuras alámbricas, maquetas, tablas y gráficos. Vamos a repasarlos.

Notarás que no hablo específicamente sobre la creación de prototipos aquí. Hay una razón para eso, y lo mencionaré más adelante.

Diagramas y diagramas de flujo

Prácticamente 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 volver a él como referencia en el camino. Con Moqups, puedes crear todo tipo de diagramas:

• diagramas conceptuales
• Árboles de decisión
• Diagramas de flujo con las interacciones del usuario
• Diagramas de flujo para flujos de trabajo de software
• Mapas mentales
• Mapas del sitio
• diagramas de casos de uso

Con las plantillas de diagramas de flujo, puede obtener una ventaja inicial 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 Mockups

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

Con maquetas , su equipo puede obtener comentarios en las primeras etapas de 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 puede alternar entre sus wireframes y maquetas como quiera, y no necesariamente tiene 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 hacer los ajustes que se dio cuenta de que necesitaba al evaluar la maqueta. O bien, puede crear una maqueta primero y luego pasar a la etapa de creación de tramas 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 tablas y gráficos:

• Gráficos de área
• Gráfica de barras
• Gráficos de columnas
• Gráficos de anillos
• gráficos de líneas
• Gráficos circulares

Características de Moqups

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

Biblioteca integrada con gráficos y fuentes

• La biblioteca integrada incluye miles de conjuntos de iconos. También hay plantillas listas para usar que han sido diseñadas para casos de uso populares, además de kits de plantillas personalizados para el diseño de aplicaciones móviles Android e iOS.
• Alinee, cambie el tamaño, rote o aplique estilo a los objetos. También puede editar, agrupar, bloquear y renombrar elementos en masa. Se pueden realizar 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

• Arrastra y suelta tus 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 Master Pages, puede aplicar cambios automáticamente 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 también chatee ).
• Obtenga comentarios directamente sobre el diseño en sí y realice ediciones sin tener que enviar varias versiones entre sí.

Más características

• Editor de arrastrar y soltar fácil de usar (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 entrar de inmediato para contarles mi experiencia con Moqups. Están sucediendo muchas cosas, no es confuso, simplemente hay muchas, así que voy a hablar sobre las funciones con las que jugué que pensé que eran geniales o útiles. Al final del artículo, les daré mis pensamientos y sentimientos generales sobre Moqups, incluidos los inconvenientes comunes y para quién es mejor.

Primeros pasos con Moqups

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

Crear un diseño

Me gusta mucho el editor de arrastrar y soltar. En algunos editores, haces clic en un elemento e inmediatamente aparece en el proyecto, y luego 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 accidentalmente haga clic en algo y lo agregue sin darme cuenta. Además, a medida que arrastra un elemento a su proyecto, puede ver cómo se verá y luego volver a colocarlo si decide que no lo quiere.

Trabajar con un diseño

A medida que pasa el cursor 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.

Colores del proyecto

Me gusta la parte «Colores del proyecto» del selector de color. Esto facilitó la combinación del color del corazón en la esquina superior izquierda con el color del texto.

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 es un usuario de Google Drive, los comentarios se verán y se comportarán de una manera que le resulte familiar. 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.

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 en la que los comentarios se marquen como resueltos cuando ya no sean necesarios.

Precios Moqups

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

Lo único para lo que es bueno el plan gratuito es para probar Moqups porque es probable que no tenga un solo proyecto para diseñar. 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.

A menos que sea un equipo de diseño de uno, querrá el paquete Creative Team. 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 vayas a usar y del valor que obtengas de él.

PD: con el plan gratuito, no se necesita tarjeta de crédito; si desea probarlo y luego decide 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 navegador es muy conveniente para algunas personas.
• Si tiene necesidades avanzadas de creación de prototipos o es exigente con las funciones, probablemente esta no sea la herramienta para usted.
• He leído reseñas que dicen que Moqups puede ser lento, tomar mucho tiempo para cargar e incluso apagarse inesperadamente, pero no experimenté nada de eso. Sin embargo, es algo a tener en cuenta a medida que agrega contenido enriquecido y crea páginas adicionales. No tenía fotos ni videos en mi diseño, por lo que eso puede haber ayudado a mantener las cosas rápidas. Si sus proyectos van a contener muchos elementos ricos, aproveche el plan gratuito para probarlo.

¿Para quién es mejor Moqups?

Moqups es excelente para que los no desarrolladores lo conceptualicen durante las primeras etapas de la planificación del proyecto. Por ejemplo, el propietario de una empresa o el director de un 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 es especialmente útil para maquetas y wireframing, pero no es tan fuerte cuando se trata de creación de prototipos. Moqups no tiene tantas funciones como otras herramientas de creación de prototipos, y los elementos de estilo tampoco se pueden personalizar de tantas maneras como las herramientas de la competencia. Apenas se menciona en su sitio web.

Pensamientos finales

En general, me gustó usar Moqups, y desearía haberlo sabido cuando diseñé mi sitio web porque es mucho más realista que el diseño de lápiz y papel que esbocé. Funcionó de la forma en que dice que lo hace, e incluso con muchas opciones, nada fue demasiado difícil de resolver. Si alguna vez ha trabajado con algún tipo de herramienta de diseño gráfico, y supongo que lo ha hecho, 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 se perdió la primera vez.

El objetivo de las herramientas de visualización es obtener un producto final, ¿no? Echa un vistazo a nuestro escaparate de diseño Divi con el trabajo de nuestra increíble comunidad.

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