O lápis é uma ferramenta de wireframing que podemos usar para esboçar uma simulação da interface do usuário de nosso aplicativo. A melhor coisa sobre o Pencil é que ele é leve, fácil de usar e totalmente integrado ao Firefox. Em cima de tudo isso é um aplicativo gratuito de código aberto! No final do artigo, vamos dar-lhe uma demonstração simples sobre como usar o lápis para criar um Brizzly como wireframe.
Por que criamos wireframes?
Um wireframe é um esboço de uma ideia de layout de página. Um wireframe foca no design de informações de uma página para garantir que o design se adapte ao que o usuário precisa. Um wireframe geralmente consiste em diferentes formas (como caixas, ovais e diamantes) para representar elementos de conteúdo, funcionais e de navegação. Essas formas exibem seu posicionamento na página.
No começo, pode parecer uma perda de tempo criar esboços de uma página. Um quadro de arame é importante para que seus usuários se concentrem no elemento de importância da sua página. Criar um esboço de uma página, sem elementos visuais extravagantes, direciona a atenção do usuário para elementos importantes, como tamanho, 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 focar nos elementos importantes de uma página. A criação de uma estrutura de arame permite que você e seus usuários colaborem de maneira eficaz e identifiquem o possível problema de design antecipadamente.
Começando com o lápis
Faça o download do Pencil da página de complementos do Pencil. Depois de instalar o Lápis, ele pode ser acessado em "Ferramentas"> "Lápis de esboço".
Criando um retângulo
A primeira etapa da criação de uma forma de armação de arame é arrastar uma forma do menu "Coleções de formas" para a tela.
Criando Guias
As guias de imagem, rascunho e imagem são três guias empilhadas umas sobre as outras. Arraste três "Tabs Panel" para o retângulo. Redimensione cada guia para que cada guia seja exibida lado a lado.
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 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. Descobrir o código HTML de uma determinada cor pode ser difícil. Podemos usar a folha de dicas de cores HTML do site w3cschools.com para procurar o código HTML correto para uma determinada cor.
Também gostamos de usar o colorzilla para escolher cores na tela e usá-las em 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 de colírio. Basta copiar e colar o código hexadecimal no código HTML colorido da Pencil.
Conclusão
Lápis é fácil de usar ferramenta de wireframing. A integração de lápis com o Firefox possibilita que usemos outro plug-in do Firefox para ajudar a criar um wireframe melhor
Links Baixar Lápis Baixar Colorzilla Folha de Colas de Cor HTML W3C
