Como fazer um esquema esquemático

Uma vez que o website de sua empresa evolua além de um diagrama de site básico, você pode começar a tomar decisões sobre o que acontece em páginas individuais. Um site esquemático, ou wireframe, apresenta as porcas e parafusos da funcionalidade da página sem incorporar os elementos de design, esquemas de cores, estilos de tipo ou elementos interativos em si. Pense no esquema como uma planta baixa e na página final como uma sala mobiliada. Em vez de repintar paredes e reorganizar ou substituir móveis para alterar o modo como suas páginas se juntam, você pode planejar seu espaço on-line usando caixas e espaços reservados que estabelecem como as páginas do site funcionam.

1

Listar os itens recorrentes que aparecerão em suas páginas. Isso inclui elementos como seu logotipo, navegação no site, áreas de foto, áreas de texto, cabeçalhos, rodapés e barras laterais.

2

Desenhe um diagrama que mostra os tamanhos relativos dos elementos da página e suas posições vertical e horizontal. Você pode esboçar este diagrama no papel, desenvolvê-lo em um programa de edição ou ilustração de imagens ou montá-lo usando um aplicativo de wireframing on-line.

3

Crie um diagrama de páginas para cada tipo de página que seu site requer. Sua página inicial pode apresentar um subconjunto diferente de elementos de página do que uma página de produto ou serviço, página de contato ou blog.

4

Use o texto do marcador de posição para indicar onde a verbosidade aparece. Você pode escolher entre fontes com serifa e sem serifa, mas um esquema não é o lugar para experimentos de estilo de tipo e demonstrações.

5

Anote seus wireframes com notas sobre como os elementos funcionam ou onde eles se conectam. Adicione ícones vinculados a sites ou serviços externos, incluindo RSS, Twitter, Facebook e sites de parceiros ou fabricantes.

6

Circule seus wireframes para revisão, discussão e aprovação, alterando-os conforme necessário. Quando você alcança o ponto em que seus esquemas incluem todos os elementos recorrentes que suas páginas reais exigem, e a posição relativa e o tamanho dos elementos se ajustam às necessidades do seu site, você pode avançar além do estágio de wireframe.

Dicas

• Os esquemas do site normalmente precedem os mockups e os protótipos no processo de design. Mockups mostram esquemas de cores, estilos de tipos e outros detalhes de design em formulários que você está realmente considerando implementar. Os protótipos avançam além dos mockups para exemplos bem formatados que mostram a aparência real da página.
• Se você planeja criar uma versão do seu site para celular, bem como uma versão baseada em navegador, talvez seja necessário criar esquemas para mais de um fluxo de design.
• Se você desenhar seus esquemas manualmente, use canetas ou lápis coloridos para enfatizar áreas específicas de seus layouts de página que tenham mais importância no processo de design ou desenvolvimento. Por exemplo, você pode selecionar uma cor específica para representar os módulos a serem codificados por um indivíduo específico. Essas cores indicam elementos de planejamento, não opções de design.

Aviso

• Se você desenvolver seus esquemas em uma ferramenta de design de sites e criar CSS para seus wireframes, evite transformar a fase esquemática do desenvolvimento de sites em um exercício de design. Os wireframes transmitem recursos, não estilo.