# Pergunte-se a si mesmo: questões para desenvolver um bom site

> Perguntas essenciais para desenvolver um bom site web. Auto-questionamento sobre objetivos, público-alvo e estratégia antes de começar. Planeje!

URL: https://dpw.dev/design/pergunte-se-a-si-mesmo-questoes-para-desenvolver-um-bom-site/  
Publicado em: 2009-03-18  
Categoria: design  
Tags: performance  
Autor: Tárcio Zemel

O [desenvolvimento web](/ "Desenvolvimento para web.") às vezes é encarado como algo extremamente complexo, um verdadeiro "Bicho de Sete Cabeças"! Realmente não é a coisa mais simples do mundo; entretanto, pessoalmente creio que, por exemplo, operar uma pessoa ou planejar uma casa são coisas bem mais difíceis! Pode ser devido à minha afinidade com o [desenvolvimento web](/ "Desenvolvimento para web."), mas esta é minha opinião.

Na maioria das vezes fazer perguntas a si mesmo (depois de realizar um bom [briefing para desenvolvimento de web sites](http://www.desenvolvimentoparaweb.com/miscelanea/briefing-para-desenvolvimento-de-web-sites-consideracoes-dicas-e-modelos/ "Veja como fazer um bom briefing para web sites."), claro)  é a melhor forma de identificar/complementar as principais necessidades de um projeto; é o meio excelente de saber o que pode ser feito, o que não pode, o que deve, o que não deve, como fazer, qual tecnologia escolher e o que mais for preciso saber, pelo menos num segundo momento (o "primeiro momento" é o [briefing do site](http://www.desenvolvimentoparaweb.com/miscelanea/briefing-para-desenvolvimento-de-web-sites-consideracoes-dicas-e-modelos/ "Ler mais sobre briefings para sites.")) é a coisa acertada e mais sensata a se fazer.

Perguntar-se a si mesmo (ou, quando trata-se de uma equipe, fazer perguntas mútuas) algumas questões nada complexas a respeito do projeto em vista é uma boa maneira de saber como começar e como seguir com o desenvolvimento do projeto _web_; e isso com a preparação e precaução necessárias para evitar um monte de surpresas que inevitavelmente ocorrem em projetos desta natureza.

Para ajudar você a elaborar suas "auto-perguntas", segue uma série de considerações a respeito do [desenvolvimento web](http://www.desenvolvimentoparaweb.com/ "desenvolvimento web"). Pergunte-se!  ;-)

## Conteúdo

Sem sombra de dúvidas o conteúdo é o fator-chave de sucesso para os _web sites_ e projetos _online_, em geral. Levando em consideração alguns pontos importantes, pode-se caminhar à consecução do objetivo de alcançar a qualidade deste e, consequentemente, a qualidade e satisfação para quem acessa.

- **Textos.** Em _sites/blogs_ "normais" os textos podem ser considerados como conteúdo de maior relevância e procura. Deve-se ter cuidado com a maneira de escrever (mais formal, mais coloquial, em terceira pessoa, em primeira pessoa, etc), a extensão dos textos, o tamanho das fontes, o espaço entre as linhas, a distância entre os parágrafos, apresentação de títulos e subtítulos, cores. Se ainda não sabe, veja [como usar qualquer fonte tipográfica em blogs Wordpress](http://www.desenvolvimentoparaweb.com/javascript/como-usar-qualquer-tipo-fonte-tipografica-em-seu-blog-wordpress/) e sites, em geral.
- **Imagens.** As mensagens transmitidas através de imagens também são bastante relevantes e, igualmente, merecem atenção especial. Mais à frente a questão das imagens será abordada com mais detalhes.
- **Áudio.** Muitos sites utilizam áudio como forma de comunicação, o que é perfeitamente possível e conveniente se o bom-sendo for usado. Por exemplo, não é nada interessante colocar para tocar uma música em um site sem que o visitante tenha solicitado; o ideal é deixar um _player_ à vista para que ele saiba que o recurso existe. Deve-se atentar também ao tamanho dos arquivos, em si, e ao tempo de duração, seja o áudio uma "música ambiente", palavras de responsáveis pela empresa/produto/serviço, _podcast_, ou o que quer que seja.
- **Vídeo.** Excetuando-se os sites voltados especialmente aos vídeos, para os utilizar nos sites um "mix" deve ser feito e levados em consideração fatores como tamanho em _pixels_, tempo de duração, qualidade das imagens, controle (barra de tempo, botões pausar e continuar, volume, etc), adequação ao tema e, muito importante, decidir se os vídeos serão hospedados em sites de terceiros e anexados ao conteúdo ou se vão ficar diretamente no servidor do site e executados através de _scripts_ de _players_.

## Navegabilidade

A navegabilidade, sem dúvidas, é uma das coisas mais importantes de seu site. A facilidade que o visitante tem para navegar entre/nos conteúdos do site é fator determinante para o sucesso ou fracasso de seu espaço _online_. Perceba em conversas com amigos, colegas e mesmo observando seu próprio comportamento, que quando se entra em um site confuso, "embaraçado", sem uma boa estrutura navegacional, que a atitude é logo de irritabilidade e a primeira frase que vem à cabeça é "Droga, que site confuso! Vou embora...".

- **Menus.** Os menus do site devem estar bem claros e ser bem fácil de identificar o que é menu e o que não é. É através dos menus de navegação que os visitantes exploram a grande maioria dos sites e, se não está explícito em qual lugar o(s) menu(s) está(ão), como isso poderá ser feito?
- **Links.** O mesmo vale em relação aos _links_, quer dizer, se não está bem claro e evidente que determinada palavra ou frase é, na verdade, um _link_, é fácil não se surpreender caso ninguém clique. É **muito importante** que os _links_ do _site_ sejam evidentes e diferenciados do restante do "texto normal". Igualmente importante é salientar, de alguma maneira, quando um _link_ **já foi** visitado.
- **Localização.** O visitante precisa saber em qual ponto do site ele se encontra. A _web_ é ampla, muito ampla, e as pessoas facilmente se perdem nos _sites_. Por isso, use e abuse de elementos que sirvam para identificar em qual lugar do _site_ o visitante está atualmente como, para citar alguns, destaque nos menus e caminhos de pão (_breadcrumbs_).
- **Busca.** Especialmente _sites_ a partir do porte médio, _blogs_ e revistas eletrônicas necessitam de um campo de busca. O campo de busca é um dos elementos mais usados em _site_ e, em alguns casos, é o primeiro a ser usado pelo visitante. É importante deixar o campo de busca em local de fácil acesso e que este seja bem claro e simples de ser utilizado.
- **Elementos Auxiliares.** Além dos já elementos, utilizar elementos auxiliares de navegação e "suporte" ao visitante eleva bastante a qualidade de um _site_, como um todo. Alguns exemplos são as páginas **Ajuda**, **Perguntas Frequentes** e **Mapa do Site**.

## Web Design

Que "o conteúdo é o rei" todos os desenvolvedores sabem; o que muitos ainda não sabem é dar a devida importância ao **web design**. A forma como os elementos visuais estão dispostos e como se apresentam influi diretamente na maneira como as pessoas **percebem** e **intuem** (do verbo "intuir") os _web sites_. Conhecer alguns [princípios básicos de Gestalt aplicado ao web design](http://www.desenvolvimentoparaweb.com/design/gestalt-aplicado-ao-design-web-parte-1-origem-do-termo-significado-e-utilidade/ "Primeiro artigo sobre Gestalt aplicado ao web design.") e dar importância a determinados elementos é de suma importância.

- **Identificação.** Identificar qual é o site em questão é garantir que as pessoas não terão dúvidas e reforçar sua marca na mente dos visitantes. É essencial que o logotipo (com _link_ para a página inicial) seja apresentado logo na parte superior e que não haja equívocos quanto a qual empresa o _site_ pertence/faz parte.
- **Identidade visual.** Estritamente ligado à **Identificação**, É o conjunto de elementos que identifica determinada empresa, produto, uma instituição e similares. Vejam bem, é o **conjunto de elementos**! Para que uma identidade visual seja formada/mantida, é preciso critério para que a **consistência** e a **constância** estejam presentes. Respeitar e "repetir" os elementos visuais (e de outros tipos) a fim de fixar o que é preciso na mente das pessoas e garantir que nenhum equívoco acontecerá.
- **Cores.** A correta escolha de cores (de muita preferência levando em conta a **Identidade Visual**) deve ser feita com cuidado e seguindo critérios bem estudados/observados. É importante levar em consideração o público-alvo (idade, sexo, preferências, expectativas, e mais), o objetivo do projeto, a época em que ele é feito, dentre outros. As cores merecem estudos complementares à parte, devido à sua importância para qualquer projeto de natureza _web_.
- **Fontes tipográficas.** Partindo do princípio de que o conteúdo textual é o mais importante na maioria dos _web sites_, a utilização de fontes tipográficas adequadas ao projeto é imprescindível. A escolha correta da família de fontes, tamanho, cores, contraste, inter-relação entre tipos, posicionamento, e outros, devem ser feitos com cautela e tendo em vista o objetivo a que se propõe o projeto.
- **Imagens.** Dependendo de como é pensado/estruturado o _site_, o uso de imagens praticamente se faz desnecessário, haja vista o atual [delicious](http://delicious.com/). Para os casos mais "normais", em relação às imagens deve-se levar em consideração a qualidade, o formato, o tamanho em pixels, tamanho em KB (conhecem o [optiPNG](http://optipng.sourceforge.net/)?), alinhamento, a relação com os outros elementos, etc.

## Outras considerações

Para finalizar, ficam considerações sobre elementos de caráter geral dos _sites_ que, se levados em conta e bem planejados, certamente aumentam a qualidade do site.

- **URLs.** Pode parecer que não, mas o uso correto de URLs ajuda bastante a divulgação dos _sites_ (principalmente falando sobre os mecanismos de busca). URLs amigáveis garantem que seu site será melhor indexado nos sistemas de pesquisa e, olhando o lado humano, facilita a memorização de páginas específicas. Escolher nomes fáceis e de tamanho reduzido são diferenciais.
- **Idiomas.** Dependendo do _site_ é interessante que os conteúdos sejam apresentados em idiomas distintos. Existem sistemas de tradução automática que podem auxiliar um pouco, mas o ideal são traduções profissionais. Pense bem, um tradutor automático não traduz áudios e vídeos. Quando parte considerável do público-alvo for de outros países, é interessante haver, além de diferentes versões textuais do conteúdo, também diferentes versões para áudios (quando se tratar de falas, claro), vídeos (ou inserção de legandas) e, dependendo do caso, até disposição dos elementos, levando em conta o modo de leitura e costumas dos países.
- **Tempo de carregamento.** Algumas pesquisas alegam que se algum conteúdo não for apresentado e m **5 segundos**, o visitante sai do site para buscar outro. Isso é relativo, claro, mas mostra a importância que há no tempo de carregamento das páginas do site. Fique atento ao tamanho de imagens, utilização de javascripts (que devem ser inseridos antes de `</body>` e podem ter tamanho reduzido através de um [compactador de javascript](http://www.google.com.br/search?hl=pt-BR&q=minify+javascript)) e extensão das páginas. Utilize o [YSlow](http://developer.yahoo.com/yslow/) para Firefox como auxílio.

Tem mais algum ponto que você gostaria de citar? Tem alguma dica para complementar os tópicos do artigo? **Comente!**

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml
