Responsividade e Escala

Produtos digitais modernos devem funcionar em uma vasta gama de dispositivos, desde smartwatches até monitores ultrawide. Para gerenciar isso, usamos escalas e sistemas de grid.

Escala de Espaçamento

Baseamos tudo no grid de 8px (e sua metade, 4px).

• Escala: 4, 8, 16, 24, 32, 40, 48, 64, 80...
• Vantagem: Garante que o alinhamento visual seja matemático e consistente, independentemente da tela.

Escala Tipográfica

Não escolhemos tamanhos de fonte aleatórios. Usamos uma escala (ex: Major Second ou Perfect Fourth) para garantir que a hierarquia entre Título, Subtítulo e Corpo seja harmônica.

Breakpoints

São os pontos onde o layout muda para se adaptar à tela.

• Mobile: < 600px
• Tablet: 600px - 1024px
• Desktop: > 1024px

Mobile-First

Começamos o design e o desenvolvimento pela menor tela.

• Por que? É mais fácil escalar um design simples (mobile) para um complexo (desktop) do que tentar "espremer" um design complexo em uma tela pequena.

Comportamento entre telas

• Reflow: Elementos que estão lado a lado no desktop empilham no mobile.
• Scaling: Componentes aumentam ou diminuem de tamanho proporcionalmente.
• Hiding/Showing: Algumas informações secundárias podem ser ocultadas no mobile para focar no fluxo principal.

---

Como fazer vs Como não fazer

✅ Como fazer

• Use o grid de 8px para definir margens entre componentes e paddings internos.
• No Figma, use Auto Layout para garantir que seus componentes sejam naturalmente responsivos.
• Teste seus designs nas menores telas de mercado (ex: iPhone SE / Android de entrada).

❌ Como não fazer

• Usar valores ímpares (ex: 7px, 13px, 21px). Isso quebra o grid e dificulta o desenvolvimento.
• Criar designs que só funcionam em telas de 1440px.
• Esquecer de considerar a altura da tela (dobra). Elementos importantes não devem ficar escondidos em telas pequenas sem uma indicação clara de scroll.