Como obter o design correto do modo escuro

Como obter o design correto do modo escuro

16 de October, 2020 0 By António César de Andrade


Temas escuros são em toda parte nos dias de hoje.

Como os seres humanos continuam a passar mais tempo interagindo com a tecnologia, os temas sombrios fornecem uma maneira mais relaxante de se envolver com o mundo digital. Na maioria das vezes, esses temas são mais agradáveis ​​aos olhos, mais atraentes e perfeitos para o usuário dedicado.

Ao longo de 2020, inúmeras marcas líderes lançaram sua própria versão do tema escuro. O Google tem uma solução para o seu Drive, enquanto a Apple e o Android integraram o desempenho do tema escuro diretamente em seus sistemas operacionais.

Se você ainda não aprendeu como tirar o máximo proveito do modo escuro, pode estar perdendo uma excelente oportunidade de diferenciar suas habilidades de design e ganhar mais clientes no futuro.

Por que o modo escuro?

Antes de nos aprofundarmos nas possibilidades de criar seu próprio tema escuro, vamos examinar o que é o modo escuro e por que ele é tão eficaz.

Em última análise, os temas escuros são criados para reduzir a quantidade de luminância emitida por tudo, desde seu desktop e laptop até seu smartphone e smartwatch. Temas escuros ajudam a melhorar o ergonomia visual de design, reduzindo a fadiga ocular, ajustando o brilho para se adequar às condições de iluminação atuais e muito mais. Além disso, muitas ofertas de modo escuro também são fantásticas para conservar a vida útil da bateria.

Aqui estão alguns dos principais benefícios de adicionar temas escuros ao seu portfólio de design.

  • Melhor experiência do usuário: O foco na experiência do usuário é uma das tendências mais importantes da era digital. Você precisa estar disposto a oferecer experiências incríveis a todos que visitam seu site se quiser se destacar hoje. O modo escuro reduz tudo, desde o cansaço visual até o consumo de energia da bateria. Isso ajuda a manter os clientes em um site por mais tempo.
  • Inovação e apelo de ponta: A maioria das empresas quer provar que pode permanecer na vanguarda de seu setor. A capacidade de oferecer uma versão opcional no modo escuro de um tema ou aparência de um site pode ajudar seus clientes a se destacarem na multidão. À medida que o ambiente se torna mais focado na mobilidade, mais empresas procuram designers que possam fornecer as melhores experiências móveis.
  • Suporte para design universal: O modo escuro não é ótimo apenas para pessoas que têm sensibilidade à luz à noite. Essa solução pode ser mais confortável para usuários com deficiência visual que, de outra forma, lutariam com o cansaço visual ao visitar seus sites. Se você deseja que seu conteúdo seja mais inclusivo para uma gama mais ampla de espectadores, aprender a projetar para o modo escuro é uma boa maneira de começar.

Práticas recomendadas ao projetar para o modo escuro

Projetar para o modo escuro é mais fácil do que você pensa. Na maioria das vezes, envolve simplesmente pensar em como você pode substituir alguns dos aspectos mais brilhantes e opressores de seu site por algo mais profundo e escuro.

Aqui estão algumas dicas úteis que o ajudarão a se mover na direção certa.

1. Experimente com cores

Um grande problema para muitos web designers quando se trata de desenvolver uma solução de modo escuro é que eles ficam muito presos a coisas como texto em branco puro contra fundos em preto puro. No entanto, essa opção de alto contraste pode ser um pouco exagerada depois de um tempo.

Freqüentemente, é muito mais fácil usar um cinza escuro como cor primária da superfície, em vez de um preto verdadeiro. Além disso, em vez de usar branco brilhante, pense em alternativas ligeiramente esbranquiçadas que serão mais quentes para os olhos.

Experimente superfícies e combinações de cores que provavelmente não causem cansaço visual. As bases cinza escuro geralmente oferecem uma gama mais ampla de profundidade, porque você pode demonstrar sombras em cinza.

Além disso, quando estiver fazendo experiências com cores, lembre-se de que cores saturadas frequentemente vibram dolorosamente contra superfícies muito escuras, tornando-as mais difíceis de ler. A dessaturação de suas cores ajudará a reduzir o contraste e tornar seus sites mais acolhedores.

Tons mais claros na faixa de 200-50 terão melhor legibilidade em temas escuros. No entanto, você sempre pode experimentar suas escolhas. O Google Material Design recomenda o uso de um nível de contraste de cerca de 15: 8: 1 entre o fundo e o texto.

