Mockup design: desenhar as primeiras linhas do teu site

No último artigo falámos ao de leve sobre aquilo que deve ser o processo antes do inicio do desenho do site. Definição de objectivos, fontes de tráfego e tudo o mais que deve ser pensado antes da implementação, seja num site quer mesmo noutro tipo de projectos. Hoje então é hora de começar os primeiros esboços e pensar naquilo que queres que o teu visitante veja.

1. Tens alguma ideia no cérebro para passar para o papel?

É a primeira pergunta que se deve fazer, se não há imaginário com ideias então rasga a folha e volta ao artigo anterior. Volta a pensar, a definir objectivos e a fazer esboços mentais antes de os passar para o papel. Conheces algum pintor que tenha desenhado um bom quadro sem antes ter absolutamente nada em mente? Bem, se calhar até há, mas são as excepções, não são a regra.

2. Começa por pôr as tuas ideias numa folha de papel. NÃO, ainda não é para desenhares!

O primeiro passo é esquematizar aquilo que já tens pensado. Um exemplo é um site de futebol, imagina que tens um passatempo que é uma espécie de liga entre os participantes, provavelmente irás precisar de um espaço para a classificação e resultados e… se esse até é uma das coisas que mais atenção vai chamar ao visitante, provavelmente merece um lugar de destaque. Começa a pensar onde ficaria bem, no topo? na barra lateral? vai variar conforme a altura? Tudo isso são decisões tuas.

3. Agora sim, começa a desenhar tudo, mas mesmo tudo (!) o que puderes.

A parte do desenho é a mais importante. Todo o tempo que for gasto aqui, a pensar, a desenhar, a apagar, a pensar outra vez e neste ciclo contínuo só vai poupar trabalho e tempo nas fases seguintes e melhorar a qualidade e usabilidade do site. Folha branca na mesa (quadriculada ajuda por causa das linhas e dos espaços), e começar a esboçar tudo o que irá acontecer. Não te limites em fazer a ‘homepage’, vai mais longe e planifica (ainda que por alto), desde essa página inicial, à página de serviços (se se aplicar), ou à página de contactos. Tudo o que existe deve ter primeiro um desenho geral… a sério, nem acreditas no tempo que isso te vai poupar mais à frente.

4. Mas eu sou preguiçoso e/ou não tenho cadernos brancos em casa, não há um programa qualquer para ajudar nisso?

Há. Não é coisa que aconselhe a não ser para quem já fez vários desenhos à mão para vários sites e já não tem necessidade de recorrer primeiro à esquematização. No entanto volto a avisar, a não ser que já tenhas muita experiência, aconselho a primeiro desenhares com um lápis e uma borracha num caderno normal. Só depois sim, podes pôr as coisas mais organizadas numa folha de papel.

Para essa tarefa há vários programas no mercado que te podem ajudar, nomeadamente estes aqui mas o que sem dúvida aconselho a todos é o mockflow.com que tem uma diversidade quer de templates quer depois de caixas já feitas impressionante. Já sabes, mesmo que tenhas feito os desenhos à mão, aconselho-te a passares tudo para aqui “a limpo” e imprimires. Vai ser uma ajuda preciosa.

5. Usando o mockFlow – precisas de ajuda?

Parece-me que é um sistema que depois de registar é muito simples de utilizar. Ainda assim, se alguma ajuda for necessária a caixa de comentários está aberta para todos os que tiverem alguma dúvida. Não percas já no próximo dia 3 de Outubro, “Como decidir entre um template de raiz e uma framework“.

Este artigo faz parte da série Criar template com genesis wordpress framework – altere como se fosse html simples .

Sobre Gonçalo Cabral

Autor de vários artigos sobre tecnologia e um fanático pela Briosa. Trabalha na internet desde 2005 com vários websites profissionais já concebidos. Dedica-se ao estudo de questões de usabilidade e interessa-se constantemente pelas evoluções na web.

Deixe seu comentário

*