Cuando se trata de producir modelos de interfaz gráfica de usuario, diagramas de flujo y otros diagramas de servicio, Visio de Microsoft suele ser la herramienta más utilizada en la plataforma Windows. El Mac también cuenta con aplicaciones como las excelentes Axure y OmniGraffle. En cuanto a Linux, Evolus Pencil es una de las mejores para desarrollar imágenes de calidad de forma rápida y ágil.

Tenlo en cuenta: Pencil es compatible con Windows, OSX y Linux. En este breve artículo, nos centraremos en la versión Linux de Pencil.

Configuración

Pencil ya no está disponible en los repositorios de Ubuntu (desde Raring, un mínimo de), pero es una configuración fácil a través del plan DEB desde el sitio web del trabajo. Configurar haciendo doble clic en el paquete descargado, o con el siguiente comando de terminal:

sudodpkg-i evoluspencil_2.0.3 _ all.deb

La única dependencia es Firefox, así que si estás en un sistema que no lo incluye por defecto, tendrás que instalarlo (o utilizar un supervisor de paquetes de la GUI, que se encargará de la dependencia por ti).

Utiliza

Mientras que con un programa como GIMP o Krita, normalmente necesitas crear tus propias piezas gráficas. Lápiz le proporciona una gran variedad de formas que puede arrastrar rápidamente en una página y personalizar a su gusto. El panel de la izquierda enumera las formas ofrecidas, en grupos tales como “Formas típicas” (cuadrados y círculos estándar), “Escritorio – Widgets GTK” (si desea hacer un prototipo de una aplicación de Unity o GNOME), y “Sketchy” (entre mis preferidos para maquetas web, que se parece a un boceto a lápiz). Los elementos de estos grupos se pueden mezclar y combinar.

Para añadir uno de ellos a la ilustración, basta con hacer clic y arrastrarlo a una página (se pueden añadir nuevas páginas mediante el botón “Nueva página” en la parte superior derecha).

Una vez en la página, se puede cambiar el tamaño arrastrando una de las esquinas o los bordes de la forma, o mediante los campos de la barra de herramientas “Colocar y tamaño” (útil si se requiere que el dibujo, como una maqueta web, se ajuste a una determinada resolución).

Al hacer doble clic en la mayoría de las formas, se puede incluir texto, que se puede adaptar con la posición, la fuente, la negrita/cursiva y el tamaño del punto utilizando los botones de la barra de herramientas “Formato de texto”.

Conceptos básicos de la maqueta

Dibujo wireframes y otros diagramas todo el tiempo, y el proceso fundamental que utilizo es el siguiente (utilizando el ejemplo de una maqueta de página de inicio para un sitio web).

Fondo

Para un sitio web, esto comienza con la ventana del navegador – El producto “Window Frame” de la colección Sketchy se utiliza aquí por razones de simplicidad. Para posicionarlo en 0px x 0px (es decir, en la parte superior izquierda de la pantalla), se utilizan los controles “Place & Size”. Los bordes inferior e izquierdo se arrastran para que llene toda la pantalla.

Se añade una forma de “Caja” en toda la parte superior para mostrar la barra de URL … a veces poner las cosas exactamente con el ratón es difícil, pero los secretos de la flecha también se puede utilizar para mover una forma una vez que se selecciona:

Aspectos de la página

Un enorme deslizador puede ser aportado a la página en la parte superior. La forma “Imagen” se utiliza para mostrar la diapositiva, y dos “Triángulos cuestionables” para servir como controles de avance y retroceso. Si se hace clic dos veces en las cosas, los bordes/esquinas se tratan de color rosa, lo que permite girarlos:

Por último, se añaden tres áreas en la parte inferior para albergar noticias, un vídeo y un tipo de contacto (la forma de “Caja” se utiliza para delimitar cada región). Las noticias serán sólo un encabezado y algo de texto (utilizando la forma cuestionable “Etiqueta” con algunos tamaños de texto variables), la región de vídeo se hace dejando caer un “Triángulo Esbozado” dentro de un “Círculo Cuestionable” dentro de una “Caja” (es decir, un botón “Reproducir”), y la última será una “Etiqueta” acompañada de 3 “Campos de Texto” y un “Botón”:

Utilizando las formas preconfeccionadas, los programas de dibujo permiten mostrar las ideas de una manera realmente rápida (lo anterior llevó unos diez minutos) de forma que otros puedan comprenderlas. Esta alternativa a Microsoft Visio le permite producir diagramas en un método fácil de usar y portátil (el propio Evolus Pencil es multiplataforma, y los dibujos se pueden exportar a PDF o PNG) para mostrar a los compañeros de trabajo.