Meridian: lendo a minha landing de SaaS como se fosse de outra pessoa

Meridian é um estudo de caso de design e prototipação: uma landing escura para uma plataforma SaaS de demonstrações de produto, que desenhei pensando num negócio real e inspirada nele. Ela tem três larguras (Desktop 1440, Tablet 834 e Mobile 390), seis coleções de variáveis e quatorze componentes. Eu a fiz para mostrar que sei montar uma interface com estrutura, e este texto é a leitura crítica dela, escrita depois, com as medidas tiradas do próprio arquivo.

Ver no Figma ↗

Separei o que medi do que penso. Número, cor, tamanho e contagem saem do Figma. A opinião vem marcada como opinião.

O que tem no arquivo

São onze seções na ordem do hero ao rodapé: hero, faixa de logotipos, declaração, como funciona, depoimentos, resultados, entrada no ar, casos de uso, comparação, perguntas frequentes e convite final com rodapé. As alturas dos três quadros são 7507 px no Desktop, 8299 px no Tablet e 9141 px no Mobile.

Conferi no arquivo o que a descrição promete. Há 6 coleções de variáveis com 177 variáveis no total (Primitives 49, Tokens 59, Spacing 37, Radius 9, Layout 3, Typography 20), 31 estilos de texto e 14 componentes, onze deles com variantes (27 variantes ao todo). A página Landing tem 239 instâncias. Varri as páginas Landing e Components atrás de preenchimento sólido sem variável e de texto sem estilo: o resultado foi zero nos dois casos. Na página Cover, que fica fora dos três quadros, achei um preenchimento sólido solto.

Hierarquia

O título do hero é Inter Medium em 64 px, com entrelinha de 105%, em duas linhas (559 px de largura, 134 px de altura). Abaixo vêm o parágrafo em 15 px, de 736 px de largura, e os dois botões. A ordem de leitura é a esperada: selo, título, promessa, ação. O botão principal é branco cheio e o secundário é de vidro escuro, e a diferença de peso entre os dois é clara.

Nas seções seguintes a escala desce em degraus: o título de seção tem 30 px, o corpo vai de 13 a 15 px e o rótulo acima de cada título (o badge, como Results ou FAQ) tem 11 px. Funciona porque todo bloco repete o mesmo trio: badge, título, conteúdo.

O que eu questiono é a quantidade de tamanhos. O Desktop usa quinze: 9, 10, 11, 12, 13, 14, 15, 16, 17, 20, 26, 30, 32, 36 e 64. Dos 184 textos do quadro, 54 estão em 11 px ou menos (3 em 9, 11 em 10 e 40 em 11). Há também dois estilos de título quase iguais, o Heading/LG em 30 px (entrelinha de 115%) e o Heading/XL em 32 px (entrelinha de 125%), que no Tablet viram os dois 28 px. Opinião: dois estilos para uma diferença de dois pixels que ninguém enxerga, e uma escala de 9 a 17 com saltos de um pixel é mais catálogo do que sistema.

Outra opinião: o parágrafo do hero tem 15 px sob um título de 64. É uma razão de 4,3 para 1, grande demais, e o parágrafo parece esquecido.

Grid e ritmo

No Desktop o conteúdo mora numa coluna de 1080 px dentro do quadro de 1440, com 180 px de margem de cada lado. Os cartões de depoimento, de resultado e de caso de uso têm 349,33 px de largura com 16 px entre eles, e 3 × 349,33 + 2 × 16 fecha os 1080 exatos. No Tablet a coluna é de 754 px e os três cartões têm 240,67 px, com os mesmos 16 px. As contas fecham porque os vãos e as margens vêm dos tokens, e não de números soltos.

A margem lateral cai de 180 para 40 px no Tablet e para 20 px no Mobile, pela variável layout/section-padding-x, que tem um valor por modo. A altura do hero também: 1040, 900 e 760 px, por layout/hero-height.

Um problema de grid aparece quando se mede. Na seção Como funciona do Desktop, a coluna da esquerda tem 500 px de altura: a lista de quatro itens ocupa os primeiros 220 px e a legenda “Every session ends in a structured brief” começa só em y = 468. Ficam 248 px vazios no meio da coluna, entre a lista e a frase que deveria fechá-la.

Cor e contraste

A paleta é de grafite: fundo escuro #0e0e10, fundo claro #f7f7f6, texto principal #111111 sobre o claro e branco sobre o escuro. A hierarquia de texto não usa cores diferentes, usa transparências do mesmo branco ou do mesmo grafite, por meio de tokens como text/inverse/secondary (50%) e text/default/tertiary (30%). Calculei o contraste com a fórmula do WCAG 2.x, misturando a transparência com o fundo plano do token (escuro ou claro). Sobre superfícies de vidro ou sobre foto o valor muda, e esses casos não medi.

