Esta página foi traduzida usando IA e aprendizado de máquina.

(Pocket-lint) - O modo escuro, até recentemente, era a reserva de desenvolvedores e criativos profissionais, como fotógrafos e cineastas.

Mas em 2019 isso mudou. Várias empresas, da Apple ao Google e ao Facebook, adotaram a idéia de que nem tudo deveria ficar branco o tempo todo e começaram a oferecer aos usuários a capacidade de escolher uma paleta de cores alternativa mais fácil aos olhos tarde da noite.

Temos o prazer de dizer que agora você pode adicionar o Pocket-lint à lista de empresas que oferecem uma opção de modo escuro ao navegar no site, e a partir de hoje você pode ler suas notícias, críticas, recursos, guias de compras e muito mais, sob qualquer luz modo ou modo escuro em nosso site.

Mas por que optamos por adicionar o modo escuro ao Pocket-lint, quais são os benefícios e como você pode se divertir?

Por que escurecer?

Existem várias vantagens no uso do modo escuro, que variam de ser mais fáceis para os olhos - especialmente tarde da noite, tornando as imagens mais destacadas, melhorando a vida da bateria e, mais importante, melhorando a acessibilidade.

O Google diz que descobriu que uma das maiores vantagens do modo escuro depois de implementá-lo na versão mais recente do Android (10) é que ele pode levar a uma maior duração da bateria.

A Apple não cita os ganhos de desempenho da bateria, mas disse anteriormente ao Pocket-lint que sua razão para adotar o modo escuro se deve a vários profissionais criativos que solicitam que a empresa adote a experiência para remover qualquer distração.

Apple

Para o Pocket-lint, a decisão de ficar "obscura" foi uma combinação de todos esses motivos, mas também por causa de um pedido da equipe de que era algo que eles queriam e tinham certeza de que nossos leitores também queriam.

Trabalhar em uma variedade de ambientes, desde um escritório durante o dia ou um avião voando através do Atlântico, até um evento em um local distante em algum lugar do mundo, é compreensível. A equipe Pocket-lint gasta muito tempo não apenas olhando para a tela de um telefone, tablet ou computador, mas também no Pocket-lint.

O modo escuro foi solicitado e o desafio para implementá-lo começou.

Como funciona

Abordaremos o processo de design em um momento, mas vale a pena notar como ele funciona e como você pode ativar o modo escuro.

O que ficou claro desde o início foi que o modo escuro não é adequado para todos os ambientes e aplicativos. Portanto, não é algo que deva ser imposto automaticamente aos visitantes, independentemente de eles quererem ou não. E essa é a abordagem que adotamos no Pocket-lint. Você pode ignorar completamente o modo escuro do Pocket-lint se quiser e continuar usando o modo claro normalmente. Isso foi importante.

O modo escuro e o modo claro agora correspondente devem ser uma preferência do usuário para apreciar o conteúdo e não algo que você não tem escolha.

Alguns adoram a idéia de fundos escuros, texto claro e tudo o que vem com o modo escuro, enquanto outros acham isso muito polarizador e chocante em comparação com o modo como estão acostumados a ver sites.

Com isso em mente, oferecemos o modo escuro de três maneiras distintas:

  1. Determinado pelo sistema operacional do dispositivo
  2. Ativado por meio de uma chave seletora na parte superior do site no cabeçalho
  3. Controlado pela hora do dia

O primeiro faz sentido lógico. Se você estiver executando o modo escuro em todo o sistema, porque optou pelas preferências do sistema do dispositivo que está usando, é provável que deseje ver o Pocket-lint no modo escuro.

O segundo foi projetado para permitir que você desative o modo escuro se não gostar, mas também para habilitá-lo se você não estiver executando o modo escuro no nível do sistema.

O terceiro, pensamos, é tentar entender as necessidades do usuário sem que ele precise se preocupar com isso. O modo escuro é melhor aproveitado quando está escuro lá fora - ou seja, à noite - e, por isso, optamos por ativá-lo automaticamente das 22h às 07h, mesmo que as configurações do sistema estejam definidas no modo claro. Podemos fazer isso entendendo em que fuso horário o usuário está e definindo-o de acordo. Obviamente, você pode substituir a configuração, se desejar, através da chave de alternância muito importante.

Projetando para o modo escuro

O modo escuro não consiste apenas em inverter as cores de preto para branco e branco para preto.

No Pocket-lint, examinamos várias paletas de modo escuro para analisar o que é melhor não apenas do ponto de vista da acessibilidade, mas também do ponto de vista da legibilidade.

A documentação na Web ainda está em sua infância e, embora algumas paletas sejam boas em alguns ambientes, elas não funcionam em outras.

Torne-se "totalmente preto" e artigos longos com muitas palavras tornam-se cansativos de ler, enquanto escolher um cinza muito claro significa que os efeitos do modo escuro são perdidos. Você também deve considerar a fonte e as cores da fonte, o espaçamento da fonte em termos de kerning e lead, além de elementos como hiperlinks, legendas, créditos de imagem e outros "móveis de fonte" na página.

