A academia Body Shopping conta agora com um novo site depois de alguns anos sem ter seu espaço na web e eu estou com a missão de desenvolvê-lo. Recebi com entusiasmo esta missão.

Apresento neste artigo um pouco do estudo que fiz para iniciar este site (que ainda está em desenvolvimento) para troca de idéias e conhecimentos.

Finalidade

Um site de academia deve servir como meio de entrada de novas pessoas no estabelecimento e como porta-voz de quem já utiliza os serviços de lá. Para tanto, pensei na etrutura do site como se a academia não tivesse nenhum aluno. Partindo deste princípio, o site deve ser agradável e com conteúdo claro e objetivo, para aqueles que estejam procurando por uma academia se familiarizem com o ambiente do site e, consequentemente, tenham a vontade de conhecer a academia e fazer sua matrícula.

Layout

Ao iniciar um projeto de website sempre vem a dúvida: e agora? Layout fixo ou flexível? Para a body-shopping.com pensei que um layout fixo seria mais viável, porque ele se adequaria melhor nas idéias de composição que já estavam surgindo na cabeça.

Com o layout fixo escolhido, agora era só pensar numa forma de compor o mesmo. Nada mais usual que criar uma estrutura de grid. um grid layout.

Criei um grid layout que atendesse à resolução de 1024×768px para cima, mas que pudesse ser visto numa resolução 800×600 sem problemas (isso pode ser uma dor de cabeça, dependendo do público alvo para o site). Muitos ainda usam resolução 800×600, mas essa é uma prática que vem, naturalmente, sendo reduzida ao passar dos anos. Este é um risco que às vezes deve-se correr, mas com a devida cautela (cada caso é um caso, sempre!).

O grid layout, então, ficou com um tamanho fixo total de 950px.

Quatro seções principais (colunas) foram criadas e cada uma delas foram separadas em mais duas subseções. As duas colunas principais laterais caracterizam na esquerda o logo da academia e na direita uma sidebar e as duas seções principais centrais caracterizam o conteúdo do site (o conhecido content). Veja o tamanho das seções na imagem ampliada logo abaixo. Na imagem são apresentadas apenas duas das quatro seções principais. O lado não apresentado na imagem é exatamente o espelho do lado em questão projetado para o lado direito. Os retângulos azuis representam os itens de menu que futuramente seriam - e foram - criados.

Tipografia

Como já disse outrora, deve-se tomar cuidado ao escolher a família de fontes para um determinado projeto. Por isso costumo sempre adequar o typeface ao estilo que o site deve ter e em quem lerá o conteúdo dele. Para este site, escolhi uma família tradicional sem serifa: Verdana, Arial, Helvetica, sans-serif.

Cores

As cores já estavam praticamente pré-definidas, já que pude estudar à partir de cartazes que existem na academia. Esta parte foi, acredito eu, a mais simples, pois eu apenas somei algumas cores para dar uma variada nas cores padrão e avivar algumas seções que deveriam ser destaque.

Navegabilidade

Para as duas seções centrais criei áreas com conteúdo fixo para grande parte das páginas e acima destas o conteúdo principal da área visitada.

Resultado inicial

O resultado inicial (já que alterações podem ser feitas à qualquer momento) é este:

O site ainda está amadurecendo. A área de alunos ainda está nascendo. Não há área específica para avisos gerais e por aí vai. Bom… Por enquanto, é só! ;)

Atualização 2007-05-01: Veja a remodelação do site Body Shopping em seu segundo case.

Esta postagem foi criada em 25/06/06 às 1:03 am e pertence à(s) seguinte(s) categoria(s): Cases, Desenvolvimento, Layout, Mockup, Webdesign. Você pode receber os comentários para esta mensagem via RSS 2.0 feed. Você pode, também, inserir uma resposta, ou inserir um trackback em seu site.