Neumorfismo (ou neumorphism) parece ser uma tendência de UI para 2020. Designers pelo mundão afora já estão propensos a esquecer tudo o que aprenderam para não ficarem de fora.
Vejamos do que se trata esse tal Neumorphism, suas características e se realmente “vai pegar”.
E o esqueumorfismo?
Embora ainda existam várias formas de skeuomorfismo em user interfaces (a lixeira do SO do computador, por exemplo), a tendência para uma parte específica desse estilo parece ser mais aparente.
Como alguns designers estão notando, a mudança das “representações” sem vida para algo que esteja “no meio do caminho” para o realismo começou a acontecer.
Foi se percebendo que essa mudança começou a acontecer ao nosso redor — a Apple sendo um bom exemplo. O impulso do “super plano e mínimo” sofreu uma contração e chegou mais perto da sensação “3D sem textura”. As pessoas parecem gostar.
“no meio do caminho”, mas melhor?
O hype do neumorphism parece ter começado com essa imagem no Dribbble (que, rapidamente, se tornou viral):
Essa imagem iniciou uma tendência e, embora algumas partes dela não façam muito sentido — uma seta para deslizar para trás? –, alguns estão considerando o neumorphism uma lufada de ar fresco no mundo das UIs.
Características do neumorphism
Como na parte de botões não muda muita coisa, vamos nos concentrar no conceito de cards, que torna esse estilo visual tão agradável.
Card moderno/Material
Um cartão moderno/Material geralmente é uma superfície flutuando sobre o fundo percebido e projetando uma sombra sobre ele. A sombra fornece profundidade e, em muitos casos, define a forma em si — já que muitas vezes é sem borda.
Card com Neumorphism
O cartão com Neumorfismo — “cartão neumorfo”? –, por outro lado, passa um efeito de “extrudar” o background: é uma forma elevada, feita exatamente do mesmo material que o background. Quando se olha de lado (side view), dá-se a impressão de que ele não “flutua”.
Na verdade, é fácil alcançar esse efeito: simplesmente, usa-se 2 sombras, uma com valores negativos e outra com positivos. Mas, para que funcione, o background não pode ser totalmente preto ou totalmente branco. Ele precisa de pelo menos um pouquinho de tonalidade para que as sombras escuras e “claras” sejam visíveis.
É possível usar qualquer hue para o background, para que fique mais quente ou mais frio, dependendo da escolha/necessidade, mas sombras brancas e escuras precisam ser visíveis, mesmo que ligeiramente.
Eis um modelinho a seguir (que, claro, pode receber variações):
Prós e contras do neumorphism
O principal benefício do neumorphism é seu “frescor” (pelo menos, enquanto durar). Ele traz essa “nova sensação” para a interface e faz com que ela se destaque. Também, pode ser misturado com outros estilos para que não fique “plástico extrudado” em todos os lugares.
No entanto, existem alguns problemas que precisam ser apresentados. 2 problemas principais encontrados até agora são:
- Visibilidade / Acessibilidade
- Maneiras eficientes de codificar o neumorfismo
Visibilidade / Acessibilidade
O principal problema com a proporção de contraste (contrast ratio) quando se tem a mesma cor para o elemento e para o background é que, na verdade, não há contrast ratio.
Visibilidade
Objetivamente, há uma sombra para que seja possível tentar identificar o primeiro pixel fora dela. No caso do exemplo acima, acaba-se com esses valores de contraste.
Trocando em miúdos: é mais difícil identificar/separar elementos que usam neumorphism.
Como é possível ver, cards material ou neumórficas têm baixíssimo contraste — parte do seu “charme” está nisso. Portanto, desde que se mantenha os botões em destaque e com alto contraste, esse tipo de questão é minimizado.
A diferença entre elas é marginal e, se fosse preciso usar um contraste muito mais alto para os cards, poderia se fazer desta maneira:
E como quase ninguém faz sombras tão fortes, significa que o restante dos elementos da UI precisaria estar acessível. Essa suposição leva à conclusão de que esses cards não são realmente tão importantes se fizermos a hierarquia correta por meio da tipografia, proximidade e contraste com os elementos importantes.
Isso ainda precisa ser amplamente testado, mas, por enquanto, é possível assumir que as 2 “versões” do elemento abaixo estão “OK”; mesmo que algumas pessoas não vejam as sombras suaves, ainda há contraste suficiente para ver o ícone e “usá-lo”.
Acessibilidade
Enquanto um “botão” deve parecer um botão, se o ícone, em si, for contrastado o suficiente com o fundo, ele ainda funcionará. Portanto, a principal coisa a ser lembrada aqui é que, se você seguir esse estilo, mantenha todos os elementos importantes nele com contraste suficiente.
Afinal, a maioria das visualizações “modernas” de cards com suas sombras também não passam nos testes de contraste.
Somente cards?
O principal problema com a acessibilidade aparece, no entanto, quando se decide usar os componentes com estilo de neumorfismo como botões ao invés de como cartões.
É possível criar facilmente um estado de “pressionado” com sombras internas invertidas, como no exemplo abaixo.
Você pode não ter notado, mas esse problema é um dos grandes: esse estado pressionado tem muito pouco contraste para significar uma diferença.
Eis algumas idéias de como usar, como usar um contorno e um ícone preenchido, um sublinhado ou até mesmo preencher o estado pressionado com uma cor:
Tenha isso em mente ao fazer seus designs. Todos nós amamos o “bonito”, mas também precisamos lembrar que ele (idealmente) precisa ser usável por todos.
Maneiras eficientes de codificar o neumorfismo
Vamos tratar a codificação como uma rodada bônus, pois é realmente mais fácil do se poderia supor inicialmente alcançar essa aparência de “plástico extrudado” em CSS.
Claro, na hora da codificação CSS, é possível combinar as 2 box-shadows da caixa com uma vírgula entre elas.
Outros efeitos com neumorfismo
Além de shapes, o neumorfismo também pode aparecer em botões e switches mais “graphic intense”. Em muitos casos, simplesmente é preciso voltar aos “bons velhos tempos” e usar bitmaps. Isso parece uma regressão, mas não se preocupe — não é necessário.
É possível combinar facilmente botões modernos e totalmente codificáveis com esses formatos de cartão com ótimos resultados.
Neumorphism é realmente necessário?
Embora essa nova tendência certamente esteja inspirando muitos designers, os problemas não são tão grandes em comparação com os problemas de acessibilidade dos componentes de cards mostrados anteriormente.
Então, lá vai aquele conselho genérico quando estamos tratando de novidades: go wild!
Brinque com essa tendência e ajuste-a para torná-la sua. O trabalho do UI designer é mover retângulos, portanto, toda vez que os retângulos se tornam um pouco “diferentes” e “novos”, isso traz um pouco de alegria de volta. Sem essa exploração constante, todos os produtos voltarão a ter a mesma aparência.
Claro que cada nova tendência vem com advertências e deve ser cuidadosamente projetada para ser utilizável, mas, pelo menos por enquanto, vamos nos divertir com o neumorphism!