Separadores de Categoria: Linhas, Espaco em Branco ou Blocos de Cor?

Uma casa de meze de 26 mesas em Cesme, Izmir, substituiu as finas linhas divisorias entre categorias por 24 pixels de espaco em branco — o tempo na pagina subiu 22% e o comportamento de scroll ficou bem mais ordenado. Analisamos quando cada estilo funciona.

Tres Tipos de Separador

Os menus se apoiam em tres tecnicas: linhas (1-2px solidas), espaco em branco (16-32px) e blocos de cor. A linha e a mais leve mas cansa rapido. O branco parece natural. O bloco cria a hierarquia mais forte.

Material Design 3 e claro: o espaco em branco e o separador mais poderoso. As linhas pertencem ao conteudo tabular (tabela de alergenos). Os blocos de cor para ancorar atencao — especial do chef, promocao limitada.

Por Que o Branco Vence

Em Cesme, a linha 1px #E5E7EB foi trocada por 24px de gap vertical. Usuarios perceberam cada categoria como bloco proprio, o olho seguiu o padrao F natural, heatmaps de scroll mostraram pausas uniformes. Com linhas, usuarios as tratavam como obstaculos.

O branco da ar a tipografia: o contraste entre titulo e corpo cresce sozinho. No mobile e ainda mais critico — tela pequena, cada pixel conta.

Quando Usar Blocos de Cor

Tres cenarios justificam um bloco: (1) categoria promocional ("Ofertas da Semana"), (2) layout com forte branding e faixa tintada atras do titulo, (3) menus muito longos (50+ items) com secoes principais.

• Razao de contraste minima 4.5:1 para WCAG AA.
• Saturacao 15-25%, cores cheias cansam.
• Maximo dois blocos de cor diferentes por pagina.

FAQ

Linhas sao inuteis? Nao — em tabelas nutricionais ou de alergenos uma linha 1px ajuda. Evitar apenas entre categorias.

Quanto branco no mobile? 16-24px ideal. Acima de 32px a pagina estica, abaixo de 16px nao se nota.

Blocos prejudicam SEO? Nao — Lighthouse mede contraste e usabilidade, nao o fundo. CSS nao altera semantica HTML.

Achou útil? Compartilhe.