Moqups: descripció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. La visualización de sus conceptos le permite simular sus diseños, probar diferentes experiencias de usuario y probar varios viajes y flujos de usuarios antes de hacer algo en vivo.

En el pasado, los diseñadores tení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; elaborar 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 asume algo (que lo hará), 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 dentro de un solo entorno. Puede navegar entre proyectos y llevar su diseño de baja fidelidad (etapas iniciales y bocetos preliminares) a alta fidelidad (más completo y detallado). En esta publicación, lo pruebo y les muestro cómo es ese proceso en cada paso del camino, incluidos mis pensamientos finales al final de la publicación.

¿Qué puedes hacer con Moqups?

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

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

Diagramas y diagramas de flujo

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

• Diagramas de conceptos
• Árboles de decisión
• Diagramas de flujo con 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 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 información, la densidad de la página y el flujo de usuarios al inicio de un proyecto. Las formas simples y el texto del marcador de posición representan los elementos de diseño más avanzados que agregará en el futuro. Todavía no tiene que preocuparse por la marca o el diseño; en su lugar, solo tiene que preocuparse por la estructura y los requisitos clave del sitio web.

Con las maquetas , su equipo puede obtener comentarios en las primeras etapas del diseño. Se basará en el boceto del wireframe 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.

Cree en el orden que más le convenga

La belleza de Moqups es que puede ir y venir 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. A continuación, puede volver a la estructura alámbrica para realizar los 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 averiguar los detalles. También puede omitir la maqueta por completo y crear un prototipo de baja fidelidad a partir de una estructura alámbrica.

Cuadros 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:

• 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 incorporada con gráficos y fuentes

• La biblioteca incorporada 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 de Android e iOS.
• Alinear, cambiar el tamaño, rotar o aplicar estilo a los objetos. También puede editar, agrupar, bloquear y renombrar elementos de forma masiva. 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 modificar el texto para que coincida con sus diseños. (¿Quiere aprender cómo 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 la navegación por sus carpetas.
• Con las páginas maestras, 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 sobre el diseño en sí y realice modificaciones sin tener que enviarse 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 intervenir para contarles mi experiencia con Moqups. Están sucediendo muchas cosas, no es confuso, simplemente hay mucho allí, así que voy a hablar sobre las funciones con las que jugué y que pensé que eran interesantes 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.

Introducción a Moqups

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

Creando un Diseño

Me gusta mucho el editor de arrastrar y soltar. En algunos editores, hace clic en un elemento y aparece inmediatamente 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

Al pasar 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ó hacer coincidir el 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 con la que esté 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.

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 marque los comentarios como resueltos cuando ya no sean necesarios.

Precios de 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 o utilizar una plantilla. Opté por la plantilla de página de destino Wireframe, que utilizó inmediatamente 125 de los 200 objetos. Puedo entrar y eliminar algunos objetos, por supuesto, pero para algunas personas puede tener más sentido empezar de cero.

Para lo único que sirve el plan gratuito es para 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.

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 un buen negocio, 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 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 puede usarlo sin conexión. Por otro lado, el hecho de que esté basado en un 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 los Moqups pueden demorarse, tardar mucho en cargarse 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 puede haber ayudado a mantener las cosas rápidas. Si sus proyectos van a contener muchos elementos enriquecidos, aproveche el plan gratuito para probarlo.

¿Para quién es mejor Moqups?

Moqups es ideal para que los no desarrolladores conceptualicen durante las primeras etapas de la planificación del proyecto. Por ejemplo, el propietario de un negocio o el gerente de proyecto puede 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 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 formas como las herramientas de la competencia. Apenas se menciona en su sitio web.

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 esbocé. Funcionó como dice que lo hace, e incluso con muchas opciones, nada fue demasiado complicado de averiguar. Si alguna vez ha trabajado con cualquier 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 volver atrás y explorar todas las opciones que se perdió la primera vez.

El objetivo de las herramientas de visualización es obtener un producto final, ¿verdad? 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