Regras de design visual seguras para seguir

xguru · 2023-02-27T11:03:02+09:00

Você não precisa seguir à risca, mas estas regras sempre podem ser aplicadas com segurança Usar cores próximas de preto e branco em vez de preto/branco puros O preto puro parece artificial na tela, e o branco puro é brilhante demais Use #222222 e #F2F2F2 em vez de #000000 e #FFFFFF Daqui em diante, quando falar em preto/branco, estaremos nos referindo a essas cores Tingir as cores neutras Cores neutras normalmente são preto/branco/cinza Se for usar cor, adicione só um pouco dela aos neutros (em vez de grey, light red; em vez de black, dark blue) Isso faz a paleta parecer mais consistente Se usar HSB, basta adicionar cerca de 5% ou menos de saturação Use alto contraste nos elementos importantes Todos os elementos aos quais o usuário deve prestar atenção: botões, conteúdo etc. Em divisórias, drop shadows etc., use o mínimo possível de contraste Todos os elementos do design devem ser intencionais Incluindo espaço em branco, alinhamento, tamanho, espaçamento, cor e sombra Você deve conseguir explicar por que fez assim quando alguém perguntar sobre uma parte específica do design Muitas vezes o alinhamento optical (visual) é melhor que o alinhamento matemático Algumas formas ficam melhores quando parecem alinhadas ao olhar Alinhar pelo olho exige prática, mas se você fizer isso com frequência, pega rápido Em textos grandes, reduza o espaçamento entre letras e a altura de linha; em textos pequenos, aumente Isso vale para todo texto Quanto maior o texto, menos espaço ele precisa entre letras e linhas. O contrário também vale A borda de um contêiner deve contrastar com o contêiner e com o fundo A borda deve usar uma cor mais escura que o fundo, e não uma cor entre a parte interna do contêiner e a cor de fundo Tudo deve estar alinhado com outra coisa O alinhamento mostra que as coisas estão relacionadas entre si Se algo não estiver alinhado com outra coisa, parece que não pertence ao design Idealmente, cada elemento deve estar alinhado aos outros com base em algum tipo de lógica As cores da paleta devem ter valores de brilho próprios Quando os valores de brilho das cores são diferentes, elas podem ter um visual distinto não só no matiz, mas também na luminosidade Isso melhora a paleta porque as cores não competem tanto entre si Se você tingir os neutros, use apenas Warm ou Cool. Não use os dois Misturar cores quentes e frias nos neutros faz a paleta perder consistência Os tamanhos devem ter relação matemática entre si Espaçamentos, tamanhos etc. devem ser determinados por algum tipo de escala. Isso ajuda o design a parecer consistente No exemplo, todos os elementos usam múltiplos de 8. Espaçamento: 8/16/24/32, altura de linha: 48/40/24, tamanho de texto: 40/32/16 Os elementos devem ser organizados na ordem de peso visual Se houver vários elementos em uma linha ou coluna, e alguns forem visualmente mais pesados que outros (como 2 botões e 3 links), o elemento visualmente mais pesado deve vir primeiro, e os mais leves devem vir depois, em ordem, até o final O ponto importante é que o elemento visualmente mais pesado deve estar mais para fora Ao usar uma grade horizontal, use 12 colunas Se você dividir por colunas, 12 oferece bastante flexibilidade porque permite usar 1, 2, 3 e 4 colunas Deixe espaço entre pontos de alto contraste Como nossos olhos encontram as bordas dos elementos com base no contraste, esperamos que exista espaço entre pontos contrastantes Elementos mais próximos devem ser mais claros Quanto mais perto do usuário estiverem os elementos da tela (quanto mais à frente parecerem), mais claros eles devem ser Isso também vale para light/dark mode. É assim que o mundo real funciona Defina o valor de blur da drop shadow como o dobro da distância Se você definir uma sombra que se estende 4 pixels no eixo Y, o valor de blur deve ser 8 pixels Quando o elemento se "aproxima" do observador, também é bom reduzir a opacidade da sombra Coloque algo simples sobre algo complexo, ou algo complexo sobre algo simples Um fundo complexo (como um gradiente chamativo) funciona melhor quando a frente (texto) é simples Se a frente for complexa, um fundo simples é o mais adequado Simples sobre simples também funciona, mas pode parecer sem graça Complexo sobre complexo causa confusão visual, então deve ser evitado Mantenha a cor do contêiner dentro de um limite de brilho A diferença de brilho entre fundo e contêiner deve ficar dentro de 12% em interfaces escuras e 7% em interfaces claras (valor de brilho no sistema de cores HSB) Isso foi identificado em um estudo que comparou o brilho do contêiner com o fundo em cerca de 100 sites bem projetados Faça o padding externo igual ou maior que o padding interno O padding interno é o espaço entre os elementos dentro do contêiner. O padding externo é o espaço entre os elementos e a borda do contêiner O padding externo deve ser igual ou maior que o padding interno Mantenha o texto do corpo em 16px ou mais 16px é o tamanho padrão de texto na maioria dos navegadores Textos menores que isso são difíceis de ler, então é mais seguro não usá-los no corpo Use um comprimento de linha de cerca de 70 caracteres Não importa tanto se a linha tem 60 ou 80 caracteres, mas se for longe demais para qualquer lado, podem surgir problemas de legibilidade Defina o padding horizontal dos botões como o dobro do padding vertical O padrão de botão tradicional é ser mais largo do que alto Se quiser que as pessoas o reconheçam como botão, é melhor seguir esse padrão Use no máximo 2 fontes A segunda fonte é uma oportunidade de reforçar o conceito por trás do design Ela também ajuda a adicionar variedade ao design Quase nunca há necessidade de usar mais de duas, e isso pode fazer o design parecer visualmente confuso Tratar corretamente cantos aninhados Às vezes dois ou mais cantos arredondados ficam aninhados Para parecer correto, defina o raio do canto interno como o raio do canto externo menos a distância entre eles Ex.) se o raio do canto externo for 30px e ele estiver a 20px do canto interno, o raio do canto interno deve ser 10px Não coloque duas divisórias juntas Transições de fundo, bordas de contêiner e divisórias são difíceis de distinguir visualmente Não deixe duas ou mais divisórias encostadas uma na outra

