Se você acha que nunca ouviu falar de glassmorphism, arrisco um palpite de que você já o viu em algum momento hoje! Como o nome sugere fortemente, essa tendência de design de interface do usuário se inspira em … você adivinhou, vidro.
Se você tiver um iPhone, dê uma olhada rápida nas pastas em torno de seus aplicativos. Se você estiver usando o Windows, dê uma olhada em alguns dos elementos da interface do usuário em sua tela agora mesmo. Você pode ver um efeito de vidro fosco em qualquer lugar? Sim? Pronto, isso é vidromorfismo.
Veja a pasta e o efeito de fundo do widget no iOS? Vidro fosco
Então, quais são as qualidades do Glassmorphism?
Embora o vidromorfismo não seja um conjunto completo de princípios de design da mesma forma que o brutalismo ou o neubrutalismo, é uma técnica que vem crescendo em popularidade nos últimos anos.
Com o termo cunhado apenas em 2020, o conceito de desfoque de fundo foi amplamente introduzido em 2013 com o iOS 7.
“Essa verticalidade e o fato de que você pode ver através dela significa que os usuários podem estabelecer a hierarquia e a profundidade da interface. Eles simplesmente veem qual camada está sobre qual, assim como pedaços de vidro virtual.Por causa dessa aparência vítrea, acredito que a melhor maneira de chamá-lo é vidromorfismo.” – Michal Malewicz
As características comuns do glassmorphism incluem:
- Translucidez (como vidro fosco usando um desfoque de fundo)
- Uma borda leve e sutil ao redor do objeto glassmorphic
- Cores vivas
- Abordagem em várias camadas
- Gradientes
- Objetos flutuando no espaço
Uma Breve História do Glassmorfismo
Lembra da tendência do skeuomorfismo? Começou a tomar forma na década de 1980 e é uma técnica que favorece a imitação de objetos reais no mundo digital.
A IU original do iBooks da Apple no iPad é um exemplo comum. Especialmente nos primeiros dias da web, quando grande parte da população não estava tão acostumada com a tecnologia preenchendo todos os cantos de nossas vidas, o skeuomorfismo quase nos mostrou como interagir com nossas telas, recriando objetos comuns que nos são familiares no mundo real. mundo.
Embora menos popular agora do que antigamente, a tendência não está morta. Basta dar uma olhada na lixeira do seu computador, por exemplo.
O vidromorfismo pegou o skeuomorfismo e o sacudiu.
Considerando que uma abordagem esqueumórfica para o vidro seria recriar a aparência exata (talvez com peitoris de janela, cestas de janela e painéis para encorajar o usuário a clicar para abrir), o vidromorfismo recria o sentimento de vidro. O usuário não correria o risco de pensar que está vendo um real painel de vidro em sua tela, mas uma clara expressão digital do objeto físico.
Por que usar o Glassmorphism no Web Design?
- Por fim, é uma técnica útil para adicionar hierarquia visual aos seus designs, o que significa que você pode incentivar o usuário a se concentrar em áreas importantes da interface do usuário.
- Pode tornar o layout mais atraente.
- É versátil – essa técnica pode ser usada em praticamente qualquer setor!
- Isso pode facilitar a navegação em sites ou aplicativos.
- É uma evolução moderna das tendências anteriores.
Dicas para introduzir o Glassmorphism no Web Design
- Contraste: Certifique-se de aplicar contraste suficiente com os cartões e a interface para que seja acessível e fácil de usar ou ler. Para garantir que o design seja acessível, os objetos na tela devem poder funcionar sem o fundo.
- Transparência: Defina a transparência correta, ou seja, você não deseja ter um objeto completamente transparente (isso derrota o ponto!), mas também deseja ver uma dica do que está acontecendo abaixo do objeto vidrado.
- Plano de fundo: escolha o plano de fundo correto – o melhor efeito vitrificado pode ocorrer quando os planos de fundo não são muito simples ou muito confusos. Escolher um fundo suave, mas colorido, pode ser uma boa opção aqui.
- Tempo: se você estiver construindo do zero, certifique-se de ter tempo suficiente para experimentar. Por causa dos gradientes e da transparência, há uma linha tênue entre o vidromorfismo ajudando e atrapalhando a experiência do usuário. Certifique-se de que você está do lado certo!
Para você!
Acha que o glassmorphism pode ser uma técnica útil para o seu próximo projeto de web design? Escolha um dos meus modelos favoritos ou acesse ga-analytics#sendMarketClickEvent”>ThemeForest para escolher o seu.
Links Úteis de Glassmorfismo
