Usa Firefox para crear maquetas simples

Pencil es una herramienta de alámbrico que podemos usar para dibujar 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á perfectamente integrado con Firefox. ¡Además de todo, es una aplicación de código abierto gratuita! Al final del artículo, le daremos una demostración simple sobre cómo usar Pencil para crear un Brizzly como estructura de alambre..

¿Por qué creamos wireframes? ?

Una estructura alámbrica es un esbozo 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 lo que necesita el usuario. Una estructura alámbrica generalmente consiste en diferentes formas (como cajas, óvalos y diamantes) para representar elementos de contenido, funcionales y de navegación. Estas formas muestran su colocación en la página..

Al principio puede parecer una pérdida de tiempo al crear bocetos 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, cambie 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 comprender mejor lo que el cliente realmente quiere y necesita del software cuando el usuario comienza a centrarse en los elementos importantes de una página. La creación de un marco de alambre le permite a usted y a sus usuarios colaborar eficazmente e identificar los posibles problemas de diseño de manera temprana.

Empezando con Lápiz

Descargar Pencil desde la página de complementos de Pencil. Una vez que instales el lápiz, puedes acceder a él desde 'Herramientas'> 'Dibujo a lápiz'.

Esto es lo que parece Brizzly. Es una aplicación web muy interesante que agrega Facebook y Twitter en una sola página..

Este es el resultado final del marco de alambre. Las formas principales en esta estructura metálica 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..

Creando 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.

Cambiar el tamaño del rectángulo a un ancho y altura adecuados.

Podemos personalizar el texto, el borde y el color de fondo de cualquier forma en Lápiz. Haga clic 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 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, imagen son tres pestañas que se apilan una encima de la otra. Arrastre tres 'Panel de pestañas' al rectángulo. Cambia el tamaño de cada pestaña para que cada pestaña se muestre lado a lado.

Abra la pantalla de propiedades del texto para ajustar el color de fuente de las pestañas "Imágenes" y "Borrador". Establézcalo en gris (# 989898).

Creando 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 en la entrega de un marco de alambre agradable. La forma más precisa de cambiar el color de una forma es especificando el código HTML del color. Descubrir 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 seleccionar 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 icono de gota. Simplemente copie y pegue el código Hex en el código HTML de color de Pencil.

Conclusión

Lápiz es una herramienta de armado de alambre fácil de usar. La integración de lápiz con Firefox nos permite utilizar otro complemento de Firefox para ayudar a crear un mejor alámbrico.

Campo de golf
Descargar Pencil
Descargar Colorzilla
W3C HTML Color Cheat Sheet