Um wireframe da Web é um guia visual simples para mostrar como uma página da Web seria. Sugere a estrutura de uma página, sem usar nenhum gráfico ou texto. Um wireframe de site mostraria toda a estrutura do site - incluindo quais páginas apontam para onde.
Os wireframes da Web são uma ótima maneira de começar seu trabalho de design. E embora seja possível criar wireframes complexos com grandes quantidades de detalhes, seu planejamento pode começar com um guardanapo e uma caneta. A chave para fazer bons wireframes é deixar de fora todos os elementos visuais. Use caixas e linhas para representar imagens e texto.
Coisas para incluir em uma página da Web wireframe:
- caixas para elementos gráficos primários
- colocação de manchetes e sub-cabeças
- uma estrutura de layout simples
- apela à ação
- blocos de texto
Como construir um wireframe simples na web
Crie um wireframe de página da Web usando qualquer pedaço de papel que você tenha à mão. Aqui está como eu faço:
- Desenhe um retângulo grande - isso pode representar a página inteira ou apenas a parte visível. Eu geralmente começo com a parte visível e, em seguida, expandi-lo para incluir elementos que seriam abaixo da dobra.
- Esboce o layout - são 2 colunas, 3 colunas?
- Adicionar em uma caixa para um gráfico de cabeçalho - Desenhe sobre suas colunas se você quiser que seja um único cabeçalho acima das colunas, ou apenas adicione-o onde quiser.
- Escreva "Headline" onde você quer que seu título H1 seja.
- Escreva "Sub-Head" onde você deseja H2 e menores títulos. Isso ajuda se você torná-los proporcionais - h2 menor que h1, h3 menor que h2, etc.
- Adicione caixas para outras imagens
- Adicione na navegação. Se você está planejando guias, apenas desenhe caixas e escreva "navegação" por cima. Ou coloque listas com marcadores nas colunas onde você deseja a navegação. Não escreva o conteúdo. Basta escrever "navegação" ou usar uma linha para representar o texto.
- Adicione elementos adicionais à página - identifique o que eles são com texto, mas não use o texto de conteúdo real. Por exemplo, se você quiser um botão de ação na parte inferior direita, coloque uma caixa lá e rotule-o de "apelo à ação". Não escreva "Compre Agora!" nessa caixa.
Uma vez que você tenha escrito seu wireframe simples, e não deve levar mais de 15 minutos para desenhar um, mostre para outra pessoa. Pergunte se há algo faltando e outro feedback. Com base no que eles dizem, você pode escrever outro wireframe ou manter o que você tem.
Por que os Wireframes de papel são os melhores para os primeiros rascunhos
Embora seja possível criar wireframes usando programas como o Visio, para suas sessões iniciais de brainstorming, você deve se ater ao papel. O papel não parece tão permanente, e muitas pessoas vão presumir que você jogou tudo em 5 minutos e, portanto, não hesite em lhe dar um bom feedback. Mas quando você usa um programa para criar wireframes extravagantes com quadrados e cores perfeitos, você corre o risco de ser pego no próprio programa e passar horas aperfeiçoando algo que nunca será lançado.
Os wireframes de papel são fáceis de fazer. E se você não gosta, simplesmente amassa o papel, joga em reciclagem e pega uma nova folha.
