Drop-Shadows e Gradients: Seja consistente em suas metáforas visuais
Drop-shadows e gradientes são dois dos elementos de design mais comuns na web.
Você os encontrará acompanhando muitos estilos diferentes. São efeitos úteis para web designers porque são atraentes, úteis e fáceis de criar com qualquer programa gráfico. Mas eles têm um lado sombrio: eles são freqüentemente abusados .
Usar sombras ou gradientes amadores é quase tão ruim quanto colocar uma carta escarlate em sua camiseta para que o mundo saiba que você é um iniciante ou um hack. Mesmo erros sutis, quase imperceptíveis, podem criar tensões que prejudicam projetos bonitos e eficazes.
Neste artigo, veremos o que as sombras e os gradientes fazem , falaremos sobre como usá-los com eficácia e veremos alguns exemplos de erros e como corrigi-los.
O que as sombras e os gradientes fazem?
O trabalho de um web designer é criar padrões de cores para telas bidimensionais brilhantes . (Existem algumas exceções: os sites podem ser visualizados, digamos, em uma tela do Kindle, que não acende; e os sites podem ser impressos em papel.) Essas telas não refletem o mundo real; eles não são muito parecidos com o mundo real. Por essa razão, não temos nenhum imperativo real para fazer com que os padrões em nossos websites tenham qualquer relação com objetos no mundo tridimensional em que vivemos.
Sistemas operacionais como Unix e DOS têm uma interface que nada mais é que texto colorido em uma tela. Outros, como o Windows e o Mac OS X, são preenchidos com as ilusões de objetos reais. O OS X, por exemplo, tem um encaixe que se parece com uma mesa com uma superfície brilhante que se afasta à distância, uma barra de menus cujas bordas chanfradas fazem com que pareça um pouco protuberante e barras de rolagem que parecem ter losangos translúcidos.
Todos esses efeitos são metáforas. Eles tratam certos elementos com os quais podemos interagir na tela como se fossem objetos tridimensionais que interagem com fontes de luz da mesma forma que os objetos do mundo não digital. É uma coisa engraçada de se fazer, de certa forma: todas essas fontes de luz e arestas e formas são pura fantasia. Como os objetos na tela são imaginários, por que devemos relacioná-los aos objetos do mundo real?
A ilusão do espaço conecta o imaginário a um mundo em que estamos confortáveis.
A razão mais importante pela qual relacionamos objetos imaginários com objetos do mundo real é que somos especialistas em interagir com objetos em nosso mundo tridimensional. Temos experiência em lidar com objetos tridimensionais e acumulamos conhecimento do código visual que nos informa sobre as relações de objetos entre si no espaço.
É em parte porque a proeza de interpretar a luz é tão notável que temos tanto prazer na ilusão, ou na criação da aparência de objetos. Muitas vezes somos mais engajados por pinturas dramaticamente realistas de objetos comuns, como casas e maçãs, do que pelos próprios objetos. Nós, humanos, criamos desenhos há milhares de anos para apresentar as idéias dos objetos. Lozenges ilusórios e tabelas na tela são nada mais que a manifestação mais recente desta longa tradição.
Há mais do que prazer, no entanto. Forma e posição nos dão informações sobre como os objetos se relacionam entre si. A forma longa e vertical do losango da barra de rolagem na janela do Safari, por exemplo, cria a ilusão de que ela fica “mais alta” ou mais próxima de mim do que os elementos que a cercam. Isso dá uma importância maior ao design, o que é apropriado porque a barra de rolagem é um elemento essencial da interface para navegar na página.
Metáforas visuais criam uma percepção de affordance.
Aparecendo como um objeto, a barra de rolagem cria affordance . ”Isto é, liga-se por meio de metáfora às propriedades dos objetos reais que se prestam a usos particulares. Um botão chanfrado em uma página da web, por exemplo, comunica que ele permite pressionar . Podemos tornar qualquer coisa em uma página clicável, mas associar um elemento clicável à imagem de algo pressionável sugere sua função de maneira clara, óbvia e até agradável.
Drop-shadows e gradientes são ferramentas básicas para criar a ilusão do espaço.
Drop-shadows e gradientes são duas ferramentas que ajudam a criar a ilusão da tridimensionalidade e sugerem as relações espaciais dos objetos na página. Quando bem feita, essa informação tridimensional torna um design mais bonito e mais compreensível.
No mundo real, sombras são criadas quando um objeto bloqueia uma fonte de luz de atingir uma superfície atrás dela. Esta é uma das razões pelas quais as pessoas dizem que as sombras fazem desenhos bidimensionais “pop”: porque fazem com que os objetos pareçam se destacar ou flutuar acima de outros elementos.
Os gradientes aparecem quando uma parte de um objeto está mais próxima de uma fonte de luz do que outra parte. Como resultado, a parte mais próxima parece mais clara e a parte mais distante parece mais escura. (Os gradientes ficam mais complexos, é claro, quando várias fontes de luz interagem ou quando as fontes de luz têm cores diferentes.)
Assim, imitando os efeitos da luz no mundo real, sombras e gradientes comunicam informações sobre objetos metafóricos, fontes de luz imaginárias e seus relacionamentos.
Como usar drop-shadows e gradientes efetivamente
Aqui está uma possibilidade: não use sombras ou gradientes.
Eu quero dizer isso, sério. Este é o caminho mais seguro para evitar erros de sombra e gradiente, e a opção deve ser sempre considerada.
Como jogar sombras em objetos aleatórios é muito fácil, eles podem ser uma desculpa para evitar soluções mais simples e melhores para os problemas. Para os bits de texto que precisam ser mais proeminentes, por exemplo, os projetistas geralmente negligenciam a cor, o tamanho, o peso do tipo e muitos outros elementos em favor de uma sombra projetada.
Da mesma forma, os designers costumam usar gradientes para fazer um campo de cor parecer menos chato, sem descobrir por que a composição geral não é dinâmica.
Se você estiver trabalhando em uma compilação para um site, salve tridimensionais, como sombras e gradientes para o final , se possível. Use espaçamento, posicionamento e cor para tornar o design efetivo antes de adicionar a camada final de polimento. Se você se concentrar em fazer com que seus projetos funcionem sem esses truques, talvez descubra que não precisa deles com tanta frequência e que eles são mais eficazes quando você os usa.
Antes de pular em uma sombra ou em um gradiente, pergunte a si mesmo: " É necessária uma metáfora tridimensional para esse design?" Estou usando para adicionar informações úteis sobre como os objetos estão relacionados ou como um componente eficaz de um som? abordagem estética, ou estou usando isso como uma desculpa?
O Subtler, o melhor
Para drop-shadows , quase nunca use as configurações padrão do Photoshop. O drop-shadow padrão do Photoshop é muito escuro e é lançado no canto inferior direito de um objeto (a fonte de luz global padrão é 120 °, no canto superior esquerdo).
As sombras informam sobre a luz em seu ambiente. Suponha que você esteja em um quarto escuro sem janelas e ligue uma lanterna. Qualquer objeto em que você brilhar lançará uma sombra quase preta. Isso porque o objeto está bloqueando a luz da única fonte de luz, o que significa que nenhuma outra luz está vindo de outro lugar para iluminar essa área.
Agora, a sombra não ficará completamente preta por causa da luz refletida. Parte da luz da sua lanterna irá saltar das paredes e atingir a área sombreada de uma direção que não esteja bloqueada pelo objeto. E se você acender uma lâmpada em outro canto da sala, a sombra se iluminará consideravelmente. O objeto lançará uma segunda sombra: a nova sombra aparecerá onde a luz da lâmpada está bloqueada, mas será preenchida com a luz da lanterna, enquanto a área da primeira sombra ainda será bloqueada pela luz da lanterna, mas será preenchido com a luz da lâmpada.
Quando adicionamos sombras aos nossos projetos, sugerimos um ambiente imaginário para a nossa página da web. Sombras escuras e duras sugerem um quarto escuro com uma única fonte de luz. Sombras luminosas e suaves sugerem uma sala rica em luz difusa.
Uma sala bem iluminada é o ambiente mais confortável para os usuários, porque é semelhante ao tipo de ambiente em que usamos nossos computadores: um escritório ou escritório. A menos que nós deliberadamente queiramos evitar essa zona de conforto, devemos trazer as configurações de sombra no Photoshop para baixo a partir de seus padrões. Traga a opacidade para 30 ou 40%, ou até mais baixa.
Além disso, mantenha as coisas simples para que as pessoas entendam a metáfora sem pensar nela. Uma fonte de luz a 120 ° não faz muito sentido. O Mac OS X, por exemplo, coloca sua fonte de luz a 90 °, ou diretamente acima, o que parece mais lógico. Eu gosto de simplificar ainda mais e colocar a fonte de luz diretamente perpendicular à tela. Para fazer isso, basta trazer a configuração de distância em sua sombra para zero (isso representa a distância do objeto que lança a sombra para o objeto abaixo dela). Neste ponto, a luz global não importa: é simplesmente como se uma fonte de luz difusa estivesse vindo de trás do usuário para iluminar o design.
Esse efeito é muito comum em projetos de “trompe-l'oeil” , sendo que o mais comum deles apresenta a imagem de fundo ou o quadro de uma superfície de mesa, como se a pessoa estivesse olhando diretamente de cima para baixo. Diretores de cinema como Alfred Hitchcock, Martin Scorcese e Wes Anderson empregam o mesmo efeito para suas fotos de visão de Deus. Esses designs da Web têm um tipo de compreensão fácil e a manutenção da consistência em um design fica mais fácil para o designer.
Se você reduziu a distância para 0 e a opacidade para cerca de 30%, você está em um bom ponto de partida para uma sombra. Brinque com o tamanho para alterar a distância que a superfície do objeto parece ser do plano de fundo em que ele se encontra. Definir o tamanho para 1 pixel, por exemplo, oferece um belo efeito que é quase invisível, mas bastante agradável. Desenhista Dan Cederholm fez pequenos, simples efeitos como este uma parte integrante do seu estilo (como demonstrado em seu seminal A List Apart artigo sobre " Cantos do topo da montanha ").
Você pode certamente aumentar a opacidade se o efeito for invisível, mas começar de maneira sutil e depois discá-lo é muito melhor que o oposto. O efeito não deve ser nem um pouco mais evidente que o necessário.
Para gradientes, o Photoshop tem muitos padrões sofisticados. Estes podem ter alguns bons usos, mas eles certamente têm usos pobres ilimitados, portanto, direcionar-se para eles é geralmente sábio.
Em vez disso, selecione o gradiente padrão preto-a-branco. Em seguida, selecione o preto e o branco e torne- os a cor base do seu elemento. Agora que você tem uma base, escolha o lado escuro ou o lado da luz e ajuste-o para ficar um pouco mais escuro ou mais claro. Mais uma vez, quanto mais sutil, melhor . (Alguns dos melhores gradientes que eu já vi tive que verificar com a ferramenta conta-gotas no Photoshop para ter certeza de que eles estavam lá!)
Quanto maior o contraste entre a luz e a escuridão, mais arredondada será a superfície. Para algumas coisas, como menus de navegação e botões, alguma redondeza é apropriada. Mas para objetos que devem parecer planos, mantenha o contraste baixo.
E lembre-se, o lado mais claro deve estar voltado para a direção da sua fonte de luz.
Esse tipo de gradiente é maravilhoso porque imita os gradientes que vemos ao nosso redor o tempo todo. Nada no mundo real é verdadeiramente um campo de cor único, porque sempre tem algum tipo de relação com uma fonte de luz. Observe atentamente as páginas de um livro ou o teto em volta da luz do teto: você encontrará gradientes por toda parte.
Exemplos de erros e como corrigi-los
A web tem muitos gradientes, obviamente feios, mas geralmente não são feitos por designers profissionais. Em vez de mostrar erros notórios, ilustrarei algumas maneiras pelas quais erros sutis podem criar tensões em projetos excelentes.
Sombras uniformes para objetos sobrepostos
Objetos sobrepostos implicam uma diferença em sua distância de você (determinada em parte por sua espessura). Designers, no entanto, freqüentemente usam sombras idênticas para objetos sobrepostos. Assim, as informações transmitidas pelas sombras conflitam com as informações transmitidas pela sobreposição, solapando a ilusão de dimensionalidade.
Vendo conflitos como esses me deixa desconfortável, e quanto mais eu me concentro neles, mais minha cabeça dói. Os usuários devem ter prazer em seu design, não sentir dor!
Você pode ler mais sobre esse assunto em “ Construa uma sombra melhor , ”Um guia por Jacci Howard Bear em About.com.
Bordas abruptas
Os cantos das sombras reais não teriam arestas duras, a menos que não tivessem absolutamente nenhuma luz refletida - o que seria uma situação muito incomum. Em vez disso, seus cantos geralmente são arredondados pelos raios de luz que rastejam ao redor deles.
Aqui está um drop-shadow com uma vantagem irrealista:
Este design encantador não tem quase nenhuma ilusão dimensional em qualquer lugar, mas tem uma sombra ao longo da barra lateral direita. O designer talvez quisesse diminuir a hierarquia da barra lateral na página, um efeito que seu plano de fundo azul ajuda a alcançar. Não só é desnecessariamente escuro, mas a margem implausível dificulta o visitante.
Na parte inferior da barra lateral, você pode ver uma transição arredondada, onde o designer criou um efeito mais plausível. Mas você pode ver por que ele não o repetiu no topo, porque ele se encaixaria com a linha horizontal limpa definida pelos elementos superiores bem alinhados. Em vez de exigir o realismo dessa transição arredondada, vamos consertá-lo ao atenuar o sombreamento o máximo possível.
Aqui, eu fiz a sombra tão leve que ela faz pouco mais do que sugerir que está mais para trás. Porque é tão leve, a linha limpa de transição não é feia ou perturbadora.
O que diabos está acontecendo por trás desse objeto?
Às vezes, um drop-shadow enlouquece sem nenhuma razão óbvia, como acontece com a caixa azul em torno do logotipo W3C abaixo.
Por que o drop-shadow está tão distante do objeto e tão arredondado? Quanto mais eu tento entender a história contada por essa sombra, mais confuso fico. Meu palpite é que o designer queria dar mais destaque e peso ao logotipo, o que a sombra ajudaria a realizar, mas prejudica tanto a harmonia da página que não vale a pena.
Não deixe seus gradientes sugerirem diferentes fontes de luz.
Neste excelente design para o WolframAlpha, os objetos na página têm gradientes que variam de branco a laranja pálido. O problema é que o gradiente na região do cabeçalho tem branco no topo, implicando a luz de cima, enquanto os elementos da página abaixo têm branco na parte inferior, implicando a luz de baixo.
Você poderia argumentar que estou pensando demais que os gradientes não precisam se equiparar a fontes de luz. Isso é possível, mas gradientes sutis como esses têm uma relação metafórica inerente aos gradientes que vemos no mundo real. Vamos mudar a direção dos gradientes para baixo na página, de modo que eles impliquem uma fonte de luz acima:
E nós temos a harmonia da fonte de luz.
Em última análise, você está livre para fazer o que quiser.
Como os objetos em uma página da Web se relacionam com objetos reais apenas por metáforas, sua eficácia é essencialmente subjetiva. A conexão entre uma imagem de um botão e um botão real não tem realidade além da mente do usuário.
Nós designers não somos obrigados a tornar nossas metáforas consistentes com a realidade, mas ser atencioso e cuidadoso com os vários níveis de comunicação em um design nos ajuda a tornar nossos sites mais harmoniosos.
E nosso cuidado e consistência ajudam a tornar a experiência do usuário no site confortável e até agradável.
Escrito exclusivamente para WDD por Águia Nate . Ele estudou filosofia na faculdade, uma educação que o preparou perfeitamente para projetar e desenvolver páginas web para a PBS KIDS. Você pode ler mais dele e de seus colegas de trabalho da PBS em Design.PBS .
Você acha que esse nível de detalhe é importante ao projetar sombras e gradientes? Você tem o seu próprio pet peeves sobre como drop-shadows e gradientes são usados?