Dark Theme: 3 dicas para utilizar corretamente em seu layout

Seja em artes ou aplicativos, o dark theme é uma boa escolha para transmitir elegância e uma boa legibilidade à luz noturna

Os smartphones são essenciais em nosso dia-a-dia. Seja para ler notícias, mandar mensagens, assistir vídeos, escutar músicas, entre tantas outras possibilidades. E com o crescente uso dos celulares, a saúde dos olhos acaba prejudicado. 

Na questão de layout, escolher a cor predominante é extremamente importante, pois envolve aspectos de utilidade do produto, assim como contraste, tamanho e outras características.

Mas é necessário observar qual o contexto de uso da sua interface. Seu usuário vai consumir o produto mais de dia ou de noite? Escolha pela necessidade em agradar o usuário e pela usabilidade, nunca pelo estético.

As interfaces claras são as mais utilizadas. Ela possui uma boa legibilidade, é convencional e é boa para leituras na luz do dia e com luz natural. Mas acaba não transparecendo inovação e uma interface atrativa. 

Já as interfaces escuras podem aplicar um toque de elegância. Ela possui uma boa legibilidade em ambientes com pouca luz ou escuridão, e é bom para utilizar elementos gráficos como imagens e vídeos. O fundo preto deixa a leitura menos cansativa e estressante.  

A legibilidade é um dos pontos principais, pois mede a facilidade de leitura das palavras e consequentemente, a velocidade da leitura. Quando ela deixa a desejar, impacta negativamente na experiência do usuário.

tabela de contrastes 1

Alguns programas e aplicativos já possuem a opção modo noturno para ativar e desativar, podendo alterar temporariamente o esquema de cores das telas. Exemplos como Twitter, Gmail, Youtube, Google Chrome, Telegram, entre tantos outros. 

Serviços de streamings de vídeo, como Netflix, Prime Vídeo e Globo Play, e o streaming de música Spotify também optaram pelo tema escuro. Esta escolha foi optada porque a maioria dos seus usuários utilizam em um horário mais tarde, como depois do trabalho ou em lugar com pouca luz. 

rSH7w5aCdnSWeNqk7kgGENZCfUQ8cHTQDuXEfG2Fy46p1XVXYxXgj9lc5GG0gpmmKeaIyXDS nL3mkRKMQM7 aUJ5zsi4yt7ooPOE7TgdBiDdRhpnT pOd rfBLMaw
x u5gfnv6yDcffLYD B5 c4 bp 9ZqkOJ9c4fw6dcN anr1i

Resumindo, é melhor você utilizar o fundo preto quando a mais elementos gráficos do que texto; para trazer elegância e luxo; para reduzir a fadiga visual e tensão ocular; para focar a atenção do usuário com poucas distrações; e para aplicativos de uso noturno; 

Confira três dicas de como utilizar o Dark Theme em seus layouts:

1 – Evite o preto e branco puros

A utilização das cores puras causa desconforto visual, atrapalhando principalmente a leitura. Isso ocorreu devido a situação de contraste intenso causado por essas escalas tonais. Por serem os extremos, também dificultam a utilização de efeitos gráficos como luz e sombra. O recomendado é utilizar um tom de cinza escuro ou claro. 

2 – Não utilize cores muito saturadas

O contraste das cores saturadas em superfícies escuras é maior do que em superfícies claras, o que causa desconforto e dificuldade de leitura quando utilizadas em Dark Themes. Nesse caso, o recomendado é reduzir a saturação e utilizar a cor somente em campos que devam ter maior destaque, como botões ou ícones.  

3 – O cinza é seu melhor amigo

Utilizar a escala de cinza é a chave para o desenvolvimento de um bom Dark Theme. Ela permite que você crie hierarquia dentro do seu layout, agrupando elementos, destacando itens importantes e guiando o leitor por todo o seu layout. 

Primeiro passo:

Ao continuar você concorda com nossa  política de privacidade.