Design Foundations
Os fundamentos do design são as regras essenciais que guiam a criação de interfaces eficazes. Eles não são apenas estéticos; são funcionais e garantem que o produto seja fácil de usar e compreender.
Por que isso importa em produtos digitais reais?
Em sistemas de saúde como o nosso (Teleconsulta, Telediagnóstico), a clareza é vital. Um erro de leitura causado por falta de contraste ou alinhamento ruim pode levar a uma interpretação errada de dados médicos. Fundamentos sólidos reduzem a carga cognitiva do usuário, permitindo que ele foque na tarefa e não em como a interface funciona.
1. Hierarquia Visual
Diz ao usuário o que é mais importante. Usamos tamanho, cor e peso para criar um caminho visual.
- Importância: Ajuda o usuário a escanear a página rapidamente e encontrar a ação principal (CTA).
2. Contraste
Diferença visual entre elementos (ex: texto vs fundo).
- Importância: Essencial para legibilidade e acessibilidade (WCAG). Sem contraste, usuários com baixa visão não conseguem usar o sistema.
3. Alinhamento
Organização dos elementos em relação uns aos outros.
- Importância: Cria ordem e conexão. Alinhamentos inconsistentes passam a sensação de amadorismo e desorganização.
4. Proximidade
Elementos relacionados devem estar próximos.
- Importância: Ajuda o usuário a agrupar informações mentalmente. Se um label está longe do seu input, o usuário fica confuso.
5. Consistência
Repetir os mesmos padrões em todo o sistema.
- Importância: Reduz a curva de aprendizado. Se o botão de "Salvar" é azul em uma tela, ele deve ser azul em todas.
6. Espaçamento (White Space)
O espaço vazio entre os elementos.
- Importância: Dá "respiro" à interface. Evita que o usuário se sinta sobrecarregado por excesso de informação.
7. Tipografia
A escolha e uso de fontes.
- Importância: Define a voz do produto e a legibilidade. Usamos escalas tipográficas para manter a harmonia.
Como fazer vs Como não fazer
✅ Como fazer
- Use o sistema de 8px para alinhamento e espaçamento.
- Garanta que o botão principal tenha o maior peso visual na tela.
- Use tokens semânticos para garantir contraste aprovado automaticamente.
❌ Como não fazer
- Usar valores de cores aleatórios (ex:
#333) em vez de tokens. - Espalhar elementos na tela sem um grid ou alinhamento definido.
- Usar 5 tamanhos de fonte diferentes em uma mesma seção sem hierarquia clara.