Os wireframes do site são desenhos de linhas simples que mostram o posicionamento de elementos em uma página da web. Você pode poupar muito tempo editando o layout de um wireframe simples no início do processo de design, em vez de um design complexo mais tarde.
O uso de wireframes é uma ótima maneira de iniciar um projeto de website, pois permite que você e seu cliente se concentrem no layout sem a distração de cor, tipo e outros elementos de design. Concentre-se no que acontece em suas páginas da Web e na porcentagem de espaço que cada elemento ocupa, que pode ser determinada pelas necessidades de seu cliente.
O que incluir em um site Wireframe
Todos os elementos importantes de uma página da Web devem ser representados no wireframe do site. Use formas simples em vez de gráficos reais e rotule-os. Esses elementos incluem:
- Navegação: botões para os usuários visitarem as principais seções do seu site.
- Logotipo da empresa: pode ser representado apenas por uma caixa.
- Áreas de conteúdo: onde suas diferentes seções de conteúdo serão exibidas?
- Caixas de pesquisa
- Áreas de login do usuário
Como criar wireframes de sites
Há várias maneiras de criar um wireframe de site. Eles incluem:
Desenhar à mão no papel
Este método vem a calhar quando cara a cara com um cliente. Esboçar suas idéias de layout no papel, com foco em quais elementos devem ir para onde.
Usando o Adobe Photoshop, Illustrator ou outro software
A maioria dos pacotes de software gráfico vem equipada com todas as ferramentas básicas necessárias para criar wireframes. Linhas simples, formas e texto (para rotular seus elementos) são tudo o que você precisa para criar um wireframe apresentável.
Usando o software criado para este tipo de tarefa
Enquanto o Photoshop e o Illustrator podem fazer o truque, alguns pacotes de software são desenvolvidos especificamente para esse tipo de trabalho. O OmniGraffle é um software que simplifica a criação de wireframes, fornecendo ferramentas de forma, linha, seta e texto para usar em uma tela em branco. Você pode até baixar conjuntos de gráficos personalizados (gratuitamente) no Graffletopia, que oferece mais elementos, como botões comuns da Web, para trabalhar.
03 de 03Os benefícios
Com wireframes website, você tem a vantagem de ajustar um desenho de linha simples para alcançar o layout desejado. Em vez de mover elementos complexos em torno de uma página, pode levar muito pouco tempo arrastar algumas caixas para novas posições. Também é muito mais produtivo para você ou seu cliente focar no layout primeiro … você não começará com comentários como "Eu não gosto dessa cor lá!" Em vez disso, você começará com um layout finalizado e estrutura em qual basear seu projeto.
