O que é Neumorfismo?
O neumorfismo é uma tendência de design que surgiu por volta de 2020 e rapidamente ganhou popularidade na comunidade de design de UI. É um sucessor estilístico do skeuomorfismo – uma abordagem de design que envolve fazer com que os itens se assemelhem aos seus equivalentes do mundo real. Lembra da antiga interface do iBooks com estantes? Esse?
Isso é skeuomorfismo.
O neumorfismo pega esse conceito e lhe dá um toque moderno. Em vez de imitar materiais do mundo real, como madeira ou vidro, os designs neumórficos parecem ter sido feitos do mesmo material do fundo, criando um efeito de extrusão ou recuo suave.
Aqui está um bom exemplo de neumorfismo em ação:
Este efeito é obtido usando sombras e realces precisos que dão a ilusão de formas 3D emergindo do fundo. O resultado é uma aparência suave e acolchoada que parece inserida e extrudada ao mesmo tempo. Como dissemos, é como se os elementos da UI fossem feitos do mesmo material do plano de fundo e saíssem (ou entrassem) na tela.
Os Princípios do Design Neumórfico
A criação de um design neumórfico de sucesso requer um equilíbrio cuidadoso de cores, sombras e formas. Aqui estão alguns princípios-chave a serem considerados:
1. Uso de sombras
As sombras são a espinha dorsal do neumorfismo. Eles criam o efeito 3D que faz com que os elementos pareçam estar saindo ou afundando no fundo. O truque é usar duas sombras: uma na parte superior e outra na parte inferior do elemento.
A sombra superior geralmente é uma versão mais clara da cor de fundo, enquanto a sombra inferior é mais escura. Esta combinação cria a ilusão de profundidade e dimensão.
2. Paleta de cores sutis
O neumorfismo favorece uma paleta de cores minimalista e sutil. Os elementos da IU geralmente têm a mesma cor do plano de fundo, mas com tons ligeiramente diferentes para criar um contraste suave. A paleta de cores costuma ser suave e clara, com muitos brancos, esbranquiçados e cinzas claros. No entanto, você também pode usar cores mais escuras para uma aparência diferente.
O neumorfismo pode levar à falta de contraste se você não tomar cuidado – sempre certifique-se de que seus designs sejam acessíveis!
3. Formas Simples e Geométricas
O design neumórfico tende a favorecer formas simples e geométricas. Círculos, retângulos e quadrados são comumente usados. Essas formas funcionam bem com sombras e realces suaves, contribuindo para a aparência geral “suave” da IU de neumorfismo.
4. Consistência
A consistência é a chave no design neumórfico. A fonte de luz deve ser consistente em todos os elementos, e o mesmo vale para cores e sombras. Essa consistência ajuda a manter a ilusão de que os elementos fazem parte do mesmo material do fundo.
Como criar um design neumórfico
Então, como você consegue um design de estilo neumórfico em seu próximo projeto? Aqui está um guia rápido passo a passo para ajudá-lo a criar sua própria UI neumórfica.
Etapa 1: entenda o design
Familiarize-se com o que é neumorfismo (e o que não é). Navegue pelas galerias de exemplos de design para ter uma ideia melhor da aparência geral que você gostaria de ter.
Por exemplo, você pode optar por algo extremamente sutil:
Ou você pode optar por algo mais complexo:
Etapa 2: escolha a paleta de cores certa
Em seguida, você precisará selecionar a paleta de cores correta. Para o efeito neumórfico, você precisará de três tonalidades da mesma cor:
- Uma cor clara para a sombra clara
- Uma cor de tom médio para o plano de fundo principal e a cor do elemento
- Uma cor escura para a sombra escura
Essa técnica de seleção de cores garante consistência e alinhamento em suas cores.
Etapa 3: crie seus elementos de design
Depois de escolher sua paleta de cores, é hora de criar seus elementos de design. No design neumórfico, os elementos são frequentemente representados em diferentes formas ou por diferentes técnicas. O segredo é criar elementos que dêem a impressão de sair do fundo, em vez de flutuarem na interface.
Você pode encontrar vários elementos de UI de neumorfismo para escolher entre os Envato Elements. Por exemplo, o ga-analytics#sendElementsClickEvent”>Osvaro Neumorphism Design Mobile Template UI Kit é um bom exemplo do que está disponível. Você pode ver facilmente como os botões têm sombras e dada a aparência de profundidade.
O ga-analytics#sendElementsClickEvent”>Purasa Responsive Mobile Template também inclui elementos neumórficos:
Para conseguir uma aparência semelhante por conta própria, você precisará brincar com sombras e cores. Seu fundo não deve ser totalmente branco ou totalmente preto, pois as sombras não seriam claramente definidas. Em vez disso, escolha uma cor levemente colorida.
Etapa 4: implemente o neumorfismo em sua interface de usuário
Agora que você tem seus elementos de design, é hora de implementá-los em sua interface de usuário. Isso envolve a criação de um design neumórfico para os elementos da interface, como botões, controles deslizantes e cartões.
Lembre-se de que o objetivo do neumorfismo é criar uma sensação de profundidade e realismo, ao mesmo tempo que adere ao minimalismo. Portanto, mantenha seu design limpo e simples e deixe as sombras e as cores fazerem o trabalho.
Etapa 5: considere a acessibilidade
Ao criar seu design neumórfico, é importante considerar a acessibilidade. Como o design neumórfico usa a mesma cor para o botão e para o plano de fundo, não há taxa de contraste a ser considerada. Isto pode tornar difícil para alguns utilizadores, especialmente aqueles com deficiência visual, distinguir entre diferentes elementos.
Para garantir que seu design seja acessível, considere adicionar dicas visuais adicionais, como ícones ou texto, aos elementos de design. Além disso, considere usar uma cor de maior contraste para elementos importantes, como botões de call to action.
Neumorfismo em ação: um estudo de caso para aprender
Vamos dar uma olhada em uma aplicação real do neumorfismo para entender melhor como essa tendência de design pode ser implementada de forma eficaz.
Spotify
Um dos estudos de caso mais interessantes do neumorfismo em ação é o redesenho da interface do usuário do Spotify. Neste estudo de caso, a designer Sangeeta Baishya decidiu experimentar o neumorfismo no modo escuro. O Spotify foi escolhido para este experimento devido à sua ampla base de usuários, sua variedade de widgets (cartões, chips, listas, controles deslizantes, campos de texto) e sua arquitetura simples.
O redesenho manteve a paleta de cores, fontes e estrutura originais do aplicativo, mas introduziu elementos neumórficos nos botões e no logotipo do Spotify. O logotipo recebeu uma borda levemente elevada em toda a volta, criando uma borda mais definida, preservando o charme neumórfico. Os botões foram projetados de forma que não sobrecarregassem o usuário, mas mantivessem o estilo neumórfico intacto.
Saiba mais sobre as principais tendências de design
Quer saber mais sobre as principais tendências de design? Estamos protegendo você. Confira alguns desses tutoriais e resumos sobre várias tendências recentes de design para ajudá-lo a manter o controle do mundo do design:
Você usará a interface do Neumorfismo?
O neumorfismo é uma tendência de design fascinante que oferece uma nova visão do design de UI. Com suas sombras suaves, cores sutis e estética minimalista, é um estilo que pode destacar sua interface.
Porém, como qualquer tendência de design, é importante utilizá-la com cautela e sempre considerar a acessibilidade. Com a abordagem certa, o neumorfismo pode ser uma ferramenta poderosa em seu kit de ferramentas de design. Como você fará uso disso?
[ad_2]
