terça-feira, 9 de junho de 2009

Web Design: Como Começar A Fazer O Seu Primeiro Blog Ou Site

Esse artigo foi escrito originalmente por Robin Good e originalmente publicado em 29 de julho de 2008 para o MasterNewMedia com o nome " Basic Web Site Design: How To Start Designing Your First Blog Or Web Site ". A tradução para o português foi feita por Letícia Castro. A íntegra dele em português você encontra aqui.
Se está pronto para começar a fazer o "design" do seu primeiro site ou blog, aqui estão minhas recomendações específicas de como trilhar esse caminho. O que mostro neste guia não é uma coleção de dicas reunidas ao acaso para você usar. O que vou sugerir é uma abordagem radical, direta, de design de sites que desenvolvi ao longo de minha experiência como editor online profissional e como conselheiro de comunicação estratégico para várias marcas na internet.

1) Estratégia Para O Design Do Site

Seja Simples - Tenha Foco
Ao fazer o design do seu site, pense primeiro em que tipo de conteúdo você terá.
Quem entra no seu site chega com alguma expectativa sobre o que vai encontrar. Dependendo dos resultados que direcionam para o ele nos buscadores ou do tipo de links indicados pelos demais, as pessoas virão ao seu site esperando encontrar algo interessante e valioso sobre um certo assunto.
O seu primeiro objetivo deve ser portanto, ir de encontro a essa expectativa ao desenvolvê-lo.
Como?
Concentrando-se nas áreas para conteúdo chave das páginas para fornecer uma experiência válida para o leitor.
Continuando, não coloque um milhão de elementos diferentes em uma página com o objetivo de satisfazer as expectativas dessa maneira. Concentre-se em uma coisa apenas e forneça tudo o que tiver cuja relevância a complemente. Deixe todo o mais de lado, separado.

2) Estilo Do Design - Não Seja Legal - Seja Analítico

Outra regra chave fundamental ao projetar o design de um site que pareça e dê a impressão de ser profissional significa evitar o que parece "legal".
Portanto, o que deveria buscar não é "ter um site legal", mas
a) ter foco, e
b) ser legível.
Estas devem ser as suas principais metas.
Veja bem, se conseguir mostrar claramente qual é o foco do seu site, já estará um passo à frente de milhares de pessoas. Ter foco também significa ter a habilidade de ser "visto" pelos principais buscadores como um site que cobre um tema específico, que o torna mais relevante nos resultados das pesquisas quando as pessoas buscam por uma informação específica. Para alcançar isso, é preciso escrever claramente e em contexto o foco desse conteúdo e direcioná-lo de forma consistente e sistemática, desenvolvendo e publicando conteúdos regularmente.
Legibilidade em um site é como uma transmissão de rádio. Se o sinal for baixo, com interferência, fraco ou coberto por uma estação vizinha, pode ser que eu mude para outra rádio que ofereça um esquema de navegação limpo e intuitivo, layout bem organizado, títulos e textos com letras maiores e elementos visuais relevantes. Você não mudaria?


3) Tipos De Páginas

Algumas sugestões básicas:
Homepage - é a sua porta de entrada, o seu vestido, cartão de visita, caixa de correio, currículo e portfólio, tudo em um só. Deve ser apurada, direta, informativa e ter componentes de informação complementares e relevantes entre si. Nada de gráficos legais, fundos coloridos, ou outras acrobacias visuais para transformá-la em uma página eficaz. Concentre-se em comunicar de maneira clara o tema do seu site e em apresentar informação valiosa que dê suporte a isso.
Página individual - esta é a típica página "interna" do seu site ou blog. O conselho fundamental aqui é ter um cabeçalho funcional e informativo (veja abaixo), para dar espaço suficiente ao conteúdo principal para torná-lo muito legível e aumentar o acesso no rodapé a outras informações relevantes e complementares aquelas da página específica.
Em cada página, quais são os principais elementos aos quais dar mais atenção?