2. Considere o impacto emocional

Grande parte do esforço envolvido com o design do modo escuro é descobrir como certas cores funcionam juntas. É fácil se deixar levar por contrastes gritantes, principalmente quando você está acostumado a trabalhar com um fundo branco. No entanto, você precisa se lembrar que está projetando para um usuário que busca principalmente uma experiência de navegação mais fácil e moderada.

Enquanto estiver trabalhando, lembre-se de considerar também o aspecto emocional do design. A emoção nas cores pode fazer ou quebrar a jornada de um comprador em qualquer ambiente. No entanto, um aspecto frequentemente esquecido da psicologia das cores é que as pessoas percebem os tons de maneira diferente quando estão em um fundo preto.

Por exemplo, pense na cor verde. Em um fundo claro, transmite natureza e até riqueza financeira. No entanto, em um fundo escuro, o mesmo verde pode parecer algo venenoso, tóxico ou até doentio. É importante pensar sobre o tipo de impressão que os usuários finais obterão quando chegarem ao seu site.

3. Dê aos usuários a liberdade de escolha

Um dos maiores erros que você pode cometer quando começa a projetar para o modo escuro é pensar que deve se concentrar inteiramente em seus temas escuros e nada mais. Isso o torna um problema se você interagir com usuários que desejam o melhor dos dois mundos. Se estiver projetando para aplicativos em particular, você precisará de páginas da web que possam alternar naturalmente entre temas claros e escuros.

Aprender a implementar um modo escuro e uma opção de modo claro nas mesas que você criar o ajudará a alcançar uma seleção mais ampla de clientes. Lembre-se de que você precisará testar o desempenho e o impacto de seus designs em ambos os temas, para verificar se eles oferecem o mesmo tipo de experiência, independentemente de como o usuário opta por navegar.

Embora o modo escuro deva oferecer uma experiência diferente para os usuários finais, ainda é necessário que pareça que eles estão navegando no mesmo site. Isso significa que você precisará experimentar a combinação mais natural de opções de modo claro e escuro.

4. Lembre-se do básico

Lembre-se de que, embora as três dicas acima ajudem você a encontrar o caminho certo para o design do modo escuro, você também precisará considerar as oportunidades e limitações das plataformas para as quais está projetando. O tipo de experiência de modo escuro que você pode oferecer para sites do Google Chrome será muito diferente do que você pode criar para algo em execução no iOS.

Examinar a documentação fornecida pelo sistema para o qual você está projetando o ajudará a desenvolver algo com uma visão detalhada do que é realmente possível.

Outras dicas importantes para o design de modo escuro incluem:

  • Concentre-se no seu conteúdo: certifique-se de que seu conteúdo se destaque na página, sem ser muito opressor.
  • Teste seu design: nas aparências claras e escuras, você precisa se certificar de que tudo está funcionando como deveria.
  • Adote vibração para suas interfaces: a vibração ajuda a melhorar o contraste entre o fundo e o primeiro plano.
  • Use cores semânticas: as cores semânticas se adaptam à aparência atual de um site automaticamente. Valores de cores embutidos em código que não se adaptam podem parecer mais agressivos.
  • Tingimento da área de trabalho: experimente coisas como transparência e filtros para dar aos seus sites e aplicativos um tom um pouco mais quente – ideal para navegação tarde da noite
  • Ícones: Use glifos e ícones individuais para os modos claro e escuro, se necessário.

Pronto para projetar para o modo escuro?

Preparar seu portfólio de desenvolvimento e design da web para uma era viciada no modo escuro pode ser uma experiência complexa. Você precisa pensar cuidadosamente sobre como as pessoas irão navegar em seus sites e aplicativos quando estiverem procurando por algo mais sutil e menos opressor visualmente do que os sites que estamos acostumados a fazer.

A coisa mais importante a lembrar é que tudo em seu site ou aplicativo deve ter uma aparência tão bonita e personalizada no modo escuro quanto no modo claro. Simplesmente adicionar um fundo preto dinâmico quando as pessoas desejam alterar as configurações em um aplicativo não é suficiente. Você precisa aprofundar seus designs e examinar como diferentes fontes, cores e imagens funcionam juntas.



Fonte

Click to rate this post!
[Total: 0 Average: 0]