Breve introducción a MockFlow, una herramienta online para diseñar wireframes

Joan Teran, Rubén Vizcaíno

Joan Teran, Rubén Vizcaíno. Breve introducción a MockFlow, una herramienta online para construir wireframes [en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital. Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra. http://www.masterenbuscadores.com

Sumario

1. Introducción a MockFlow

1.1. Qué es un wireframe?

1.2. Algunas herramientas para construir wireframes

2. Características generales de MockFlow

3. Crear una cuenta de usuario en MockFlow

4. Guía de uso rápido

4.1. Trabajar con el editor

4.1.1. Menú superior izquierdo

4.1.2. Ventana central

4.1.3. Menú lateral izquierdo

4.1.3.1. Elementos

4.1.3.2. Páginas

4.1.3.3. Imágenes

4.1.3.4. Flujo

4.1.3.5. Tienda

4.2. Publicar y compartir

4.2.1. Exportar

4.2.2. Publicar un link

4.2.3. Compartir

5. Bibliografía

1. Introducción a MockFlow

El presente artículo es una breve introducción a Mockflow, un programa online para la elaboración de wireframes.

1.1. Qué son los wireframes?

Según los define Mario Pérez-Montoro: «Los wireframes (o maquetas) son prototipos arquitectónicos de cada una de los tipos de página que conforman un sitio web. Son una especie de esquema donde queda representado el contenido y la arquitectura de la información (sin elementos gráficos) de cada uno de esos tipos de página. En este sentido, se muestra cuál es el aspecto de una página desde la perspectiva de su arquitectura haciendo hincapié en cómo se agrupan y ordenan los componentes de la página. En cierta manera, pueden ser considerados como la intersección entre la arquitectura de la información de una página con su visualización y diseño.»

He aquí tres tipos de wireframes según el nivel de precisión de los mismos:

• de baja fidelidad, eso es, esbozos que representan sólo los aspectos arquitectónicos básicos de la página sin incluir soluciones gráficas ni contenido real

• de media fidelidad, eso es, prototipos que incluyen los aspectos arquitectónicos básicos y que además recogen algunas de las soluciones gráficas y de contenido de la página:

• de alta fidelidad, que además de representar los aspectos arquitectónicos fundamentales, también incluyen todas las soluciones gráficas y todos los contenidos que debe tener la página

1.2. Algunas herramientas para construir wireframes

Existe una amplia variedad de programas pensados específicamente para el diseño de wireframes, aunque algunos de estos programas permiten además tareas de diseño para un amplio abanico de ámbitos. MockFlow aparte, destacamos tres programas:

• Axure: una aplicación de escritorio que permite llevar a cabo wireframes y blueprints pero también diagramas de flujo. Quizás su mayor debilidad estriba en la imposibilidad de diseñar prototipos para aplicaciones del entorno iPhone.
• Visio: también es un programa que debe ser instalado localmente. Diseñado por Microsoft, destaca por su versatilidad, ya que no solamente permite trabajar sobre wireframes, sino también sobre otros muchos diseños vinculados a la ingeniería o la arquitectura.
• iPlotz: se trata de un programa que no necesita instalación y que funciona online. Contiene muchas posibilidades y funciones, lo que lo convierte en una alternativa muy fuerte respecto a MockFlow aunque de uso muy complejo.

2. Características generales de MockFlow

• Funciona online, pero también está preparado para soportar el trabajo offline: guarda los documentos de trabajo tanto en la nube como localmente, lo que permite que si hay problemas en la conexión el trabajo pueda guardarse igualmente
• Escritorio descargable: permite trabajar tanto des del navegador como desde un escritorio que se puede descargar y que permite igualmente el trabajo online
• Prototipos navegables: es posible conectar los prototipos de páginas de manera que estas sean navegables
• Componentes descargables: MockFlow tiene una librería (Mockup Store) de donde el usuario puede descargar elementos sobre los que puede trabajar para construir sus wireframes
• Trabajo colaborativo: hay varias opciones para el trabajo colaborativo, desde el diseño conjunto, hasta la comunicación a través de mensajes o chats.
• Exportar y publicar: la conversión de los diseños de MockFlow a diferentes tipos de archivo es sencilla, incluso descargar el código HTML, aunque este es un servicio de pago
• Compatibilidad con móviles: permite la creación de wireframes para teléfonos móviles de última generación

3. Crear una cuenta de usuario en MockFlow

Existen dos posibilidades para abrir una cuenta de usuario en MockFlow: a través de una cuenta en Google, o creando una nueva mediante otra dirección cualquiera de correo electrónico.

El proceso es el siguiente. En la página de http://mockflow.com/ pulsar sobre el botón Get started for free:

Seguidamente, y si no se tiene cuenta de Google, o no se la quiere relacionar con MockFlow, hay que rellenar directamente el formulario que aparece (nombre, dirección de correo electrónico y contraseña).

En el caso de tener una cuenta Google que se quiere relacionar con MockFlow, hay que pulsar sobre el botón “Gmail”:

Después de llevar a cabo los pasos siguientes, Google pedirá permiso para relacionar ambas cuentas. Entonces hay que pulsar el botón “Aceptar”.

4. Guía de uso rápido

La página principal es la primera página que aparece después de llevar a cabo la autenticación de usuario.

Para empezar a trabajar con MockFlow hay que pulsar sobre el botón + que encontramos en la parte izquierda de la pantalla. Aparecen 26 opciones para empezar un proyecto:

Cuando se escoge la opción deseada se abre otra ventana en la que se debe introducir el nombre del nuevo proyecto.

Ahora solamente queda escoger la plantilla deseada y pulsar el botón Create.

También tenemos la opción de importar mockups prediseñados de entre las decenas disponibles en la MockStore, a la que se accede directamente desde la barra de menú lateral:

4.1. Trabajar con el editor

En este apartado definiremos los diferentes menús que tiene el editor de MockFlow y cómo trabajar con ellos.

4.1.1. Menú superior izquierdo

• Project: donde se encuentran funciones relativas a la gestión del proyecto. Por ejemplo: guardar el trabajo en curso, exportarlo a otros tipos de archivo o llevar a cabo el control de cambios
• Edit: menú en que encontramos las funciones de edición de objetos o textos (copiar, pegar, deshacer, etc.)
• Comments (símbolo): permite anotar comentarios sobre el proyecto en curso por parte de los distintos miembros del equipo
• Export wireframe (símbolo): permite exportar el trabajo en distintos formatos (imagen, PDF, Powerpoint, Word y HTML).
• Review: permite revisar los comentarios realizados en el proyecto

4.1.2. Ventana central

Es la principal ventana de trabajo de MockFlow: en ella encontramos el wireframe, sobre el que se puede trabajar:

4.1.3. Menú lateral izquierdo

En la parte lateral izquierda de la página se pueden desplegar cinco menús diferentes:

• menú de elementos
• menú de páginas
• menú de imágenes
• menú de flujo
• menú de tienda

4.1.3.1. Elementos

En este menú se encuentran los objetos (elementos) que se usarán para poder construir el wireframe, así como diferentes opciones de visualización, información sobre las características de los objetos seleccionados y otras opciones de trabajo.

Dentro de este menú “Elements” nos encontramos las siguientes opciones:

• Una ventana de búsqueda para localizar elementos
• Un menú desplegable para acceder a distintos paquetes de elementos. Por defecto aparece el paquete llamado “Web”, pero podemos abrir otros, como por ejemplo “hand drawn UI”, “maps”, “stamps”, “Apple Watch”, etc. Cada uno de ellos nos da acceso a un conjunto distinto de elementos para nuestro diseño.
• Finalmente, la mayor parte de la ventana está destinada a mostrar los elementos disponibles en el paquete seleccionado.

El funcionamiento es muy sencillo: se trata de seleccionar del menú desplegable la tipología de objeto que se quiere utilizar; buscar en el menú de objetos el deseado; cogerlo con el ratón y arrastrarlo al punto de la pantalla deseado (drag and drop).

Cuando movemos un objeto, se activa una guía que permite visualizar unas líneas rojas que dan una referencia de la posición exacta de los objetos en relación al objeto que estamos moviendo:

Mientras se mueve el objeto “Logo” aparecen unas rayas verticales rojas que indican dónde tendría que situarse el objeto que estamos moviendo para alinearse con otros objetos

Finalmente, cuando un objeto está seleccionado aparecen sus características en el menú lateral izquierdo, tal como se ve en la imagen anterior. En ese menú tenemos disponibles las siguientes opciones:

• Transform: permite variar con precisión la posición del elemento, así como rotarlo.
• Link: posibilita añadir un enlace interno o externo a cualquier objeto del diseño.
• Image: para editar los atributos de la imagen.
• Border: permite variar las características del borde de los objetos.
• Font: para cambiar la fuente de los textos.
• Shadow: posibilita añadir un sombreado al elemento seleccionado.

4.1.3.2. Páginas

En lo que hace referencia al menú de páginas, en la parte superior disponemos de una serie de iconos que nos dan acceso a las siguientes opciones:

• Crear páginas nuevas
• Añadir carpetas en las que agrupar páginas
• Duplicar páginas, es decir crear nuevas páginas sobre la base de otras. Para ello hay que seleccionar la página y luego pulsar sobre el botón de duplicar
• Editar el nombre de la página
• Borrar páginas, siguiendo el mismo proceso que para duplicarlas: seleccionar la página y pulsar sobre el botón correspondiente

En la parte inferior del menú páginas, disponemos de las siguientes opciones:

• El icono en forma de ojo permite alternar entre distintas opciones de visibilidad de la página.
• El icono de rejilla (grid) habilita una referencia visual en forma de cuadrícula para disponer de una referencia en la colocación de los elementos en nuestro diseño.
• Un acceso rápido al historial de revisiones, lo que permite retroceder a pasos anteriores del proceso de diseño.
• Una opción interesante que permite el menú de páginas es usar una página como patrón: se trata de la opción llamada Master, para lo cual hay que seleccionar por un lado la página sobre la cual queremos trabajar, y por otro la página que se usará como patrón. Esta última se visualiza difuminada aunque, a medida que se van añadiendo objetos, va quedando escondida.
• En la línea inferior disponemos de un menú de acceso rápido que también está presente en otras secciones además de “Pages”. Este menú nos permite acceder inmediatamente a las siguientes opciones: dibujar un rectángulo, círculo o línea, añadir texto, dibujar un Hotspot, añadir un icono o dibujar un botón.

Otra opción es modificar el orden de las páginas, simplemente arrastrando las páginas hacia la posición deseada.

4.1.3.3. Imágenes

Esta opción simplemente sirve para insertar iconos o imágenes en nuestro diseño. MockFlow dispone de un amplio surtido de iconos prediseñados, pero también podemos subir cualquier otra imagen de la que dispongamos.

4.1.3.4. Flujo

Haciendo click sobre la opción Flow del menú lateral, accedemos a una clasificación visual de nuestros diseños según el estado en que se encuentran (“Not started”, “In progress”, “Completed”, “Approved design”, etc.).

El menú superior nos permite alternar esta visualización con otras en forma de mapa o de rejilla.

4.1.3.5. Tienda o MockStore

Se trata de la biblioteca de recursos que ofrece MockFlow para abastecer a sus usuarios con trabajos públicos (en el caso de la versión gratuita) de otros usuarios.

Una vez abierta la tienda, los objetos aparecen ordenados por categorías, ya que cada uno de ellos viene definido por una o varias etiquetas (Website, Webapp, iPhone App, Android App, etc.).

Otros criterios de ordenación de los componentes ofrecidos en MockStore aparecen debajo del menú de categorías, en la opción “Explore”: los más nuevos, los más populares (más descargados por los usuarios), un criterio de azar y, por último, los creados por el usuario.

Hay que tener en cuenta que podemos marcar o desmarcar las casillas “UI Pack” y/o “Template” para filtrar los resultados.

Un último botón en este menú nos permite enviar nuestro propio “Template” para que forme parte de la biblioteca de recursos.

4.2. Publicar y compartir

Esencialmente, MockFlow ofrece dos formas de publicar los proyectos. Por un lado, publicando un enlace accesible a cualquiera que permita visualizar el proyecto; por el otro exportando el documento a una destacable variedad de formatos para que puedan ser usados en diferentes contextos.

4.2.1. Exportar

Exportar los proyectos a otros formatos de archivo es muy sencillo:

Project > Export wireframe

Estos son los formatos a los que es posible exportar los wireframes construidos con MockFlow: PDF, imagen (PNG), los diferentes formatos de Microsoft Office (word y Powerpoint) y HTML.

4.2.2. Publicar un link

Se accede a esta opción desde el menú Project > Sharing:

4.2.3. Compartir

Finalmente, MockFlow ofrece una opción de trabajo colaborativo, con la posibilidad de editar los diferentes niveles de colaboración de cada uno de los usuarios con los que se trabaja en cada proyecto.

Se accede a esta opción a través de la página principal (por tanto, ya fuera de nuestro wireframe), colocando el puntero del ratón sobre el proyecto que queramos compartir.

Pulsando sobre la opción Share accedemos al menú correspondiente:

A través del botón Add Member accedemos a una ventanilla en la que se nos pide insertar el e-mail de la persona colaboradora. Seguidamente aparece una ventanilla en que se define el nivel de colaboración:

• Reviewer corresponderá a aquellos colaboradores que sólo puedan visualizar o exportar el proyecto.
• Co-Editor será para aquellos que puedan tener las tareas de revisores, pero que además puedan editar en tiempo real.
• Admin será finalmente para aquellos que puedan asumir cualquier función excepto borrar el proyecto.

Estos niveles de colaboración son redefinibles en cualquier momento: sólo hay que hacer un doble click sobre el colaborador correspondiente y se accede al menú de niveles de colaboración.

Para eliminar colaboradores sólo hay que clicar sobre la cruz que aparece en la parte derecha de cada uno de los colaboradores. También es posible redefenir el papel de los colaboradores, e incluso reenviar el mail de invitación para colaborar.

5. Bibliografía

Artículos

Mario Pérez-Montoro. Artículo 1.10 El prototipado en la arquitectura de la información [en linea]. En Cristòfol Rovira; Mari Carmen Marcos; Lluís Codina (dir.). Máster en Documentación Digital Barcelona: Área de Ciencias de la Documentación. Departamento de Comunicación. Universidad Pompeu Fabra, 2012. http://www.documentaciondigital.org

Sedes web

MockFlow. Super-easy Wireframing

http://www.mockflow.com/

MockFlow. Support Center

http://support.mockflow.com/

© Autor/es del documento y Máster en Documentación Digital (IDEC-UPF)

Este obra está bajo una licencia Creative Commons

Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported

No está permitido publicar total o parcialmente este documento sin el

consentimiento previo y por escrito de los autores, excepto que sean citas

de pequeños fragmentos entrecomillados indicando la fuente y la autoría