Pencil: La herramienta de prototipado open source de calidad

27/1/2017 - herramientas , mockups , software libre , pencil
Pencil se puede utilizar para crear mockups de interfaz de usuario de aplicaciones web, aplicaciones de escritorio o de smartphone para Android e iOS.

El prototipado de interfaces de usuario es una disciplina creativa en la que las herramientas no deberían representan un obstáculo en el camino, de forma que uno pudiera expresar sus ideas facilmente en una pantalla, al igual que lo haría a mano en una servilleta. Hasta hace poco, sin embargo, no había una herramienta de prototipado para interfaz de usuario de código abierto de calidad, por lo que los diseñadores se veían forzados a maquetar con herramientas libres como InkscapeGimp, o a utilizar aplicaciones web propietarias que o bien limitaban el almacenamiento o añadían marcas de agua. Esos días han pasado a la historia gracias a Pencil, la herramienta de prototipado open source de calidad.

Pencil es un entorno de edición de mockups o maquetas fácil de usar; el usuario simplemente tiene que arrastrar y soltar los widgets de interfaz de usuario desde la caja de herramientas al lienzo o área de edición, redimensionando y reajustando según sea necesario. Los widgets de interfaz de usuario se pueden editar, apilándose en el área de edición como elementos individuales ajustables. El resultado se parece a un "prototipo de papel", mejor que con otras herramientas de gráficos o vectores, con sus capas, renderizaciones y otras inflexibilidades. Pencil ofrece varias colecciones de widgets, abarcando formas genéricas, sistemas operativos específicos de escritorio y móviles, y populares kits de herramientas de sitios web. La aplicación también es multiplataforma porque, curiosamente, es una extensión del navegador Firefox.
Pencil

Pencil se puede utilizar para crear mockups de interfaz de usuario de aplicaciones web, aplicaciones de escritorio o de smartphones para Android e iOS

Instalación y configuración

Pencil se puede descargar como un complemento de Mozilla Firefox desde el directorio de add-ons o desde la página principal del proyecto. La versión estable más reciente de Pencil es la 2.0.5.

El proyecto Pencil tiene enlaces a varias colecciones de widgets extra denominadas "Stencils". Actualmente hay colecciones para diagramas de flujo UML, presentaciones de desarrollo de negocios, las populares bibliotecas de JavaScript Dojo y Ext, e iconos diseñados para mockups de iPhone y monitores de pantalla táctil. Las colecciones "Stencil" están empaquetadas en archivos .ZIP, y para instalarlas, hay que abrirlas con el elemento de menú "Herramientas" -> "Instalar nueva colección" de Pencil.

Sin embargo, no necesita instalar ninguna colección para empezar. La última versión incluye widgets para formas geométricas esenciales, anotaciones básicas (como flechas de indicadores y globos de texto), elementos básicos de HTML, elementos GUI de Windows XP y GTK + GUI, elementos de flowchart, elementos de interfaz para Android e iOS y un buen conjunto de elementos de "boceto" que simulan trazos manuales sobre el papel. Existen aún más colecciones Stencil disponibles de los usuarios de la lista de correo de usuarios Pencil y su wiki asociado.

Por último, el proyecto proporciona varias "plantillas de exportación" descargables que Pencil utiliza para crear HTML, PDF u otros formatos de documentos de los mockups. Hay varios estilos disponibles, dependiendo del uso previsto, por lo que no duele experimentar con varios. A diferencia de los Stencils, es necesario descargar e instalar plantillas de exportación por separado, o se limitará a la salida por defecto.

Edición

Una vez instalada la aplicación, al ejecutar Pencil, se abre una ventana con menús básicos y herramientas de edición en la parte superior, una lista plegable con las colecciones de widgets instaladas a la izquierda y el lienzo a la derecha. Para la estructura general de los documentos, Pencil utiliza el concepto de "páginas", que se corresponde con el lienzo o contenido de una pestaña en la interfaz. Las páginas de un documento pueden tener tamaños diferentes, se pueden copiar y pegar elementos entre ellos e incluso duplicar o eliminar páginas del menú contextual con el botón derecho en la barra de pestañas.

Dentro de una página, el lienzo se muestra como un rectángulo blanco sombreado sobre un fondo no editable. El tamaño del lienzo se puede modificar eligiendo "Propiedades" en el menú contextual con el botón derecho del ratón en la pestaña actual. Hay un sistema de cuadrícula, que se puede ajustar el espaciado y activar o desactivar snap-to-grid en la apertura de Pencil desde "Herramientas" -> "Opciones" -> "General".

Para llevar los elementos de la interfaz de usuario al lienzo, hay arrastrar y soltar con el cursor; Esto puede parecer poco intuitivo, ya que se pueden seleccionar elementos en la pestaña Colecciones como si fueran herramientas, pero arrastrar y soltar es el nombre del juego. Cada elemento que se coloca en el lienzo tiene puntos de control en las esquinas y en los puntos medios de cada lado; Cuando selecciona un elemento con el ratón, puede cambiar el tamaño del elemento arrastrando cualquiera de estos puntos. Sin embargo, el cambio de tamaño no es una transformación de escala, sino que redimensiona el elemento alargando sus lados proporcionalmente. En otras palabras, al cambiar el tamaño de un cuadro de texto, obtiene un cuadro de texto más grande, no una ampliación ampliada y pixelada del cuadro de texto original. Hacer doble clic en un elemento le permite girarlo alrededor de cualquier punto de control.