4) Componentes Da Página

a) Cabeçalho

O cabeçalho é o elemento mais importante da parte superior da sua página. A sua bandeira, a identidade da sua marca e foco do conteúdo estão todos claramente definidos aqui. Evite fazer uma faixa muito alta ou decorativa. Fique dentro dos 100 pixels na vertical. Tenha em mente o seguinte objetivo: permitir que o seu leitor saiba na menor quantidade de tempo possível o tema do seu site e por que ele deveria continuar lendo-o. Mantenha-se simples, informe apenas.

b) Conteúdo

Quando se trata se quantas colunas de texto você precisa incluir no layout, limite-se a duas ou três no máximo. Use a mais larga para o conteúdo principal e as demais para propaganda ou sugestões de conteúdo adicional. Tenha em mente que a coluna de conteúdo principal deve conter linhas de texto de não mais que 10 a 12 palavras. Para alcançar este resultado, é preciso trabalhar de forma sinergética na largura da coluna e no tamanho da fonte. Um último ítem: textos em uma página da web devem SEMPRE estar alinhados à esquerda. Fazer um texto justificado na internet é como deixar uma etiqueta por perto que diz em negrito e em letras maiúsculas: "As pessoas por trás deste web site não SABEM NADA sobre comunicação na rede". Não vou entrar em detalhes sobre a razão para isso neste caso, mas você pode dar uma olhada nos blogs e sites mais populares por aí e perceber por si só a escolha que fizeram nesse sentido.

c) Navegação

Por navegação, entende-se um conjunto de links e outros elementos visuais que permitem que o leitor acesse outras páginas/seções relevantes do seu site por onde estiverem. O importante aqui não é tanto onde colocar estes links navegacionais, mas organizar o site em seções razoáveis, que estejam etiquetadas de forma clara e consistente. Ainda que seja aparentemente simples, esta é uma tarefa na qual muitos editores principiantes falham. Comece identificando as páginas principais além da homepage, como a página Sobre (recomendada), uma página para Contato, assim como um máximo de 12 categorias nas quais você gostaria de agrupar os seus artigos. Certifique-se de que os nomes de tais categorias estejam desenvolvidos de maneira consistente e que os títulos sejam descrições bem escolhidas, fáceis de distinguir do tema selecionado.

d) Propaganda

E Outros Elementos Para ConteúdoColoque os seus espaços publicitários em algumas áreas chave das páginas. Algumas regiões fundamentais a se considerar são acima do cabeçalho (veja o site Boing Boing), abaixo do título principal e em uma barra lateral. Você pode misturar e combinar qualquer uma dessas abordagens, tendo em mente o seguinte: as pessoas, assim como eu e você, NÃO gostam de propaganda; e por propaganda, entenda-se mensagens visuais que aparentemente chamam a atenção do leitor para si mesmas e que não tem nada a ver com o conteúdo e tópico da página. É por isso que anúncios de textos, como os do Google Adsense, que tem muita relevância em relação ao conteúdo publicado, funcionam tão bem. As pessoas procuram por informações específicas e se você as oferece de modo que não pareça distrai-las da sua leitura de forma irrelevante, é possível que sintam vontande DE VERDADE de dar uma olhada nelas. Portanto, organize as informações dos seus anúncios como se fossem mais uma categoria do seu site. Posicione os anúncios de modo estratégico, dê um nome claro às áreas publicitárias, oferecendo informações comerciais relevantes sobre um produto e evite enriquecer o layout com anúncios coloridos disputando a atenção uns com os outros.

e) Rodapé

O rodapé se tornou recentemente um tipo de dispositivo navegacional estratégico e informacional para o sucesso de um site. Em vez de relegar a ele apenas informações de aspecto legal e sobre copyright e Creative Commons, pode ser que você considere planejar os rodapés do seu site como uma ponte que pode levar os seus leitores facilmente de um artigo para outras seções relevantes. Dê uma olhadinha em ProBlogger, para ver um bom exemplo desta forma de usá-lo.

