Cómo hacer una aplicación de estructura metálica, diagrama de flujo, logotipo y prototipo con Mockitt

Sin duda, ya estás familiarizado con las herramientas de diseño y creación de prototipos como Figma, Adobe XD y Sketch; herramientas de wireframing como Balsamiq, Mockflow y Axure; y herramientas de diagrama de flujo como Visio, Miro y Lucidchart.

Probablemente estés utilizando una o más de estas aplicaciones en este momento en tu flujo de trabajo UI / UX. Y es posible que también estés pagando por un par de estas aplicaciones de forma individual.

Pero, ¿qué pasaría si pudieras hacer wireframes, diseñar, crear prototipos y diagramas de flujo todos juntos, bajo el mismo techo, como parte de un solo paquete?

¿Y si todo se construyera para la colaboración, de modo que pudieras trabajar de manera cooperativa en tiempo real con tus colegas y clientes en cualquier etapa de un proyecto?

¿Y si además de eso, Te le dieras acceso a una biblioteca de más de 6.000 componentes, widgets, símbolos, plantillas, iconos y diagramas de flujo listos para usar?

A primera vista, parece mucho pedir, pero de hecho es exactamente lo que Wondershare Mockitt, una nueva suite de UI y UX, tiene para ofrecer.

Esta amplia gama de funcionalidades y activos en un solo lugar, en una plataforma de diseño unificada, es lo que hace de Mockitt una de las entradas más interesantes al espacio UI / UX en bastante tiempo.

¿Qué es Mockitt?

Mockitt es una plataforma de diseño, creación de prototipos y colaboración en línea para potenciar tu viaje de diseño de UI / UX. Contiene tres características principales:

Prototipo

Crea wireframes y prototipos interactivos con animación automatizada y exportaciones a PNG / PDF / HTML5 / APK de Android.

Diseño

Edición de gráficos vectoriales con booleanos, máscaras, mesas de trabajo, restricciones de diseño y generación de código CSS / iOS / Android.

Diagrama de flujo

Diagramas de flujo y creación de diagramas, y lo más interesante es que puedes importar pantallas de prototipos y crear diagramas de flujo juntos para ayudar con la planificación.

Creemos algo con Mockitt

Hay demasiadas cosas en tres aplicaciones completas para cubrir cada característica y función, así que en su lugar, lo que íbamos a hacer es crear algo, usando las tres aplicaciones, que nos dé un vistazo a algunas de las partes más interesantes de Mockitt.

Vamos a crear una estructura alámbrica de tres pantallas de esta aplicación web de ajuste de imagen masivo en Prototype:

Luego, grafica la progresión entre pantallas en el Diagrama de flujo:

Hacer un logo en Diseño:

Coloca el logotipo en el prototipo, luego condiméntalo con colores, componentes listos para usar, transiciones y animaciones:

¡Vamos!

Cómo hacer una estructura alámbrica en Mockitt

Todo en este tutorial se puede hacer con la prueba gratuita de Mockitt, así que dirígete y obtén una cuenta.

Configurar nuevo archivo de prototipo

Una vez que hayas iniciado sesión, crea un nuevo archivo de prototipo colocando el cursor sobre el gran botón azul + así:

Elige la opción de tamaño de iPhone del cuadro de desfiguración que aparece:

Elige la pestaña vertical Plantilla a la izquierda, luego la pestaña horizontal etiquetada Básica. Debajo de esa pestaña, encontrarás prácticamente todo lo que necesitas para el wireframing. Comenzaremos arrastrando un marcador de posición de imagen que representará el logotipo.

Una vez que el marcador de posición de la imagen esté en el lienzo, establece el ancho y el alto en 150. Luego presiona los botones central vertical y horizontal para alinear la imagen:

Luego arrastra un elemento de botón:

Esta primera pantalla será la pantalla de inicio, así que haz doble clic en el texto del botón y cámbialo para que leas "Inicio":

Eso es todo lo que necesitamos para la estructura alámbrica de la primera pantalla.

Antes de continuar, elige la pestaña vertical Pantalla, haz doble clic en el nombre de la pantalla actual y cámbialo a "Inicio":