Muchos elementos de la interfaz de usuario utilizan etiquetas de texto, ya sea nombres básicos o cuadrículas y listas de estructuras, como las que puede encontrar en una vista de árbol o en un widget de selección. Puede hacer doble clic en cualquier elemento de texto y editar su contenido directamente en el lienzo, o abrir las propiedades del elemento con el menú contextual. Existe una sintaxis muy simple para extender los elementos de texto estructurado; El carácter | denota nuevas columnas, el carácter de hash # denota qué elemento de una lista está seleccionado y el asterisco * indica qué elemento está resaltado. Hay alguna variación en cuanto al soporte para # y * en diferentes widgets, en todo caso no es complicado saber cual se aplica.

La barra de herramientas en la parte superior le permite ajustar manualmente los ajustes de cualquier elemento seleccionado, desde su posición exacta de X, Y en la pantalla, hasta el primer plano y el color de fondo, las propiedades de texto como la fuente y la alineación. Por supuesto, Pencil destaca por la manipulación rápida y fácil de los objetos. Para hacer esto más fácil, siempre que se arrastra un elemento aparecen líneas de guía horizontales y verticales a unos pocos píxeles de un elemento cercano, permitiendo así colocar objetos en perfecta alineación sin preocuparse por las coordenadas X, Y específicas.

Puede agregar imágenes (como iconos, fotos o contenido de pantalla) arrastrando el elemento "Imagen de mapa de bits" de la colección de widgets de formas comunes. El menú contextual de este elemento le permite importar una imagen o un enlace a ella (en cuyo caso el archivo de imagen debe permanecer en su ubicación actual o el enlace se romperá). Algunos widgets de interfaz de usuario, como los botones, también le permiten adjuntar un archivo de imagen como una de sus propiedades. Finalmente, Pencil incluye una interfaz de búsqueda integrada vinculada a Open Clip Art Library. Utilizando esta función, puede buscar y navegar a través de las puntuaciones de arte Creative Commons, y diseñar elementos e importarlos directamente en su maqueta. Es una característica práctica cuando se trata de mantener una colección de imágenes prediseñadas específicas de Pencil.

Exportar y compartir diseños

Las herramientas de dibujo esencialmente le dan total libertad para diseñar sus maquetas de la forma que mejor le convenga. Hay algunas peculiaridades aquí y allá, como el truncamiento automático de texto en tablas y widgets de cuadro de lista, pero en su mayor parte el cielo es el límite. Sin embargo, antes de poder utilizar sus prototipos para cambiar el mundo, debe exportarlos a un formato de documento de salida común. Aquí es donde entra en juego el sistema de plantillas de exportación de Pencil.

Si selecciona simplemente "Documento" -> "Exportar documento" en el menú, aparece la ventana de exportación predeterminada. Desde aquí, simplemente puede guardar la maqueta como una serie de archivos PNG, uno por página. También puede utilizar este diálogo para exportar a HTML, PDF o .ODT de OpenOffice. Sin embargo, todas estas opciones de exportación requieren que instale una plantilla de exportación como las que se proporcionan en el sitio Web de Pencil. Técnicamente, todavía puede seleccionar un formato de salida como HTML sin una plantilla instalada, y el asistente de exportación le guiará a través del proceso, pero todo lo que hará al final es generar archivos PNG desvinculados y dejarlos en un directorio.

Las plantillas de exportación se proporcionan para su descarga en archivos .ZIP. Para instalar uno, simplemente guárdelo localmente en su forma cerrada, luego ábralo desde el elemento de menú "Herramientas" -> "Administrar plantilla de exportación ..." de Pencil. Una advertencia importante para este proceso es que Pencil requiere que elija HTML o "Documentos de texto" (una categoría incluyendo PDF, DOC y ODT) al instalar cada plantilla - puede elegir el tipo incorrecto y Pencil no le avisará que la plantilla es incompatible; Sólo averiguará que lo instaló en la sección incorrecta cuando intenta exportar.

Las plantillas instaladas estarán disponibles para su uso inmediatamente, apareciendo en el asistente de exportación. Por alguna razón, al exportar a HTML, Pencil elige automáticamente el nombre de archivo "index.html", que puede sobrescribir otras exportaciones en el mismo directorio, pero requiere que especifique manualmente un nombre de archivo para otros tipos de documento.

Las plantillas proporcionadas en el sitio del proyecto Pencil son bastante minimalistas; Si está interesado en la salida HTML, es probable que tenga que realizar algún CSS elaborado, o escribir su propia plantilla para su uso posterior. Desafortunadamente, el sitio del proyecto no contiene documentación sobre la producción de sus propios temas de exportación, pero es bastante fácil leer los temas básicos y obtener la idea: los temas consisten en una hoja de estilo XSLT, un archivo XML que contiene propiedades básicas de plantilla y recursos externos (como imágenes) que se incluirán en la salida final.

En general, la principal fortaleza de Pencil está en su facilidad de uso: crear una maqueta es tan fácil como arrastrar y soltar, incluso editar elementos complicados como el texto de varias columnas es sencillo y las herramientas de ajuste y alineación hacen que sea fácil la creación de imágenes ordenadas y organizadas. Si tiene mayores expectativas, puede que le resulte mejor crear prototipos desde cero con un editor de gráficos como Gimp pero, en la mayoría de los casos, la inmediatez de Pencil hará que sea la opción ganadora.

Fuente: http://blog.worldlabel.com/2010/prototyping-with-pencil-firefox-add-on.html

comments powered by Disqus




Últimos diseños web

 






Galería de imágenes




Abril 2017

LMXJVSD
     12
3456789
10111213141516
17181920212223
24252627282930


Etiquetas





Newsletter




Archivo





Síganos en la red





Llámenos