Achei excelente essa postagem que li no blog Avante!, do profissional e professor Bruno Ávila, por isso reproduzo aqui e recomendo que vocês façam uma visita ao blog deles, que tem muitas outras dicas interessantes.

É comum vermos trabalhos de iniciantes na área de design (seja gráfico, web) um excesso de gradiente e efeitos em seus layouts, geralmente mal aplicados. São efeitos de degradê que fogem da realidade, não respeitando um ponto central de emissão de luz ou ficando pesados, carregados.

A idéia desse post é trazer para o público brasileiro os 5 truques sugeridos pelo australiano Rob Morris na alemã Smashing Magazine, com tradução e comentários do Bruno Ávila. São idéias simples que vão melhorar sua visão sobre gradientes, luz e sombras.

Luz e sombra, no mundo real, está em toda parte que você olha. Tudo que você vê, reflete a luz e consequentemente geram sombras. Visualmente, luz e sombra nos ajudam a dar sentido aquilo que vemos e nos ajudam a compreender textura, dimensão e perspectiva.

Então, para tentarmos fazer com que nossos layouts web fiquem o mais natural possível, um bom entendimento de luz e sombra é muito importante. Aqui estão 5 maneiras de utilizar melhor luz e sombra para destacar seu layout, fazendo-os saltarem da tela.

Uma rápida anatomia da luz e sombra

Na figura abaixo podemos ver que a fonte de luz vem da esquerda. O destaque é o lugar onde a luz é mais forte e as sombras surgem sobre o lado mais distante da fonte luminosa. Luz e sombra nos diz muito sobre as superfícies e texturas da imagem.

Mas vocês devem estar se perguntando, “o que tem isto a ver com Web Design”?

Se você estiver tentando criar um design rico, interfaces táteis, luz e sombra serão seus amigos. Da mesma forma que muitos artistas clássicos fizeram pinturas saltarem para fora da tela, você pode usar luz para dar profundidade aos seus desenhos e um maior interesse visual.

1. Utilizando uma fonte de luz

Talvez a parte mais importante do trabalho com iluminação é saber de onde a luz é proveniente.
A fonte de luz irá determinar onde ficarão os destaques e sombras. Se você estiver trabalhando no Photoshop, você poderá usar o “global light”, efeito de modo que todos os seus efeitos de iluminação seguirão a mesma direção de luz.

Controlar a fonte de luz em seus projetos (mesmo só com um gradiente linear ou radial) pode ajudar a criar a melhor atmosfera para o layout. Ela também pode ajudar a direcionar os olhos para um ponto focal.

Exemplos na Web

Campaign Monitor usa uma explosão de raios luminosos que transmite a sensação de um nascer do sol por trás do projeto.

Icebrrg usa luz para submergir seu website numa profundidade subaquática.

Mike Precious usa mais de uma fonte de luz para adicionar interesse visual, se assemelhando ao estilo da luz direcional do desk-lamp.

Deaxon utiliza uma fonte de luz por detrás do seu sutil logo para dar seu devido destaque.

2. Gradientes

No mundo real, poucas coisas têm um tom de cor plano. Luz e sombra estão em tudo. Utilizar gradientes suaves é uma ótima maneira de proporcionar profundidade e trazer vida ao seu design.

O segredo do uso dos gradientes é não exagerar na mudança de tons, prefira gradientes entre tons próximos, um escuro para um menos escuro, um tom claro para um menos claro, sempre da mesma cor, modificando apenas os tons.

nclud é uma lição do uso de gradientes sutis e uma utilização eficaz dos gradientes para separar e organizar o conteúdo.

CSS Ninjas parece utilizar cores planas à primeira vista, mas cada área tem um sutil gradiente, o que lhe confere textura.

3. Linhas de Destaque

As linhas de destaque podem ajudar a equilibrar sombras e devem ser usados nas bordas de objetos mais próximos à fonte luminosa. Essas linhas normalmente são esquecidas. Porém, uma pequena mudança na cor dessas linhas podem fazer toda a diferença no seu design, destacando ainda mais o local.

Para percebermos melhor as linhas de destaque, temos que ampliar o layout. Um bom truque para adicionar essas linhas é trabalhar com um zoom de 200% ou mais, porque a 100% pode ser difícil ver o que está se fazendo.

Icon Dock e Newism: ambas utilizam uma semi-transparente linha branca no topo da página, elemento que lhe confere destaque. É pouco perceptível, mas acrescenta um balde de polimento a sua concepção.

Você provavelmente já acessou o site da Apple porém talvez não tenha notado a adorável linha de destaques na parte inferior aos itens de navegação, que ajudam a tornar as palavras mais destacadas.

4. Sombras Básicas

Sombras podem realmente acrescentar profundidade visual e textura quando utilizada da maneira correta. A chave é não exagerar.

As qualidades de uma sombra dependem da direção da luz e sua intensidade, assim como a distância entre os objetos e a superfície onde a sombra irá se espalhar. Quanto mais forte for a luz, mais escura e nítida será a sombra. Já se a luz for suave, a sombra também será.

Quando se trata de exemplos online de sombras, há muitos sites para você escolher. Quando usados habilmente, eles podem adicionar um toque de dimensão a sua concepção.

LinkedIn adiciona uma sombra muito sutil para o fundo da sua barra lateral, criando uma ilusão de profundidade.

O Google, talvez o mais simples trabalho de página na Internet, ainda investe na sutil utilização de sombra em seu logotipo.

5. Sombras Avançadas

Você pode fazer muita coisa além da básica sombra, dando aos elementos uma terceira dimensão. Longas sombras são uma ótima maneira de alterar a relação espacial entre os objetos em uma página.

Nos exemplos abaixo, a mesma latinha de Coca-Cola pode ter suas posição completamente alterada, dependendo da sua sombra.

Emotions by Mike utiliza sombra (e luz) para transformar a página em um piso plano.

Superkix utiliza sombra para flutuar o tênis “acima” do Web site. A sombra se move quando você redimensiona a página, como se a luz estivesse se deslocando.

Sofá cria uma palavra sobre o fundo branco, com grande utilização de luz e sombra.