Pencil es una herramienta de wireframe que podemos usar para dibujar una maqueta de la interfaz de usuario de nuestra aplicación. Lo mejor de Pencil es que es liviano, fácil de usar y está estrechamente integrado con Firefox. ¡Además de todo esto, es una aplicación gratuita de código abierto! Al final del artículo, le daremos una demostración simple sobre cómo usar Pencil para crear una estructura de alambre similar a Brizzly.
¿Por qué creamos wireframes?
Una estructura alámbrica es un boceto de una idea de diseño de página. Una estructura alámbrica se centra en el diseño de información de una página para garantizar que el diseño se ajuste a las necesidades del usuario. Una estructura alámbrica generalmente consta de diferentes formas (como cuadros, óvalos y diamantes) para representar elementos de contenido, funcionales y de navegación. Estas formas muestran su ubicación en la página.
Al principio puede parecer una pérdida de tiempo crear bocetos de una página. Un marco de alambre es importante para que sus usuarios se centren en el elemento de importancia de su página. Al crear un boceto aproximado de una página, sin elementos visuales sofisticados, la atención del usuario se centra en elementos importantes como el tamaño, el diseño y la ubicación de los componentes de la página. Comenzaremos a comprender mejor lo que el cliente realmente quiere y necesita del software cuando el usuario comience a enfocarse en los elementos importantes de una página. La creación de una estructura de alambre le permite a usted y a sus usuarios colaborar de manera efectiva e identificar el problema de diseño potencial temprano.
Empezando con Pencil
Descarga Pencil desde la página de complementos de Pencil. Una vez que instale Pencil, podrá acceder a él desde "Herramientas"> "Dibujar a lápiz".
Así es como se ve Brizzly. Es una aplicación web muy interesante que agrega tu Facebook y Twitter en una sola página.
Este es el resultado final del marco de alambre. Las formas principales de esta estructura alámbrica son rectángulos, cuadros de texto y pestañas. La siguiente sección del artículo le dará un ejemplo simple de cómo crear cada forma.
Crear un rectángulo
El primer paso para crear una forma de estructura de alambre es arrastrar una forma del menú "Colecciones de formas" al lienzo.
Cambie el tamaño del rectángulo a un ancho y alto adecuados.
Podemos personalizar el texto, el borde y el color de fondo de cualquier forma en Pencil. Haga clic con el botón derecho en el rectángulo y seleccione "Propiedades" para abrir las ventanas de Propiedades. Esta es la pantalla de propiedades de fondo. Establezca el color de fondo del rectángulo en blanco (#FFFFFF).
Haga clic en la pestaña "Borde" y ajuste las propiedades del borde. Establezca el color del borde en negro (# 000000) y cambie el grosor del borde a 1.
La pantalla de propiedades del texto nos permite personalizar el tipo de fuente, tamaño, estilo, peso, color, brillo y opacidad del texto.
Crear pestañas
Las pestañas de inicio, borrador e imagen son tres pestañas que se apilan una encima de la otra. Arrastre tres "Panel de pestañas" en el rectángulo. Cambie el tamaño de cada pestaña para que cada pestaña se muestre una al lado de la otra.
Abra la pantalla de propiedades del texto para ajustar el color de la fuente de la pestaña "Imágenes" y "Borrador". Configúrelo en gris (# 989898).
Crear texto
Arrastre la forma "Texto" al lienzo para crear cada uno de los menús. Podemos ajustar la apariencia del texto accediendo a la ventana de propiedades del texto.
Consejos útiles para cambiar de color
El color es una de las partes más esenciales para ofrecer una estructura alámbrica agradable. La forma más precisa de cambiar el color de una forma es especificando el código HTML del color. Averiguar el código HTML de un color en particular puede resultar complicado. Podemos usar la hoja de referencia de color HTML de w3cschools.com para buscar el código HTML correcto para un color en particular.
También nos gusta usar colorzilla para elegir colores de la pantalla y usarlo en Pencil. Haga clic en el icono del cuentagotas en la esquina inferior izquierda de Firefox para elegir el color en la pantalla. También podemos abrir el selector de color de ColorZilla haciendo doble clic en el icono de gotas para los ojos. Simplemente copie y pegue el código hexadecimal en el código HTML de color de Pencil.
Conclusión
El lápiz es una herramienta de encuadre de alambre fácil de usar. La integración de lápiz con Firefox nos permite usar otro complemento de Firefox para ayudar a crear una mejor estructura alámbrica
Enlaces
Descarga Pencil
Descarga Colorzilla
Hoja de referencia de color HTML del W3C
