A fórmula aceita para o design de um site é um fundo branco, texto preto ou cinza escuro e cores da marca espalhadas generosamente por toda parte. A grande maioria dos sites de alto desempenho usa essa fórmula com grande efeito. Mas é a única fórmula que pode ter sucesso? Neste artigo, vamos nos aprofundar na criação de um design com fundo escuro - e por que às vezes é melhor usar esse conceito, porque, às vezes, sites com fundos escuros podem Superar branco.
Acione um tema WordPress, SquareSpace, Webflow, Weebly ou uma das muitas outras ferramentas de design da web e ele carregará automaticamente uma página com fundo branco com texto preto. Você pode mudar isso, é claro, mas essa combinação é a norma percebida.
Não tem que ser.
Quando bem feito, um fundo escuro para um site pode funcionar melhor do que você imagina.
A primeira preocupação de qualquer web design é o que o usuário deseja? Quais cores combinam com o meio, a marca, o uso pretendido, o público-alvo e o que funcionaria nos dispositivos que estão sendo usados para acessar o site?
A maioria dos clientes presume que será um fundo branco com fontes sans serif pretas ou escuras. Essa suposição pode não ser tão preta e branca (trocadilho intencional).
Por que branco?
Existem duas razões principais pelas quais a combinação de preto com branco é considerada a norma.
Mas isso está realmente enraizado na história: impressão e legibilidade.
Na época em que fazíamos tudo em papel, a cor off-white do papel significava que era mais fácil usar preto para tinta do que colorir o papel. Você precisava de menos tinta e era um trabalho muito mais limpo e fácil. Aqueles primeiros panfletos impressos eram tinta preta em papel claro e a mídia impressa permaneceu assim.
O outro motivo é a legibilidade. Para muitos usuários, especialmente aqueles em dispositivos móveis, branco no escuro nem sempre é uma boa leitura. Pessoas com deficiência visual, como astigmatismo, têm dificuldade em discernir texto branco em fundo escuro. Qualquer coisa que faça a pupila se expandir como uma tela escura significa que a deficiência é amplificada, tornando uma página muito difícil de ler.
No entanto, um bom design pode superar essas deficiências e causar impacto, transmitir emoção e influenciar o visitante de uma forma que um fundo branco simplesmente não consegue.
O que você precisa saber sobre fundos escuros
Eu falo muito escuro aqui e não preto.
Preto é a escolha óbvia para um fundo escuro para um site, mas não é sua única opção. Existem milhares de variantes de fundos escuros e o preto é apenas uma delas. Vermelho escuro, verde escuro, azul escuro e outros podem funcionar com o design certo na situação certa.
Existem muitos aspectos no uso de cores no design e não vou abordar todos eles aqui. Vou me concentrar apenas nos aspectos que pertencem a fundos escuros.
Percepção visual do escuro
Uma pesquisa muito citada realizada pela ProBlogger em 2009 nos mostrou que os usuários da web não são a favor de fundos brancos como poderíamos inicialmente pensar.
Embora já tenha dez anos, a pesquisa revelou que apenas 47% dos entrevistados preferem fundos sempre claros. Outros 36% disseram que depende do blog, 10% disseram preferir sempre escuro e 7% não conseguiram decidir. A maioria pode preferir um fundo branco, mas 43% disseram que gostavam de escuro ou que deveria depender do design geral do site.
Uma nova pesquisa, quatro anos depois, na CSS-Tricks descobriram que a maioria dos entrevistados preferia texto claro em um fundo escuro. Para ser claro, esta foi uma pesquisa sobre o uso de ferramentas de codificação e perguntou qual configuração os usuários preferiam para seus editores de código, escuro no branco ou branco no escuro. Daqueles que responderam, 63% deles preferiram um fundo escuro.
O aspecto de contraste
O apelidado 'O impacto das combinações de cores de fundo de texto de página da web na legibilidade, retenção, estética e intenção comportamental'é um estudo interessante.
Ele observou como o contraste entre as cores de fundo e de texto em um web design era o fator decisivo em sua usabilidade, e não as cores usadas. Não estamos falando de estética, puramente de usabilidade.
O estudo descobriu que a polarização influenciou a legibilidade mais do que a cor real do fundo. Portanto, o branco no preto é tão eficaz quanto o preto no branco, desde que haja contraste suficiente entre as duas cores, a legibilidade, a legibilidade e a facilidade de uso são mantidas.
O contraste é extremamente importante no design da web.
Alguns sites modernos tentam usar designs de baixo contraste com resultados mistos. Até Apple tentei com algumas páginas em seu próprio site.
Páginas de baixo contraste são mais difíceis de ler, não funcionam para deficientes visuais e exigem mais esforço do leitor para entendê-las. Nada disso contribui para um bom design de página.
Isso vai contra o contraste e é o leitor que sofre. Na minha opinião, não importa muito se você usa escuro sobre claro ou claro sobre escuro, desde que a relação de contraste seja a mais ampla possível para ajudar na legibilidade.
O aspecto da legibilidade
Fundos escuros podem ser a escolha de design perfeita em algumas situações.
Sites com muitos textos não são uma dessas situações. Embora o contraste tenha uma influência maior sobre a legibilidade de uma página, a escolha da cor também tem influência. De acordo com Jacob Nielsen, o texto negativo, aquele de texto branco em fundo escuro, exige um pouco mais de esforço para ser lido e é lido mais lentamente do que o texto positivo que é preto em fundo branco.
Além disso, desde que o contraste entre o texto e o fundo seja suficiente, a legibilidade não é afetada.
Eu acrescentaria um pouco a isso. Dizendo texto branco em fundos escuros não afeta a legibilidade, desde que você o projete corretamente.
Para mim, isso significa:
- Uso inteligente do espaço vazio entre os blocos para evitar vazamento de luz.
- As regras de legibilidade adequadas são seguidas em termos de frases curtas, parágrafos curtos, palavras curtas e cópia de fácil digestão.
- Seleção cuidadosa da fonte para maximizar a legibilidade em diferentes tamanhos de tela.
- Manter o contraste máximo ao trabalhar com fundos escuros.
- Evitando gradientes e sombreamento com fundo escuro.
A escolha da fonte é importante em qualquer web design, mas ainda mais quando se lida com fundos escuros.
Normalmente selecionamos fontes com serifa porque elas adicionam um toque de classe ou elegância a um design e usam fontes sem serifa para modernidade. Ao lidar com texto claro em um fundo escuro, a escolha se restringe a apenas sans serif.
As fontes com serifa podem funcionar, mas exigem mais trabalho do leitor para entendê-las. Isso é agravado ao usar telas menores ou dispositivos móveis.
O aspecto da percepção emocional
Todos sabemos que cores diferentes podem evocar emoções diferentes. Sabemos disso há anos e estudos mais recentes comprovaram isso com evidências. Sabemos que diferentes combinações de cores afetam o cérebro de diferentes maneiras e alguns profissionais de marketing acham que o uso de cores por si só pode aumentar a conversão.
A psicologia da cor nos diz que, conforme vemos as cores, nosso cérebro sinaliza a liberação de hormônios que podem nos fazer sentir emoções. Cores diferentes fazem com que hormônios diferentes sejam liberados o que pode influenciar como nos sentimos sobre algo de uma cor específica. Isso combina com nossa percepção do que significa uma cor que pode ser usada contra nós para marketing e vendas.
Temos ideias arraigadas sobre o que uma cor significa.
Por exemplo, nos preto é frequentemente associada a uma cor poderosa, erótica, misteriosa, formal e elegante. Branco parece limpo, fresco, moderno, jovem, acessível e familiar. Vermelho é ousado, poderoso, confiante e sensual.
Cada cor invoca sentimentos diferentes no leitor e é por isso que, como web designers, gastamos uma quantidade enorme de tempo tentando chegar à combinação perfeita e, então, ainda mais tentando convencer o cliente de que as cores que escolhemos irão funcionar.
Benefícios de fundos escuros
Fundos escuros não são adequados para todos os designs ou projetos.
Quando são adequados, um fundo escuro pode adicionar personalidade, impacto, ênfase e alguma resposta emocional a um web design. Já cobri tudo isso, então vamos dar uma olhada em alguns outros benefícios do uso de fundos escuros no design.
1. Menos cansaço visual
Aparentemente, é mais fácil ler por mais tempo quando um fundo escuro é usado. Mesmo que leiamos mais devagar, contanto que a relação de contraste seja ampla o suficiente e o design seja sólido, podemos ler sem cansaço visual por longos períodos de tempo.
Sobre o assunto dos olhos, fundos escuros também terão menos impacto no sono. A tela conterá menos luz azul/branca do que uma página da web tradicional. Essa luz azul é agora amplamente considerada como impactante em nosso ritmo circadiano e afeta nosso sono, causa doenças e impacta negativamente nossa vida diária.
2. Elegante
Existe uma razão pela qual toda mulher tem um vestidinho preto ou porque limusines são pretas. Ele adiciona um senso de estilo e elegância que é difícil de conseguir em outro lugar. Contanto que o design geral seja de alta qualidade, o uso de fundos escuros transmite aquela sensação imediatamente que pode influenciar uma decisão de compra, criar um vínculo emocional ou fazer o leitor levar o que vê mais a sério.
3. Familiaridade
Os sites com fundos escuros costumavam ser muito raros. Aqueles que vimos muitas vezes não seguiram as regras de usabilidade e não tiveram um bom desempenho. Com mais interfaces de usuário de programas usando fundos escuros, jogos cada vez mais usando fundos escuros em menus, navegação e cenas e modo noturno em todos os tipos de dispositivos, o escuro não é mais um nicho.
Nós vemos isso em todos os lugares. De muitos produtos Adobe, Windows 10 Dark Mode, Mac OS Dark Mode, Adobe Photoshop e Dreamweaver e muitos outros programas importantes.
Agora que estamos mais acostumados a ver texto claro em fundos escuros, isso não surpreende ou afeta nossas expectativas negativamente da maneira que antes.
4. Destaca-se
Embora os sites com fundos escuros estejam se tornando mais aceitáveis, eles ainda são minoria. Isso fornece um elemento de impacto imediatamente quando alguém acessa a página. Antes mesmo de uma palavra ser lida ou de uma imagem digitalizada, sua página já está causando uma boa impressão e fazendo com que o leitor olhe com novos olhos para o design.
Contanto que o design se baseie na primeira impressão inicial com boa legibilidade, bom uso do espaço e algumas imagens impactantes, você será um vencedor.
5. Fade no fundo
IUs e planos de fundo escuros fornecem o primeiro impacto inicial, mas depois podem desaparecer silenciosamente no plano de fundo para deixar o conteúdo brilhar. Isso é mais verdadeiro no design da interface do usuário, mas também tem relevância no design da web. Imagens e conteúdo cuidadosamente posicionados com o nível certo de contraste irão se destacar muito mais, enquanto o próprio plano de fundo se afasta de vista.
Isso pode ajudar a ler o conteúdo da página em ambientes claros, como ao ar livre ou sob luz forte. Em ambientes mais escuros, um fundo branco ou claro pode forçar os olhos e ser difícil de ler. Em ambientes mais claros, um fundo escuro pode ser o oposto. Embora não possamos projetar para ambientes específicos, é, no entanto, um benefício de um fundo mais escuro que ele seja bem lido sob a luz do sol.
As desvantagens de usar fundos escuros
Usar um fundo escuro no design não é universalmente positivo. Existem algumas desvantagens neste estilo e não devem ser subestimadas.
1. Consideração cuidadosa
Fundos escuros não funcionam para todos os clientes ou situações. Este tema de design requer muito mais reflexão e planejamento do que o fundo claro tradicional. Também exigirá mais testes do usuário para garantir que o saldo esteja correto antes do lançamento. Nem todos os esquemas de marca funcionam com fundos escuros. Nem todos os produtos ou assuntos funcionarão com ele.
Alguns clientes ainda percebem fundos escuros como antes, negativamente. Mesmo se você estiver convencido de que um fundo escuro é o caminho a percorrer, poderá ter mais dificuldade em convencer seu cliente do que se estivesse seguindo o caminho tradicional.
2. Planejamento cuidadoso
Todas as opções de design requerem um planejamento cuidadoso, escolha de cor, fonte e imagem. Usar fundos escuros acrescenta ainda mais atenção a isso. O espaço branco / escuro torna-se ainda mais importante para impedir que a luz vaze no escuro e para garantir que o texto seja legível. Imagens e elementos de design precisam de separação real para mantê-los legíveis e para evitar o vazamento de luz ou cor em outras áreas.
O processo de desenvolvimento pode demorar mais com um fundo escuro por causa disso. Mais testes de usuário podem ser necessários e mais refinamentos para a experiência móvel também precisam ser levados em consideração.
3. Equilíbrio cuidadoso
Usar elementos escuros em um design adiciona peso a uma página. Muito peso e a página pode parecer complicada e pesada. Isso é ainda mais verdadeiro quando se lida com fundos escuros. Cada página deve ser balanceada com muito cuidado para evitar que pareça pesada e para realçar sua elegância inerente ao invés de deselegante.
É uma tarefa difícil e exigirá muito refinamento e muito espaço em branco / preto na página para mantê-la equilibrada.
4. Acessibilidade
Um aspecto dos designs escuros que não recebe muita atenção é a acessibilidade. Todo web design deve ter a acessibilidade em mente nos estágios iniciais de planejamento. Felizmente, contanto que você siga as regras gerais sobre alto contraste entre texto e fundo, a maioria dos usuários será capaz de ler e entender sua página.
O Diretrizes de acessibilidade de conteúdo da web (WCAG) requer um contraste de 4.5.1 cores entre o texto e o fundo para texto normal e 3: 1 para texto grande. Ele sugere texto branco para fundos pretos, mas há alguma margem para outras cores, desde que a taxa de contraste permaneça a mais ampla possível.
Mencionei o astigmatismo anteriormente, pois esta é uma deficiência que é afetada negativamente pelo uso de fundos escuros. O astigmatismo é uma imperfeição na córnea que causa visão turva ou distorcida. Em um fundo escuro, a pupila precisa se dilatar para ler, o que acentua o embaçamento.
Embora esta seja apenas uma deficiência em um mundo de muitos, cerca de 33% dos americanos têm alguma forma de astigmatismo. Se você expandir isso para um público global, quase um terço do seu público potencial pode ter astigmatismo em um grau ou outro. Isso é algo que todo design precisa levar em consideração.
Quando você deve usar um fundo escuro
Existem várias situações em que fundos escuros são adequados para web design. Eles incluem:
- Quando você deseja causar aquele impacto visual inicial.
- Quando escurece se ajusta à identidade da marca do cliente.
- Ao apresentar produtos ou serviços de luxo ou de alto status.
- Quando o design é moderno ou minimalista.
- Quando você precisa criar drama ou mistério em um design.
Quando você não deve usar um fundo escuro
Da mesma forma, há momentos em que um fundo escuro não será sua melhor opção e deve ser evitado a todo custo. Mesmo que o cliente insista em usar um.
- Quando a página tem muito conteúdo.
- Quando a voz da marca não o suporta.
- Quando o público-alvo é conhecido por não responder bem a ele.
- Quando há muita coisa acontecendo com a página e o espaço em branco / preto é um prêmio.
- Quando a intenção é B2B ou oficial, como governamental.
10 exemplos de temas de fundo escuro
Para mostrar o que quero dizer sobre fundos escuros que parecem incríveis quando bem feitos, reuni dez temas excelentes que os utilizam. Cada um é ligeiramente diferente em termos de design, mas todos têm uma coisa em comum, eles usam fundos escuros para o efeito máximo.
1. Divi com Web Freelancers Layout Pack
O tema Divi WordPress tem que ser um dos mais flexíveis que existe. Embora muitos de seus modelos tenham um fundo claro, você pode revertê-los em segundos. Adicione o Web Freelancers Layout Pack ao Divi e você terá um excelente site com um fundo escuro para qualquer uso.
Tudo o que você precisa fazer é instalar os dois temas, ativar o tema, abrir uma página e mudar os fundos para escuros. Em seguida, use a opção 'Estender cor de fundo' nas seções da página para alinhar tudo.
Ganhe 10% de desconto no Divi até setembro de 2024
2. Astra com site para iniciantes de fotógrafo
O uso da estrutura Astra com a instalação do site de demonstração do Photographer fornece um excelente site da Web com um fundo preto. O bom uso do espaço, fontes contrastantes e design minimalista fazem com que este tema se destaque.
Confira o site de iniciantes de fotografia
3. Genesis com Parallax Pro
Parallax Pro é um tema para o Genesis framework que usa um design monocromático alternado com ótimo efeito. É outro design simples que permite que o conteúdo da página brilhe e fornece um excelente exemplo de como fundos escuros podem funcionar tão bem.
Veja a demonstração ao vivo do Parallax Pro
4. Lente do PixelGrade
Lens From PixelGrade usa um design de grade para nos dar um portfólio ou vitrine de imagem usando um tema escuro. O fundo escuro só é realmente visível no menu lateral e o tema usa cores contrastantes de uma forma muito interessante, adicionando outras cores além do preto e branco para realmente se destacar.
NB: Nós temos uma 20% OFF diretamente do PixelGrade, exclusivo para CollectiveRay visitantes. Basta clicar no link abaixo, seu desconto será aplicado automaticamente quando você finalizar a compra. Esta oferta é válida SOMENTE até o final de setembro de 2024.
5. Divi com Electrician Dark Pack
Outro tema Divi, desta vez a página de destino do eletricista no escuro. Este é um tema de altíssima qualidade com fundo escuro, tipografia nítida, bom uso de imagens e algumas cores complementares para adicionar interesse. Este é um dos meus favoritos e acho que funciona incrivelmente bem.
Ganhe Divi com 10% DE DESCONTO
6. Aldo da ThemeRex
Aldo do ThemeRex é um tema que torna a aparência elegante fácil. É um tema sem esforço que funcionaria para muitos assuntos e equilibra muito conteúdo de página com um fundo escuro sem sobrecarregar a página. É um design muito bem-sucedido que funciona bem em qualquer tamanho de tela.
7. Neve Pro com imagens Dark Parallax
Neve Pro com Dark Parallax Images usa o tema Neve com todo o seu poder, velocidade e recursos. Combinado com um fundo escuro e temas complementares, este tema WordPress é um dos melhores que existem. As páginas são bem balanceadas, carregam rapidamente, o conteúdo guia o leitor suavemente pela página e você fica querendo nada.
8. Contando com Layout de Jogador
O Layout Telling with Gamer é um excelente exemplo de como usar outras cores fortes para enriquecer um fundo escuro. Não se deixe enganar pelo apelido de jogador, você pode usar esse tema para qualquer coisa e ainda assim terá uma aparência incrível. Um menu forte, layout excelente, nitidez e contraste excelentes e bom uso do espaço são apenas alguns dos pontos positivos.
9. Próxima saída
Nextout é um tema WordPress muito elegante que usa um fundo escuro mais claro com cores contrastantes e complementares. Com um controle deslizante superior atraente, você rola para baixo em um layout lado a lado que se adequaria perfeitamente a sites orientados a imagens. Com navegação inteligente e layouts bem pensados, é definitivamente um dos melhores temas da web aqui.
10. Hestia Pro com imagens de paralaxe escuras
Hestia Pro com Dark Parallax Images é outro tema muito elegante que equilibra fundos escuros com elementos claros, cores contrastantes e excelente tipografia. As páginas são ricas, mas não cheias demais, e o equilíbrio é perfeito para qualquer tipo de tela que você usar. Ele pode funcionar em qualquer dispositivo, para qualquer assunto e é definitivamente um para tentar.
Se você quiser saber mais sobre Héstia - verifique este artigo sobre Collectiveray.
Conclusão: Usando fundos escuros em web design
Uma das melhores coisas sobre a internet moderna é a liberdade de se expressar e quebrar as regras. Embora algumas dessas regras absolutamente não devam ser quebradas, algumas podem. Como o design tradicional preto no branco que está conosco desde os 17th século.
Acho que fundos escuros podem ficar incríveis quando feitos com um olhar cuidadoso. Eles causam esse impacto inicial e depois desaparecem no fundo. Eles funcionam bem na maioria das condições de luz e uma página bem equilibrada com uso inteligente de espaço pode fazer com que o fundo enfatize o produto ou a intenção de uma página melhor do que fundos brancos.
Os designs escuros não se adequam a todos os projetos ou intenções e requerem muito mais planejamento, refinamento e testes do que fundos brancos. No entanto, bem feito, acho que todo esse tempo e esforço extras podem valer a pena!
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!
Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.
e muitos mais ...