Sobre este template
Vertex é uma landing page de e-commerce construída a partir de um único briefing escrito, e esta página documenta esse briefing. O título diz “Streamline the shop”, e o resto da landing page se organiza em volta disso. A cor se limita a azul profundo #020204 por baixo, composta em Poppins. A referência é construída com um único arquivo HTML autocontido, e as decisões de layout estão declaradas independentemente dela. O movimento fica restrito a transições de 620ms, cubic-bezier(.4,0.2,1) e um loop de vídeo ao fundo. Se você está briefando uma landing page de e-commerce, parta desta composição e substitua o assunto.
Feito para
- Cite curva de aceleração cubic-bezier(.4,0.2,1) na nota de entrega, para a próxima construção não ter de deduzi-lo da página.
- Fundadores que briefam uma agência vão usar a moldura em 1920x1414 como teste de aceite da primeira rodada.
- Times terceirizados que assumem esta landing page e precisam de um breakpoint de 158px fixado no repositório antes do primeiro commit.
O que está incluído
- Uma barra sem excesso. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Poppins, para a composição ler conteúdo primeiro e moldura depois. Abaixo de 158px os links colapsam em uma sobreposição de tela cheia. Os rótulos são curtos o bastante para caber em uma linha a 158px, e o item ativo é marcado por peso, não por uma pílula.
- Mídia atrás da tipografia. Um clipe de 6,9s em 1920x1414 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. Um frame de poster em 1920x1414 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- A barra segue a grade. Se a sua página tiver mais seções, agrupe em vez de alargar a barra. A referência tem captura em 1920x1414.
- Passos de espaçamento citados. O layout trabalha com valores absolutos, não com proporções: tipografia de 12px a 54px, uma grade de 4 colunas, cantos de 12px e passos de espaçamento de 16px. O menor e o maior valor dessa lista definem a faixa em que a composição trabalha.
Movimento e interação
Uma cena ao vivo na primeira tela
Um canvas ao vivo faz o trabalho visual: um canvas WebGL. A renderização é o último elemento a ficar pronto, então a página precisa funcionar no estado anterior a ela carregar. Mantenha a interface plana em volta.
Durações vindas do briefing
As mudanças de estado estão especificadas em 620ms, então o feedback dos controles é um valor projetado, não o padrão do navegador. Toda mudança de estado nomeia um valor, então o padrão do navegador nunca é usado.
O que uma marca de e-commerce ganha aqui
Conte as decisões desta landing page e todas voltam a um único documento: 51.432 caracteres que nomeiam a moldura em 1920x1414, a tipografia e o ritmo. Vertex enuncia a oferta uma vez e deixa a composição repeti-la, em vez de acrescentar uma segunda promessa.
Ler Vertex como especificação
Compare com um template que trata o espaçamento como preferência. Aqui os mesmos valores são nomeados (tipografia de 12px a 54px, uma grade de 4 colunas, cantos de 12px e passos de espaçamento de 16px), então uma edição ou os mantém, ou quebra a composição de forma visível. Nada nesta landing page depende de um padrão.
O que mudar primeiro em Vertex
Mude o conteúdo primeiro e confira a moldura depois. tipografia de 12px a 54px, uma grade de 4 colunas, cantos de 12px e passos de espaçamento de 16px são os valores a proteger enquanto você troca o texto. O assunto é a parte que deve mudar.
Perguntas frequentes
O que o briefing por trás de Vertex contém de fato?
O briefing capturado tem 51.432 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.
Preciso de um único arquivo HTML autocontido para reconstruir Vertex?
Vertex 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.
Como esta entrada de Vertex está organizada?
Tudo o que é citado nesta página vem do briefing capturado de 51.432 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