No necesitamos la segunda pantalla predeterminada, así que elimínala, como se muestra en la imagen:

Duplica la pantalla "Inicio":

Nombra la nueva pantalla duplicada "Iniciar sesión". En esta pantalla, mueva el logotipo hacia arriba para hacer algo de espacio y luego arrastra en dos campos de entrada de texto:

Ajusta los campos para que sean un poco más anchos y más altos de lo que son por defecto y edita las etiquetas en cada uno a "Nombre de usuario" y "Contraseña". También cambia la etiqueta del botón a "Iniciar sesión":

Estamos a punto de utilizar la herramienta de texto. Puedes encontrarlo en la parte superior izquierda de la interfaz:

Utiliza la herramienta de texto para agregar texto que diga "O inicie sesión con:". Luego, agrega dos imágenes más pequeñas debajo del texto (las reemplazaremos con íconos de inicio de sesión social más adelante):

Vuelve a duplicar la página "Inicio" original y asigna el nombre "Inicio" a la nueva página. Organiza la pantalla en el diseño de estructura alámbrica que se muestra a continuación haciendo lo siguiente:

• Mueve el logo hacia arriba y encogelo
• Mueve el botón hacia abajo y cambia la etiqueta para que diga "GO"
• Coloca una fila de tres imágenes: representan las imágenes que el usuario de la aplicación procesará de forma masiva.
• Crea dos controles modificadores de ajuste de imagen utilizando texto y el objeto Marcador de posición de la pestaña Conceptos básicos

Es posible que también desees darte un nombre personalizado a tu aplicación web, lo que puedes hacer en el área señalada por las flechas verdes en la imagen a continuación:

¡Ese es nuestro wireframe hecho!

Cómo crear un diagrama de flujo de progresión de la pantalla en Mockitt

Ahora, introduzcamos la estructura alámbrica en el diagrama de flujo para que podamos mapear cómo funcionará la progresión entre pantallas. Si nuestra aplicación imaginaria se estaba haciendo para un cliente imaginario, podríamos usar este diagrama de flujo para consultarlo en esta etapa.

Crear nuevo documento de diagrama de flujo

De vuelta en el panel de Mockitt, crea un nuevo documento de diagrama de flujo:

Una vez en el documento, haz clic en el botón Importar prototipo en la parte inferior de la barra de herramientas izquierda:

Selecciona tu documento de estructura alámbrica:

Marca la casilla Seleccionar todas las páginas, luego haz clic en Importar en la esquina inferior derecha:

A continuación, verás todas tus pantallas de estructura alámbrica, ordenadas para tú:

Para asegurarte de que los elementos del diagrama de flujo se destaquen de la estructura alámbrica monocromática, haz clic en el botón de tema cerca de la parte superior derecha de la interfaz y elige el tema que se muestra a continuación:

Ahora, usa la herramienta Proceso de forma rectangular para dibujar cuadros alrededor de las partes de la pantalla de "Inicio" en las que podrás hacer clic para avanzar, como el logotipo y el botón:

Pasa el cursor sobre un cuadro y aparecerán nodos en los cuatro lados. Arrastra desde uno de esos nodos a la pantalla de la derecha para hacer una flecha de conexión:

Repite el proceso hasta que termine con un diagrama de flujo de progresión de pantalla completo, así:

¡Y ese es el diagrama de flujo hecho!

Cómo hacer un diseño de interfaz de usuario con Mockitt

Podemos suponer que hemos consultado con el cliente imaginario sobre el diagrama de flujo y está contento, así que pasemos a agregar la marca. Con Mockitt, podemos crear un diseño de interfaz de usuario profesional de forma colaborativa. Comenzaremos por hacer un logotipo.

Crear nuevo documento de diseño

De vuelta en el panel de Mockitt una vez más, crea un nuevo documento de diseño:

En el nuevo documento, selecciona la herramienta Mesa de trabajo cerca de la parte superior izquierda de la interfaz:

Dibuja una mesa de trabajo, configúrala en 600 de ancho por 600 de alto y dale un color de relleno violeta oscuro y desaturado:

