Cinco dicas de web design para aproveitar melhor a luz e a sombra

Texto original: 5 truques simples para trazer luz e sombra aos seus designs

Luz e sombra existem em todos os lugares da vida real. Tudo o que você vê é refletido pela luz e pela sombra. Visualmente, a luz e a sombra ajudam-nos a identificar as coisas e a reconhecer o seu material , escala e perspectiva .

Portanto, se queremos tornar o nosso web design mais natural, dinâmico, real e intuitivo, é muito importante compreender corretamente os efeitos de luz e sombra. Aqui estão cinco dicas para ajudá-lo a aproveitar melhor a luz e a sombra. Usá-las bem pode tornar seu design mais refinado e se destacar das outras páginas.

Uma rápida análise dos princípios de iluminação e sombreamento

Na imagem abaixo, a fonte de luz vem da esquerda. Os realces são as partes mais iluminadas e as sombras estão localizadas mais distantes da fonte de luz. A existência de luz e sombra nos ajuda a perceber uma grande quantidade de informações sobre o material da superfície de um objeto .

Mas você pode perguntar: o que isso tem a ver com web design?

Se você planeja criar interfaces e sites ricos e texturizados, luz e sombra podem ajudá-lo. Assim como muitos artistas tradicionais usam luz em pinturas, você também pode usar luz para dar profundidade e interesse visual aos seus designs.

1. Utilização de fontes de luz

Deve-se dizer que, ao utilizar iluminação, saber onde está a fonte de luz é a questão básica mais importante. A posição da fonte de luz determina a colocação de realces e sombras (embora em web design você possa quebrar essas regras). No Photoshop, você pode usar “Iluminação Global” em estilos de camada para garantir que as fontes de luz de todos os efeitos de luz e sombra criados estejam na mesma posição.

Controlar a posição da fonte de luz pode criar uma atmosfera única para o design da sua página (até mesmo um simples gradiente linear ou radial pode obter o efeito). Os efeitos de luz e sombra também podem orientar a mudança do centro visual.

Exemplos da web,

Campaign Monitor , usam fontes de luz divergentes para criar um efeito de nascer do sol.

Icebrrg usa iluminação para deixar a página submersa.

Mike Precious usou mais de uma fonte de luz para adicionar interesse visual e usou iluminação de abajur por toda parte.

Deaxon tem uma fonte de luz fraca atrás do logotipo, que traz o foco da página para o logotipo.

2. Gradientes

No mundo real, nada é sempre uniforme. Luz e sombra se apegam a tudo. Usar gradientes é uma ótima maneira de criar profundidade e autenticidade.

A chave para usar gradientes é não exagerar . Ao desenhar gradientes no Photoshop, faça uma sobreposição de gradiente no estilo da camada. Isso garantirá a editabilidade do seu gradiente e, à medida que a camada for dimensionada, o gradiente também poderá ser dimensionado sem perdas.

Exemplos da web:

o site da nclud usa gradientes sutis, mas eficazes para diferenciar e organizar o conteúdo.

À primeira vista, CSS Ninjas parece usar cores planas. No entanto, cada área de cor tem, na verdade, um gradiente fraco, criando um efeito material fascinante.

3. Destaques

Os realces podem equilibrar sombras e devem estar localizados na borda do objeto próximo à fonte de luz . Os destaques são geralmente ignorados porque, se bem usados, você mal percebe que estão lá. Porém, nem todas as situações são propícias à existência de realces. Um realce sutil pode causar uma enorme diferença no polimento superficial de um objeto. Quanto mais “nítido” for o destaque, mais forte será o brilho da superfície do objeto.

Para apreciar os destaques, precisamos ampliar esses detalhes. Ao fazer designs de alto brilho, é uma boa ideia mais que dobrar o tamanho do seu design, porque você pode não conseguir descobrir o que está fazendo quando ele for exibido em sua escala original.

Exemplos na Internet,

Icon Dock e Newism, ambos usam branco translúcido na borda superior da página para criar um efeito de destaque. Embora muito discreto, proporciona um brilho forte ao design.

Todos deveriam estar familiarizados com o site da Apple . Mas você provavelmente não percebeu o destaque sutil na parte inferior do menu de navegação. É esse destaque que confere ao cardápio um toque de destaque.

4. Sombras básicas

Assim como os gradientes, as sombras projetadas também são amplamente utilizadas por web designers. Quando usadas corretamente, as sombras projetadas podem realmente adicionar profundidade visual e textura a um design. A chave é não exagerar ou abusar.

A profundidade da sombra depende da direção e intensidade da luz, bem como da distância do objeto à superfície de projeção. Quanto mais forte a luz, mais nítida e escura é a sombra;

Exemplos na Internet

Existem muitos exemplos de projeção na Internet.

O LinkedIn adiciona uma sombra projetada extremamente sutil na parte inferior da barra lateral para criar uma sensação de profundidade.

O Google – talvez a página mais difícil de criar na Internet – ainda usa uma sombra sutil em sua página de busca.

5. Sombras avançadas

Para dar aos objetos uma sensação tridimensional, você tem muitas opções além de sombras simples. Sombras longas podem alterar drasticamente as relações espaciais dos objetos na página.

No exemplo abaixo, depois que a mesma lata de Coca recebe diferentes sombras e partes escuras, toda a posição espacial parece completamente diferente .

O exemplo na Internet,

Emotions, de Mike, usa sombras (e iluminação) de maneira inteligente para transformar literalmente uma página plana em um chão.