Resposta curta
Design visual usa composição, tipografia, cor e hierarquia para tornar informações claras e utilizáveis. A prática transforma requisitos de conteúdo e comportamento em apresentação coerente sem definir o fluxo da tarefa.
Sobre Design visual
Usa composição, tipografia, cor e hierarquia para tornar informações claras e utilizáveis. A competência abrange relações visuais, ênfase, consistência e adaptação entre formatos e estados relevantes.
Use esta competência para
- Funções responsáveis por hierarquia visual, composição, tipografia, cor ou apresentação de interfaces.
- Funções que transformam requisitos de conteúdo e comportamento em soluções visuais coerentes.
Não use esta competência para
- Funções que apenas montam interfaces a partir de especificações fixas e não tomam decisões visuais.
Diferenças importantes
Design de interação
Design visual determina apresentação e ênfase. Design de interação determina sequência, controles, mudanças de estado e respostas.
Design systems
Design visual aplica e amplia a linguagem visual em trabalhos específicos. Design systems mantém padrões e componentes reutilizáveis entre times.
Expectativas por nível
IC1
Contribuidor individual 1
Produz soluções visuais claras para uma superfície definida com orientação, aplica regras existentes de tipografia, espaçamento, cor e componentes e corrige inconsistências apontadas.
Comportamentos observáveis
- Usa hierarquia para separar informações principais, de apoio e secundárias.
- Aplica tipografia, espaçamento e tokens de cor aprovados nos desenhos atribuídos.
- Confere alinhamento, contraste, densidade e layouts responsivos antes da entrega.
Exemplos
- Reorganiza uma página de configurações para evidenciar a ação principal e a relação entre seções.
- Antes da entrega, corrige espaçamentos diferentes e um layout móvel que escondia texto de apoio.
IC2
Contribuidor individual 2
Cria com autonomia uma direção visual coerente para uma área de produto, lida com conteúdos e estados variados, explica escolhas e verifica se a implementação preserva hierarquia e legibilidade.
Comportamentos observáveis
- Compara direções visuais considerando prioridade do conteúdo e contexto de uso.
- Adapta a hierarquia para estados densos, vazios, de erro e responsivos.
- Revisa telas implementadas e identifica mudanças que alteram ênfase ou leitura.
Exemplos
- Cria uma direção para um painel que mantém prioridades visíveis com poucos ou muitos dados.
- Na revisão da implementação, encontra uma escala tipográfica que faz o conteúdo de apoio competir com o título.
IC3
Contribuidor individual 3
Define direção visual entre áreas conectadas, resolve problemas de apresentação com necessidades concorrentes e cria orientação para decisões visuais coerentes em vários times.
Comportamentos observáveis
- Define princípios visuais para uma área e mostra sua aplicação em casos contrastantes.
- Resolve conflitos de hierarquia entre superfícies mantidas por times diferentes.
- Revisa trabalhos e propõe mudanças específicas ligadas a clareza, ênfase e consistência.
Exemplos
- Alinha áreas do produto sobre a prioridade visual de status, riscos e ações principais.
- Cria exemplos de adaptação da linguagem visual entre fluxos focados e relatórios densos.