Advertisement
  1. Web Design
  2. UI Design

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

by
Read Time:15 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Andrijana Mitevska (you can also view the original English article)

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?

a designera designera designer
..tú tienes mi atención..

¿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í:

start prototypestart prototypestart prototype

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

choose iphone size documentchoose iphone size documentchoose iphone size document

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.

image placeholerimage placeholerimage placeholer

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:

align imagealign imagealign image

Luego arrastra un elemento de botón:

drag in button elementdrag in button elementdrag in button element

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

button text reads startbutton text reads startbutton text reads start

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

rename screenrename screenrename screen

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

delete second default screendelete second default screendelete second default screen

Duplica la pantalla "Inicio":

duplicate start screenduplicate start screenduplicate start screen

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:

login screenlogin screenlogin screen

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

change button labelschange button labelschange button labels

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

text tooltext tooltext tool

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

or sign in withor sign in withor sign in with

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:

give web app namegive web app namegive web app name

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

create flowchart doccreate flowchart doccreate flowchart doc

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

import prototypeimport prototypeimport prototype

Selecciona tu documento de estructura alámbrica:

select wireframe docselect wireframe docselect wireframe doc

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

select all pagesselect all pagesselect all pages

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

.all wireframe screensall wireframe screensall wireframe screens

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:

choose themechoose themechoose theme

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:

process toolsprocess toolsprocess tools

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:

nodes and arrowsnodes and arrowsnodes and arrows

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

you have a flowchartyou have a flowchartyou have a flowchart

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

new design docnew design docnew design doc

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

artboard toolartboard toolartboard tool

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:

choose colorchoose colorchoose color

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:

ellipse toolellipse toolellipse tool

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

draw circledraw circledraw circle

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:

draw small circledraw small circledraw small circle

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:

subtract selectionsubtract selectionsubtract selection

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

composite shapecomposite shapecomposite shape

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:

add coloradd coloradd color

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:

cyan to purplecyan to purplecyan to purple

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

rename logorename logorename logo

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

exportexportexport

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:

save logo file to drivesave logo file to drivesave logo file to drive

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

change colorchange colorchange color

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:

add logo fileadd logo fileadd logo file

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:

replace placeholdersreplace placeholdersreplace placeholders

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:

componentcomponentcomponent

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

select groupselect groupselect group

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

drag this buttondrag this buttondrag this button

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:

button text and appearance propertiesbutton text and appearance propertiesbutton text and appearance properties

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

start screenstart screenstart screen

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:

replace input fieldsreplace input fieldsreplace input fields

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:

social iconssocial iconssocial icons

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

google icongoogle icongoogle icon

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

login screen with iconslogin screen with iconslogin screen with icons

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

component librarycomponent librarycomponent library

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

upload multipleupload multipleupload multiple

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

inputNinputNinputN

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:

label textlabel textlabel text

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

home pagehome pagehome page

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:

drag node to pagedrag node to pagedrag node to page

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

line between two pagesline between two pagesline between two pages

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:

event tabevent tabevent tab

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:

animation settingsanimation settingsanimation settings

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

animations settings for start buttonanimations settings for start buttonanimations settings for start button

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

preview buttonpreview buttonpreview button

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".

click start buttonclick start buttonclick start button

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:

add eventadd eventadd event

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:

animation propertiesanimation propertiesanimation properties

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:

social login configurationsocial login configurationsocial login configuration

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:

connect button to homepageconnect button to homepageconnect button to homepage

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:

add widget stateadd widget stateadd widget state

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:

statesstatesstates

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

state 2state 2state 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:

and back down againand back down againand back down again

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:

exit editingexit editingexit editing

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

preview buttonpreview buttonpreview button

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

wireframewireframewireframe
flowchartflowchartflowchart
logologologo
prototypeprototypeprototype

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.