O Dos e Don'Ts do Dark Web Design
Desenhos da web escuros são muito populares e podem ter um apelo elegante e criativo.
Eles também são perfeitos para muitos tipos de trabalho do cliente, no entanto, eles não são adequados para cada site e devem ser usados somente quando apropriado.
Apesar do impressionante impacto visual que esses designs escuros podem ter, muitos designers não sabem como efetivamente retirá-los sem desligar o visitante.
Com um design escuro, há menos legibilidade , menos apelo para a maioria dos leitores e menos oportunidades para elementos de design convencionais.
Neste post, discutiremos algumas dicas para tornar o seu próximo design de site obscuro atraente para um público mais amplo , permitindo que você, designer, expresse sua criatividade.
UMA pesquisa recente sugere que os projetos de luz são preferidos pelo público em geral por 47%. O principal motivo é a legibilidade . A maioria das pessoas não gosta de ver textos claros contra um fundo escuro em sites, porque isso dificulta a visão, o que contribui para uma experiência muito menos agradável.
Por outro lado, 10% dos entrevistados disseram que sempre preferiram fundos escuros para sites, enquanto outros 36% disseram que a melhor escolha dependeria do tipo de site.
Então, qual é a resposta certa? Quando tudo se resume a isso, todo mundo tem sua própria opinião, e é isso.
Mas com uma porcentagem tão grande de usuários dizendo que designs de sites escuros são toleráveis e às vezes até preferidos, nós, como web designers, temos que aprender a criar designs escuros efetivos para nós mesmos e para nossos clientes.
Isso significa convencer todos os verdadeiros crentes de fundos claros de que o design escuro pode ser mais legível e fácil de usar.
Use mais espaço em branco
Ou deveria ser chamado de "espaço negro"? O uso efetivo do espaço em branco é importante para qualquer tipo de design, mas é essencial para sites com fundos escuros.
Desenhos escuros têm a tendência de parecerem “pesados” , e bagunçá-los pode reforçar esse sentimento. Dê uma olhada em alguns projetos de web escuros populares abaixo e observe seu uso liberal de espaço em branco com grande efeito.
Propriedade Negra é visto em toda a Internet em vitrines escuras de web design. É realmente um belo design e digno de toda a atenção. Uma grande quantidade de espaço em branco é usada em todo o projeto, e o que torna esse design específico é como o espaço em branco é usado para descrever certos elementos de forma tão eficiente.
O logotipo tem muito espaço em branco e é a primeira coisa que vemos como visitantes. Nós vemos o conteúdo principal e a garrafa à direita a seguir. Como você vê, o espaço em branco é usado perfeitamente para destacar o texto na garrafa e a manchete do conteúdo principal.
O conteúdo apresentado em TIC Toc e acompanhando a imagem neste design são enquadrados com o espaço mais branco. À medida que nos movemos para baixo, vemos menos espaço em branco, o que nos faz prestar atenção ao conteúdo que está sendo mostrado.
O ponto aqui é que o espaço em branco guia gradualmente o usuário até o final da página .
O fundo escuro adiciona profundidade ao design. Como o site depende muito do espaço em branco, seria menos interessante sem o efeito criativo do plano de fundo escuro.
o Mark Dearman website tem liberal e uniformemente distribuído espaço em branco em todo o seu layout.
O espaço em branco que enquadra cada peça do portfólio oferece bastante espaço para o conteúdo, e é um bom ponto de descanso antes de passar para a próxima peça.
Bastante espaço em branco é essencial para os desenhos escuros, pois ajuda não só a desorganizar o layout, mas também a enquadrar elementos importantes e adicionar elegância à aparência geral.
Espaço em branco textual
Porque a legibilidade é a preocupação número um daqueles que não gostam de fundos escuros, os designers devem prestar atenção extra ao texto em si.
Assim como no design geral, uma maneira de melhorar a legibilidade em sites escuros é aumentar o espaço em branco ajustando o tamanho do parágrafo, o kerning e o entrelinhamento .
O exemplo abaixo mostra a diferença que o espaçamento entre e ao redor dos caracteres faz na comparação de layouts escuros e claros.
Outra maneira de melhorar a legibilidade em projetos da web escuros é aumentar o tamanho da fonte . Como a maioria das outras regras neste post, tamanhos de fonte maiores significam mais espaço em branco. Quanto maiores as letras, mais espaço em branco aparecerá em volta e dentro de cada letra.
Por exemplo, a letra “a” abaixo recebe mais espaço em branco à medida que se torna maior, tanto na área ao redor dele quanto no espaço dentro do compartimento do a e sob a saliência.
Note como a leitura de texto pequeno é muito mais fácil em um fundo claro do que em um escuro. Ao definir a tipografia para um novo site, verifique um texto fictício para garantir que ele seja legível . Se não, veja se aumentar o tamanho do texto ajuda.
Contraste de texto
Muitas pessoas concordariam que os sites obscuros mais mal concebidos causam fadiga ocular. Muito ou pouco contraste é geralmente o culpado. Como alguém encontra o equilíbrio perfeito?
Se você está em uma sala escura, de repente, olhar diretamente para a luz não é agradável. Mas olhar para uma luz menos brilhante em um ambiente menos escuro é ótimo. O mesmo princípio se aplica ao web design.
Encontrar o contraste perfeito significa equilibrar a escuridão do fundo com a leveza do texto .
Abaixo está um guia (muito) aproximado que mostra como o contraste entre texto e plano de fundo funciona. Note-se que, como o fundo fica mais claro, o texto também fica mais claro.
Encontrar um contraste agradável para o texto é muito mais difícil com um fundo preto puro.
Para encontrar o equilíbrio perfeito, experimente diferentes tonalidades. O melhor resultado geralmente é um plano de fundo que não é preto puro e texto que não é branco puro.
Lidando com Fontes
As fontes desempenham um grande papel no design e devem definitivamente ser levadas em consideração com layouts escuros. A imagem abaixo mostra uma fonte de 14 pontos em um fundo escuro em fontes serif e sans-serif.
A fonte sans-serif é obviamente mais legível . Mas muitos designers ainda escolhem fontes serif pela sua elegância.
O truque, porém, é colocar apenas texto maior em fontes serifadas, de modo que o espaço extra em branco inunde em torno de cada caractere e torne o texto muito legível.
A captura de tela abaixo é de um site discutido anteriormente neste artigo. Ele possui fontes serif e sans-serif, mas as usa de maneira inteligente.
Texto maior, como títulos, navegação e cabeçalhos, está em uma fonte serifada para maior elegância. Para melhor contraste e melhor legibilidade, o texto do corpo está em uma fonte sans-serif limpa.
Use esquemas de cores mínimos
Para dar a seus desenhos escuros uma aparência limpa e organizada, os designers devem sempre optar por esquemas de cores mínimos .
Dos poucos exemplos abaixo, podemos ver que os esquemas de cores ocupados realmente atrapalham os planos de fundo escuros, porque o contraste é muito nítido.
Atenha-se a uma ou duas cores . Para adicionar mais cor, tente um fundo de cor escura.
Concedido, muitos projetos web escuros têm esquemas de cores mais excitantes. Então essa regra é freqüentemente quebrada, mas apenas com as técnicas certas.
Em geral, no entanto, a cor geralmente é o que faz um site parecer muito ocupado . Como os sites mais escuros já têm profundidade, use cores com cuidado.
Oferecer um Comutador de Estilo
Embora tenhamos muitas boas práticas à nossa disposição para tornar os designs de web escuros mais atraentes, nenhuma quantidade de esforço satisfará todos os usuários.
Certifique-se de incluir um alternador de estilo , para que os usuários tenham a opção de exibir texto escuro em um fundo claro.
Duas folhas de estilo são necessárias para isso, uma para o layout escuro padrão e outra para o layout de luz alternativa.
SitePoint tem um excelente tutorial sobre isso: Construa um Switcher de Estilo Simples em CSS . Em vez de usar as versões “laranja”, “azul” e “branco” no tutorial, basta usar folhas de estilo “claras” e “escuras”.
Quando Dark Web Design funciona melhor
Como afirmado, uma grande parte dos usuários da web acredita que um design da web escuro pode funcionar para determinados tipos de sites. Mas o estudo é vago sobre o que exatamente são esses tipos.
De um modo geral, o escuro funciona melhor para designs criativos ou elegantes . Para sites modernos e elegantes, fundos escuros adicionam elegância. Para estilos sujos ou desenhados à mão, fundos escuros aumentam a criatividade do layout.
Design Escuro Elegante
Escuro pode ser profundo, autoritário e forte, e muitas vezes parece elegante quando usado adequadamente. Aqui estão alguns exemplos e algumas técnicas para realçar a elegância em um design escuro.
O site para Larissa Meek tem um padrão simples de estilo vintage em segundo plano, definindo um tom elegante. Outros recursos peculiares adicionam um toque pessoal ao design.
Essa técnica pode ser usada para muitos tipos de sites. Padrões e texturas vintage ou clássicas podem criar uma aparência elegante e adequada à idade .
A maioria de nós associa padrões vintage com alta classe, então criar um site de alta classe é fácil.
Núcleo de Profundidade tem um design muito limpo, com um fundo escuro que adiciona estilo e classe. Um senso de autoridade também é evidente no design. Essa elegância também pode fazer o trabalho de portfólio de um designer parecer mais valioso como resultado.
Observe que esse design não tem textura ou imagens além das peças do portfólio e do logotipo. Caso contrário, o design estaria muito ocupado; como é, o conteúdo é bem unido.
Um bom processo a seguir é adicionar conteúdo essencial primeiro e, em seguida, incluir elementos de design conforme necessário . O projetista pode, então, pausar e refletir à medida que cada novo elemento é adicionado, garantindo que o layout não seja sobrecarregado.
Assim como a arte pode parecer mais valiosa em um design elegante, os produtos também podem ser usados. Um design escuro e elegante, como Tapbots e muitos outros, ajuda a mostrar o produto que está sendo vendido.
O design reflete o próprio dispositivo , com seus gradientes e efeitos de iluminação; alguns projetos até imitam a textura de seus produtos de alta tecnologia.
Design Escuro Criativo
Além de apenas parecer elegante, os designs de sites escuros também podem provocar respostas mais emocionais do que os designs de luz padrão, tornando-os ideais para projetos criativos. Vejamos alguns exemplos dos tipos de designs criativos possíveis.
o local abaixo tem muito pouco conteúdo, mas tem um layout único e cores escuras para profundidade. Fundos escuros são perfeitos para sites com muito pouco conteúdo .
E porque eles exigem mais espaço em branco, o designer tem mais espaço para trabalhar.
O design de web do Google vem em muitas formas, e como o grunge é "escuro e sujo", fundos escuros são uma dessas formas.
Desenhos de grunge escuros como Trozo parecem quebrar todas as regras: texturas ocupadas, layout lotado e uma ampla gama de cores. E ainda este site ainda funciona. Como isso é possível?
Com tantos elementos bagunçados para trabalhar, o design do grunge pode ser complicado para iniciantes. O que faz este trabalho é sua organização .
O fundo tem blocos claramente definidos que guiam o olho do usuário e ajudam a dividir o conteúdo em seções gerenciáveis.
Em segundo lugar, tem uma tonelada de espaço em branco . O fundo pode ser texturizado, mas o padrão repetido é visto pelo usuário como espaço em branco, ajudando a clarear o design.
Este espaço em branco é mais visível à esquerda do logotipo, sob a navegação e ao longo do lado direito.
Mesmo entre “Exhibit 01” e “Exhibit 02” é mais espaço em branco do que um normalmente encontraria em um site como este.
O espaço branco equilibra as coisas, mesmo que não pareça espaço em branco, porque tem textura . O texto mínimo e algumas seções (apenas três) também contribuem para essa aparência de simplicidade.
O design de Drew Wilson definitivamente quebra a regra de usar cores mínimas. Ainda funciona, no entanto, porque o cabeçalho de cores vivas é uma das poucas características deste design esparso, então nada sobrecarrega.
E o fundo escuro faz o cabeçalho parecer ainda mais brilhante e mais extraordinário.
Fundos escuros são frequentemente usados para fazer efeitos de iluminação e cores brilhantes destacam-se mais .
Esses designs são uma exceção maravilhosamente criativa à regra da cor mínima. Mas a regra deve ser quebrada com cautela: evite gradientes, texturas e cores que causam distração mais adiante na página.
Empacotando
Fundos escuros dão uma sensação elegante e criativa aos designs da Web, tornando-os perfeitos para alguns portfólios, mas não são adequados para todos os sites.
Para sites maiores, especialmente aqueles para pessoas com deficiências visuais e outras deficiências, os projetos escuros são um não-não, mesmo com um alternador de estilo.
Espero que, quando chegar a hora de criar um site com um fundo escuro, essas dicas e estratégias ajudem.
Escrito exclusivamente para WDD por Kayla Knight .
Existem muitas outras técnicas e estratégias para melhorar os designs de web escuros. Por isso, compartilhe as que você aprendeu na seção de comentários abaixo.