Pencil é uma ferramenta de wireframe que podemos usar para esboçar uma simulação da interface de usuário do nosso aplicativo A grande vantagem do Pencil é que ele é leve, fácil de usar e totalmente integrado ao Firefox. Além de tudo isso, é um aplicativo de código aberto gratuito! No final do artigo, daremos uma demonstração simples de como usar o Pencil para criar um wireframe semelhante ao Brizzly.
Por que criamos wireframes?
Um wireframe é um esboço de uma ideia de layout de página. Um wireframe se concentra no design de informações de uma página para garantir que o design se ajuste às necessidades do usuário. Um wireframe geralmente consiste em diferentes formas (como caixas, ovais e diamantes) para representar o conteúdo, elementos funcionais e de navegação. Essas formas exibem seu posicionamento na página.
No início, pode parecer uma perda de tempo criar esboços de uma página. Uma estrutura de arame é importante para que seus usuários se concentrem no elemento de importância em sua página. Criar um esboço de uma página, sem elementos visuais sofisticados, muda a atenção do usuário para elementos importantes, como dimensionamento, layout e posicionamento dos componentes da página. Começaremos a entender melhor o que o cliente realmente deseja e precisa do software quando o usuário começar a se concentrar nos elementos importantes de uma página. A criação de uma estrutura de arame permite que você e seus usuários colaborem com eficácia e identifiquem antecipadamente o problema de projeto em potencial.
Introdução ao Pencil
Baixe o Pencil da página de complementos do Pencil. Depois de instalar o Pencil, ele pode ser acessado em ‘Ferramentas’> ‘Desenho de lápis’.
É assim que Brizzly se parece. É um aplicativo da web muito legal que agrega seu Facebook e Twitter em uma única página.
Este é o resultado final da estrutura 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.
Criação de um retângulo
A primeira etapa para criar uma forma de estrutura de arame é arrastar uma forma do menu ‘Coleções de formas’ 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 no retângulo e selecione ‘Propriedades’ para abrir a janela Propriedades. Esta é a tela de propriedades do plano de fundo. Defina a cor de fundo do retângulo como branco (#FFFFFF).
Clique na guia ‘Borda’ e ajuste as propriedades da borda. Defina a cor da borda para preto (# 000000) e altere a espessura da borda para 1.
A tela de propriedades do texto permite personalizar o tipo, tamanho, estilo, peso, cor, brilho e opacidade da fonte.
Criação de guias
As guias página inicial, rascunho e imagem são três guias empilhadas uma em cima da outra. Arraste três ‘Tabs Panel’ para o retângulo. Redimensione cada guia para que cada guia seja exibida lado a lado.
Abra a tela de propriedades do texto para ajustar a cor da fonte das guias ‘Imagens’ e ‘Rascunho’. Defina-o como Cinza (# 989898).
Criação de 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 mudar a cor
A cor é uma das partes mais essenciais na entrega de um wireframe agradável. A maneira mais precisa de alterar a cor de uma forma é especificando o código HTML da cor. Pode ser difícil descobrir o código HTML de uma cor específica. Podemos usar a folha de dicas de cores HTML de w3cschools.com para pesquisar o código HTML correto para uma cor específica.
Também gostamos de usar o colorzilla para escolher as cores da tela e usá-las no lápis. Clique no ícone do conta-gotas no canto inferior esquerdo do Firefox para escolher a cor na tela. Também podemos abrir o seletor de cores do ColorZilla clicando duas vezes no ícone do colírio. Basta copiar e colar o código Hex no código HTML colorido do Pencil.
Conclusão
Pencil é uma ferramenta de wireframing fácil de usar. A integração do Pencil com o Firefox possibilita o uso de outro plugin do Firefox para ajudar a criar um wireframe melhor
Links
Baixar lápis
Baixar Colorzilla
Folha de referências de cores W3C HTML
