A implementação de ícones em interfaces gráficas vem desde os primórdios da informática quando os computadores deixaram de ter apenas uma tela preta com caracteres e códigos para aderir a interfaces mais robustas nas quais facilitam a utilização de sistemas que são utilizados até hoje (você está utilizando neste momento, olhe ao redor do seu desktop, seja windows ou linux está cercado por ícones) e na internet não é diferente.

Neste artigo conhecerá bons exemplos de uso além de várias dicas. Caso tenha interesse em ficar atualizado nos artigos publicados neste blog assine nosso Feed.

Índice

1. O que são ícones?
2. Porque e como utilizar ícones
3. Dicas de utilização
4. Sites de referência em utilização de ícones
5. Sites para download de ícones

O que são ícones?

A palavra Ícone vem do grego “Eikon” que significa imagem e tem a função de se referir a algo por semelhança em estrutura e representatividade. Existem explicações aprofundadas sobre o assunto, recomendo a leitura do artigo feito por Everaldo Coelho.

Porque e como utilizar ícones

Os ícones são uma maneira simples e eficaz de chamar a atenção de seus usuários. Possibilitam tanto a melhoria visual quanto a passar rapidamente uma informação.

Exemplos práticos da importância de um ícone: o que seria dos feeds sem seu famoso quadradinho laranja ao lado? Provavelmente muitos sites perderiam alguns assinantes
por isso. Outro exemplo é o recente popstar da internet Twitter, basta vermos o pequeno pássaro azul para corrermos e clicar para em seguida decidir se seguiremos mais uma pessoa.

Mas cuidado, apesar de serem importantes para uma boa apresentação no design e agilizar informação, se não forem usados com cautela poderão ter o efeito inverso no quesito velocidade de informação. Veja as dicas a seguir.

Dicas de utilização

1. Evite o excesso de ícones
2. Não tente “inovar” demais, você não precisa “inventar” um novo tipo de ícone, basta que o mesmo seja bonito e combine com seu site, de preferência personalizado.
3. Tamanho não importa, porém evite usar muitos ícones pequenos com exceção dos mais comuns (como imprimir, bookmarks, home page, email).
4. Se for utilizar no menu principal não o deixe sozinho, insira uma descrição do mesmo ao lado ou abaixo (com uma ou duas palavras).
5. Escolha um estilo uniformizado. Para isso procure por “pacotes” de ícones em sites de downloads grátis.

Sites de referência em utilização de ícones

Confira algumas referências de designers que souberam como explorar os ícones para um design mais bonito e uma comunicação mais eficiente.

Shannon Moeller

Karimzurita

Raka Creative

Tender Support

AD Works

Sharkey Media

Sites para download de ícones

Existem incontáveis sites que fornecem download de ícones grátis, em outro post já recomendei 10 deles, você pode conferir em “10 sites excelentes para download de ícones“.

Artigo por Rafael Marques

Se você faz trabalhos como Free Lancer provavelmente já ouviu a expressão “Site Simples” inúmeras vezes. Mas afinal de contas, o que é um “Site Simples”? Já parou para perguntar a si mesmo? Para falar sobre o assunto eu cito dois termos: opinião e conceito. Ambos os termos são completamente individuais, ou seja, seu conceito e opinião referente a determinado assunto pode ser diferente do meu conceito e opinião em relação ao mesmo.

O que é um site simples?

Seria um site com poucos elementos de design? Quem sabe poucos links…poderia ser também um site sem imagens… Resumindo, o que para um cliente é um “site simples” para o web designer pode não ser e vice-versa. Como distinguir se o cliente está utilizando o termo site simples para tentar reduzir o valor do orçamento ou dizer que é o modelo de site (design + apresentação de conteúdo) que deseja? Cuidado! O termo existe mas não deve ser banalizado.

Reunião com o cliente

Em determinado momento você ouve de seu cliente: “é um site simples”; e agora, o que fazer? Antes de falar sobre qualquer “peça” integrante do website é importante ouvir o que o cliente tem a dizer. Se possível tenha todo o “briefing” anotado ou salvo em seu computador. A partir daí peça modelos de outros sites da mesma categoria e de categorias diferentes ao pedido. Tente analisar onde está tal simplicidade, no design, exposição de conteúdo, quantidade de links, etc.

Caso os exemplos mostrem maior complexidade seja franco e explique características relevantes que fazem do desenvolvimento uma tarefa trabalhosa e que deve ser realizada com cuidados. Mostre sites que você conhece e considera realmente simples e compare com a proposta feita pelo cliente, desta forma ele entenderá melhor.

Alguns exemplos de sites simples

• Sites institucionais: Poucos links (Empresa – Soluções – Contatos), informações resumidas, conteúdo direto.
• Hotsites: Sites de pequeno porte feitos para eventos e promoções.
• Blogs: duas colunas, conteúdo e sidebar para seleção de categorias.

Veja

Restaurante Tigris

Eduardo de La Rocque

Design se encaixa em simplicidade?

Não! Pode até parecer frase pronta maaas… “fazer o simples pode ser complexo“. Lembre-se que independente do tamanho, objetivo e público alvo do projeto o web designer deve fazer o melhor trabalho com total dedicação. Faça um trabalho ruim e seu nome estará na assinatura, ou seja, o sucesso de sua carreira também precisa daquele trabalho “simples”. Por estes motivos o design não pode ser utilizado dentro do termo “simples”, design gera conceito, inova, organiza, surpreende!