Ahora haz clic en la flecha pequeña a la derecha de la herramienta Rectángulo y, en el menú desplegable, selecciona la herramienta Elipse:

Dentro de la mesa de trabajo, dibuje un círculo de 250 de ancho por 250 de alto:

Luego crea un segundo círculo, esta vez de 125 de ancho por 125 de alto, y alinéalo con la parte superior derecha del primer círculo. El ajuste del diseño te facilitará lograr esta alineación simplemente arrastrando el círculo pequeño a la ubicación correcta:

Selecciona ambos círculos arrastrando el mouse alrededor de ellos, luego, en el centro de la barra de herramientas superior, haz clic en el botón del operador booleano Restar selección:

Esto cortará una pieza del círculo grande en forma de círculo pequeño, dándote esta forma compuesta:

Agregar color

Ahora agreguemos un poco de color.

Haz clic en la muestra gris del relleno actual para abrir la caja de herramientas de color. Luego, selecciona el segundo círculo pequeño en la parte superior de la caja de herramientas de color para convertir el degradado completo en lineal.  Crea un degradado de púrpura a rosa haciendo clic en las paradas en cada extremo y estableciendo un color de tu elección. Luego, agarra las manijas en cada extremo del degradado directamente en la forma para ajustar su ángulo:

El diseño te permite agregar múltiples rellenos a una forma, y ​​los degradados en capas pueden crear colores realmente ricos. Entonces, haz clic en el botón más arriba del relleno actual para agregar otro, edita el relleno y esta vez elige el tercer círculo pequeño en la caja de herramientas de color para establecer un degradado radial.  Esta vez configúralo para que pase de cian a púrpura transparente, y modifica su ángulo y posición de esta manera:

Exportar logotipo

Estamos listos para exportar el logotipo, así que primero cambiemos el nombre de nuestra forma compuesta, ya que esto determinará el nombre con el que exportamos nuestro archivo.  A la izquierda de la interfaz, verás el nombre actual de la forma, "Restar selección". Haz clic con el botón derecho en la forma aquí y elige Cambiar nombre, luego cambia el nombre a "logo":

En la barra lateral derecha, busca el cuadro Exportar, luego, con la forma del logotipo seleccionada, haz clic en el botón +:

Esto crea una exportación para la imagen de nuestro logotipo y una vista previa de cómo se verá. Continúa y haz clic en el botón Exportar logotipo y guarda el archivo del logotipo en tu unidad:

¡Nuestro logo ya está listo para usar!

Crea un prototipo: agrega el logotipo, los colores y los componentes

Ahora agreguemos algo de vida a la estructura alámbrica y conviértala en un prototipo interactivo. Abra su documento de estructura alámbrica en Prototype y editámoslo un poco más.

Agregar vida a las pantallas

Primero, selecciona cada pantalla y en la pestaña Configuración en la barra lateral derecha, cambia el Color de fondo de la pantalla al mismo púrpura oscuro que usó al crear el logotipo:

Ahora reemplacemos el marcador de posición del logotipo con el logotipo real. Usa la herramienta Imagen cerca de la parte superior izquierda de la interfaz para buscar y agregar el archivo de logotipo que acaba de exportar:

Configúralo en el mismo tamaño y ubicación que los marcadores de posición del logotipo en cada una de las tres pantallas:

A continuación, reemplacemos los botones con algo de la biblioteca de componentes integrados. En la pestaña Plantilla vertical en la barra lateral izquierda, va a Explorar, luego Componente:

Selecciona el grupo de componentes con la etiqueta "Elemento - Botón ...":

Desde dentro de ese grupo, arrastra el botón que tiene este aspecto:

Cambia el texto del botón para que diga "Inicio". El botón es un poco demasiado pequeño de forma predeterminada y debe coincidir con los colores de nuestra marca, por lo que también cambia sus propiedades de Texto y Apariencia a lo siguiente:

Después de colocar el botón correctamente y eliminar u ocultar el botón de marcador de posición, la pantalla de "Inicio" se verá así:

Luego, también puedes copiar y pegar ese mismo botón en las otras pantallas, cambiar sus etiquetas y reposicionarlas para reemplazar los botones "Iniciar sesión" y "Ir".

Cambiando a la pantalla "Iniciar sesión", ahora reemplacemos los campos de entrada. Desde el grupo de elementos "iOS 14", arrastra el componente "Nombre oscuro de entrada" dos veces y elimina / oculta las bifurcaciones de entrada de estructura alámbrica.  Edita las etiquetas de texto blanco del nuevo componente para leer "Nombre de usuario" y "Contraseña", y elimina / oculta el texto gris oscuro que incluyen:

Y ahora la última tarea para la pantalla "Iniciar sesión" es agregar los iconos de inicio de sesión social.

Salga del área de Componentes en la barra lateral izquierda y, en su lugar, selecciona el área de Iconos:

Una vez allí, busca "google", luego arrastra y suelta el icono de tu elección:

Una vez agregado, cambia el color del ícono a rosa fuerte y establece su tamaño y ubicación para que coincida con la imagen del marcador de posición. Repite el proceso para el segundo icono, buscando en su lugar "manzana".  Cambia el texto de arriba a blanco, oculta los marcadores de posición de la estructura alámbrica y su pantalla de "Inicio de sesión" se verá así:

Ahora terminemos con nuestra pantalla de "Inicio". Vuelve a la biblioteca de componentes y busca el grupo "Elemento - Cargar ...":

Arrastra el grupo "Cargar varios i ..." y utilícalo para reemplazar las filas de tres imágenes del wireframe:

En la biblioteca de componentes, busca el grupo "Elemento - EntradaN ...":

Desde dentro de ese grupo, arrastra dos de los componentes "Inputnumber-def ...", reemplazando los controles modificadores de ajuste de imagen del wireframe. Luego, establece cada uno de sus números en algo diferente y cambia el texto de la etiqueta para cada modificador a blanco:

La página "Inicio" completada ahora debería verse así:

Nuestro diseño y marca están en su lugar, ahora hagamos que esto actúe como un prototipo real agregando transiciones de pantalla y animaciones.

Cómo agregar animaciones y transiciones de pantalla

Para hacer que un elemento en pantalla active una transición a otra pantalla, selecciónalo y verás aparecer un nodo con un símbolo de rayo gris. Simplemente haz clic y arrastra desde ese nodo hasta el nombre de la página a la que deseas cambiar.

En este caso, comenzaremos en la pantalla "Inicio", seleccionando el botón "Inicio" y arrastrando desde su nodo a la página de inicio de sesión:

Aparecerá una línea entre los dos para mostrar que se ha realizado una conexión:

Para definir exactamente qué sucede cuando se hace clic en este botón, va a la pestaña Evento en la barra lateral derecha y configúralo como se muestra en la imagen:

También agreguemos un poco de estilo a esta página agregando algunas animaciones de entrada a los elementos. Selecciona el logotipo y, en la parte inferior de la barra lateral derecha, ingresa estas configuraciones de animación:

Luego, selecciona el botón "Inicio" e ingresa estas configuraciones de animación:

Ahora veamos cómo se ve todo haciendo clic en el botón "Vista previa" cerca de la parte superior derecha de la interfaz:

Se abrirá una vista previa del teléfono y verás que aparece tu logotipo, luego tu botón se desvanece poco después. Haz clic en el botón "Inicio" y la pantalla cambiará a la pantalla "Iniciar sesión".

Hagamos la transición a la pantalla "Iniciar sesión" un poco más interesante.

Sal de la vista previa, luego cambia a la pantalla "Iniciar sesión" para editar. Haz clic en el pequeño menú flotante cerca de la barra lateral derecha que parece un objetivo y verás aparecer el cuadro Estado de la pantalla.  En la parte superior derecha de ese cuadro, haz clic en el botón Copiar. Con "Estado 1" seleccionado, elimina todo excepto el logotipo, luego centra el logotipo vertical y horizontalmente. En la pestaña Evento, agrega un evento y configúralo como se muestra a continuación:

