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.

web design site sitemap

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.

web design site sketch

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.

web design site wireframe

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.

web design site mockup

Continuar para: Como Criar um Website Estático, Parte 3: Código