Sobre este template
Antes de reconstruir uma landing page para uma marca de lifestyle, leia Vinyl: a composição e a especificação por trás dela estão as duas aqui. O esquema de cores é azul-céu #DBE6EE por baixo e #0B0B0C para a tipografia, e a página é composta em Instrument Serif. A entrada nomeia a stack que produziu a página (um único arquivo HTML autocontido) em vez de escondê-la. O movimento fica restrito a transições de 1.2s, cubic-bezier(.22,1.36,1) e um loop de vídeo ao fundo. Trate como o briefing de uma landing page para uma marca de lifestyle que precisa aguentar uma reconstrução, não só uma primeira olhada.
Feito para
- Feito para estúdios que precisam explicar o comportamento em 380px a um cliente sem antes construir um protótipo.
- Engenheiros que precisam que a landing page sobreviva a uma conexão lenta vão usar 1920x1420 e a escala tipográfica como orçamento de peso.
- A página serve desenvolvedores front-end que reconstroem uma marca de lifestyle landing page em um único arquivo HTML autocontido e procuram os números por trás da aparência.
O que está incluído
- Uma barra de navegação que sai do caminho. Uma barra fina ocupa o topo de landing page, com a marca à esquerda e os links em Instrument Serif, para a composição ler conteúdo primeiro e moldura depois. Abaixo de 380px os links colapsam em uma sobreposição de tela cheia. Os rótulos são curtos o bastante para caber em uma linha a 380px, e o item ativo é marcado por peso, não por uma pílula.
- Um clipe faz todo o trabalho. O fundo é um único loop de 6,6s em 1920x1420, recortado para cover e sem tingimento. Todo o resto flutua acima, em uma camada superior. Um frame de poster em 1920x1420 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- Fluido onde precisa ser. O briefing usa um clamp entre 24px e 22px no título, e é isso que impede uma linha longa de quebrar em um ponto ruim. A tipografia muda de tamanho, não de papel, conforme a viewport estreita. Mantenha a hierarquia; mude a escala.
- A navegação é fina de propósito. Mantenha a linha de cima em uma só. A referência tem captura em 1920x1420.
Movimento e interação
Uma duração para os controles
As mudanças de estado estão especificadas em 1.2s, então o feedback dos controles é um valor projetado, não o padrão do navegador. A curva de aceleração é especificada junto com a duração (1.2s), então uma reconstrução não pode trocar a sensação sem aviso. Não entregue o padrão do navegador.
O loop faz o trabalho ambiente
O clipe de fundo roda 6,6s em 1920x1420 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. Nada mais na página anima continuamente, então a mídia é a única coisa pedindo atenção.
Os números por trás da landing page
Compare com um template que trata o espaçamento como preferência. Aqui os mesmos valores são nomeados (seções de 100vh, passos de espaçamento de 22px, transições de 1.2s e curva de aceleração cubic-bezier(.22,1.36,1)), 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 se move em Vinyl
O movimento se limita a transições de 1.2s, um loop de mídia de 6,6s e uma revelação de linha com máscara; ele roda uma vez na entrada e depois sai da frente, que é o orçamento certo para landing page continuar legível. Nada anima por si nesta landing page.
O que mudar primeiro em Vinyl
A composição é a parte reaproveitável e o assunto é seu. Mantenha seções de 100vh e passos de espaçamento de 22px e substitua as palavras, a mídia e as marcas. Mantenha a moldura e a escala; o assunto é a parte que deve mudar.
Perguntas frequentes
O prompt de Vinyl é uma especificação pronta ou um ponto de partida?
O briefing capturado tem 18.878 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.
Por que a entrada cita um único arquivo HTML autocontido?
Vinyl 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.
Por que o prompt do Vinyl não é exibido aqui?
Tudo o que é citado nesta página vem do briefing capturado de 18.878 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
