AULA 12
MÓDULO 0
interface
⏱ 45 min
A Importância da Interface em Sistemas Web
Interface como contrato com o usuário. UI vs UX. Design System como documentação viva. Acessibilidade como requisito. Por que interface ruim custa dinheiro.
UI vs UXdesign systemtokensacessibilidadeWCAGresponsive
Por que interface importa
Interface não é decoração — é o produto que o usuário usa. Um sistema com lógica impecável e interface confusa é um sistema que ninguém usa. Interface ruim custa: suporte, abandono, retrabalho.
custo real de interface ruim
Um botão mal posicionado pode reduzir conversão em 20%. Uma mensagem de erro genérica gera tickets de suporte. Uma interface inconsistente gera retrabalho em todos os dispositivos. Interface é custo de negócio, não estética.UI — User Interface
O visual: cores, tipografia, layout, componentes. O que o usuário vê.
UX — User Experience
A experiência: fluxos, hierarquia, feedback, acessibilidade. O que o usuário sente.
Design System
Um Design System é uma biblioteca de componentes + regras de uso. Garante consistência visual e agilidade: um botão definido uma vez funciona em todo o sistema.
Tokens
Variáveis de design: cores, espaçamentos, tipografia. Ex: --color-primary: #00ff88
Componentes
Button, Input, Card, Modal. Construídos com tokens. Reutilizáveis.
Padrões (Patterns)
Como compor componentes: formulários de login, fluxos de checkout.
Documentação
Storybook, Zeroheight. O dev sabe como usar sem perguntar ao designer.
acessibilidade não é opcional
WCAG define critérios de acessibilidade. Contraste mínimo 4.5:1. Labels em inputs. Navegação por teclado. No Brasil, sites com mais de 10M usuários têm obrigação legal.Interface em sistemas web modernos
A interface de um sistema web é um contrato com o usuário. Quebrar esse contrato — mudar um botão de lugar, trocar uma cor sem motivo — gera fricção. Bons sistemas web têm interface previsível, consistente e que funciona em qualquer tela.
responsive é obrigatório
Mobile first: mais de 60% do tráfego web é mobile. Um sistema que só funciona no desktop perdeu mais da metade dos usuários antes de começar.
javascript
/* Design tokens em CSS — base de qualquer design system */ :root { /* Cores */ --color-primary: #00ff88; --color-secondary: #38bdf8; --color-danger: #f87171; --color-bg: #0d1117; --color-surface: #111827; --color-text: #f0f6fc; --color-muted: #8b949e; /* Tipografia */ --font-heading: 'Sora', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Espaçamento — escala de 4px */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; /* Bordas */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; }
quiz · aula 12
Teste seus conhecimentos
0/3 respondidas
QUESTÃO 01
Qual é a diferença entre UI e UX?
QUESTÃO 02
O que é um Design System?
QUESTÃO 03
Por que acessibilidade não é opcional?
0/3