Por mais que existam poucos elementos gráficos em um layout, o design para web também envolve hierarquia de informação, disposição de conteúdo para o usuário, tipografia, organização e facilidade na navegação.

E para você caro leitor, o que é um site simples? Comente!

Para quem ainda não conhece propriedades css básicas pode aproveitar a grande ferramenta oferecida pelo site CSS Type Set. A operação é muito simples, existem dois campos (lado esquerdo e direito), no esquerdo pode digitar um texto qualquer, na parte superior poderá controlar os estilos deste texto atribuindo cores, tamanhos, etc. A medida que formatar o texto no campo esquerdo automaticamente será exibido o código css no campo direito que faz a formatação do texto.

CSS Type Set

Sendo assim basta copiar o código gerado e colar em sua folha de estilos. É bom enfatizar que é uma ferramenta excelente para quem está iniciando, mas lembre-se de que é fundamental que aprenda todas estas propriedades e valores, pois as mesmas estarão com você sempre que precisar desenvolver algo novo, além de que quanto mais souber melhor ficará e mais habilidoso também.

Quantos sites você já viu com uma estrutura praticamente igual? Quantos sites completamente diferentes do comum você já viu? Como diferenciar o que é algo clichê de algo que é apenas uma tendência e deve ser adotada?

Estas são perguntas importantes para quem desenvolve web. Inovar é uma ótima fórmula para o sucesso e conhecer as tendências e clichês é fundamental.

Portais de Notícias

Globo, UOL, Terra, IG, grandes portais do Brasil. De 2008 para 2009 todos passaram por mudanças para se adaptar as novas tendências web. Uma das principais características que vem sendo adotada é a separação de editoria por cores. No Brasil a Globo.com foi pioneira no assunto. Atualmente o UOL também vem se adaptando apesar de isso ainda não estar tão evidente pois na página principal do portal ainda se mantém o padrão preto nos títulos. Observe:

Globo

Separada por três cores principais: Vermelho para Notícias, Verde para Esportes e Laranja para Entretenimento. Além destas cores ao navegar dentro do site pode observar que existem cores para cada tipo de assunto.

UOL

Observe que a página inicial mantém o padrão preto, por mim já deviam ter aderido a separação por cores faz tempo.

Abaixo observe a editoria de esporte do site, começando a se adequar a cor verde. Ainda está muito pouco, sendo utilizada apenas no “chapéu” das notícias.

Portfolios

Observe os três sites abaixo:

Lifetree Creative

Agami Creative

Monofactor

Todos tem uma estrutura semelhante: logomarca no topo esquerdo, menu no topo direito e um destaque abaixo. Apesar da mesma estruturação os três sites apresentam um design diferente e poucas vezes associados. Como interpretar? Falta de criatividade? Não! Isto é uma tendência para sites de portfolios, onde a navegação é simples e direta.

Geralmente o último trabalho realizado pelo Web Designer ou Agência fica na página principal e os demais em um link “Portfolio”. Outras link servem para contato e sobre o autor, isso quando ambas informações também já não ficam explicitas na página inicial.

Quem já estuda desenvolvimento web a um certo tempo deve ter visto a grande onda que foi a chegada da Web 2.0, com a intensa tendência de informação colaborativa, onde vieram o grande uso de bookmarks e rss, indispensáveis na atualidade.

E o que pode ser chamado de clichê na web?

Este é um ponto complicado e que traz critérios discordantes entre designers. Até que ponto algo deixa de ser uma tendência e passa a ser clichê? Os exemplos mais claros de clichês são do uso de imagens semelhantes ou até mesmo iguais em uma determinada área do site, por exemplo, quantos sites você já viu um mini-banner com uma imagem de telemarketing na área de contatos?

Tendência

Teoricamente falando é qualquer coisa relacionada na estruturação, organização ou modo de disposição de conteúdo para que seja melhorado a leitura e navegação do internauta.

Exemplos:

• Sites de resolução 800×600 são considerados ultrapassados;
• Fontes atualmente são maiores (antigamente era comum encontrar sites com fontes de tamanho entre 9 e 11px. Os títulos na atualidade seguem um tamanho de fonte grande como uma manchete de um jornal;

Clichê

Demonstra algo que não é inovador e que não interfere na melhoria de legibilidade/acessibilidade.

Exemplos:

• Imagens tradicionais e/ou repetidas (como dito acima).
• Layouts repetitivos, utilizando mesmas fontes e mesmas imagens.

Desenvolver web não se resume a fazer um layout e programá-lo, dependendo do foco, existirá a necessidade  do site trabalhar com Otimização para Motores de Busca (Search Engine Optinization – SEO), um dos fatores essenciais para um site que deseja ter destaque.

O SEO é a otimização para sites de busca (Google, Yahoo, entre outros), através dele é possível obter posições melhores nos resultados. É importante destacar que um bom SEO não garante que um site esteja sempre em primeiro lugar no resultado da busca, pois não é o único fator considerado para definir sua posição.

Com a nova geração de buscadores a posição de um site na lista de resultados é gerada a partir de sua relevância e foi através desta nova geração que surgiu o SEO. Antigamente a posição era exibida por ordem alfabética como nos diretórios web (primeiros sistemas de busca criados).

A relevância depende de inúmeros fatores que são guardados pelos sites de busca. Alguns exemplos iniciais de fatores que geram maior relevância é a utilização de padrões web, xhtml semântico e título de páginas racionais.