06c - Introdução Pencil

Prévia do material em texto

27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 1/64
Iremos começar a criar uma interface para um site chamado Guia do Mochileiro
do Software Livre. O Guia do Mochileiro do Software Livre é um site exemplo que
mostra os melhores softwares disponíveis do nosso amado GNU/Linux �ltrados
de acordo com as avaliações dos usuários. O objetivo da criação desse site é
treinarmos um �uxo que vai do design, passando pelo desenvolvimento web
front-end e terminando com a integração no backend do Winter CMS. Será
uma longa jornada, mas acredito que aprenderemos e nos divertiremos muito no
processo.
Sobre wireframes, protótipos e mockups
Para iniciarmos, é importante entender as diferenças entre wireframes,
protótipos e mockups. O wireframe é uma representação de menor �delidade de
um design. O protótipo é uma representação interativa de média a alta �delidade
do produto �nal. Finalmente, o mockup é uma representação estática de média a
alta �delidade do produto �nal. Explicando melhor,
O wireframe é uma representação de baixa �delidade do design. Ele é a
espinha dorsal do seu design e deve conter as partes mais importantes dele
como, por exemplo, os principais blocos de conteúdo, a estrutura da
informação e a visualização básica que o usuário irá interagir.
O protótipo é uma representação de média a alta �delidade do produto
�nal, simulando a interação da interface e contendo a experiência com o
conteúdo e as principais interações que devem existir no produto �nal.
Introdução à criação de wireframes com o Pencil
#Design de Interfaces #Pencil #Web Design
PT-BR
 4 3 7904
Libre Designers
https://pt.wikipedia.org/wiki/Front-end_e_back-end
https://pt.wikipedia.org/wiki/Front-end_e_back-end
https://wintercms.com/
https://libredesigners.org/pt-br/blog/category/design-de-interfaces
https://libredesigners.org/pt-br/blog/category/pencil
https://libredesigners.org/pt-br/blog/category/web-design
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil
https://libredesigners.org/rss/
https://libredesigners.org/pt-br
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 2/64
Mockup é uma representação estática de média a alta �delidade do
produto �nal, muitas vezes possuindo o design do resultado �nal, sendo
muito útil para visualização estática.
Por que usar wireframes?
Wireframes são usados principalmente para servir de comunicação entre os
membros do projeto e devem ser feitos rapidamente para comunicação das
idéias, ilustrando apenas as partes mais importantes. Geralmente são usados no
início do projeto.
Na imagem abaixo, você pode visualizar um exemplo de wireframe que iremos
montar logo mais.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 3/64
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 4/64
Pencil Project
O projeto Pencil se de�ne como uma ferramenta de Código Aberto de
prototipação de GUI [ Graphical User Interface (Interface Grá�ca com o Usuário) ]
 disponível em todas as plataformas e está sob a licença GPLv2.
