Usando Pencil para hacer los MockUps de tus Apps
El día de hoy les voy a enseñar como hacer MockUps para sus aplicaciones, ya sean de escritorio, web o móvil de una manera rápida y sencilla utilizando la herramienta open source Pencil Evolus
Que es Pencil Evolus
Es una Aplicación multiplataforma (Linux, Windows y Mac) y open source con el propósito de facilitar la creación de prototipos de interfaces gráficas.
Nota: a pesar de funcionar para diseñar cualquier tipo de interfaz aquí nos centraremos en diseño de interfaces móviles pero los mismos pasos se pueden usar para configurar pencil para otro tipo de interfaces.
Primeros Pasos
Descargar en Instalar Pencil
Lo primero es ir a la pagina de descargas y bajar la version correspondiente a tu sistema operativo, de manera oficial en Linux solo hay paquetes para Fedora y Ubuntu pero al ser open source es fácil encontrar en los repositorios de tu distribución el paquete, por ejemplo en el caso de ArchLinux y derivados el paquete esta en AUR
Configurar Pencil
Después de instalar y lanzar por primera vez pencil toca configurar y descargar los complementos necesarios. Ya que este programa nos permite diseñar para distintas plataformas hay que agregar las que deseamos utilizar.
Lo primero que veremos es la opción de crear un proyecto nuevo, abrir uno ya existente y el panel lateral con diferentes elementos.
De manera inicial se incluyen figuras básicas y elementos de flujo
Para agregar otro tipo de elementos solo hay que presionar el botón que esta en la esquina inferior izquierda del panel lateral, se mostrara una ventana con los tipos de elementos que se pueden agregar
En este caso yo agregue los componentes de Material Design para diseñar interfaces móviles.
Ademas de poder agregar los elementos listados es posible descargar otros desde Internet utilizando los repositorios oficiales con el botón “install from repository” o descargarlos desde Internet e instalar el archivo zip
Yo recomiendo estos 3 paquetes descargados de GitHub:
Empezando a Diseñar
Después de instalar y configurar Pencil lo que sigue es crear un nuevo proyecto con al botón correspondiente.
Veras la pantalla con el lienzo en blanco, para empezar a agregar elementos basta con arrastrarlos del panel lateral al lienzo.
Notaras que pencil incluye la opción de ajustar el tamaño de los elementos de una manera muy similar a cualquier editor de imágenes ademas de mostrar guías de alineado en relación a otros elementos haciendo que el diseño “pixel perfect” bastante sencillo.
Después de entender esto lo único que resta es dejar corres la creatividad y empezar a plasmar tus ideas utilizando todos los elementos que pencil pone a tu disposición como agregar textos, cambiar colores, usar imágenes personalizadas o crear tus propios elementos para reutilizarlos después.
Agregar mas pantallas
Una muy útil función de Pencil es la de poder trabajar en diferentes pantallas usando diferentes lienzos, así no es necesario meter todo en un lienzo gigante, permitiendo organizar mejor cada una de las vistas de nuestra aplicación.
Para agregar pantallas hay que ir a la barra inferior en la parte derecha y agregarla. Podemos, ademas, crear paginas “hijas” de otras para agregar interactividad
Interactividad
Una de las razones por las que adoro Pencil es la opción de agregar interactividad a los MockUps, esto permite convertirlos fácilmente en prototipos.
Para lograr esto lo único que hay que hacer es marcar una nueva pagina como hija de otra y a alguno de los elementos de la “hoja madre” hacer que enlace a la “hoja hija”
Para conseguir la interactividad solo es necesario exportar como pagina web el proyecto.
Después de exportar solo hay que abrir con algún navegador el archivo index.html e interactuar con nuestro diseño
¡Listo! con eso ya tienes lo básico para empezar a hacer tus MockUps y prototipos de tus apps, puedes experimentar con todas las opciones que tiene Pencil para crear diseños mas atractivos.
Dato Desagradable
Aunque me encantaría no mencionarlo siento la necesidad de hacerlo.
Por desgracia el desarrollo de Pencil no es muy activo, teniendo su mas reciente lanzamiento en junio de 2017, es muy posible que ya no haya versiones nuevas (aunque no se haya marcado aun como abandonado) lo cual lo convierte en un Programa Legacy y haciendo que muchos de sus componentes no se actualicen (los modelos de iOS son bastante viejos y ya no van con la estética actual del sistema). Lo menciono porque considero que es necesario que todos los que lo quieran utilizar consideren que en algún momento podrá dejar de funcionar o ser compatible con sistemas nuevos.
Sin mas espero que este mini tutorial les pueda servir en sus desarrollos futuros y presentes así como a mi me ha servido.
