Como criar um site estático, parte 2: design
Depois de conhecer a primeira fase (Como Criar um Website Estático, Parte 1: Estratégia) de criação de um website, avançamos para a fase seguninte: o Design.
2.1. Sitemap
Um sitemap, como o próprio nome leva a crer, é o mapa do website. São todos os caminhos possíveis que o visitante poderá seguir até atingir certo objetivo. Este ajuda a clarificar os objetivos, a estruturar caminhos de conversão (ex.: Homepage > Categoria de Produto > Produto > Carrinho de Compras > Checkout > Confirmação de Compra > Homepage), mas também a precaver possíveis problemas de usabilidade.
2.2. Sketching
É aqui que começamos a passar para o papel as ideias que poderão (ou não) ser utilizadas para o desenvolvimento da interface visual da plataforma. Nesta fase, não podem ser delineados limites, todas as ideias contam e qualquer uma delas poderá levar a uma solução lógica.
Esta fase, apesar de não parecer, poupa bastante tempo na construção porque torna muito mais fácil criar, alterar e apagar as diferentes possibilidades quando estas estão em papel.
2.3. Wireframes
Um wireframe é o “esqueleto” de cada página que existirá no website. Geralmente, é um conjunto de desenhos, compostos por linhas que delimitam onde começam e acabam os elementos que compõem a estrutura da página… Respondem a questões como “Onde vai estar o slider, na homepage?”, “Que altura irá ter?” ou “Onde, e como, irá aparecer o formulário de contactos?”.
Fundamentalmente, o principal propósito desta fase é delimitar o espaço que irá ser usado no ecrã por cada elemento que irá compor a página. É também aqui que começamos a passar as ideias para o computador, através de programas de edição de imagem e desenho vectorial, como o Adobe Photoshop ou o Illustrator.
2.4. Mockups
Depois de criados todos os wireframes, está na hora de lhes dar estilo! Sim, nesta fase determinamos tipos de letra, palete de cores, sombras… enfim, no fundo é como pintar um edifício depois de o colocar de pé. É, no fundo, o protótipo final daquilo que será o produto final antes de passar para o código.