(anthonyhobday.com)

81 pontos por xguru 2023-02-27 | 6 comentários | Compartilhar no WhatsApp

Você não precisa seguir à risca, mas estas regras sempre podem ser aplicadas com segurança

Usar cores próximas de preto e branco em vez de preto/branco puros

O preto puro parece artificial na tela, e o branco puro é brilhante demais
Use #222222 e #F2F2F2 em vez de #000000 e #FFFFFF
Daqui em diante, quando falar em preto/branco, estaremos nos referindo a essas cores

Tingir as cores neutras

Cores neutras normalmente são preto/branco/cinza
Se for usar cor, adicione só um pouco dela aos neutros (em vez de grey, light red; em vez de black, dark blue)
Isso faz a paleta parecer mais consistente
Se usar HSB, basta adicionar cerca de 5% ou menos de saturação

Use alto contraste nos elementos importantes

Todos os elementos aos quais o usuário deve prestar atenção: botões, conteúdo etc.
Em divisórias, drop shadows etc., use o mínimo possível de contraste

Todos os elementos do design devem ser intencionais

Incluindo espaço em branco, alinhamento, tamanho, espaçamento, cor e sombra
Você deve conseguir explicar por que fez assim quando alguém perguntar sobre uma parte específica do design

Muitas vezes o alinhamento optical (visual) é melhor que o alinhamento matemático

Algumas formas ficam melhores quando parecem alinhadas ao olhar
Alinhar pelo olho exige prática, mas se você fizer isso com frequência, pega rápido

Em textos grandes, reduza o espaçamento entre letras e a altura de linha; em textos pequenos, aumente

Isso vale para todo texto
Quanto maior o texto, menos espaço ele precisa entre letras e linhas. O contrário também vale

A borda de um contêiner deve contrastar com o contêiner e com o fundo

A borda deve usar uma cor mais escura que o fundo, e não uma cor entre a parte interna do contêiner e a cor de fundo

Tudo deve estar alinhado com outra coisa

O alinhamento mostra que as coisas estão relacionadas entre si
Se algo não estiver alinhado com outra coisa, parece que não pertence ao design
Idealmente, cada elemento deve estar alinhado aos outros com base em algum tipo de lógica

As cores da paleta devem ter valores de brilho próprios

Quando os valores de brilho das cores são diferentes, elas podem ter um visual distinto não só no matiz, mas também na luminosidade
Isso melhora a paleta porque as cores não competem tanto entre si

Se você tingir os neutros, use apenas Warm ou Cool. Não use os dois

Misturar cores quentes e frias nos neutros faz a paleta perder consistência

Os tamanhos devem ter relação matemática entre si

