Sombras (shadows)

Efeito visual que simula luz e profundidade pra separar elementos e indicar camada.

Hard

O que é

Sombras simulam o jeito que a luz cai sobre os objetos, dando uma sensação de profundidade numa tela que na verdade é plana. Por causa disso, um card com sombra parece flutuar acima do fundo e um botão com sombra parece elevado e clicável, ou seja, a sombra vira pista de camada e de interatividade.

A intensidade muda bastante o efeito. Uma sombra forte e dura cria drama, mas pesa num design mais limpo, enquanto uma sombra suave e difusa separa o elemento sem roubar a cena. Já a sombra de hover dá retorno quando o cursor passa por cima, sinalizando que dá pra interagir.

O cuidado principal é não fazer da sombra a única pista de interatividade, porque quem tem baixa visão pode simplesmente não percebê-la. Por isso vale parear a sombra com mudança de cor, borda ou animação, lembrando que sombra complexa em animação tende a pesar em aparelho fraco.

Em uma frase

Vamos dar uma sombra suave no card pra ele parecer elevado e clicável, mas pareada com mudança de cor pra não depender só dela.

A pergunta que ele responde

Como dou profundidade e sensação de camada numa tela que é plana sem confundir quem tem baixa visão?

Quando usar

Ajuda pra criar profundidade, separar camadas, marcar o elemento em foco e dar retorno de interação.

Como não usar

O cuidado é não usar a sombra como única pista de que algo é clicável, nem abusar de sombra pesada em aparelho fraco a ponto de travar a tela.

Na prática

Pense num card de produto que ganha uma sombra suave e passa a parecer elevado e clicável. No hover, a sombra cresce um pouco e confirma que dá pra interagir com ele.

Não confunda com

Vale separar sombra (shadow) de sombra de cor (shade), que costumam ser confundidas pelo nome. A shadow é um efeito de luz e profundidade na interface, enquanto a shade é a versão escurecida de uma cor. Uma vive na profundidade, a outra na paleta.

D

Em inglês

Shadows

Pronúncia

xé-dôus

Também chamado de

shadows, sombras, drop shadow, elevação

Origem

Popularizado pelo Material Design (elevação).

Fonte

Saiba mais

Material Design, documentação sobre elevation e o uso de sombras