Use o Firefox para criar mockups simples

O Pencil é 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. No topo 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 sua veiculação na página.

No começo, 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 da sua página. Criar um esboço de uma página, sem elementos visuais extravagantes, desloca 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 eficiente e identifiquem o possível problema de projeto no início.

Começando com o lápis

Faça o download da página de complementos do Pencil from Pencil. Depois de instalar o Pencil, ele pode ser acessado em 'Ferramentas'> 'Pencil Sketching'.

É 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 armação de arame. As formas principais neste wireframe são, retângulos, caixas de texto e tabulações. A próxima seção do artigo dará um exemplo simples de como criar cada forma.

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.

Redimensione o retângulo para uma largura e altura adequadas.

Podemos personalizar o texto, a borda e a cor de fundo de qualquer forma em Lápis. Clique com o botão direito no retângulo e selecione 'Propriedades' para abrir as janelas Propriedades. Esta é a tela de propriedades do plano de fundo. Defina a cor do plano de fundo 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 o peso da borda para 1.

A tela de propriedades de texto nos permite personalizar o tipo de fonte, tamanho, estilo, peso, cor, brilho e opacidade do texto..

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 mostre lado a lado.

Abra a tela de propriedades do texto para ajustar a cor da fonte das abas 'Fotos' e 'Rascunho'. Defina como Cinza (# 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 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 de w3cschools.com para procurar o código HTML correto para uma determinada cor.

Também gostamos de usar o colorzilla para escolher as cores da 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 Hex no código HTML colorido do 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 Cola da Cor HTML W3C