Em destaque: os princípios do Dark UI Design

Os designs de interface do usuário escuros são vistos em toda parte, de telas móveis a TVs massivas. Um tema escuro pode expressar poder, luxo, sofisticação e elegância. No entanto, projetar para UIs escuras apresenta vários desafios e não atenderá às expectativas se implementado de forma inadequada. Antes de mergulhar no “lado negro”, os designers devem olhar antes de pular.

Os físicos dizem que o preto não é realmente uma cor; é a ausência de luz . Em seus experimentos iluminando a luz do sol através de prismas, Sir Isaac Newton nem mesmo a incluiu no espectro de cores.

Na psicologia das cores, a maioria das cores representa coisas diferentes para pessoas diferentes. Nas culturas ocidentais, o preto é frequentemente associado à morte, mistério e maldade. O verde é frequentemente associado ao crescimento por causa da natureza. O azul é quase universalmente calmante porque está associado ao céu e à água. A cor é emocional.

Outros efeitos são culturais. O roxo, por exemplo, ainda é associado ao luxo porque, em muitas culturas antigas, o corante roxo era caro e raro – apenas a realeza podia pagar. Foi uma parte significativa do zeitgeist cultural por tempo suficiente para se tornar parte da psique humana .

Produtos digitais com interfaces escuras — associadas a poder, elegância e mistério — são uma tendência formidável. Embora muitas vezes se diga que o modo escuro pode reduzir a fadiga ocular, não há evidências de que isso seja verdade. Sob certas circunstâncias, também deve economizar a vida útil da bateria. Ainda assim, na maioria das vezes, os temas sombrios são uma escolha estética.

IU escura x IU clara

Nem todas as interfaces são adequadas para um tema escuro. Os designers devem analisar o ajuste da marca, a adequação cultural e a psicologia das cores e considerar o impacto emocional antes de optar por uma. É um ato de equilíbrio complicado.

Enquanto um aplicativo financeiro direcionado à geração do milênio pode atingir o fator legal com um tema sombrio, pode ser inadequado para o site de um grande banco voltado para a população em geral. Muito rico, muito escuro e muito estiloso pode se tornar mais frustrante quando tudo o que as pessoas querem fazer é verificar seus saldos e pagar uma conta.

As UIs escuras de aplicativos B2B SaaS são notoriamente difíceis de projetar. Componentes padrão da interface do usuário da Web, como tabelas de dados, widgets, formulários e menus suspensos, podem parecer estranhos em uma interface do usuário escura. Como muitos esquemas de cores não funcionam bem com IUs escuras, certas marcas e produtos – dependendo do tipo, contexto e fatores ambientais – não são adequados e podem ser um desafio intransponível.

Designers que não trabalharam com design de UI escuro antes e decidem entrar com os dois pés podem se encontrar em águas ásperas e desconhecidas. Nos oceanos de interfaces obscuras, as normas são distorcidas, as regras são alteradas e as armadilhas são muitas.

Dito isso, há muitas boas razões para usar UIs escuras:

• Quando o design é esparso e minimalista com apenas alguns tipos de conteúdo
• Quando for apropriado para o contexto e uso, como aplicativos de entretenimento noturno
• Para criar um visual marcante e dramático

E há cenários em que não é recomendado:

• Quando há uma grande quantidade de texto (é difícil ler em um fundo escuro)
• Quando há muitos tipos de conteúdo misto
• Quando o design pede uma ampla gama de cores

Contraste no design de IU escuro

