Planejando sua página web

Como tornar uma página em branco na página web dos seus sonhos? Você poderia começar por escrever HTML e CSS — adaptando coisas aqui e ali, tirando o que não agradar, adicionando ideias súbitas e reordenando as partes da página.

Essa, porém, nem sempre é a melhor estratégia, por levar a perda de tempo digitando código que será descartado depois. Em vez disso, planeje sua página antes de construí-la. Você pode definir conteúdo, disposição e até comportamento.

A primeira etapa ao planejar qualquer coisa é, muitas vezes, fazer um brainstorm — definir toda e qualquer coisa que você pode querer fazer. O brainstorming pode ser feito desenhando mapas mentais em papel, rabiscando em um documento impresso ou colando post-its em um quadro.

Você pode fazer isso sozinho ou, se quiser multiplicar a variedade de ideias, recrutar um colaborador para fazer o brainstorm com você. Enquanto estiverem nesse processo, use a abordagem "Sim, e…" - não foque no que pode não funcionar nas ideias do seu colaborador, mas no que talvez funcione e em coisas relacionadas que possam funcionar.

Depois de ter várias ideias, você precisa decidir quais seguir. Priorize as que te deixam mais animado — tente marcar com uma estrelinha ou movê-las para uma lista — e descarte o resto ou guarde para depois.

Um próximo passo bom é criar um protótipo no papel — sua página web, mas em papel. É um esboço dos componentes, com rabiscos representando o conteúdo e caixinhas como elementos.

Abaixo está o protótipo de papel do SF quiche, um aplicativo web que irá satisfazer todas as suas necessidades de quiche:

Já que não leva muito tempo fazer um protótipo de papel, você pode iterar rapidamente e não se sentir preso pelo plano inicial. Você pode também fazer de uma só vez alguns protótipos diferentes e para mais de uma página do seu site.

Depois de ter um protótipo, o ideal é fazer alguns testes com usuários. Mostre para um amigo e então pergunte onde ele clicaria primeiro ou para onde seus olhos vão. Veja se ele tem mais algum comentário.

Quando estiver satisfeito com seus protótipos de papel, transforme-os em wireframes. Um wireframe é como um protótipo, mas normalmente é feito em um computador e de forma mais precisa. Um wireframe é composto de caixas, que representam cada parte de uma página, e de leves porções de texto e ícones, conforme necessário. Por exemplo, abaixo está um wireframe de nosso SF quiche:

Este wireframe foi criado em uma ferramenta popular de prototipagem online chamada Balsamiq. Você também pode usar ferramentas de desenho dos pacotes de escritório, como Powerpoint/Keynote, ou utilizar ilustradores, como Photoshop, Gimp ou InDesign. Você pode ainda achar mais ferramentas de prototipagem online. Enquanto decide, lembre que várias delas têm custo.

Quando você tiver feito seus wireframes, você pode querer fazer outra rodada de testes de usuário. Algumas ferramentas permitem que você compartilhe seus wireframes para que outros comentem. Há ferramentas como o InvisionApp que permitem que você crie wireframes interativos, com áreas nas quais é possível clicar e ir para novas telas.