Espaçamentos, tamanhos etc. devem ser determinados por algum tipo de escala. Isso ajuda o design a parecer consistente
No exemplo, todos os elementos usam múltiplos de 8. Espaçamento: 8/16/24/32, altura de linha: 48/40/24, tamanho de texto: 40/32/16

Os elementos devem ser organizados na ordem de peso visual

Se houver vários elementos em uma linha ou coluna, e alguns forem visualmente mais pesados que outros (como 2 botões e 3 links),
o elemento visualmente mais pesado deve vir primeiro, e os mais leves devem vir depois, em ordem, até o final
O ponto importante é que o elemento visualmente mais pesado deve estar mais para fora

Ao usar uma grade horizontal, use 12 colunas

Se você dividir por colunas, 12 oferece bastante flexibilidade porque permite usar 1, 2, 3 e 4 colunas

Deixe espaço entre pontos de alto contraste

Como nossos olhos encontram as bordas dos elementos com base no contraste, esperamos que exista espaço entre pontos contrastantes

Elementos mais próximos devem ser mais claros

Quanto mais perto do usuário estiverem os elementos da tela (quanto mais à frente parecerem), mais claros eles devem ser
Isso também vale para light/dark mode. É assim que o mundo real funciona

Defina o valor de blur da drop shadow como o dobro da distância

Se você definir uma sombra que se estende 4 pixels no eixo Y, o valor de blur deve ser 8 pixels
Quando o elemento se "aproxima" do observador, também é bom reduzir a opacidade da sombra

Coloque algo simples sobre algo complexo, ou algo complexo sobre algo simples

Um fundo complexo (como um gradiente chamativo) funciona melhor quando a frente (texto) é simples
Se a frente for complexa, um fundo simples é o mais adequado
Simples sobre simples também funciona, mas pode parecer sem graça
Complexo sobre complexo causa confusão visual, então deve ser evitado

Mantenha a cor do contêiner dentro de um limite de brilho

A diferença de brilho entre fundo e contêiner deve ficar dentro de 12% em interfaces escuras e 7% em interfaces claras (valor de brilho no sistema de cores HSB)
Isso foi identificado em um estudo que comparou o brilho do contêiner com o fundo em cerca de 100 sites bem projetados

Faça o padding externo igual ou maior que o padding interno

O padding interno é o espaço entre os elementos dentro do contêiner. O padding externo é o espaço entre os elementos e a borda do contêiner
O padding externo deve ser igual ou maior que o padding interno

Mantenha o texto do corpo em 16px ou mais

16px é o tamanho padrão de texto na maioria dos navegadores
Textos menores que isso são difíceis de ler, então é mais seguro não usá-los no corpo

Use um comprimento de linha de cerca de 70 caracteres

Não importa tanto se a linha tem 60 ou 80 caracteres, mas se for longe demais para qualquer lado, podem surgir problemas de legibilidade

Defina o padding horizontal dos botões como o dobro do padding vertical

O padrão de botão tradicional é ser mais largo do que alto
Se quiser que as pessoas o reconheçam como botão, é melhor seguir esse padrão

Use no máximo 2 fontes

A segunda fonte é uma oportunidade de reforçar o conceito por trás do design
Ela também ajuda a adicionar variedade ao design
Quase nunca há necessidade de usar mais de duas, e isso pode fazer o design parecer visualmente confuso

Tratar corretamente cantos aninhados

Às vezes dois ou mais cantos arredondados ficam aninhados
Para parecer correto, defina o raio do canto interno como o raio do canto externo menos a distância entre eles
Ex.) se o raio do canto externo for 30px e ele estiver a 20px do canto interno, o raio do canto interno deve ser 10px

Não coloque duas divisórias juntas

Transições de fundo, bordas de contêiner e divisórias são difíceis de distinguir visualmente
Não deixe duas ou mais divisórias encostadas uma na outra

6 comentários

sungwoo 2023-03-08

@xguru
Para melhorar a legibilidade do GeekNews, estou visualizando com a seguinte estilização. ;-)
https://userstyles.org/styles/179148#comments-section-wrapper

Obrigado.

metis041 2023-03-06

Isso é muito bom.. Eu sempre tive dificuldade com design, então, se houver um guia assim, acho que isso pode aumentar muito a produtividade.

greenhead 2023-03-01

Obrigado pela tradução! Ajudou bastante.

laeyoung 2023-02-27

Muito bom!

cbk1411 2023-02-27

@xguru
Há um erro de tradução, então estou avisando.
"Elementos mais próximos devem ser mais leves" -> "Elementos mais próximos devem ser mais claros"

xguru 2023-02-27

Ah, é mesmo. Obrigado~!