Layout

Com as informações obtidas na fase 1 e organizadas na fase 2 passa-se ao layout propriamente dito, ou seja, o projeto do aspecto visual do site. Este aspecto visual deve refletir o conteúdo do texto, para que o visitante do site já perceba sua "atmosfera" antes mesmo de ler alguma coisa. Por outro lado, não pode ser tão exagerado a ponto de desviar a atenção da informação.

É importante lembrar que todo o site deve manter uma identidade visual, isto é, alguns elementos gráficos (como barras de navegação, tipos de letras, botões, etc) permanecem semelhantes por todas as suas páginas. A função disto é deixar bem claro ao visitante que as diversas seções ainda são parte do site que ele está visitando. Também é útil para reforçar visualmente o tema do site na mente do usuário.

O uso de cores deve ser cuidadosamente dosado. Quanto mais cores houver, mais difícil é combiná-las de forma agradável. Muitas vezes, usar uma paleta (uma seleção de cores) mais limitada pode criar uma aparência mais elegante e organizada para o site.

A home-page é a página mais importante do site. Cabe a ela captar o interesse do usuário e mostrar imediatamente tudo o que o site tem a oferecer. Por isso, a melhor tática é iniciar o projeto visual do site por ela. Uma vez que a home-page esteja definida, o seu visual é adaptado às outras páginas do site.

Geralmente é mais produtivo iniciar o projeto esboçando a home-page a lápis. Normalmente criam-se várias propostas, rabiscando-se miniaturas das páginas, mostrando as suas áreas principais. Uma vez que se defina um visual básico, o trabalho prossegue detalhando melhor cada área da página e indicando as suas cores básicas.

Para apresentação do trabalho, serão necessários os esboços de três páginas do site: a home-page, uma página de seção (as grandes áreas do site, geralmente ligadas à home-page) e uma página de conteúdo (as páginas mais abaixo no mapa de navegação, que seriam as " folhas " da árvore). É essencial que estejam coloridas no padrão de cores proposto para o site e suas áreas devidamente rotuladas, conforme o exemplo abaixo:

HOME-PAGE

SEÇÃO (DISCOGRAFIA)

CONTEÚDO

voltar ao topo