Sobre o fundo escuro, o branco dá 19,28:1, a transparência de 60% dá 7,29:1 e a de 50% (text/inverse/secondary) dá 5,31:1. A de 45% dá 4,50:1, no limite exato do AA, e é a cor dos textos de apoio dos cartões de resultado em 12 px. A de 40% (text/inverse/tertiary) dá 3,79:1 e reprova; é a cor da legenda de 12 px da seção Como funciona.

Sobre o fundo claro, o texto principal dá 17,62:1, mas a versão de 50% (text/default/secondary) dá 3,49:1, a de 35% dá 2,27:1 e a de 30% dá 1,98:1. O arquivo usa o de 50% em 5 textos de 11 a 13 px, o de 35% em 3 textos de 13 px e o de 30% em 3 textos de 11 px. Os vistos da tabela de comparação usam text/success (#2e9e6a) sobre o verde claro da coluna, a 3,02:1 na coluna do Meridian. Para um símbolo o critério é 3:1, então passa por pouco. Os traços da coluna dos “nãos” usam #9a9a9a sobre branco, a 2,81:1. O texto do hero fica sobre uma foto, e o contraste dele não medi: depende do pixel atrás de cada letra.

Componentes e variantes

Os quatorze componentes são Button, Badge, Status Pill, Check, Avatar, Nav, Sim Row, Step, Feature Item, FAQ Bubble, Outcome Card, Use Case Card, Testimonial Card e Table Row. Onze têm variantes (Button e Badge com 2 cada, Status Pill, Check e Outcome Card com 3, Sim Row com 4, e os demais com 2). Tudo que se repete na página é instância: as seis linhas da tabela, as cinco perguntas, os três cartões de cada seção.

Aqui fica a contradição mais concreta de conteúdo. A seção de comparação diz “Meridian is not a chat widget or a recorded tour”, e a tabela marca o Chat Widget com visto nas mesmas seis linhas em que marca o Meridian. A única coluna que perde é a de Product Tours, com seis traços. No Desktop são 12 instâncias do Check em State=Yes e 6 em State=No, e a variante Partial existe e não é usada. Opinião: a tabela prova a técnica do componente e desmente a tese do texto, porque quem lê vê duas colunas iguais.

Nos depoimentos, os três cartões têm alturas de 206, 186 e 186 px no Desktop, porque o primeiro tem uma linha a mais de texto, e no Tablet os três têm 226 px. Opinião: no primeiro cartão o nome da pessoa fica colado na última linha da citação, e os títulos em caixa alta em cada palavra (“Our Inbound Demos Used To Wait Four Days”) cansam em frases de três linhas.

Responsivo

O hero cai de 1040 px de altura no Desktop para 900 no Tablet e 760 no Mobile, e o título de 64 para 52 e 38 px, pela variável font/size/display. No Mobile a navegação perde os quatro links e o botão Book a Call e fica só com a marca e o Try Meridian. A faixa de logotipos quebra em duas linhas: 6 mais 1 no Tablet (o Vantage cai sozinho, centralizado, na segunda linha) e 3 mais 4 no Mobile.

O defeito grande está na seção de perguntas do Tablet. As perguntas são instâncias do FAQ Bubble, e no Tablet elas têm 57 px de largura (no Desktop vão de 183 a 362 px, no Mobile têm 294 px). A 57 px o texto quebra no meio das palavras, como “Ho / w / does / Mer / idia / n”, e cada pergunta vira uma coluna de 141 a 311 px de altura. A seção sobe a 1490 px, mais que o dobro dos 639 do Desktop e dos 683 do Mobile. Só a resposta ocupa a largura certa, 754 px. É um erro de auto layout que a mudança de modo não corrige: o breakpoint existe, o componente não o acompanhou.

O que funcionou

• O trio repetido. Badge, título e conteúdo em toda seção dá ao leitor um padrão para reconhecer, e custa pouco: três estilos de texto.
• Tokens com modos. Layout e Typography têm um valor por breakpoint, então trocar de Desktop para Mobile é trocar o modo, não editar quadro a quadro.
• Zero valor solto nas páginas principais. Nenhuma cor e nenhum texto fora de variável ou de estilo na Landing e na Components, nas três larguras.
• A coluna de 1080. Depoimentos, resultados e casos de uso dividem o mesmo contêiner e as contas fecham, com um vão único de 16 px.
• O hero. Uma foto escura, um título, uma promessa e uma ação, com um botão cheio e outro de vidro. A hierarquia é limpa.

Créditos das imagens

Fotos: bancos de imagem gratuitos; créditos individuais em levantamento. Marca, textos, depoimentos e logotipos foram criados para este estudo. Tipografia: Inter (Regular, Medium e Semi Bold).