Wireframes: Definição e Importância

Prévia do material em texto

1 
 
O que são wireframes? 
Originalmente, o termo “wireframe” descrevia uma representação 
visual de objetos tridimensionais, como aqueles usados na 
concepção e no desenvolvimento de produtos. 
 Atualmente, o termo também é usado para descrever a modelagem 
3D em animações por computador e na concepção e no 
desenvolvimento de páginas web em 2D e aplicativos móveis. 
 
 
2 
 
 
 
São cinco as principais finalidades ou objetivos dos wireframes. 
1. Auxiliar o designer 
Seja na diagramação dos conteúdos ou na aplicação da 
identidade visual, ter um wireframe em mãos ajuda muito 
o designer a desempenhar bem seu trabalho. 
Economiza tempo e reduz possíveis dores de cabeça com 
retrabalhos em cima do prazo de entrega, entre outras 
discussões. 
2. Base para considerar mudanças em um projeto 
É uma característica que facilita muito a inserção de novas 
sections em uma página web, por exemplo, ou para colocar 
novas funcionalidades em um app. 
3 
 
3. Evitar atrasos e gastos 
Quando você elabora um wireframe antes de entregar o 
projeto concluído, evita transtornos como atrasos e gastos. 
4. Facilitar o alinhamento com o cliente 
Fica mais fácil para que ele veja, entenda e assimile o que 
deve estar em cada página e, com isso, pensar junto em 
possíveis ajustes ou melhorias. 
5. Promover o desenvolvimento de variações de layout 
Outra grande vantagem de trabalhar com wireframes, seja 
em versão manual quanto online, é desenvolver variações 
de layout mantendo a consistência do design. 
 
O valor de wireframes para o desenvolvimento de sites e 
aplicativos 
Economiza tempo e dinheiro. 
A estrutura é bem simples e só tem três coisas básicas – cabeçalho, 
corpo do texto e rodapé. 
Tipos de wireframe: 
1. Wireframe de baixa fidelidade 
É o mais simples de todos, normalmente sem cores e com o mínimo 
de detalhes, como o feito com caneta e papel. 
2. Wireframe anotado 
É como um “upgrade” do básico, pois aqui você acrescenta 
detalhes como descrição de itens e pode usar uma legenda para 
identificar cada um. 
4 
 
Por exemplo: (1) para cabeçalho, (2) para link de inscrição, (3) para 
testemunhos de clientes. Você também pode explicar para que 
serve cada um. 
Pode ser feito tanto à mão quanto digitalmente. 
3. Wireframe de alta fidelidade 
É o modelo que se aproxima muito do resultado final. Permite 
interatividade (como cliques, por exemplo). 
 
Existem ferramentas pagas e a versão gratuita pra fazer um 
wireframe: 
• Pagas: Adobe inDesign, Adobe Illustrator, Photoshop 
• Versão gratuita: gliffy, Axure, Lucidchart, Wireframe cc, 
PhotoShare