Design para quem programa

Trabalhe numa cópia da pasta inicio/ desta etapa. Ela já abre ou executa com as instruções do README. Leia o código, mude uma coisa e anote sua previsão antes de recarregar. Compare com a referência na pasta da etapa. Se nada mudar, confira a extensão do arquivo, o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo são experiências separadas; a pasta de referência contém o programa completo desta etapa.

A Biblioteca da Ribeira é um acervo comunitário fictício no bairro da Ribeira, Recife. Neste capítulo você monta o cartaz da hora do conto: uma ideia, poucas cores, tipo legível, hierarquia clara. Design aqui não é “enfeitar”. É decidir para quem lê no celular, no zoom e de relance.

O exemplo está em pacote de exemplos/18-design-para-quem-programa/. Abra index.html. Leia o cartaz de longe. Depois abra estilos.css.

Ciclo: ler → copiar → mudar uma coisa → prever → recarregar → conferir.

O que você vai aprender

• Pensar na pessoa que usa, não só no código.
• Escolher uma paleta curta e repetir.
• Combinar tipo de título e tipo de texto.
• Montar hierarquia: um h1, um horário, um recado.
• Aplicar isso no cartaz da hora do conto.

Pensar em quem lê

Antes da cor: quem chega? Criança acompanhada, pessoa idosa, alguém de pé no corredor. O cartaz tem uma mensagem: sábado, 10h, hora do conto, entrada livre.

Se tudo grita, nada se lê. Três níveis bastam: título, texto, detalhe. Botão ou link, se existir, parece acionável.

Não copie a cara de uma rede social. A Ribeira tem papel, tinta, marca e um destaque.

Erro comum: cinco cores de destaque e três fontes “para parecer rico”. O olho não acha o horário.

Paleta curta

Quatro papéis, quatro variáveis. Sem inventar um quinto “só nesta seção”.

:root {
  --papel: #f4f1ea;
  --tinta: #1a1a1a;
  --marca: #0f3d3e;
  --destaque: #e07a5f;
  --espaco: 1rem;
}
body {
  margin: 0;
  font-family: Georgia, serif;
  background: var(--papel);
  color: var(--tinta);
}

Papel é o fundo. Tinta é o texto. Marca é o verde da casa. Destaque é o coral, para pouca coisa.

Mude uma coisa. Troque --destaque para #0f3d3e. Preveja as faixas da amostra. Recarregue. Confira. Depois devolva o coral se quiser o cartaz original.

Contraste: tinta no papel precisa continuar forte. Coral em papel claro serve para faixa, não para parágrafo longo.

Tipo

Duas famílias no máximo. Título sem serifa (Segoe UI / Arial). Corpo com serifa (Georgia), como cartaz de papel.

h1 {
  font-family: "Segoe UI", sans-serif;
  color: var(--marca);
}
.wrap {
  width: min(40rem, calc(100% - 2rem));
  margin: 2rem auto;
}

Tamanho do título maior que o parágrafo. Entrelinha do texto cerca de 1.4 ou 1.5. Linha estreita demais cansa. min(40rem, …) impede faixa enorme no monitor largo.

Não justifique o texto deste cartaz. Alinhar à esquerda lê melhor na tela.

Hierarquia

Um h1: “Cartaz da hora do conto”. Um parágrafo de apoio. O horário em frase curta. Nada de h1 no nome da biblioteca e outro h1 no evento.

<main class="wrap">
  <h1>Cartaz da hora do conto</h1>
  <p>Uma ideia, um cartaz. Paleta curta: papel, tinta, marca e destaque.</p>
  <p class="amostra" aria-hidden="true">
    <span style="background:#f4f1ea;border:1px solid #ccc"></span>
    <span style="background:#1a1a1a"></span>
    <span style="background:#0f3d3e"></span>
    <span style="background:#e07a5f"></span>
  </p>
  <p>Sábado às 10h. Entrada livre. Conteúdo fictício.</p>
</main>

