Sobre este template
Travel Journal é a referência de seção de blog para uma marca de viagens, e o briefing por trás dela é uma especificação de construção completa, não um moodboard. A cor se limita a azul profundo #1A1A1E por baixo e verde-água suave #77A0B0 carregando os destaques, composta em Inter. A entrega é React e Tailwind CSS, capturada em 1470x1080 para a moldura estar fixada antes de qualquer linha de código. O orçamento de movimento é transições de 150ms e um loop de vídeo ao fundo. Use quando a seção de blog precisar de uma ordem decidida antes de qualquer seção nova ser acrescentada.
Feito para
- Designers que precisam dos números antes de tudo: cantos de 52px e passos de espaçamento de 10px, tudo citado do briefing.
- Feito para product managers que precisam da seção de blog limitada a uma sprint e sem novos assets.
- Líderes de estúdio que tocam vários projetos ao mesmo tempo vão usar esta seção de blog como o padrão que todas as outras páginas copiam.
O que está incluído
- Links colapsam em uma largura. A fileira gasta o contraste em um lugar só: a ação #77A0B0, com a marca e os links recuados na cor do texto. Os links são compostos abaixo da marca em tamanho, e a ação #77A0B0 é o único elemento da barra com peso.
- Os tamanhos estão no briefing, não em uma escala. Nada no layout fica por sensação: o briefing cita cantos de 52px, passos de espaçamento de 10px e transições de 150ms e a construção precisa atingir esses valores. Cada valor corresponde a uma função: um passo de tipo, um espaço, um raio ou uma transição. Porte os valores junto com o layout.
- O frame de poster importa. Um clipe de 6,4s em 1470x1080 faz o trabalho de atmosfera; o briefing fixa o recorte e deixa a tipografia intacta por cima. O loop é curto o bastante (6,4s) para o olho ler como textura e não como linha do tempo.
- A tipografia faz o estilo. Com Inter fazendo o trabalho, os tamanhos caem com força do título para o texto de apoio e o letter-spacing aperta conforme o tamanho cresce, então a hierarquia é carregada pela tipografia e não pela cor. O passo de legenda é pequeno o bastante para ficar sob um número sem mudar o ritmo da página.
Movimento e interação
O tempo definido no briefing
Os controles resolvem em 150ms, rápido o bastante para a página responder ao toque, e não depois dele. A mesma duração se repete nos controles, o que mantém as interações com cara de um sistema só.
Movimento ambiente sem biblioteca de scroll
O movimento ambiente é um clipe de 6,4s em 1470x1080, rodando em loop discreto atrás do texto em vez de reagir ao ponteiro. O clipe é curto o bastante para fazer loop sem emenda visível, o que importa mais que a resolução. Grave ou exporte em 1470x1080 ou mais largo.
A seção de blog com a sua cara
Mude o conteúdo primeiro e confira a moldura depois. cantos de 52px, passos de espaçamento de 10px e transições de 150ms são os valores a proteger enquanto você troca o texto. A moldura e a escala são o que deixar em paz.
O tempo por trás da seção de blog
O movimento aqui é um conjunto de decisões, não uma biblioteca: transições de 150ms e um loop de mídia de 6,4s, e nada anima no scroll. O resultado é uma página que parece autoral: durações curtas, uma entrada e mudanças de estado que confirmam uma ação em vez de decorá-la. Nada anima por si nesta seção de blog.
Os números por trás da seção de blog
Quase toda decisão aqui é um valor que dá para conferir: cantos de 52px, passos de espaçamento de 10px e transições de 150ms. A mídia é um loop de 6,4s em 1470x1080. A tipografia segue em Inter, então qualquer substituição precisa manter as mesmas proporções. Nada nesta seção de blog depende de um padrão.
Perguntas frequentes
O que posso fazer com o briefing de Travel Journal depois de tê-lo em mãos?
Tudo o que é citado nesta página vem do briefing capturado de 5.151 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 Travel Journal?
É um briefing de construção, não uma descrição de clima: ele nomeia a composição em 1470x1080, o espaçamento e os valores de movimento. Nada nele trata a imagem renderizada como fonte da verdade.
Quanto de Travel Journal depende de React e Tailwind CSS?
Travel Journal 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.
