Categorias
Design

O uso de sombras nos elementos

Olá, designers! Meu nome é Raphael Felicio, sou Head de Design na ioasys e mentor do curso de Web Design da Mentorama.

Como eu sempre digo, o design é pra todos. Salvo exceções onde existem pessoas com algum dom, facilidade extrema em aprendizado ou velocidades fora do comum pra absorver tendências, o que nos torna melhores é o tanto que compartilhamos, somamos e também experimentamos ao longo da jornada.

E eu adoro compartilhar algumas coisas que fui aprendendo, principalmente os detalhes para se obter uma boa interface no final. Em linhas gerais, os detalhes é que dirão a qualidade do projeto. Não acredita? Tudo bem, eu entendo.

Mas posso dar certeza que detalhes como espessura de elementos, equilíbrio entre ícones, tamanhos e hierarquias de fontes, espaçamentos e respiro entre elementos, entre outros, darão o tom e o refino estético que virá com o tempo e com a sua evolução.

Hoje falaremos de um desses itens que compõe positivamente ou podem matar de vez a qualidade de um projeto: o uso de sombras nos elementos

Sendo franco, as sombras estão completamente espalhadas e em constante uso nas interfaces modernas e a tendência é que o uso delas apenas continue crescendo. Podemos definir a sombra como um elemento essencial para obtermos uma boa interface, assim como o preenchimento de um objeto, gradientes, cantos arredondados, etc.

Com esta breve ajudinha, você aprenderá como criar sombras impressionantes para seus cartões, botões ou outro possível componente que desejar. 

Bom, vamos começar?

Não use as sombras básicas das ferramentas jamais

Olha, realmente não importa se você usa Figma, Adobe XD ou Sketch, acontece que as sombras base de todas as ferramentas são horrorosas. É de chorar sangue em uma mistura de decepção e desespero. Sério, não aceite as sombras que vêm por padrão ao ativar a sombra em um elemento! 

Se você realmente quer fazer uma interface moderna e legal, ouça esse conselho inicial: projete suas próprias sombras, editando o nível de blur, opacidade, posição e cor da sombra.

Projete as sombras para que fiquem sedosas, macias e gostosas de se ver 

Eu aposto contigo: grande parte das sombras que você mais admira e que mais te encantam são suaves (jamais as padrões das ferramentas, sério). Pra chegarmos próximos ao que podemos julgar ideal, recomendo testar diminuir a opacidade para algo tipo 10 ou 20%, aumentar o blur para algo entre 20px e 40px e deslocar o eixo Y para algo tipo 10px. 

Lembra aquela sombra horrorosa original? Ela se foi. Muito possivelmente essa sombra que você está criando já faz um belo carinho nas suas córneas.

uso_sombras_nos_elementos

Faça de tudo pra deixar a cor da sombra natural

Outra dica que pode mudar completamente o jogo é a cor que você vai aplicar na sombra. Um mundo puramente cinza é bem sem graça, concorda?

Experimente adicionar um tom neutro que você encontra no seu próprio projeto, ou do próprio elemento que está trabalhando e adicionando a sombra.

Use a vida real como modelo

Isso tudo que falei até agora é só o começo, a pontinha do iceberg. 

Entender como objetos e materiais interagem com a iluminação é um trabalho mais profundo, que requer um tempo maior de análise e percepção estética que vai ser adquirida ao longo da trajetória.

Tente entender como objetos e elementos do mundo físico (e até de outros projetos digitais) projetam sombras, suas cores, suas manchas, seus ângulos baseados na luz.

Use o seu novo poder com sabedoria

Ah, eu sei que agora provavelmente você deve estar empolgado e pensando que já está dominando essa nova habilidade e que não se aguenta de ansiedade para colocar sombra até no logo e nas informações do rodapé. Mas não se afobe, caro padawan, use o seu novo poder com o máximo de sabedoria.

No design, como falei lá no início, os detalhes fazem diferença e queremos que as sombras continuem “detalhes”, certo? Tente não colocar em todos os elementos possíveis e assim, essa sutileza vai ser sempre uma arma a seu favor. 

Muito bem! Estamos realmente prontos para começar a trabalhar com UI em um novo nível. Experimente bastante, teste tudo que for possível e com o tempo, você vai perceber como os seus projetos evoluíram e como você realmente subiu um degrau. Uma última dica, e BEM importante, é também entender que tipo de sombras são possíveis de serem codificadas.

Falo isso pra que não comecemos mais uma batalha entre designers e desenvolvedores (ou pra que ninguém faça um voodoo seu, ok?). Então, pra testar como funciona e como podem ser aplicadas nos projetos, recomendo validar nesse site que é beeeeeem legal! 

Espero que tenham gostado das dicas e que elas ajudem vocês a alcançarem resultados nunca antes obtidos! Estamos juntos na jornada, amigos!

Um abraço, Rapha.