5) Cores

A minha sugestão pessoal sobre o tema é: Esqueça as cores por um tempo. Use imagens quando precisar, mas mantenha o fundo do seu site branco com texto em preto. Isso garantirá o máximo de legibilidade e permitirá desenvolver uma maior sensibilidade pelos detalhes em relação ao design da informação.
Se não puder evitar, tome cuidado com as cores que usa. Ter fundo colorido diminuirá a legibilidade do seu texto independente da cor que usar. À exceção de alternar entre fundo preto e letra branca, qualquer outra escolha requer ter familiaridade com teoria das cores e princípios de combinação de cores. Se você não tem intimidade com o assunto, dê uma olhada em:
Combinações De Cores Perfeitas: Como Selecioná-las - Mini-Guia
ILU - Color Calculator

6) Fontes

E as fontes?
Tenha dois objetivos em mente:
a) compatibilidade entre as fontes
b) legibilidade das fontes.
Estas são as únicas duas coisas com as quais você deve se preocupar quando se trata das fontes do seu site. O que isso quer dizer?
Em relação à compatibilidade, o que você precisa garantir é que a fonte escolhida seja visível também em outros computadores e navegadores, dentre uma variedade de tipos de máquina e sistemas operacionais. Algumas fontes bem legais ou formas de exibi-las são compatíveis apenas com o seu computador, por isso quando os leitores visitarem o seu site, pode ser que não visualizem as mesmas fontes ou as vejam de forma diferente. Faça um teste para descobrir.
Quanto à legibilidade é preciso selecionar uma fonte que torne o seu texto legível, ao contrário descolado e único. Tais qualidades serão agregadas ao seu conteúdo dependendo da forma com que você as formatar e embrulhar para o destino final. Portanto, escolha uma fonte que não seja muito pequena e fuja de detalhes decorativos e rebuscados.
Visite também os principais blogs e sites para ver o que andam fazendo com suas fontes e o uso de outros elementos de design: A Small Design Study Of Big Blogs

7) Imagens

As imagens são um assunto complicado. Encher o seu site de imagens sem saber como selecioná-las e posicioná-las causará mais dano do que não usá-las de forma alguma. Um conselho básico: tenha consistência. Selecione imagens que reflitam um estilo, enquadramento, tipo de cores em comum. Não misture diferentes estilos e tamanhos de forma descontrolada, faça um esforço para criar uma continuidade visual selecionando as imagens, formatando o seu tamanho e posicionamento de formas previsível e consistente.
Se usar imagens de outras pessoas, dê sempre crédito ao autor e linke o seu site. Isso te protegerá contra possíveis problemas com ele.
Onde conseguir imagens legais? No Flickr, Google Images (cheque os copyrights), StockXchange, assim como em centenas de outros lugares, mas existem mais, com certeza..

8) Templates

Os conselhos acima são básicos para começar a desenvolver o design do seu primeiro site. Como implementar esses princípios é o seu próximo obstáculo. A minha recomendação pessoal é tentar afastar-se do uso de códigos HTML. A menos que você seja profissional, não desenvolva o seu site fazendo os códigos você mesmo com ferramentas como Dreamweaver, FrontPage ou qualquer outro editor do gênero. Este é o jeito antigo de se fazer sites. Existe muito know-how tecnicológico para conseguir fazer um trabalho bom à mão desse jeito.
A nova forma é usar um template pronto que você pode customizar e adaptar as suas necessidades. Os templates não costumam ser muito caros e existem muitas fontes para escolher. Procure especificações que indiquem que o código é "válido" e de acordo com a linguagem XHTML-W3C, isso mostra que o código por trás do template que você escolheu foi construído de maneira sólida e garantirá consistência navegacional em diferentes browsers, tamanhos de tela e sistemas operacionais.

Postar um comentário

Postagens populares