Construye los diagramas y wireframes de tu próximo proyecto con Pencil

Uno de los aspectos más importantes a la hora de definir y maquetar un proyecto es la construcción de su documentación técnica y funcional. Para esto, debemos definir comportamientos, estándares y requerimientos que deberá cumplir nuestra web o aplicación móvil.

Para la redacción de un documento funcional, se deben agregar diagramas que expongan cuál será el flujo normal y alterno, así como los posibles módulos y opciones que un sistema brindará al usuario. Para diagramar toda esta funcionalidad existen varias herramientas en línea, otras instalables, gratuitas y de pago. Hoy recomendaré una que he utilizado recientemente para un documento funcional (entre otras cosas que mencionaré más abajo): Pencil.

¿Qué es?

Pencil es un software de prototipado de GUI (Interfaz gráfica de usuario) open source disponible para todas las plataformas (windows, linux, mac). Entre sus principales características podemos mencionar:

  • Fácil prototipado de interfaces gráficas de usuario a través de la disponibilidad de varias plantillas o formas predefinidas para construir prototipos de forma rápida.
  • Variedad en las formas disponibles, de manera predeterminada en Pencil tendremos disponible objetos de interfaces de Android, iOS y web para el armado de una interfaz con un toque familiar según la plataforma con la que se vaya a desarrollar.
  • Soporte para diagramas. Además de las interfaces de usuario, tenemos elementos de diagramado para exponer los posibles flujos del proyecto.
  • Búsqueda de objetos en línea, a través de una conexión a Internet podemos expandir las colecciones de elementos ya disponibles.
  • Posibilidad de exportar los diagramas o esquemas en distintos formatos como, por ejemplo, PNG, PDF, SVG, Documentos ODT, etc.
  • Si exportamos como documento web, podemos optar por enlazar varias páginas del diseño, haciendo un breadcrum y dando un toque interactivo y de presentación al documento.

¿Cómo usarlo?

Hasta ahora todo muy bien, sabemos de qué se trata Pencil y queremos usarlo pero, ¿cómo? La interfaz de Pencil es bastante sencilla e intuitiva, cuenta con un panel principal donde está el canvas o la página actual del documento y un panel lateral izquierdo desde el cual podemos hacer drag&drop de cada forma o Spencil que queramos llevar a la página en blanco, pero una imagen vale más que mil palabras:

pencil_description

  • Formas predefinidas: Panel extensible con las formas de distintos esquemas disponibles para construir GUIs, entre las colecciones que podemos encontrar tenemos Android 4.0, iOS, Dojo UI, ExtJS, formas para diagramas, etc.
  • Mis formas: mientras más formas usemos, podemos crear colecciones personalizadas con las más comunes y guardarlas en la sección de mis formas.
  • Nombre del documento: Pencil trabaja con documentos, cada documento puede tener varias páginas que albergarán nuestros diseños.
  • Páginas: son las páginas de diseños que van a componer los documentos que creemos en Pencil y donde arrastraremos los elementos, formas o Stencils para construir nuestros diseños.

Otras funcionalidades

Arrastrar, soltar y ordenar Stencils no es lo único que podemos hacer con Pencil, en Internet podemos conseguir varias colecciones para Pencil, entre ellas podemos ver elementos de interfaces inspirados en Bootstrap y Android con Material Design disponibles para su descarga.

Pero eso no es todo, si necesitamos aún más opciones como, por ejemplo, crear nuestra propia colección a partir de una serie de imágenes, podemos ir al menú > Tools > Developer tools > Stencil generator y arrastrar las imágenes que queremos que formen parte de nuestra nueva colección.

Una vez exportada la colección, podemos instalarla como las demás que se han descargado ingresando a menú > Tools > Manage collections y seleccionando la opción “agregar colecciones a partir de archivos” para ubicar nuestra colección a instalar en el sistema de archivos.

Para ver estas y otras funcionalidades de Pencil les dejamos un vídeo tutorial (no olviden visitar nuestro canal en YouTube).

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s