23Jul
Pencil es una herramienta de wireframing que podemos usar para esbozar una maqueta de la interfaz de usuario de nuestra aplicación. Lo bueno de Pencil es que es liviano, fácil de usar y está estrechamente integrado con Firefox.¡Además de todo, es una aplicación de código abierto gratuita! Al final del artículo, le ofreceremos una demostración simple sobre cómo usar Pencil para crear un wireframe tipo Brizzly.
¿Por qué creamos wireframes?
Un wireframe es un boceto de una idea de diseño de página. Un wireframe se centra en el diseño de información de una página para garantizar que el diseño se ajuste a lo que necesita el usuario. Un wireframe generalmente consta de diferentes formas( como cajas, ó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 aproximados de una página. Un marco de alambre es importante para que los usuarios se centren en el elemento de importancia en su página. Al crear un boceto de una página, sin elementos visuales sofisticados, desplazará la atención del usuario a elementos importantes como el tamaño, el diseño y la ubicación de los componentes de la página. Comenzaremos a tener una mejor comprensión de lo que el cliente realmente quiere y necesita del software cuando el usuario comienza a enfocarse en los elementos importantes de una página. La creación de un marco alámbrico te permite a ti y a tus usuarios colaborar de manera efectiva e identificar los posibles problemas de diseño con anticipación.
Introducción a Pencil
Descargar lápiz de la página de complementos de Pencil. Una vez que instale Pencil, se puede acceder desde 'Herramientas' & gt;'Dibujar a lápiz'.
Esto es lo que se ve Brizzly. Es una aplicación web muy buena que agrega tu Facebook y Twitter en una sola página.
Este es el resultado final del marco de alambre. Las formas principales en este wireframe son rectángulos, cuadros de texto y pestañas. La siguiente sección del artículo dará un ejemplo simple de cómo crear cada forma.
Crear un rectángulo
El primer paso para crear una forma de marco de alambre es arrastrar una forma desde el 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 Lápiz. 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 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 peso del borde a 1.
La pantalla de propiedades del texto nos permite personalizar el tipo de letra, el tamaño, el estilo, el peso, el color, el brillo y la opacidad del texto.
Creación de pestañas
Las pestañas de inicio, borrador, de imagen son tres pestañas apiladas una encima de la otra. Arrastra 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'.Establézcalo en gris( # 989898).
Creación de 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 el color
El color es una de las partes más esenciales a la hora de ofrecer una estructura de alambre 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 para un color en particular puede ser difícil. Podemos usar la hoja de trucos 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 usarlos en Lápiz. Haga clic en el icono del cuentagotas en la esquina inferior izquierda de Firefox para seleccionar el color en la pantalla. También podemos abrir el selector de color de ColorZilla haciendo doble clic en el ícono de caída de ojos. Solo copie y pegue el código hexadecimal en el código HTML del color de Pencil.
Conclusion
Pencil es una herramienta de enmarcado fácil de usar. La integración de lápiz con Firefox hace posible que usemos otro complemento de Firefox para ayudar a crear un mejor wireframe
Links
Descargar Pencil
Descargar Colorzilla
W3C HTML Color Cheat Sheet