O que é UI Design?
User Interface (UI) é a camada visual com a qual usuários interagem: botões, cores, tipografia, ícones, layouts. Enquanto UX foca na jornada e usabilidade, UI foca na estética e apresentação visual.
UI vs UX
- UX: Como funciona (estrutura, fluxos, usabilidade)
- UI: Como parece (cores, tipografia, visual)
- Juntos: Produto bonito E funcional
Princípios Fundamentais
Hierarquia Visual
Tamanho, cor e posicionamento guiam o olho. Título > Subtítulo > Corpo. Importante = grande/colorido.
Consistência
Mesmos padrões em todo produto. Botões primários sempre da mesma cor, espaçamentos uniformes.
Espaçamento
White space é seu amigo! Respiro visual melhora legibilidade e elegância.
Contraste
Texto precisa ser legível. Mínimo 4.5:1 de contraste (WCAG AA). Use ferramentas de teste.
Grid & Alinhamento
Tudo deve estar alinhado a um grid invisível. Organização visual = profissionalismo.
Design System
- Cores: Primária (ação), Secundária (destaque), Neutras (texto/background). Máximo 3-4 cores principais.
- Tipografia: 2 fontes no máximo. Serif para títulos + Sans-serif para corpo, ou vice-versa.
- Botões: 3 tipos (Primary, Secondary, Outline). Tamanhos consistentes (Small, Medium, Large).
- Espaçamentos: Sistema de 8px ou 4px (8, 16, 24, 32, 40...). Evite valores aleatórios.
- Ícones: Biblioteca única (Font Awesome, Material Icons). Tamanho e estilo consistentes.
Ferramentas
- Figma: #1 para UI design. Colaborativo, plugins, design systems.
- Adobe XD: Alternativa da Adobe, integra com Creative Cloud.
- Sketch: Popular no Mac, muitos plugins.
- Coolors.co: Gerador de paletas de cores harmônicas.
- Google Fonts: Fontes gratuitas e otimizadas para web.
Exercício Prático
Desafio: Crie um Design System básico para seu projeto.
- Escolha 3 cores (primária, secundária, neutra). Use Coolors.co.
- Defina 2 fontes (Google Fonts): título + corpo.
- Crie 3 botões no Figma (Primary, Secondary, Outline).
- Defina escala de espaçamentos (8px, 16px, 24px, 32px).
- Aplique em 1 tela do seu projeto (ex: tela de login).