23Jul
Pencil é uma ferramenta de wireframing que podemos usar para desenhar uma maquete da interface do usuário da nossa aplicação. A ótima coisa sobre o lápis é que ele é leve, fácil de usar e bem integrado com o Firefox. Além disso, é um aplicativo gratuito de código aberto! No final do artigo, daremos uma demonstração simples sobre como usar o Lápis para criar uma estrutura de fio de alta qualidade.
Por que criamos wireframes?
Um wireframe é um esboço de uma idéia de layout de página. Um wireframe concentra-se no design de informações de uma página para garantir que o design se encaixa no que o usuário precisa. Um wireframe geralmente consiste em formas diferentes( como caixas, ovais e diamantes) para representar elementos de conteúdo, funcionais e de navegação. Essas formas exibem sua colocação na página.
No início, pode parecer uma perda de tempo criando esboços aproximados de uma página. Um quadro de fio é importante para que seus usuários se concentrem no elemento de importância em sua página. Criando um esboço áspero de uma página, sem elementos visuais extravagantes, deslocam a atenção do usuário para elementos importantes, como dimensionamento, layout e colocação dos componentes da página. Começaremos a entender melhor o que o cliente realmente quer e precisa do software quando o usuário começa a se concentrar nos elementos importantes de uma página. Criando um quadro de fio permitem que você e seus usuários colaborem de forma eficaz e identifiquem o potencial problema de projeto com antecedência.
Primeiros passos com o lápis
Baixe o lápis da página Add ons do lápis. Depois de instalar o lápis, ele é acessível a partir de 'Ferramentas' & gt;'Esboço de lápis'.
Isto é o que parece Brizzly.É uma aplicação web muito legal que agrega seu Facebook e Twitter em uma única página.
Este é o resultado final da moldura de arame. As formas principais neste wireframe são, retângulos, caixas de texto e guias. A próxima seção do artigo dará um exemplo simples de como criar cada forma.
Criando um retângulo
O primeiro passo para criar uma forma de quadro de arame é arrastar uma forma do menu 'Shape Collections' para a tela.
Redimensione o retângulo para uma largura e altura adequadas.
Podemos personalizar o texto, a borda e a cor de fundo de qualquer forma no lápis. Clique com o botão direito do mouse no retângulo e selecione 'Propriedades' para abrir as janelas de Propriedades. Esta é a tela de propriedades em segundo plano. Defina a cor do plano de fundo Rectangle como branca( #FFFFFF).
Clique na guia "Borda" e ajuste as propriedades da borda. Defina a cor da borda para preto( # 000000) e altere o peso da borda para 1.
A tela de propriedades do texto nos permite personalizar o tipo de fonte, o tamanho, o estilo, o peso, a cor, o brilho e a opacidade do texto.
Criando guias
As guias de casa, rascunho e imagem são três guias que são empilhadas uma sobre a outra. Arraste três 'Tabs Panel' no retângulo. Redimensione cada guia para que cada guia mostre lado a lado.
Abra a tela de propriedades do texto para ajustar a cor da fonte na guia "Imagens" e "Rascunho".Defina-o para Gray( # 989898).
Criando texto
Arraste a forma 'Texto' para a tela para criar cada um dos menus. Podemos ajustar a aparência do texto acessando a janela de propriedades do texto.
Dicas úteis para alterar a cor
A cor é uma das partes mais essenciais na entrega de um wireframe agradável. A maneira mais precisa de mudar a cor de uma forma é especificando o código HTML da cor. Determinar o código HTML para uma determinada cor pode ser difícil. Podemos usar HTML HTML cheat sheet from w3cschools.com para procurar o código HTML direito para uma determinada cor.
Também gostamos de usar colorzilla para escolher cores da tela e usá-la em Lápis. Clique no ícone do cupons na parte inferior esquerda do Firefox para escolher a cor na tela. Também podemos abrir o seletor de cores do ColorZilla clicando duas vezes no ícone da gota de olho. Basta copiar colar o código Hex no código HTML da cor do lápis.
Conclusão O lápis
é uma ferramenta de wireframing fácil de usar. A integração de lápis com o Firefox torna possível para nós usar outro plugin do Firefox para ajudar a criar um melhor wireframe
Links
Download do lápis
Download Colorzilla
W3C HTML Color Cheat Sheet