colorhunt

O resultado final foi escolher uma paleta de cores com forte influência azul-cinza e turquesa, fornecendo, acreditamos, um modo escuro que é acessível em vários níveis, além de passar por vários testes de acessibilidade para usabilidade e legibilidade.

Para começar, usamos colorhunt.co . O site simples de usar permite que você veja várias paletas de cores e como as cores se complementam. É um recurso fantástico, independentemente das suas necessidades de projeto no modo escuro.

Depois que escolhemos uma paleta com a qual queríamos trabalhar, decidimos traduzir essas cores para o design do Pocket-lint.

Usamos a cor mais escura da paleta como plano de fundo padrão e a segunda mais escura como marca-texto para esse plano de fundo.

Você verá essas cores com mais destaque em nossas páginas de hub recém-projetadas. O uso de cores aqui eleva o design do "cartão" da página e melhora consideravelmente a legibilidade. Também usamos a cor das regras horizontais do site para dividir as listas na página inicial, por exemplo.

A reação do intestino seria usar a cor turquesa na paleta para hiperlinks, em um fundo claro que funcione bem; no entanto, esse é um dos erros mais comuns no modo escuro. O texto colorido em um fundo escuro não funciona.

Pocket-lint

Para combater isso, alteramos o estilo do hiperlink Pocket-lint para um sublinhado espesso que se destaca ao passar o mouse em vez de colorir a palavra ou frase vinculada. A adoção dessa abordagem torna muito mais fácil para os olhos, e até a adotamos em nosso tema do modo de luz daqui para frente.

Para melhorar a legibilidade, optamos por colorir o texto da página em branco / cinza claro, a cor final na paleta escolhida, em vez de optar por "branco total". Isso cria uma experiência muito mais suave, e que acreditamos ser muito mais fácil para os olhos quando se trata de leitura.

Sim, o modo escuro é sobre contrastes, mas você não o quer muito contrastante. Preto e branco realmente pode ser muito duro lado a lado.

Depois de finalizar o modo escuro, passamos a atualizar nosso agora novo modo de luz. Anteriormente, o único modo, para manter um estilo e ethos consistentes de design, ele também precisava mudar para corresponder à mesma abordagem e crenças.

Para Pocket-lint, isso significa um novo estilo de hiperlink e uma nova cor de fonte - a cor mais escura em nossa nova paleta, além de alguns ajustes e alterações em outros lugares para manter as coisas consistentes.

Acessibilidade

Embora muitos apenas vejam o modo escuro como algo "legal", existem várias razões principais pelas quais também é bom em termos de acessibilidade. Era algo que queríamos ter certeza de que era um dos benefícios da implementação do modo escuro no Pocket-lint.

Existem várias ferramentas que você pode usar para testar cores contrastantes. O World Wide Web Consortium é a principal organização de padrões internacionais da World Wide Web e possui várias diretrizes para tornar a Web um local mais acessível.

a11y

As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.1, em particular, abrangem uma ampla gama de recomendações para tornar o conteúdo da Web mais acessível.

Garantir que os modos claro e escuro introduzidos pelo Pocket-lint passassem nesses testes era da maior importância.

Por isso, trabalhamos com as diretrizes para usar cores contrastantes para que tudo funcione da melhor maneira possível.

Desafios de design

Depois de elaborarmos uma paleta de cores, traduzir isso para o site é bastante fácil, embora demorado.

O Pocket-lint está em execução há 16 anos e, portanto, este foi um bom momento para arrumar e melhorar o código no arquivo CSS principal. O arquivo CSS é o arquivo que lida com todos os estilos e layouts dos artigos e páginas do site, por isso é um grande trabalho.

Ao longo dos anos, com vários desenvolvedores adicionando e alterando o código, houve uma tendência de adicionar estilos com base na aparência deles - incluindo sua cor. Isso é um grande não-não quando se trata de implementar um design escuro e claro e é algo que, quando você tem uma paleta de cores positiva e negativa, precisa ser alterado.

Pocket-lint

O outro desafio que tivemos foi decidir sobre um ícone unificado que seria usado em todo o site para representar aos leitores que eles poderiam alternar entre o modo claro e o escuro quando quisessem.

Com o modo escuro ainda em sua infância, ainda não existe um ícone unificado que seja usado na Web. Aqueles que implementaram um modo escuro optaram por uma variedade de ícones e palavras diferentes para simbolizar que há uma escolha. Luas, sóis, lâmpadas e palavras são usadas com pouco cuidado ou atenção.

Depois de testar e testar vários ícones diferentes com membros da equipe, família e amigos, decidimos por um ícone de lua crescente que é sólido ou vazio, dependendo se o modo escuro está ativado ou desativado. Acreditamos que isso fez mais sentido e é fácil de entender, independentemente de onde você está ou qual idioma você fala.

Próximos passos

Agora que implementamos o modo escuro no Pocket-lint, planejamos continuar monitorando como ele é usado pelos leitores e se alguma de nossas opções de design causa preocupações ou problemas quando disponível para um público muito maior.

Escrito por Stuart Miles.