Sobre este template
TrueEarth é a referência de landing page para uma marca de educação ou comunidade, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. A paleta é #FFFFFF por baixo, #111417 para a tipografia e azul profundo #0B2A3A carregando os destaques, com tipografia Plus Jakarta Sans. A entrega é um único arquivo HTML autocontido, capturada em 1920x1422 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 72ms, cubic-bezier(.16,1.3,1) e um loop de vídeo ao fundo. Se você está briefando uma landing page de educação, parta desta composição e substitua o assunto.
Feito para
- Se o seu time de front-end parte de um único arquivo HTML autocontido, levante tipografia de 12px a 16px e seções de 100vh primeiro e deixe a paleta em paz até a grade se firmar.
- Times que constroem uma marca de educação ou comunidade landing page e precisam de um único arquivo HTML autocontido registrado antes de o orçamento sair.
- Times que reconstroem a landing page de educação de um concorrente e querem um único arquivo HTML autocontido nomeada antes de escolher um framework.
O que está incluído
- Uma barra sem excesso. A barra é a parte mais discreta da composição: marca, uma fileira curta de links e uma ação #0B2A3A, tudo no menor passo tipográfico do briefing. Os rótulos são curtos o bastante para caber em uma linha a 360px, e o item ativo é marcado por peso, não por uma pílula.
- Um clipe, não uma ilustração. Um único clipe mudo em loop preenche a moldura em 1920x1422 e 6,9s, com object-fit cover e o texto empilhado acima. O briefing mantém sobreposições fora do vídeo para nada acinzentar a imagem. Exporte em 1920x1422 ou mais largo e o recorte cover continua funcionando.
- Linhas numeradas fazem o trabalho. Os recursos são compostos como lista em Plus Jakarta Sans, não como grade de cards, o que mantém a página densa e rápida de varrer em tela estreita. Cada linha se mantém em uma só quando o texto permite.
- Links colapsam em uma largura. Uma ação por barra. A referência tem captura em 1920x1422.
Movimento e interação
Os controles são a camada interativa
Os estados são tratados por componente (estados de hover nos botões e links, não em todos os cards), não por uma camada global de animação. Um controle que parece interativo se comporta como tal, então não existem falsas pistas de interação.
Movimento ambiente sem biblioteca de scroll
O clipe de fundo roda 6,9s em 1920x1422 num loop sem fim, mudo e inline, então a página continua em movimento enquanto a atenção do leitor está no texto. Não é preciso biblioteca de scroll, porque o único movimento ambiente é a própria mídia. Um frame de poster entra no lugar quando a reprodução automática é bloqueada, então o movimento soma em vez de ser obrigatório.
Ler TrueEarth como especificação
Não dá para acertar uma composição no olho quando duas pessoas a estão reconstruindo. O briefing elimina a discussão: tipografia de 12px a 16px, seções de 100vh, uma grade de 2 colunas, cantos de 2px e passos de espaçamento de 22px, declaradas uma vez. Nada nesta landing page depende de um padrão.
O tempo por trás da landing page
O tempo é explícito: transições de 72ms, um loop de mídia de 6,9s e uma revelação de linha com máscara, tudo escrito no briefing em vez de ajustado no olho. Nada anima por si nesta landing page.
Como TrueEarth ordena a primeira leitura
Um layout guiado por recursos lista o que o produto faz; este encaminha o leitor para uma única decisão. A rota é visível em a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards e em como tipografia de 12px a 16px e seções de 100vh os espaçam. O leitor de educação recebe a oferta antes das opções.
Perguntas frequentes
O que eu recebo ao copiar o briefing de TrueEarth?
O briefing capturado tem 23.498 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Quanto de TrueEarth depende de um único arquivo HTML autocontido?
TrueEarth foi construído em um único arquivo HTML autocontido, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
O que posso fazer com o briefing de TrueEarth depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 23.498 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
