Sobre este template
Antes de reconstruir uma landing page para uma agência ou estúdio, leia Innovation: a composição e a especificação por trás dela estão as duas aqui. A cor se limita a azul profundo #020D14 por baixo, composta em Instrument Serif. A entrega é React e Tailwind CSS, capturada em 447x800 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 500ms. Se você está briefando uma landing page de agência, parta desta composição e substitua o assunto.
Feito para
- Quem briefa um modelo para uma landing page vai usar o prompt de 8.996 caracteres como ponto de partida.
- Feito para quem cuida do conteúdo e reescreve uma landing page cujo título precisa continuar tão longo quanto o da Innovation.
- Fundadores que estão lançando uma primeira versão e preferem adaptar uma composição em Instrument Serif a montar um template.
O que está incluído
- Linha de cima: marca, links, uma ação. A barra é uma linha de texto e uma ação, medida em passos de espaçamento de 20px e transições de 500ms, para ler como faixa e não como bloco. A ação carrega o destaque enquanto os links ficam na cor do texto, então a hierarquia da barra acompanha a da página abaixo.
- O tamanho de display fala. Os passos de tamanho e o tracking do briefing são o que dá o tom: Instrument Serif em um tamanho de display apertado, depois uma queda clara para o texto de apoio. Os pesos são especificados por papel, então a hierarquia não depende de chute na hora de construir.
- Painéis com o mesmo peso. Onde caberia um texto corrido, esta página coloca um conjunto de painéis, e é isso que mantém a landing page fácil de varrer. Todo painel usa o mesmo arranjo interno, então a grade pode ser varrida pela forma.
- Um campo, uma ação. Há uma única decisão aqui: preencher o formulário ou sair. Todo o resto da tela sustenta essa decisão. Os estados de erro e de foco são especificados, não deixados para o navegador.
Movimento e interação
O tempo definido no briefing
O movimento nos controles é curto e repetível: 500ms a cada mudança de estado. Toda mudança de estado nomeia um valor, então o padrão do navegador nunca é usado. Leve as durações para o seu build.
Uma superfície interativa pequena
Cada elemento interativo faz uma coisa (estados de hover nos botões e links, não em todos os cards), e é isso que mantém os estados previsíveis. Nada na página abre um modal ou sequestra o scroll; as interações ficam locais ao elemento. Se um estado não confirma uma ação, corte.
A ordem por trás da landing page
Enquanto uma página de marketing empilha prova abaixo da dobra e torce, esta landing page coloca a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards na frente do leitor e segura o resto. O leitor de agência recebe a oferta antes das opções.
O argumento que esta landing page faz
Dá para reconstruir isso como uma pilha de cards separados e perder só o argumento. A landing page lê como uma decisão única: a navegação, o título, o selo de anúncio, a linha de estatísticas e a grade de cards em uma sequência só. Dá ao leitor de agência a rota honesta mais curta até a oferta.
O tempo por trás da landing page
A contrapartida é que nada aqui recompensa uma segunda olhada pela animação. O que ela recompensa é a ordem de leitura, com transições de 500ms e estados de hover e de clique confirmando estado em vez de decorá-lo. Nada anima por si nesta landing page.
Perguntas frequentes
O que eu recebo ao copiar o briefing de Innovation?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 447x800, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Por que a entrada cita React e Tailwind CSS?
Innovation foi construído em React e Tailwind CSS, 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.
Como devo tratar a mídia de Innovation em um projeto de cliente?
O briefing é uma descrição, não uma licença para redistribuir os ativos de outra pessoa. Mantenha a estrutura e os números, substitua a mídia e as marcas, e credite a origem se um cliente perguntar de onde veio o layout. A referência tem captura em 447x800.
