A frase “dourar o lírio” implica ornamentação desnecessáriaa idéia é que adornar um lírio com decoração superficial serve apenas para obscurecer sua beleza natural. Bem, estou aqui para lhe dizer que um pouco de toque do que pode parecer desnecessário Ornamentação no design é exatamente o que você precisa.
Quando seu design é sólido e você acertou os fundamentos, adicionando um Camada de decoração pode ajudar a comunicar um nível de cuidado e atenção.
Primeiro, você precisa de um lírio
Vamos quebrar a metáfora “dourar o lírio”. Primeiro, você precisa de um lírio. Os lírios são naturalmente bonitos e cada um é único. Eles não precisam de mais decoração. Para jogar nesta metáfora, vamos supor que seu design seja Já é ótimo. Caso contrário, você não tem um lírio. Volte ao trabalho nos fundamentos e volte mais tarde (ou continue lendo de qualquer maneira).
Agora que você tem um lírio, vamos falar de dourar. Para “dourar” é cobri -lo com uma fina camada de ouro. Não estamos falando sobre a beleza interior assada na própria alma do seu produto (esse é o lírio parte da metáfora). Um toque de papel de ouro metafórico na superfície pode enviar uma mensagem de prazer com uma pitada de decadência.
Essa dourada pode vir na forma de uma transição sutil e animada ou através de uma pitada de cor e uma profundidade adicionada em uma sombra. Antes de entrarmos em detalhes, vamos garantir que nossa metáfora não nos leve muito longe.
Dourado com moderação
Se formos longe demais com a nossa dourada, podemos comunicar indulgência e excesso, em vez de uma sugestão de decadência.
Um design exagerado pode ser particularmente irritante, dependendo do estado de espírito da pessoa para a qual você está projetando. Por exemplo, uma animação chamativa se gabando do seu novo recurso de bate -papo de IA pode não sentar -se tão bem com um cliente frustrado que não consegue redefinir sua senha para usá -lo em primeiro lugar.
Pisca para o público (uma vez)
Nem todo grande design de produto pode ser tão obviamente bonito como um lírio. Mesmo se você tiver um ótimo design, pode não ser perceptível para aqueles que desfrutam dos benefícios desse design. Nossos projetos nem sempre devem ser perceptíveis, mas às vezes é diversão Observar e apreciar um ótimo design.
Se você é Apple, não precisa se preocupar com o seu design passar despercebido. Ninguém acha que a cor de fundo do site da Apple é branca (#FFFFFF
) porque eles esqueceram de especificar um em sua folha de estilo (embora eu tenha idade suficiente para lembrar uma época em que o fundo padrão da web era um navio de guerra cinza, #CCCCCC
). Está tão claro a partir do nível geral de refinamento e qualidade de produção no site da Apple que o fundo branco é um deliberado escolha.
Você e eu não somos maçã. Seu cliente (provavelmente) não é a Apple. Você não tem um exército de fotógrafos de produtos de classe mundial e designers de movimento que trabalham em uma nave espacial de vidro em Cupertino. Você está em uma pequena equipe pressionando contra o orçamento e o cronograma. Mesmo com essas limitações, você consegue criar ótimos produtos.
O ótimo design por trás de seus produtos pode ser tão bem feito que é invisível. A maçaneta da porta é tão bem-formada que você não percebe o quão bem é a forma. Esse botão é tão bem colocado que ninguém pensa em onde está posicionado.
Quando você está pregando os fundamentos, não há problema em piscar a platéia de vez em quando. Não só está tudo bem, mas pode até aumentar seu design.
Ao chamar apenas um toque de atenção à consideração do seu design, você pode torná -lo ainda mais agradável de experimentar. Leve uma polegada longe demais, porém, e você está distraindo a experiência e implorando por aplausos. Caminhe esta linha com cuidado.
Lírios digitais
Uma metáfora – mesmo uma com ouro e lírios – só nos leva até agora. Vamos considerar alguns exemplos concretos de dourar um produto digital. Quando se trata da web, alguns toques de polimento para alcançar podem incluir o seguinte:
Branco preto e não muito triturado: Em vez de preto sólido (#000000
) e branco sólido (#FFFFFF
) cores na web, Encontre variações sutis. Eles podem parecer pretos/brancos à primeira vista, mas há uma implicação sutil de cuidado e personalização. Um fundo esbranquiçado também permite que você tenha elementos brancos puros, como entradas de formulários, que se destacam bem no pano de fundo. Tenha cuidado para Preserve o contraste suficiente para garantir um texto acessível.
Sombras em camadas e com cores: Josh Comeau escreve sobre trazer cores para sombrasincluindo um ferramenta para ajudar a gerar sombras Isso se sente melhor.
Letras confortáveis: Encontre uma altura confortável de linha e espaçamento de cartas para a família de fontes que você está usando. Um sistema de tipo responsivo como utopia Pode ajudar a definir o espaçamento que parece e se sente confortável em uma variedade de tamanhos de dispositivo.
Um toque de cor: Quando você não deseja que as cores da sua marca sobrecarregem seu design ou gostaria de uma cor complementar para acentuar um site monótono, considere adicionar uma única faixa simples de cor sólida na parte superior da viewport. Mesmo algo alguns pixels de altura pode adicionar um belo toque de cor sem complicar o restante do design. O Site para a estrutura da web One React Isso faz isso bem e vai além com um sotaque amarelo de formato exclusivo na parte superior do local. É ainda mais sutil se você estiver vendo o design do modo escuro, mas ainda está lá.
Ilustração e fotografia: É mais fácil do que nunca encontrar ilustrações caprichosas e divertidas para o seu site, mas nenhuma imagem de estoque pode substituir uma ilustração ou foto relevante que deve foram criados apenas para este caso. Uma lista à parte encomendou uma ilustração única em um estilo consistente para cada um de seus artigos para décadas. Você não precisa ser um ilustrador talentoso. Pode haver charme em seus rabiscos amadores. Se não, Contrate um grande artista.
Cuidado, dourada barata
Os símbolos de decadência são valorizados porque são preciosos de alguma forma. É por isso que falamos sobre dourar com ouro e não de bronze. É também por isso que um cartão de visita com cantos arredondados pode parecer mais premium do que um retângulo simples. Parece mais caro porque é.
A impressão ficou muito barata, mesmo com toques premium. A impressão floresce como cantos arredondados ou um acabamento suave não transmite o mesmo valor e os cuidados que eles fizeram antes de se tornarem opções rápidas para cima da sua loja de impressão local (ou orçamentária on-line).
Uma carta de apresentação bem-palavras e atenciosa costumava ser uma ótima maneira de se destacar de uma pilha de currículos semelhantes. Agora, é preciso uma abordagem totalmente diferente para se destacar de uma parede de cartas de apresentação geradas por AI-Llm que dizem que tudo o que um empregador pode querer ouvir.
Na web, é usada uma página de destino em que as seções de novas páginas deslizam e desaparecem com animação para sugerir que alguém passou um tempo extra na implementação. Agora, uma página com muito movimento parece mais um milhão de outros modelos ativados por ferramentas de construção de sites como Wix, Squarespace e Webflow.
As fontes personalizadas também se tornaram tão fáceis e onipresentes na Web que manter as fontes padrão do sistema pode ser uma declaração tão forte quanto um tipo de letra elegante.
Alguém se importa?
Todo mundo vai notar que as sombras do seu site têm uma pitada de cor? Não qualquer um vai notar? Talvez não. Se você acertar os detalhes corretamente, as pessoas vão sentir isto. Esses níveis de polimento são cumulativocontribuindo com um por cento aqui e ali para a experiência geral. Eles podem não notar o tom da sua sombra, mas podem transmitir alguma confiança de uma sensação dos cuidados que entraram no design.
A maioria das pessoas não é desenvolvedores ou designers da web. Eles não conhecem os detalhes da implementação das animações do CSS e das shadows de caixa. Da mesma forma, eu não sou um especialista em carros – longe disso. Eu valorizo a confiabilidade e a acessibilidade mais do que desempenho e luxo em um carro. Mesmo assim, quando fecho a porta em um veículo de alta qualidade, posso sentir a diferença.
No próximo projeto, permita -se dourar apenas um lírio.
(GG, YK)