Entenda como hierarquia, contraste, proximidade, alinhamento, tipografia e cor organizam percepção e significado em diferentes suportes.
Nota de estudoPrincípios do design visualHierarquia visualContraste
Revisado em 8 de agosto de 2026.
Você olha para uma publicação e sente que há algo estranho. O texto está legível, as imagens têm qualidade e nenhuma parte parece obviamente quebrada. Mesmo assim, você não sabe por onde começar, quais informações pertencem ao mesmo grupo ou o que deveria fazer depois.Esse desconforto costuma nascer das relações entre os elementos. Tamanho, posição, alinhamento, distância e contraste podem competir entre si ou contar histórias diferentes. Os fundamentos do design oferecem critérios para identificar essas relações e revisá-las com intenção.Resumo
O que você precisa guardar
Fundamentos organizam decisões; não são uma fórmula capaz de tornar qualquer peça bonita ou adequada.
Hierarquia, contraste, alinhamento, proximidade e espaço trabalham juntos e precisam responder ao conteúdo.
Consistência cria previsibilidade, enquanto variedade controlada diferencia funções e prioridades.
Uma composição deve ser avaliada no contexto real, incluindo tamanho, legibilidade, compreensão e acessibilidade.
O que são fundamentos do design?
Listas de princípios variam entre escolas, livros e áreas profissionais. Algumas combinam relações de composição, outras incorporam princípios da percepção e outras funcionam como modelos didáticos para iniciantes. Portanto, os dez fundamentos deste guia não constituem uma teoria universal nem uma receita fechada.Princípios do design visual são critérios usados para organizar elementos, orientar a atenção e comunicar relações de acordo com um público, um objetivo, um conteúdo e um contexto. A expressão inglesa visual design principles normalmente aponta para o mesmo conjunto de decisões, ainda que listas e nomes variem entre autores.Uma regra pode ser flexibilizada quando existe uma razão compreendida. Quebrá-la sem observar suas consequências tende a gerar arbitrariedade: um desalinhamento parece acidente, uma variação parece erro e uma diferença de tamanho chama atenção para o lugar errado.Também não basta conferir cada princípio separadamente. Aumentar um título altera escala, contraste, hierarquia, ritmo e equilíbrio ao mesmo tempo. Aproximar uma legenda da imagem reforça o agrupamento, mas também muda o espaço negativo ao redor. Design visual acontece nessas relações.
Uma visão geral dos princípios
Referência
Dez fundamentos, dez perguntas
As perguntas orientam análise e revisão; não substituem a observação do público, do conteúdo e do suporte.
Essa tabela funciona como mapa de perguntas. A resposta correta depende da situação: um cartaz visto à distância, uma embalagem segurada na mão e uma interface usada em 390 pixels exigem proporções e densidades diferentes.
Hierarquia visual organiza a ordem de atenção
Hierarquia visual ajuda o leitor a perceber o que vem primeiro, o que é principal ou secundário, quais informações estão relacionadas, qual ação está disponível e como percorrer o conteúdo.Ela pode ser construída com tamanho, peso tipográfico, cor, contraste, posição, espaçamento, forma, imagens e agrupamento. Um título pode ganhar prioridade por ser maior, mas também por ocupar uma posição inicial, estar isolado ou possuir peso diferente dos textos próximos.O problema que a hierarquia resolve não é apenas “falta de destaque”. É a competição entre sinais. Se título, preço, descrição, selo e botão recebem intensidade semelhante, todos pedem atenção e nenhum orienta o percurso.Erro comum: aumentar muito o elemento principal e considerar o trabalho encerrado. Um texto enorme chama atenção, mas pode empurrar informações necessárias para fora da tela ou desequilibrar a composição.Como avaliar: observe a peça por poucos segundos e pergunte o que foi percebido primeiro, segundo e terceiro. Essa sequência corresponde à tarefa do leitor? Depois verifique se agrupamentos e ações continuam compreensíveis sem depender apenas do tamanho.
Demonstração controlada
Hierarquia muda a ordem percebida
Antes
Oficina de cartazes
17 de setembro · 19h
Inscrições abertas
Mesmo tamanho e peso: três mensagens disputam a primeira leitura.
Depois
Inscrições abertas
Oficina de cartazes
17 de setembro · 19h
Só a escala e o peso mudam; conteúdo, cor e posição geral permanecem.
A comparação mantém conteúdo, cor e estrutura geral. Apenas tamanho, peso e ordem tipográfica mudam, permitindo observar a hierarquia sem atribuir o efeito a várias decisões ao mesmo tempo.
Contraste torna diferenças perceptíveis
Contraste é a diferença perceptível entre elementos. Pode acontecer por tamanho, peso, cor, forma, espaço ou posição. Ele ajuda a destacar informações, separar funções, criar hierarquia, melhorar a leitura e indicar estados de uma interface.Um preço em peso mais forte contrasta com a descrição. Um botão cercado por espaço se diferencia dos links próximos. Uma forma circular entre retângulos interrompe o padrão. Um bloco deslocado pode marcar uma mudança de assunto. Contraste não é apenas escolher cores opostas.Erro comum: criar tantas diferenças que todas competem. Cinco cores intensas, várias famílias tipográficas e formas sem relação produzem estímulo, não necessariamente orientação.Como avaliar: identifique cada diferença e nomeie sua função. Se uma variação não comunica prioridade, agrupamento, estado ou significado, ela pode ser ruído.Contraste visual também não é sinônimo de contraste de cor suficiente para acessibilidade. A WCAG 2.2 define critérios mensuráveis para texto e imagens de texto: em geral, pelo menos 4,5:1 para texto comum e 3:1 para texto grande. Além disso, a cor não deve ser o único meio de transmitir informação. Uma interface pode parecer vibrante e ainda ter texto difícil de ler, foco pouco visível ou estados diferenciados apenas por cor.
Demonstração controlada
Contraste compositivo não substitui contraste mensurável
Falha
Texto de exemplo
#9ca3af sobre #ffffff: 2.54:1
Passa
Texto de exemplo
#374151 sobre #ffffff: 10.31:1
As duas amostras usam o mesmo tamanho, peso, texto e fundo. A versão de 2,54:1 falha para texto comum; a de 10,31:1 supera o mínimo de 4,5:1 da WCAG 2.2. Os rótulos registram o resultado sem depender da percepção da cor.O número não escolhe a paleta nem garante que a composição inteira seja acessível. Ele responde a uma pergunta delimitada: a diferença de luminância entre duas cores atende ao critério aplicável? Estados, componentes, foco, reflow, ampliação e sequência de leitura exigem outras verificações.
Alinhamento cria uma estrutura invisível
Alinhamento conecta elementos mesmo quando estão distantes. Uma borda compartilhada, uma coluna constante ou uma grade coerente reduz posicionamentos arbitrários e torna relações mais fáceis de perceber.O alinhamento à esquerda favorece percursos previsíveis em textos extensos. O alinhamento à direita pode organizar valores ou criar uma borda útil em contextos específicos. A centralização funciona bem para composições curtas e solenes, mas tende a criar pontos de início irregulares quando aplicada a parágrafos longos ou interfaces densas.Grades ajudam a manter colunas, margens e intervalos coerentes. Não precisam ficar visíveis nem aprisionar toda a composição. Um elemento pode atravessar a grade deliberadamente e ainda se relacionar com outras linhas estruturais.Erro comum: posicionar elementos “quase” na mesma linha. A pequena diferença parece descuido porque não é suficiente para criar um contraste intencional.Como avaliar: trace mentalmente linhas a partir das bordas e centros. Os elementos compartilham referências reconhecíveis? Quando algum deles rompe a estrutura, essa ruptura possui uma função clara?
Proximidade e agrupamento comunicam relações
Elementos próximos tendem a ser percebidos como relacionados. Esse princípio de organização perceptiva ajuda a conectar título e texto, produto e preço, campo e rótulo, imagem e legenda, categoria e itens ou ações que pertencem à mesma tarefa.Uma distância menor dentro do grupo e maior entre grupos muitas vezes comunica melhor que caixas, linhas e fundos coloridos. A proximidade economiza elementos decorativos porque transforma o próprio espaço em informação.Erro comum: usar intervalos idênticos em toda parte. Se a distância entre título e descrição é igual à distância até o próximo produto, a composição não deixa claro onde um grupo termina e outro começa.Como avaliar: cubra bordas, cores de fundo e divisórias. Os agrupamentos continuam perceptíveis apenas pela distância e pela ordem? Estudos introdutórios sobre princípios de Gestalt ajudam a explicar tendências como proximidade e similaridade, mas não transformam percepção em destino. Conteúdo, convenções aprendidas e tarefa também influenciam a leitura.Agrupamento é o efeito; proximidade é um dos sinais que podem produzi-lo. Contorno, fundo, alinhamento, repetição e continuidade também agrupam. Empilhar todos esses sinais em cada bloco cria caixas dentro de caixas e pode enfraquecer a hierarquia em vez de reforçá-la.
Demonstração controlada
Alinhamento e proximidade, uma variável por vez
Variável 1: alinhamentoEspaçamento constante
AntesNome do projetoStatus da revisãoPróxima entrega
DepoisNome do projetoStatus da revisãoPróxima entrega
Variável 2: proximidadeAlinhamento constante
AntesAnaDireção de arteCaioRedação
DepoisAnaDireção de arteCaioRedação
No primeiro experimento, só o alinhamento muda. No segundo, só os intervalos mudam. Separar as variáveis evita atribuir a melhora a uma combinação impossível de avaliar.
Repetição e consistência criam previsibilidade
Repetir padrões de tipografia, cor, espaçamento, forma e comportamento permite reconhecer funções. Se todos os títulos de seção compartilham tratamento, o leitor aprende a estrutura. Se botões equivalentes se comportam da mesma maneira, a interface exige menos reaprendizado.Consistência útil conecta elementos que cumprem funções semelhantes. Repetição meramente decorativa duplica formas ou ornamentos sem ajudar a leitura. Padronização excessiva remove diferenças necessárias: se título, legenda e ação parecem iguais, o sistema continua consistente, mas perde hierarquia.Erro comum: interpretar consistência como obrigação de tornar tudo igual.Como avaliar: compare elementos que exercem a mesma função e procure variações sem motivo. Depois compare funções diferentes e confirme se existe contraste suficiente para distingui-las.
Espaço negativo também comunica
Espaço negativo é a área não ocupada ao redor e entre os elementos. Ele separa grupos, melhora a leitura, cria ênfase, estabelece ritmo e reduz sobrecarga visual. Não é sobra que permanece depois de inserir o conteúdo: participa da composição desde o início.Uma chamada cercada por espaço ganha destaque sem precisar de outra cor. Um intervalo maior entre seções sinaliza mudança de assunto. Margens adequadas evitam que texto e bordas disputem atenção.Erro comum: associar automaticamente muito espaço vazio a sofisticação. Espaçamento excessivo pode romper a relação entre rótulo e campo, aumentar a rolagem e esconder que duas informações pertencem ao mesmo conjunto.Como avaliar: observe se cada intervalo aproxima, separa ou enfatiza algo. Teste no tamanho real: o espaço que parece elegante em uma tela ampla pode fragmentar o conteúdo no celular.
Escala e proporção representam relações
Escala descreve o tamanho de um elemento em relação aos demais ou ao suporte. Proporção trata das relações de tamanho dentro da composição. Juntas, elas podem representar importância, criar contraste e tornar conteúdos reconhecíveis.Um título maior que a descrição indica prioridade. Uma fotografia ampla pode estabelecer contexto antes dos detalhes. Um preço pequeno demais, porém, deixa de cumprir sua função mesmo que seja formalmente secundário.Erro comum: usar diferenças extremas como atalho para hierarquia. O maior elemento não é automaticamente o mais útil, e o menor ainda precisa permanecer legível.Como avaliar: compare as proporções com a importância e a quantidade real de conteúdo. Reduza a composição para uma tela pequena e veja se a relação sobrevive sem corte, aperto ou rolagem desnecessária.
Equilíbrio distribui peso visual
Equilíbrio é a distribuição percebida de peso entre formas, textos, imagens, cores e espaços. Não exige colocar a mesma quantidade de elementos em cada lado.No equilíbrio simétrico, partes correspondentes criam estabilidade e formalidade. No assimétrico, elementos diferentes compensam seus pesos: uma imagem grande e discreta pode se equilibrar com um título menor, porém mais escuro e concentrado.Erro comum: confundir equilíbrio com simetria perfeita. Distribuir tudo igualmente pode eliminar direção, produzir monotonia ou ignorar a importância desigual do conteúdo.Como avaliar: afaste-se da peça ou reduza sua escala. Alguma região concentra peso sem intenção? A assimetria orienta o olhar ou parece resultado de elementos abandonados?
Ritmo conduz a leitura
Ritmo nasce da repetição de elementos e intervalos, combinada com mudanças controladas. Linhas de texto, módulos, imagens e pausas criam uma sequência que acelera, desacelera ou interrompe o percurso.Em uma publicação, repetir alinhamento e espaçamento estabelece cadência. Uma mudança de escala pode marcar o ponto principal. Em uma lista, intervalos irregulares podem sinalizar subgrupos — ou parecer erro, caso não correspondam ao conteúdo.Erro comum: repetir mecanicamente o mesmo módulo até tornar a leitura indistinguível.Como avaliar: percorra a composição na ordem esperada. Existem pausas antes de mudanças importantes? As repetições ajudam a antecipar a estrutura? As interrupções acontecem onde há mudança de sentido?
Unidade e variedade mantêm coerência sem monotonia
Unidade faz a composição parecer parte de um mesmo sistema. Ela pode surgir de tipografia, paleta, grade, linguagem de formas, tratamento de imagem e padrões de espaçamento. Variedade introduz diferenças capazes de marcar prioridade, função, seção ou estado.Unidade sem variedade torna tudo parecido demais. Variedade sem unidade produz uma coleção de decisões que não parece pertencer ao mesmo projeto. O trabalho está em definir o que permanece e o que muda.Erro comum: adicionar elementos decorativos diferentes para “dar criatividade” a cada parte.Como avaliar: identifique três ou quatro decisões que unem a composição e as diferenças que orientam a leitura. Cada variação possui papel reconhecível ou apenas evita repetição?
Tipografia organiza linguagem antes de decorar a página
Tipografia participa da hierarquia por meio de tamanho, peso, largura, estilo, entrelinha, comprimento de linha e espaçamento. Ela não deve ser avaliada apenas pela personalidade da fonte. O sistema precisa permitir reconhecer títulos, corpo, legendas, dados e ações sem criar uma escala diferente para cada ocorrência.
Hierarquia tipográfica
Uma boa hierarquia combina diferenças suficientes para separar funções com repetição suficiente para ensinar o padrão. Se título e subtítulo possuem quase o mesmo tamanho e peso, a diferença parece hesitação. Se cada nível muda família, cor, caixa, peso e alinhamento ao mesmo tempo, o sistema fica ruidoso.
Largura de linha e espaçamento
Linhas muito extensas dificultam encontrar o início da linha seguinte; linhas muito curtas fragmentam o ritmo e aumentam quebras. Não existe um número universal para todos os alfabetos, fontes e suportes. Como referência de acessibilidade, o critério AAA de Apresentação Visual da WCAG 2.2 prevê mecanismo para limitar blocos a 80 caracteres, evitar justificação completa e permitir ajustes de apresentação.Entrelinha também depende de corpo, família, largura e idioma. O critério de espaçamento de texto não obriga o autor a adotar um valor visual fixo; exige que o conteúdo continue legível e funcional quando a pessoa substitui espaçamentos. Uma interface que corta rótulos quando o texto cresce falha mesmo que pareça equilibrada na captura original.
Legibilidade depende do contexto
Contraste adequado não corrige uma fonte pequena demais. Corpo grande não corrige uma linha larga e densa. Negrito pode criar ênfase, mas perde efeito quando todo parágrafo está em negrito. Avalie a leitura no tamanho, dispositivo, iluminação e distância de uso previstos.
Cor comunica função, contexto e estado
Cor pode estabelecer contraste, associar categorias, expressar identidade e indicar estados. Seu significado não é fixo. Vermelho pode representar erro em uma interface, promoção no varejo ou celebração em outro contexto cultural. A chamada “psicologia das cores” costuma simplificar relações que dependem de cultura, repertório, combinação, saturação, proporção e tarefa.Escolha primeiro a função: separar, enfatizar, informar estado ou sustentar identidade. Depois verifique se a informação sobrevive sem cor e se o contraste atende ao uso. Um campo inválido, por exemplo, pode combinar cor, ícone e mensagem textual. A WCAG determina que cor não seja o único meio visual de transmitir informação.Modo escuro não é inverter valores mecanicamente. Superfícies, bordas, texto, imagens, sombras e estados precisam manter relações perceptíveis sem brilho excessivo ou perda de contraste. As demonstrações deste artigo usam os tokens do próprio site nas estruturas e reservam cores fixas apenas ao teste explicitamente calculado de contraste.
Princípios interagem e podem entrar em conflito
Aumentar um título fortalece hierarquia e contraste, mas pode quebrar uma linha, ocupar o espaço de uma ação ou desequilibrar um card. Aproximar legenda e imagem reforça agrupamento, mas pode reduzir a pausa entre seções. Repetir um padrão cria consistência, porém pode tornar itens de importância diferente visualmente equivalentes.Por isso, a revisão deve alterar uma variável por vez quando o objetivo é entender causa. Em seguida, precisa recompor o conjunto. Uma solução localmente correta pode prejudicar o percurso completo.Alguns conflitos comuns:
clareza × expressão: uma identidade marcante pode exigir mais variedade, mas funções ainda precisam ser reconhecíveis;
densidade × respiração: adicionar espaço melhora separação até começar a fragmentar relações ou esconder conteúdo;
consistência × prioridade: repetir tratamento ajuda a aprender o sistema, enquanto exceções bem escolhidas sinalizam importância;
contraste × equilíbrio: um elemento muito intenso orienta atenção, mas pode dominar além da sua função;
escala × adaptação: uma proporção eficaz no cartaz pode ocupar toda a primeira tela do celular.
O que muda entre editorial, interface, identidade e redes sociais
Design editorial
O percurso acontece entre títulos, colunas, imagens, legendas, notas e páginas. Ritmo, largura de linha e hierarquia tipográfica sustentam leitura prolongada. Uma abertura expressiva não autoriza tornar o corpo difícil de acompanhar.
Interfaces
Além de comunicar conteúdo, a composição precisa revelar estados e ações. Consistência reduz reaprendizado; contraste e proximidade conectam rótulos, campos e mensagens. Foco por teclado, ampliação, reflow e conteúdo dinâmico fazem parte da avaliação visual, não são uma camada posterior.
Identidade visual
Repetição cria reconhecimento entre aplicações, mas identidade não significa congelar todas as peças. O sistema precisa definir o que permanece — tipografia, relações cromáticas, marca, linguagem — e onde a variação é permitida.
Peças para redes sociais
O conteúdo aparece pequeno, entre distrações e em formatos diferentes. A mensagem principal precisa sobreviver à miniatura, mas isso não exige transformar todo texto em manchete enorme. Uma publicação pode orientar para legenda, sequência ou página completa quando o assunto pede profundidade.Minimalismo não é sinônimo de bom design em nenhuma dessas áreas. Remover elementos ajuda apenas quando preserva o conteúdo, a ação e as relações necessárias.
Quando quebrar uma convenção
Uma convenção pode ser quebrada para criar surpresa, representar uma ideia, diferenciar uma seção ou mudar deliberadamente o ritmo. A ruptura funciona quando o público ainda consegue reconhecer o conteúdo e concluir a tarefa.Antes de quebrar:
identifique a convenção e a expectativa que ela cria;
nomeie o efeito pretendido;
preserve sinais redundantes de função e sequência;
teste no suporte e com pessoas compatíveis com o público;
verifique se a ruptura parece intencional sem depender de explicação do designer.
Desalinhamento pode gerar tensão expressiva, mas rótulo e campo ainda precisam ser relacionados. Um título pode atravessar a grade, mas a ordem de leitura deve permanecer clara. Criatividade não é a ausência de restrição; é escolher quais relações permanecerão reconhecíveis enquanto outra expectativa é alterada.
Como os fundamentos trabalham juntos na prática
Imagine uma publicação para divulgar o prato do dia de um restaurante. A primeira versão usa todos os textos com tamanho parecido, centraliza título, descrição, preço e endereço, aplica quatro cores intensas, mantém espaçamentos irregulares e inclui formas decorativas sem função. O preço fica longe do nome do prato e o botão de pedido compete com um selo promocional.Exemplo
Revisão de uma publicação do prato do dia
1. Identificar a informação principal. O objetivo é permitir que a pessoa reconheça o prato, entenda o preço e saiba como pedir. O nome recebe prioridade; preço e ação precisam ser encontrados logo depois. Endereço e observações permanecem disponíveis, mas secundários.2. Agrupar conteúdos relacionados. Nome, descrição e preço passam a formar um conjunto. Horário e endereço compõem outro. A ação fica próxima das informações necessárias para decidir.3. Estabelecer hierarquia tipográfica. Em vez de apenas ampliar tudo, a revisão combina tamanho, peso e espaço: título forte, descrição confortável, preço evidente e dados auxiliares discretos, mas legíveis.4. Escolher alinhamentos consistentes. O conteúdo principal adota alinhamento à esquerda e uma grade comum. A centralização deixa de ser padrão automático. O selo só permanece se puder se alinhar à estrutura e comunicar algo necessário.5. Reduzir elementos concorrentes. Cores e formas sem função são removidas. A identidade continua presente em escolhas repetidas, não em enfeites diferentes ao redor de cada texto.6. Ajustar contraste e espaçamento. A ação se distingue por forma, texto e contraste, não apenas por cor. Intervalos menores conectam nome, descrição e preço; um espaço maior separa os dados do restaurante.7. Avaliar no tamanho real. A publicação é vista no celular e na proporção em que aparecerá no feed. Textos que pareciam suficientes durante a edição podem precisar de ajuste, e espaços muito amplos podem ser comprimidos.8. Verificar acessibilidade e compreensão. O contraste entre texto e fundo é medido, a informação não depende apenas de cor e a ordem de leitura é conferida com pessoas ou tarefas compatíveis com o contexto.
O resultado não é melhor porque ficou “mais limpo”. Ele é melhor se as relações visuais passaram a representar as relações do conteúdo e se o público consegue perceber, compreender e agir com menos ambiguidade.
Um exercício para desenvolver percepção
Escolha uma interface, cartaz, publicação ou embalagem. Não tente redesenhá-la imediatamente. Primeiro, registre o que você percebe e quais relações sustentam essa leitura.
Identifique o primeiro elemento percebido.
Observe como as informações foram agrupadas.
Procure alinhamentos e padrões repetidos.
Avalie os espaços dentro e entre os grupos.
Verifique se contraste e tamanho representam a importância do conteúdo.
Aponte uma decisão eficaz e explique a função que ela cumpre.
Escolha uma possível melhoria e descreva quais outros fundamentos seriam afetados.
O exercício desenvolve análise, não apenas reprodução de referências. Duas peças visualmente diferentes podem resolver bem o mesmo problema; uma cópia fiel pode falhar quando conteúdo, público ou suporte mudam.
Checklist para revisar uma composição
Ação
Antes de considerar a peça pronta
A ordem de atenção corresponde ao objetivo do conteúdo?
Informações relacionadas estão próximas e visualmente conectadas?
Os alinhamentos parecem deliberados, inclusive entre elementos distantes?
Diferenças de tamanho, peso, forma e cor cumprem funções reconhecíveis?
Padrões consistentes ajudam a identificar elementos equivalentes?
O espaço separa e aproxima sem fragmentar a leitura?
A composição mantém equilíbrio e ritmo no tamanho real de uso?
Unidade e variedade permitem reconhecer o sistema e suas prioridades?
Texto, estados e ações possuem contraste verificável e não dependem apenas de cor?
Uma pessoa do público consegue explicar o que viu e o que pode fazer?
O checklist não prova que o design é bom. Ele torna decisões discutíveis e revela pontos que precisam de observação, comparação ou teste.
Princípios orientam decisões, não substituem julgamento
Seguir princípios não garante uma solução adequada. Tudo não precisa ser simétrico. Espaço vazio não é desperdício, mas também não é qualidade automática. Centralizar não organiza qualquer conteúdo. Consistência não exige igualdade. Contraste não se resume a cores opostas. Quebrar uma regra só demonstra criatividade quando a mudança produz uma consequência coerente com a intenção.Fundamentos ajudam a enxergar relações e formular perguntas melhores. Tipografia dá voz e estrutura à linguagem. Cor diferencia, associa e cria contraste. Composição organiza essas decisões no espaço. Acessibilidade confronta a proposta com diferentes capacidades e condições de uso.Por isso, a avaliação final não deve perguntar apenas se a peça obedece a uma lista. Deve perguntar se cada decisão visual ajuda o conteúdo a cumprir sua função para pessoas reais, no contexto em que será percebido.Continue por o que é design e como forma e função trabalham juntas. Se você quer aplicar essa base em projetos e estudos, leia como começar a trabalhar com design.
Referências
What are the Gestalt Principles? — Interaction Design Foundation; introdução aos princípios de agrupamento perceptivo, incluindo proximidade e similaridade.
Understanding Use of Color — W3C Web Accessibility Initiative; explica por que a cor não deve ser o único meio visual de transmitir informação.
Understanding Contrast Minimum — W3C Web Accessibility Initiative; apresenta a finalidade e os critérios de contraste mínimo da WCAG 2.2.