A amostra de cores é decorativa: aria-hidden="true". Quem lê com ouvido já tem o texto. As faixas são para quem vê.

Espaço (--espaco) entre as faixas. Espaço é hierarquia tão forte quanto tamanho.

O cartaz completo em CSS

estilos.css do exemplo:

:root { --papel: #f4f1ea; --tinta: #1a1a1a; --marca: #0f3d3e; --destaque: #e07a5f; --espaco: 1rem; }
body { margin: 0; font-family: Georgia, serif; background: var(--papel); color: var(--tinta); }
.wrap { width: min(40rem, calc(100% - 2rem)); margin: 2rem auto; }
h1 { font-family: "Segoe UI", sans-serif; color: var(--marca); }
.amostra { display: flex; gap: var(--espaco); }
.amostra span { flex: 1; height: 4rem; }

Isso é o cartaz. Não precisa de biblioteca visual. Não edite um CSS de terceiros: este arquivo é o seu.

Teste zoom 200% e janela estreita. O título quebra linha. O horário continua na página.

Disco, 127.0.0.1 e publicação

No disco o cartaz abre. Em 127.0.0.1 você confere como “site”:

python -m http.server 8080 --bind 127.0.0.1

Publicar um cartaz com data real de um evento verdadeiro não é o exercício. Sábado às 10h é fictício. Não coloque telefone pessoal no cartaz de estudo.

Atividades

1. Por que a paleta do cartaz tem quatro papéis e não dez cores soltas?
2. A amostra de faixas tem aria-hidden="true". Por quê?
3. Você troca o h1 por um p grande e colorido. O que perde quem navega por títulos?

Respostas comentadas

1. Cada cor tem função: fundo, texto, marca, destaque. Dez cores competem e o horário some.
2. As faixas repetem informação visual já dita no texto. Esconder da árvore de acessibilidade evita ruído.
3. Some o título de verdade da página. O leitor de tela e o mapa de headings não acham o cartaz.

O arquivo completo

Referência do exemplo 18-design-para-quem-programa, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Cartaz da Ribeira</title>
<link href="estilos.css" rel="stylesheet"/>
<style>
/* Apoio de leitura, teclado e tela estreita. */
img{max-width:100%;height:auto} html {overflow-wrap:anywhere} main {min-width:0} input,textarea,select,canvas {max-width:100%;box-sizing:border-box} fieldset {min-width:0}
pre {max-width:100%;overflow:auto} :focus-visible {outline:3px solid #0f3d3e;outline-offset:3px}
.skip {position:absolute;top:-5rem;left:1rem;background:#0f3d3e;color:white;padding:.5rem;z-index:9}.skip:focus {top:.5rem}
table {max-width:100%} td,th {overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
</style></head>
<body><a class="skip" href="#conteudo">Pular para o conteúdo</a>
<main class="wrap" id="conteudo" tabindex="-1">
<h1>Cartaz da hora do conto</h1>
<p>Uma ideia, um cartaz. Paleta curta: papel, tinta, marca e destaque.</p>
<p aria-hidden="true" class="amostra">
<span style="background:#f4f1ea;border:1px solid #ccc"></span>
<span style="background:#1a1a1a"></span>
<span style="background:#0f3d3e"></span>
<span style="background:#e07a5f"></span>
</p>
<p>Sábado às 10h. Entrada livre. Conteúdo fictício.</p>
</main>
</body>
</html>

estilos.css

:root { --papel: #f4f1ea; --tinta: #1a1a1a; --marca: #0f3d3e; --destaque: #e07a5f; --espaco: 1rem; }
body { margin: 0; font-family: Georgia, serif; background: var(--papel); color: var(--tinta); }
.wrap { width: min(40rem, calc(100% - 2rem)); margin: 2rem auto; }
h1 { font-family: "Segoe UI", sans-serif; color: var(--marca); }
.amostra { display: flex; gap: var(--espaco); }
.amostra span { flex: 1; height: 4rem; }