Cuando se obtiene una vista previa, la transición Magic Move animará automáticamente la posición del logotipo hasta la parte superior de la pantalla, al tiempo que revela el resto de los elementos que forman la pantalla de "Inicio de sesión".

Y debido a que el logotipo en "Estado 1" está en la misma posición que el logotipo en la pantalla "Inicio", cuando la página cambia de "Inicio" a "Iniciar sesión", el movimiento del logotipo se verá como una animación continua.

¡Agrega más animación!

Hablando de animación, completemos la pantalla de "Inicio de sesión" agregando un desvanecimiento escalonado en las animaciones al resto de los elementos.

Selecciona los primeros campos de entrada y establece sus propiedades de animación de la siguiente manera:

Selecciona cada elemento posterior y dale la misma animación, pero agrega 100ms a su tiempo de Delay, hasta llegar a los elementos de inicio de sesión social que se pueden configurar de la siguiente manera:

El último paso para la pantalla "Iniciar sesión" es conectar el botón a la página "Inicio" y configurar el evento de transición de página de la siguiente manera:

Hacer que otros botones sean funcionales

Solo vamos a hacer una cosa más interesante antes de terminar este prototipo, y es hacer que uno de nuestros controles de imagen funcione para incrementar y disminuir el número que muestra.

Edita la página "Inicio", selecciona uno de los controles, luego, en la pestaña Estilo de la barra lateral derecha, haz clic en Agregar estado de widget:

Verás que la pantalla se atenúa; esto se debe a que ahora se encuentra en el modo de edición de widgets, que te permite crear y cambiar entre múltiples estados dentro de los elementos en pantalla.

Haz clic en el pequeño icono de destino como lo hizo antes, solo que esta vez verás aparecer un cuadro de Estado de widget en lugar de un cuadro de Estado de pantalla. Haz clic en el botón Copiar para duplicar el estado actual, luego con "Estado 2" seleccionado, cambia el número en el control para que se incremente en 1:

Ahora podemos configurar las transiciones entre los estados de los widgets de la misma manera que creamos las transiciones de pantalla. Vuelve al "Estado 1" del widget, selecciona el rectángulo en el extremo derecho del control y arrastra desde su nodo al "Estado 2":

Ahora, cuando se hace clic en el extremo derecho del control, cambiará al "Estado 2", que configura para mostrar un número más alto que el "Estado 1", por lo que parece que el control realmente está incrementando el número que muestra.

Nota: También puedes conectar el símbolo "+" para asegurarte de que sea fácil hacer clic en el área de control.

Luego cambia al "Estado 2" y repite el proceso, pero esta vez haz que el "-" final del control active un cambio al "Estado 1", por lo que parece que el número está disminuyendo:

Para un prototipo real, puedes configurar tantos estados en el widget como desees, simulando un control de incremento y decremento completamente funcional.

Cuando hayas terminado, haz clic en el botón Salir de edición en la parte superior de la interfaz para volver al modo de edición de pantalla normal:

Haz clic en el botón Vista previa cuando haz clic en tu control, verás el número subiendo y bajando:

¡Y hemos terminado!

Solo como recordatorio, acabamos de crear una estructura alámbrica, un diagrama de flujo, un logotipo y un prototipo animado interactivo, todo en una sola plataforma.

Eso es todo esto:

Wondershare Mockitt es todavía bastante nuevo; 2 de las 3 aplicaciones están actualmente en versión beta, y como era de esperar en cualquier versión beta, encontré algunos errores.

Sin embargo, la cantidad de funcionalidad contenida en esta colección de software es realmente impresionante, sin mencionar todos los activos incluidos.

Y no olvidemos que todo lo anterior es "multijugador", con la colaboración en tiempo real compatible y el intercambio de documentos con solo enviar un enlace.

Esto es lo que hay en la mezcla cuando la plataforma recién comienza, por lo que es muy emocionante imaginar lo que puede deparar el futuro con la adición de más funciones y la posibilidad de una mayor integración entre sus aplicaciones.

Mockitt ya es impresionante y se perfila para tener un futuro muy prometedor.