Instalação
Para instalar o Pencil basta clicar neste link e fazer o download referente ao seu
sistema operacional ou distribuição GNU/Linux. No caso, se seu sistema for
baseado em ubuntu 64 bits você vai baixar .deb 64 bit ou se for baseado em
fedora 64 bits o .rpm 64 bit (ver imagem abaixo).
Para instalar o .deb, navegue no terminal até a pasta onde está o .deb e execute:
https://pencil.evolus.vn/
https://pencil.evolus.vn/Downloads.html
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 5/64
sudo dpkg -i pencil_3.1.0.ga_amd64.deb
Caso o pencil não tenha sido instalado, faltando alguma dependência, execute:
sudo apt-get -f install
Caso queira remover o pacote instalado, escreva no terminal:
sudo apt-get remove pencil
Para instalar o .rpm , navegue no terminal até a pasta onde está o arquivo .rpm e
execute:
sudo dnf install pencil-3.1.0.ga-1.x86_64.rpm
Caso queira remover o pacote instalado, escreva no terminal:
sudo dnf remove pencil
Con�gurações iniciais
Depois de instalado o Pencil, abra-o pelo lançador de aplicativos ou no terminal
execute o comando pencil.
A tela inicial do aplicativo será exibida. Caso a resolução da tela esteja muito alta,
é interessante diminuirmos um pouco a escala do texto para navegar melhor na
interface do pencil. Para isso, clique no ícone do hamburguer no canto superior
esquerdo e vá em settings (ver imagens a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 6/64
Altere o text scale para uma porcentagem que �que agradável na sua tela (ver
imagem a seguir)
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 7/64
Clique na aba shape e clique no botão manage collections  (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 8/64
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 9/64
Deixe ativas as seguintes coleções, pois serão as únicas que iremos precisar
inicialmente (ver imagem a seguir):
Common Shapes
Basic Web Elements
Desktop - Sketchy Gui
Caso seja necessário podemos inserir ou remover coleções posteriormente.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 10/64
Começando o projeto
Para criar um novo documento basta clicar no botão Create a New Document (ver
imagem a seguir).
Um documento em branco será criado (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 11/64
Utilize as teclas de atalho ctrl + s para salvar. Dê um nome descritivo. O nome
que vou escolher é mochileiro-software-livre (ver imagem a seguir).
Vá nas propriedades da página atual (no canto inferior esquerdo, clique com o
botão direito na região Untitled Page e no menu que surge escolha a opção
properties), renomeie o Page Title para Home e ajuste o Page Size para 1200px de
largura por 1600px de altura (ver imagens a seguir):
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 12/64
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 13/64
Vamos usar um sistema de grid semelhante ao feito para o inkscape no artigo
Sistemas de Grid com Inkscape. Eu criei uma imagem que servirá como grid.
Clique aqui para baixar a imagem.
Salve-a numa pasta acessível e deixe a janela do seu gerenciador de arquivos
num tamanho pequeno e por cima da janela do Pencil. Agora clique no arquivo
grid1200.png segure e arraste para a janela do Pencil (ver imagens a seguir).
https://libredesigners.org/blog/post/sistemas-de-grid-com-inkscape
https://libredesigners.org/storage/app/media/artigos/06-pencil-project-wireframe/grid1200.png27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 14/64
Com o grid selecionado, na parte superior coloque a localização (x,y) para (0,0) e
o tamanho horizontal e vertical para 1200px de largura por 1600px de altura (ver
imagens a seguir).  
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 15/64
Em seguida, vamos bloquear o grid para não nos atrapalharmos ao montarmos o
wireframe. Para isso, com a imagem do grid selecionado clique com o botão
direito sobre a imagem do grid e escolha a opção locked (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 16/64
Inserindo os elementos
Header
Para o Guia do Mochileiro do Software Livre, acho que seria interessante colocar
uma imagem desfocada de fundo no cabeçalho com o título e subtítulo do site
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 17/64
por cima da imagem. Então, vamos inserir uma imagem e redimensioná-la para
ocupar toda a largura. Para isso, na coleção Desktop Sketchy GUI clique,
segure e arraste o item Image para o canvas (ver imagem a seguir).
Redimensione a imagem para 1200px de largura por 150px de altura e
posicione-a na origem (0,0) (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 18/64
Vamos bloquear o background. Para isso, clique com o botão direito no elemento
Image e escolha a opção Locked.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 19/64
Na coleção Basic Web Elements, vamos inserir um título de cabeçalho H1 (ver
imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 20/64
Clicando duas vezes em cima para alterar o conteúdo do texto. Aparecerão
ferramentas de contexto em que você pode alterar fonte, alinhamento, entre
outras propriedades. Escreva o texto "Guia do Mochileiro do Software Livre" e
escolha a fonte Open Sans tamanho 3.
Vamos inserir agora um subtítulo com slogan "Coletânea dos melhores softwares
para o seu GNU/Linux". Para isso, vamos arrastar o elemento H2 para o canvas
(ver imagem a seguir). 
https://libredesigners.org/storage/app/media/artigos/05-instalando-fontes/Open_Sans.zip
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 21/64
Novamente, clique 2 vezes em cima do texto Heading Level 2. Surgirá uma caixa
de ferramentas de contexto. Selecione a fonte Open Sans e tamanho 2 (ver
imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 22/64
Alinhe o títúlo e o subtítulo com o início da segunda coluna do nosso grid.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 23/64
Depois de alinhado, com a tecla ctrl pressionada selecione o títúlo e o subtítulo e
pressione a tecla de atalho ctrl+g para agrupar (você também pode clicar com o
botão direito e selecionar a opção de agrupar). Agrupamentos são úteis, entre
outras coisas, quando queremos movimentar ou duplicar os elementos
agrupados juntos.
O Guia do Mochileiro do Software Livre funcionará melhor com a interação de
usuários. Os usuários poderão cadastrar novos softwares livres e poderão avaliar
os softwares já cadastrados que farão com que os softwares com pontuação
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 24/64
j q q p ç
mais alta sejam exibidos primeiro. Precisamos de um botão que leve para a tela
de cadastro de usuários e outro que leve para a tela de login, para usuários já
cadastrados. Vamos fazer isso agora.
Ainda na coleção Desktop - Sketchy Gui selecione o Button e arraste para o
canvas na altura do elemento H1.
Nas propriedades do elemento botão, altere o conteúdo do campo content para
"Login", modi�que a fonte para Open Sans tamanho 16 e alinhamento
centralizado (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 25/64
Ainda com o botão selecionado, com a tecla shift pressionada clique, segure e
arraste o botão login para a esquerda (ver imagem a seguir). Esses comandos
irão duplicar o botão original (ver imagem a seguir).
Eu estava pensando em colocar o botão mais a direita como login, mas acho que
é melhor colocar o botão da esquerda.
Selecione o botão da direita e troque seu conteúdo para "Cadastre-se" (ver
imagem a seguir)
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 26/64
imagem a seguir).
Temos o Header �nalizado.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 27/64
Seção Principal
Na seção principal, eu quero exibir uma lista de programas. A idéia é que cada
programa seja um card com uma imagem de fundo e título e pontuação (em
estrelas) em cima do fundo. Quando o usuário colocar a seta do mouse em
algum card será feita uma animação (a de�nir) com o fundo. Além disso, eu
quero que tenha uma lista de categorias com que o usuário possa listar os
programas da categoria quando selecionado. A princípio, a lista de programas
estará sem �ltro, mostrando programas de todas as categorias.
Barra de Categorias
As categorias que pensei inicialmente são:
Distribuições
Jogos
Produtivadede
Design
Áudio
Vídeo
Vamos começar inserindo botões que servirão de �ltros das categorias. Insira um
primeiro botão (ver imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 28/64
Altere as propriedades (conteúdo, fonte e tamanho da fonte) do elemento botão
(ver imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 29/64
Redimensione o botão para que �que um tamanho agradável. No meu caso, 135
pixels de largura por 35 pixels de altura �cou um tamanho legal (ver imagem
abaixo).
Duplique o botão 5 vezes (para isso com a tecla shift pressionada clique e arraste
o botão que queremos fazer a cópia). Ao duplicar, a cópia do elemento guarda as
informações das propriedades do elemento de origem.
Renomeei os botões clicando duas vezes em cima de cada um e inserindo os
nomes (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 30/64
Arraste o elemento Sketchy Triangle para o canvas.
Remova o texto clicando das vezes no elemento Sketchy Triangle eapagando seu
conteúdo. Redimensione-o para que sua altura �que to tamanho do botão de
categoria e duplique-o. Ao duplicar clique 2 vezes no objeto duplicado e
aparecerá alças de rotação. Rotacione-o 180 graus (Ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 31/64
Alinhe os elementos como mostrado na �gura abaixo.
Selecione todos os elementos que compõem a barra de categorias (fazendo uma
caixa de seleção ou pressionando ctrl e clicando individualmente em cada botão)
e clique no botão Align Center Vertically e Make Same Horizontal Gap.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 32/64
Ainda com os elementos da barra de categorias selecionados aperte a tecla de
atalho ctrl + g para agrupar.
Monstruário de Softwares Livres
Agora iremos criar a área onde os diferentes softwares são exibidos, ordenados
por avaliações dos usuários. Cada software vai �car delimitado em um card. Cada
card terá um background, um titulo, e a média das avaliações atuais.
Primeiramente, vamos adicionar uma imagem (ver imagem à baixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 33/64
Depois de alguns testes achei que o tamanho 300px de largura por 230px de
altura �cou um bom tamanho (ver imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 34/64
Insira um label e altere sua fonte para Open Sans e tamanho 20px (ver imagens
as seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 35/64
Para representar a avaliação dos usuários a princípio eu queria usar estrelas,
mas como procurei nas coleções por uma estrela e não encontrei, utilizei um
diamante para representar o score do aplicativo e �cou bem interessante. Na
aba Common Shapes selecione o diamente.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 36/64
Antes que eu me esqueça, vamos renomear o label para um programa. Vamos
renomear para Blender. Clique duas vezes em cima do label e altere o nome na
caixa de texto (ver imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 37/64
Vamos diminuir o diamante para um tamanho 29px de largura por 30px altura e
colocar sua cor como preta (ver imagem abaixo).
Posicione o diamante logo abaixo do nome Blender.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 38/64
Duplique (com a tecla shift pressionada selecione o diamante e arraste) o
diamante 4 vezes e ordene-o como na �gura abaixo.
Selecione (com a tecla ctrl pressionada ou fazendo uma caixa de seleção) os 5
diamantes e aperte nos ícones Align Middle Verically e Make Same
Horizontal Gap.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 39/64
Agrupe os diamantes, o label "Blender" e o background com a tecla de atalho
ctrl + g. Agora duplique o grupo (com a tecla shift pressionada arraste o grupo
para a direita) 2 vezes (ver �gura abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 40/64
Eu renomeei os labels duplicados para Inkscape e Gimp para deixar o wireframe
mais interessante.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 41/64
Duplique novamente a caixa blender (com a tecla shift clique e arraste o grupo
para baixo) (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 42/64
Duplique a caixa debaixo, posicionando-o a sua direita (ver imagem a seguir).
Desagrupe a ultima caixa e altere a largura e altura do elemento Imagem para
640px e 230x, respectivamente (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 43/64
Agrupe novamente a caixa grande e duplique-a, posicione-a no início da terceira
linha (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 44/64
Duplique o primeiro card da 2º linha posicionando-o no �nal da 3º linha (ver
imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 45/64
Agrupe (ctrl+g) a primeira linha de cards (ver imagem a seguir).
Duplique a primeira linha de cards, posicionando-a embaixo da 3º linha (ver
imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 46/64
Desagrupe a ultima linha de cards e opcionalmente dê alguns nomes diferentes
aos labels dos outros cards para �car mais interessante (ver imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 47/64
Agrupe cada linha (ctrl+g) individualmente (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 48/64
Selecione os 4 grupos referentes as 4 linhas de cards (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 49/64
Após selecionado, pressione o botão Make same vertical gap (ver imagem a
seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 50/64
Antes que eu me esqueça, vou corrigir a acentuação que estava faltando nos
botões áudio e vídeo (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 51/64
Pronto. Embora se trate de um web app para descoberta e avaliação de
aplicativos para o nosso amado GNU/Linux acho que é interessante ter um
campo de busca. Vamos adicioná-lo. 
Vamos começar adicionando um elemento Box da coleção Desktop - Sketchy
GUI (ver imagem a seguir).
Coloque o tamanho da caixa para 200 px de largura por 35 px de altura (ver
imagem a seguir).
https://en.wikipedia.org/wiki/Web_application
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 52/64
É interessante queusemos um ícone de busca. Vamos usar uma imagem (ver
imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 53/64
Vamos redimensionar a imagem para 30px de largura por 30px de altura.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 54/64
Vamos adicionar um texto (label).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 55/64
Modi�que o conteúdo do label para Buscar, cor preta, fonte Open Sans de
tamanho 16 (ver imagem a seguir).
Ajuste os itens e agrupe os elementos que compoem o campo de busca.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 56/64
Rodapé
Para o rodapé vamos apenas usar um retângulo com alguma cor de background
e um label com o texto "Um exemplo para o Libre Designers".
Primeiro, adicione um retângulo (ver imagem abaixo).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 57/64
Coloque o tamanho para 1200px de largura por 150px de altura
Clique duas vezes no retângulo e insira o texto "Um exemplo para o Libre
Designers".
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 58/64
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 59/64
Apenas um detalhe que eu deixei passar, vamos renomear o último card da 3º
linha para "Audacity". Assim, todos os cards �cam com um nome diferente (ver
imagem a seguir).
Finalmente, terminamos o wireframe da página Home (ver imagem a seguir).
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 60/64
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 61/64
Codefail 3 anos atrás
Um belo artigo meus parabéns, Lacaster!
Las 3 anos atrás
Finalizando a introdução
Espero que essa introdução tenha contribuído em algo caso você queira criar
wireframes com o Pencil Project. Nos próximos artigos estaremos fazendo um
mockup do Guia do Mochileiro do Software Livre. Aguardo você lá. :-)
Arquivo �nal:
O arquivo �nal do projeto você pode baixar clicando aqui.
Fonte:
https://designmodo.com/wireframing-prototyping-mockuping/
Este artigo foi escrito por Las em 18 maio 2018.
Las acredita que o compartilhamento do conhecimento e da
informação é uma forma de tornar o mundo melhor.
Curtir 3 curtidas
4 comentários
https://libredesigners.org/storage/app/media/artigos/06-pencil-project-wireframe/arquivo-final/project.zip
https://designmodo.com/wireframing-prototyping-mockuping/
https://libredesigners.org/pt-br/usuario/1
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 62/64
Valeu Codefail. xD
Bom ver você por aqui.
Mikael Hadler 3 anos atrás
QUE POST MARAVILHOSO BROTHER!
Sério, foi muito esclarecedor!
Muitíssimo obrigado e parabéns pelo conteúdo de qualidade.
Las 3 anos atrás
Obrigado pelas palavras de apoio Mikael Hadler.
Em breve, estarei lançando um novo artigo.
Logar
Realizar Login
Email
Insira seu email
Senha
Insira sua senha
Cadastrar
Para curtir o artigo ou postar uma mensagem é necessário logar ou criar uma
conta, caso não tenha uma.
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 63/64
Cadastrar
Nome
Insira seu nome.
Email
Insira seu e-mail
Senha
Escolha uma senha
Outros artigos
Anterior
06 set, 2017
Instalando fontes tipográ�cas
manualmente no GNU/Linux
Próximo
30 nov, 2018
Design de Interfaces com
Inkscape (Parte 1)
Sobre
Contato
Junte-se a nós
Sobre
Comunidade
GNUGRAF
Libre Graphics Meeting
Redes Sociais
diaspora*
Software Livre Brasil
Odysee
Recursos
Recursos Gratuítos
Recursos Pagos
Usuário
Login
Registrar
https://libredesigners.org/pt-br/blog/post/instalando-fontes-tipograficas-no-gnulinux
https://libredesigners.org/pt-br/blog/post/design-de-interfaces-com-inkscape-parte-1
https://libredesigners.org/pt-br/contato
https://libredesigners.org/pt-br/junte-se-a-nos
https://libredesigners.org/pt-br/sobre
http://www.gnugraf.org/
https://libregraphicsmeeting.org/
https://www.joindiaspora.com/people/3558901066760135f20d0242ac110007
http://softwarelivre.org/profile/libre-designers
https://odysee.com/@LibreDesigners:a
https://libredesigners.org/pt-br/recursos-gratuitos
https://libredesigners.org/pt-br/recursos-pagos
https://libredesigners.org/pt-br/conta/login
https://libredesigners.org/pt-br/conta/registrar
27/04/2022 13:56 Libre Designers - Introdução à criação de wireframes com o Pencil
https://libredesigners.org/pt-br/blog/post/introducao-criacao-de-wireframes-com-o-pencil 64/64
https://creativecommons.org/licenses/by-sa/3.0/br/