Pencil

Herramienta de prototipado de código abierto multiplataforma

Si la austeridad también ha llegado a su ciudad, como el camión del tapicero, quizá guste de conocer esta interesante herramienta de prototipado de baja fidelidad totalmente gratuita y disponible para Linux, Windows y Mac.

Pencil no es nada nuevo ni bohemio ni cool, de hecho la última release es de Septiembre de 2013 y no da la impresión de que el proyecto siga vivo, pero no podemos negar que como herramienta es bastante útil si quieres empezar a trastear con el diseño de pantallas desde ya, además es gratis, es libre y el resto depende de tu imaginación (como siempre). 

Pencil Project nació en 2008 y se distribuye bajo términos de licencia GPL version 2, y es una herramienta muy sencilla que permite hacer cosas tan básicas como:

  • Dibujar diagramas
  • Sketchear GUIs basadas en componentes predefinidos
  • Relacionar documentos de un proyecto mediante enlaces de contenido
  • Exportar los documentos como imágenes o un documento HTML (aunque éste sea bastante precario)
  • Definir tus propia librería de componentes (muy útil para equipos de diseño)

Sobre éste último punto he publicado un pequeño artículor en el que explico cómo hacerlo.  Aquí os dejo el enlace por si os pica la curiosidad: Cómo crear una librería de recursos con Pencil.

Cómo crear una librería de recursos con Pencil

Si ya conocéis Pencil y os preguntáis cómo podríais definir vuestra propia librería de componentes para crear GUI en este tutorial hacemos un repaso de los pasos a seguir.

Hay dos formas de conseguir nuestra propia librería

  1. Haciéndolo bien
  2. Haciéndolo rápido

Como para hacerlo bien ya existe una buena documentación en la web de la herramienta vamos a explicar cómo puede hacerse de forma rápida (y no tan flexible) para que resulte práctico crear conceptos visuales y compartirlos con diferentes equipos.

image

Una forma fácil de empezar

Usando la librería ‘Common shapes’ podemos empezar a dibujar elementos básicos basados en formas geométricas.

  1. Una vez que tengamos todos los elementos, los seleccionamos juntos y agrupamos (CTRL+G). Ahora se comportarán como una única forma.
  2. Sobre el nuevo componente clicamos en botón derecho “Add to my collections…”.
  3. Como este es el primer componente tendremos que crear una nueva colección a la cual añadirlo. 
  4. Si ahora comprobáis en la pestaña ‘My Stuff’ veréis que ya está creada vuestra nueva colección. 

Una característica que encuentro bastante útil es la ‘Sizing policy’ que tiene cada elemento (accesible via menú contextual). Esta política permite definir el comportamiento del elemento cuando está agrupado en un componente al que se le modifica el tamaño. Gracias a esto podrás decidir si quieres que cambie o no de tamaño o se mantenga alineado a un lado o a otro.

¿Y si quiero hacerlo bien?

Qué necesitas tener

  • Un editor de texto (para ver/editar XML)
  • Un editor de SVG (las formas están definidas como vectores)
  • Un editor de bitmpas (por si necesitas meter algún icono o imagen)

Qué necesitas saber

Una estructura típica para crear una colección tiene este aspecto

... [dir] CollectionName
      |
      |___[dir] icons       #optional
      |     |
      |     |___shape1.png
      |
      |___ Definition.xml     

y en el documento Definition.xml deberás definirlo de esta forma

<Shapes xmlns="http://www.evolus.vn/Namespace/Pencil"
        xmlns:p="http://www.evolus.vn/Namespace/Pencil"
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"

        id="your_collection_id"
        displayName="Display name of your collection"
        description="More description about this collection"
        author="Names of the authors"
        url="Optional URL to its web page">
        
        <!-- Your shapes go here -->
        
</Shapes>

Iremos añadiendo los diferentes componentes usando las etiquetas <Shape></Shape> y dentro de ellos podremos definir Propiedades (color, dimensión, etc.), Comportamientos y Acciones además de su Aspecto (mediante el SVG).

Para ver lo que estamos haciendo, puedes cargar tu colección desde Tools » Developer Tools » Load Developer Stencil Directory… seleccionando el archivo Definition.xml (usa F5 una vez cargado para refrescar).

Cuando termines, mételo todo en un archivo ZIP asegurándote que el Definition.xml está en la carpeta raíz.

No te olvides que si quieres depurar errores puedes abrir la consola de errores desde Tools » Developer Tools » Show Error Console

A partir de aquí te recomiendo que consultes el Tutorial en el que viene explicado cada detalle sobre cómo montar la colección con directivas XML.

Recursos compartidos con Balsamiq Mockups for Desktop

Como sabéis y comentamos hace unas semanas en este vídeo de introducción, Balsamiq permite la configuración de un directorio compartido para los recursos (assets) de todos tus proyectos  a través del directorio  denominado “Account assets”.

Generalmente, cada proyecto mantiene una estructura de dos niveles como se muestra en la captura.

image

Sin necesidad de configuración, los símbolos guardados bajo el directorio “assets” son accesibles bajo la categoría “Project assets”. De forma adicional a este directorio, Balsamiq permite configurar otro directorio para ser compartido no sólo entre tus proyectos, sino incluso entre varios usuarios si éste se encuentra en un directorio en red.

Para ponerlo en funcionamiento tendremos que seguir los siguientes pasos:

  1. Crear un directorio llamado “Balsamiq Mockups” en la ubicación deseada, p.e. “C:Documents And SettingsAdministratorDesktopBalsamiq Mockups”
  2. Crear un subdirectorio bajo “Balsamiq Mockups” llamado “assets”
  3. Crear un archivo con un editor de texto con el nombre BalsamiqMockups.cfg (asegúrate que es texto plano) y guardarlo en el directorio local de datos.
  4. Editar el archivo y añadir el siguiente contenido

<config><documentsPath> C:Documents And SettingsAdministratorDesktop </documentsPath><config>

Existen otras opciones de configuración que pueden añadirse a este archivo, como, por ejemplo, elegir el código de color exacto para los elementos resaltados o activos, la tipografía o el uso de cookies.

Con el uso de recursos compartidos por fin podremos reutilizar elementos generados entre varios miembros de un equipo incluso si éste está deslocalizado. Otro uso interesante es la creación de una librería propia de patrones, muy útil para mantener un mismo vocabulario visual entre varios proyectos.