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.
Crédito da foto: Vladislav Gansovski
Fazer um design na internet requer, como fundamento principal, entender que acessar informação a partir de uma tela de computador ou telefone celular é uma experiência totalmente diferente de ler um jornal, revista ou assistir um programa de televisão. Se você usar os mesmos princípios para desenvolver uma interface para o seu valioso conteúdo que aqueles empregados em uma revista impressa ou programa televisivo, irá apenas perder dinheiro e tempo.
Pare tudo agora.
Aqui, desenvolvidas sob encomenda para os novatos da Wix.com, assim como para qualquer iniciante por aí, estão as minhas recomendações básicas de web design.
Eis os detalhes:
Deixe-me dar um conselho um pouco não ortodoxo. Há uma variedade de livros sobre web design, sites, tutoriais e até vídeos que acredito não ser capazes de agregar muito valor se comparados com o que existe no mercado.
Mas, se você me permitir, acho que posso te dar algumas sugestões iniciais básicas que não apenas complementem o que você já sabe como te façam rever o processo do web design com uma perspectiva totalmente diferente.
Ao fazer o design do seu site, pense primeiro em que tipo de conteúdo você terá.
É claro, quando se trata de web design, tudo deve se mover em torno do conteúdo. Quer dizer, o design do seu site deve ser feito levando em consideração o tipo de conteúdo e a experiência que você quer que os usuários tenham nele.
Quando um leitor chega ao seu site, ele vem ou porque procurou alguma coisa no Google ou porque alguém disse que há coisas interessantes para se fazer ou ver nele. Talvez ele também tenha encontrado o seu link em outro site ou rede social com uma indicação.
Em qualquer um dos casos, 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.
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". O que isso quer dizer? Todo mundo tem seu próprio conceito do que considera legal, mas, a menos que você seja um designer profissional, o meu conselho é fugir ativamente de tentar incorporar essa ideia de fazer algo "bacana". É o objetivo errado. Veja bem, todas as pessoas tem uma opinião diferente a respeito disso e, se você não aprendeu sobre o assunto, sobre quais são os elementos fundamentais para desenvolver algo assim, estará fadado a fazer um site que agrada apenas a você mesmo.
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. Visite os sites de alguns amigos e veja se pode dizer logo de cara do que se trata. Geralmente, é um carnaval de elementos, todos tentando chamar a atenção e cada um te puxando para uma direção diferente. Para que serve tudo isso?
Simplifique, busque a essência, dê aos seus leitores algumas coisas de real valor. Eles apreciarão muito mais, ao contrário de ver centenas de coisas acontecendo ao mesmo tempo. O site terá um aspecto mais elegante, mais valioso, se você adotar essa abordagem simples.
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?
Para desenvolver um site, é preciso essencialmente fazer o design de dois tipos de páginas: a homepage e a página interna. Sim, pode ser que você queira ter páginas customizadas para diferentes seções, mas a minha sugestão é concentrar-se no início em apenas dois tipos básicos. Fazendo assim, você simplificará enormemente o seu trabalho e foco para tornar o site o mais eficiente possível.
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ó. Ela é você ou a companhia que você representa. Não deve ter a aparência de um folheto eletrônico. 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. Na verdade, hoje em dia cada página de um site é um pouco como a homepage, já que a maioria dos visitantes que chegam no seu site virão a uma página individual e sairão através de uma também, sem nem sequer passar pela home. De posse dessa informação, você deve organizar também o conteúdo das páginas dos artigos para que direcionem às seções relevantes e complementares, enquanto dá ao leitor uma sensação de identidade básica e componentes de navegação também presentes na página principal (cabeçalho, links de navegação básicos). Portanto, 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?
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údo
Coloque 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.
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
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
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..
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.
Assim como você faz para as suas roupas, não há necessidade de tê-los sob medida quando existem milhares de designs prontos disponíveis no mercado e você pode facilmente ajustar e customizar cada um deles como quiser. Pode ser que alguns de vocês ainda precisem da assistência técnica de um terceiro que saiba como manejar e editar estes templates, mas no geral esta é uma forma muito melhor e mais confiável de desenvolver o seu prijmeiro site.
Ainda há muito que se falar sobre o assunto. Fique ligado.
Originalmente escrito por Robin Good e publicado pela primeira vez na MasterNewMedia.
Robin Good -
Feed RSS de Notícias Diárias