Um tema escuro não é um tema preto. Seria melhor pensar como um tema de “pouca luz”. Uma das principais preocupações com UIs escuras é obter contraste suficiente para que os elementos visuais tenham separação e o texto seja legível. A maioria dos designers pensaria que usar preto seria ideal para obter um forte contraste. No entanto, é melhor não usar preto verdadeiro (#000000) para planos de fundo ou cores de superfície . O preto é melhor reservado para outros elementos da interface do usuário e usado com moderação. Por exemplo, o preto verdadeiro pode ser usado para pequenos elementos de interface do usuário ou um painel ao redor.

O tema escuro do Material Design do Google recomenda o uso de cinza escuro (#121212) como uma cor de superfície de tema escuro “para expressar elevação e espaço em um ambiente com uma maior variedade de profundidade”. Além disso, muitos designers recomendam adicionar um tom sutil de azul escuro aos cinzas escuros ao definir o esquema de cores. Ele tende a criar um tom escuro melhor para telas digitais e uma paleta de cores escuras da interface do usuário mais agradável.

Uma vantagem de usar uma gama de cinzas é que ela dá liberdade aos designers porque uma gama mais ampla de cores pode ser expressa. Uma paleta cinza também ajuda a criar profundidade porque as sombras projetadas podem ser vistas mais facilmente contra cinza versus preto.

Atenção especial deve ser dada ao contraste de texto em UIs escuras.

As Diretrizes de Acessibilidade de Conteúdo da Web (WCAG) exigem que “a apresentação visual do texto tenha uma taxa de contraste de pelo menos 4,5:1 ”, exceto para texto em grande escala, que deve ter uma taxa de contraste de pelo menos 3:1 . Portanto, os designers precisam garantir que o conteúdo permaneça confortavelmente legível no modo escuro.

Também é uma boa ideia testar o contraste adequado entre outros elementos da interface do usuário, como cartões, botões, campos e ícones em vários monitores e dispositivos. Se houver uma separação imperceptível entre os elementos da interface do usuário, o design se mistura muito e corre o risco de se tornar maçante.

Concentrando a atenção: Cor

A cor se destaca em UIs escuras. É melhor usar esquemas com cores de destaque mais claras e insaturadas. Evite usar cores saturadas em UIs escuras, pois elas podem vibrar visualmente em superfícies escuras. Além disso, como prática recomendada, as cores precisam passar pelo padrão AA do WCAG de pelo menos 4,5:1 quando usadas com texto.

Ao definir um esquema de cores para uma IU escura, o Google recomenda um número limitado de detalhes de cores para manter a maior parte do espaço disponível para superfícies escuras. Usar cores complementares divididas pode ajudar. O esquema tem uma cor dominante e duas cores adjacentes ao complemento da cor dominante. Isso fornece o contraste necessário sem a tensão do esquema de cores complementares.

O esquema de cores certo pode ajudar a criar um bom contraste. Colorable é uma ferramenta útil para selecionar combinações de cores de texto e cores de fundo compatíveis com acessibilidade.

Texto e elementos essenciais, como botões e ícones, devem atender aos padrões de legibilidade ao aparecer em fundos escuros. Conforme visto no aplicativo Jabra Sound+ acima, cores diferentes do branco podem ser usadas para texto e ícones.

O site de design de materiais do Google tem um gerador de paleta de cores útil (em “Ferramentas para escolher cores”) com o qual os designers podem criar e aplicar paletas de cores a uma interface do usuário. O nível de acessibilidade das combinações de cores também pode ser medido com uma ferramenta de cores complementar.

“Use cores fortemente contrastantes para melhorar a legibilidade. Muitos fatores afetam a percepção da cor, incluindo tamanho e peso da fonte, brilho da cor, resolução da tela e condições de iluminação.” Diretrizes de interface humana da Apple

Menos é mais: aproveitando o espaço negativo

Um dos elementos fundamentais do design de IU escuro bem-sucedido é o uso hábil do espaço negativo. Se mal projetadas, as interfaces escuras podem fazer com que os produtos digitais pareçam pesados ​​e arrogantes. Para contrabalançar, os designers podem tornar as UIs escuras mais leves, aproveitando o espaço negativo em designs esparsos e minimalistas. O design minimalista é tanto sobre o que não está lá quanto sobre o que está. Quando usado com habilidade, o espaço negativo tornará uma interface de usuário escura mais digitalizável e permitirá que as pessoas absorvam informações com mais facilidade.

O compositor francês Claude Debussy disse uma vez: “ A música é o espaço entre as notas ”. O mesmo sentimento vale para a escaneabilidade – espaço negativo entre os elementos é o que faz um layout funcionar. Uma quantidade generosa de espaço negativo em torno dos elementos da interface do usuário é o que lhes dá definição. Ele enfatiza o conteúdo importante e fornece o espaço necessário para garantir que o design não pareça denso e confuso. Sem espaço para respirar, o cérebro humano é menos propenso a escanear pontos de interesse e mais propenso a vagar.

Interfaces abarrotadas de muitos elementos e texto são a ruína do design de UI escuro de alta qualidade. Ao considerar cuidadosamente a hierarquia visual em UIs escuras, os designers podem tornar suas criações mais facilmente escaneáveis, elevando assim a experiência do usuário.

Palavras de estilo: tipografia

Cada pedaço de texto em interfaces de usuário escuras requer escrutínio. A preocupação é dupla: legibilidade e contraste. Primeiro, é sobre o tamanho. O texto precisa ser grande o suficiente para uma boa legibilidade (texto pequeno em fundos escuros é mais difícil de ler). Em segundo lugar, deve haver contraste suficiente entre o texto e o fundo.

A disponibilidade de milhares de fontes digitais facilita a exibição de mensagens com impacto para cabeçalhos e mensagens principais. Os designers podem atenuar os problemas de legibilidade aumentando o contraste e ajustando o tamanho da fonte, o espaçamento dos caracteres e a altura da linha para textos menores.

A recomendação W3C AAA para texto de tamanho normal (menos de 18 pontos se não estiver em negrito) é ter uma taxa de contraste de pelo menos 7:1 . Isso também se aplica a outros elementos da interface do usuário: ícones, imagens de texto e rótulos de texto, como rótulos de botão. Cabe aos designers garantir que todos os produtos digitais sejam acessíveis a todos. Não apenas melhora a usabilidade e, portanto, o UX, é a lei na maioria dos países.

Existem inúmeras opções disponíveis para os designers obterem fontes excelentes que funcionam bem em interfaces de usuário escuras. Google Fonts, Font Library e Adobe Typekit são alguns que oferecem fácil integração de aplicativos ou sites e uma ampla variedade de opções.

Profundidade de Comunicação: Elevação

Um tema escuro não significa plano. Com temas claros, iluminação, sombreamento e sombras criam uma sensação de profundidade. Com UIs escuras, é mais desafiador porque elas contêm superfícies predominantemente escuras com detalhes em cores esparsas. Ainda assim, os designers podem usar três ou quatro níveis de elevação com esquemas de cores correspondentes para que o texto transmita profundidade.

Por que profundidade? A maioria dos sistemas de projeto modernos usa um sistema de níveis de elevação para comunicar a profundidade. Uma sensação de profundidade corresponde ao mundo natural. Nossa visão tem percepção de profundidade e vivemos em um mundo 3D. A profundidade ajuda a enfatizar a hierarquia visual de uma interface. Elementos em primeiro plano, por exemplo, chamam a atenção para si mesmos, como uma caixa de diálogo de aviso.

As superfícies são iluminadas de forma diferente para significar diferentes níveis de elevação. Quanto mais alta for a posição de uma superfície na pilha de elevação (mais próxima de uma fonte de luz implícita), mais clara será a superfície. Uma superfície mais brilhante torna mais fácil distinguir a elevação entre os componentes e ajuda a ver as sombras, tornando as bordas de cada superfície mais aparentes.

Conceber a cor da superfície de cada nível requer cuidado. É melhor não ter mais de quatro ou cinco níveis. Os designers precisam levar em conta o contraste do texto à medida que as superfícies ficam mais altas na pilha e ficam mais claras. Se a cor de fundo não for escura o suficiente para atingir um nível de contraste de pelo menos 15,8:1 entre o texto branco e a superfície, o texto na superfície elevada mais alta (e mais clara) não passará no padrão 4,5:1. Em alguns casos, pode ser melhor especificar a cor do texto de um elemento como preto verdadeiro (#000000) no sistema de design para obter um bom contraste em um fundo cinza claro.

Inspiração de design de IU escura

Refletindo sobre os princípios descritos acima, aqui estão alguns exemplos excelentes de design de IU escuro:

O Atom Finance aproveita um tema escuro para uma aparência sofisticada e limita suas cores de destaque a três. O layout usa espaço negativo e um design esparso e minimalista para um site financeiro complexo. O site usa sombreamento sutil para indicar diferentes elevações de componentes na interface do usuário.

Ambos os sites de tema escuro minimalista usam tipografia em negrito. O sombreamento cuidadoso com uma única cor de destaque é usado em alinhamento com as práticas recomendadas de design de IU escura.

Apesar dos desafios de trabalhar com temas obscuros para aplicativos SaaS, este painel de visualização de dados para a IBM é exemplar. O número de cores de destaque é mínimo e o site usa sombreamento sutil para mostrar diferentes elevações da interface do usuário.

Esses aplicativos móveis seguem as práticas recomendadas de design de IU escura usando preto verdadeiro apenas para molduras, sombreamento adequado de elementos para diferentes níveis de elevação e um número limitado de cores de destaque.

Resumo

A decisão de usar um design de UI escuro em vez de um tradicional precisa ser abordada com discrição. Não deve ser escolhido pelos motivos errados – ser moderno, diferente ou imitar o design de outra pessoa. Os designers devem ter uma forte justificativa para sua escolha e considerar o conteúdo, o contexto de uso e o dispositivo no qual o design será exibido.

Temas escuros são adequados para alguns produtos digitais, mas uma verdadeira luta para implementar em outros. Simplicidade é fundamental. Eles são ótimos para apresentar conteúdo minimalista, visualizações de dados, sites de mídia e plataformas de entretenimento. Eles são inadequados para plataformas B2B complexas e com muitos dados, páginas com muito texto e muito conteúdo variado.

Para designers corajosos prontos para cruzar novas fronteiras estilísticas e explorar UIs obscuras através de uma lente emocional e estética, eles oferecem um empolgante playground de infinitas possibilidades – no “lado escuro”.

Deixe-nos saber o que você pensa! Por favor, deixe seus pensamentos, comentários e feedback abaixo.

• • •

Leia mais no Blog Toptal Design:

• Interfaces de usuário escuras. O bom e o mau. Faça e não faça.
• Os princípios do design e sua importância
• Explorando os Princípios de Design da Gestalt
• Compeling and Moving – Um guia para os princípios do Motion Design
• Impulsione seu UX com estes princípios de design de interação bem-sucedidos