Sobre este template
Leia Playful Idea como especificação de rodapé: os valores foram escritos antes de a página ser construída. O esquema de cores é #F0EEFA por baixo e quase preto #080909 para a tipografia, e a página é composta em Epilogue. A entrega é um único arquivo HTML autocontido, capturada em 1564x1080 para a moldura estar fixada antes de qualquer linha de código. O briefing gasta o orçamento de movimento em transições de 2.54167s e um loop de vídeo ao fundo. Se você está briefando uma rodapé de agência, parta desta composição e substitua o assunto.
Feito para
- Esta rodapé serve designers que precisam entregar uma construção em um único arquivo HTML autocontido a um engenheiro e querem o movimento escrito.
- Tome a estrutura da rodapé inteira e substitua o texto linha por linha contra um breakpoint de 700px.
- Escreva o seu próprio título e depois reconstrua esta rodapé em um único arquivo HTML autocontido com as medidas intactas.
O que está incluído
- Uma barra sem excesso. A barra fica sobre a rodapé em vez de empurrá-la para baixo, então a composição mantém a altura inteira da primeira tela. Os rótulos são curtos o bastante para caber em uma linha a 700px, e o item ativo é marcado por peso, não por uma pílula.
- Mídia atrás da tipografia. A composição é construída sobre o clipe em 1564x1080, não ao lado dele, então a mídia nunca ganha painel nem borda. Um frame de poster em 1564x1080 segura a composição quando a reprodução automática não está disponível, então o layout nunca colapsa.
- A pílula de anúncio. Um selo, uma mensagem: a pílula fica acima do título em Epilogue no menor passo da escala, e nada mais disputa esse lugar. A pílula ocupa o menor passo do briefing, então lê como etiqueta e não como um segundo título.
- O comportamento é definido por largura. A tipografia é dimensionada com um clamp entre 14px e 17px em vez de passos fixos, então a linha de display mantém a proporção entre breakpoints em vez de dar saltos. Os controles continuam grandes o bastante para o toque e o texto mantém a ordem de leitura em qualquer largura.
Movimento e interação
Uma cena ao vivo na primeira tela
A peça central é renderizada ao vivo (um canvas WebGL) em vez de entregue como imagem, então a composição em 1564x1080 reage à viewport em vez de ficar atrás dela. Como a cena é ao vivo, o layout pode ser redimensionado sem um segundo conjunto de arquivos.
Há áudio, mas é opcional
O briefing inclui áudio para a composição em 1564x1080, mudo até o leitor pedir, então a página nunca começa a falar sozinha. A primeira impressão não depende de o leitor tirar nada do mudo.
Os números por trás da rodapé
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 14px a 17px, seções de 100vh, uma grade de 2 colunas, cantos de 100px e passos de espaçamento de 30px, declaradas uma vez. Nada nesta rodapé depende de um padrão.
A rodapé com a sua cara
Suponha que você só tenha uma tarde. Mude o título e o rótulo da ação, deixe tipografia de 14px a 17px e seções de 100vh em paz, e você tem uma página que parece intencional. A composição é a parte reaproveitável, e ela sobrevive a uma marca diferente.
Como Playful Idea ordena a primeira leitura
Uma página assim costuma enterrar a ação sob uma grade de recursos. Esta coloca a navegação, o título, o selo de anúncio, a linha de estatísticas e o clipe de fundo em sequência fixa, com a ação dentro da primeira tela em vez de depois de três rolagens. O leitor de agência recebe a oferta antes das opções.
Perguntas frequentes
Quanto de Playful Idea depende de um único arquivo HTML autocontido?
Playful Idea 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 Playful Idea depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 30.665 caracteres, e não de uma descrição escrita depois. É por isso que os números e o texto concordam.
O que eu recebo ao copiar o briefing de Playful Idea?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1564x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
