Über diese Vorlage
Travel Journal liefert für eine Reise- oder Tourismusmarke einen fertigen ersten Screen und die Zahlen, die ihn hervorgebracht haben. Das Farbschema ist tiefes blau #1A1A1E darunter und gedämpftes petrol #77A0B0 für die Akzente, und die Seite ist in Inter gesetzt. Geliefert wird React und Tailwind CSS, erfasst bei 1470x1080, damit der Rahmen feststeht, bevor die erste Zeile Code entsteht. Die Seite begrenzt die Bewegung auf Übergänge von 150ms und eine Videospur in Schleife. Starte beim erfassten Briefing und bearbeite dann den Eintrag Blog-Bereich, statt von Grund auf neu zu bauen.
Gemacht für
- Agenturen, die Blog-Bereich-Designs für eine Reise- oder Tourismusmarke anbieten und Radius 52px und Abstände in 10px-Schritten schon im Angebot nennen wollen, damit die Kalkulation nach dem Kickoff noch trägt.
- Gemacht für Product Manager, die ein Blog-Bereich-Design auf einen Sprint und ohne neue Assets begrenzen müssen.
- Studio-Leads, die mehrere Projekte parallel fahren, nehmen dieses Blog-Bereich-Design als Muster, das jede weitere Seite kopiert.
Was enthalten ist
- Eine Leiste ohne Beiwerk. Die Leiste ist der leiseste Teil der Komposition: Wortmarke, eine kurze Linkreihe und eine Aktion in #77A0B0, alles auf der kleinsten Schriftstufe des Briefings. Die Links sind kleiner gesetzt als die Wortmarke, und die Aktion in #77A0B0 ist das einzige Element in der Leiste mit Gewicht.
- Gemessen statt geschätzt. Das Briefing legt Radius 52px, Abstände in 10px-Schritten und 150ms Übergänge fest und überlässt den Rest der Anordnung, das Gegenteil einer Skala, die von selbst wächst. Die Abstände stehen in denselben Einheiten wie die Schrift, dadurch lassen sich beide direkt vergleichen. Miss nach, bevor du anpasst.
- Ein Medien-Element trägt die Stimmung. Ein Clip von 6,4s bei 1470x1080 macht die atmosphärische Arbeit; das Briefing legt den Zuschnitt fest und lässt die Schrift darüber unangetastet. Die Schleife ist kurz genug (6,4s), dass das Auge sie als Textur liest und nicht als Zeitachse.
- Schriftgewichte je Rolle benannt. Inter erledigt die Arbeit, die Größen fallen von der Headline zum Begleittext deutlich ab, und die Laufweite wird enger, je größer die Schrift wird, damit die Hierarchie über Schrift trägt und nicht über Farbe. Die Gewichte sind pro Rolle festgelegt, damit die Hierarchie beim Bauen nicht vom Schätzen abhängt. Eine Familie mit klaren Rollen schlägt zwei, die konkurrieren.
Bewegung & Interaktion
Eine Dauer für die Bedienelemente
Die Bewegung der Bedienelemente ist kurz und wiederholbar: 150ms bei jedem Zustandswechsel. Nichts wartet auf eine Scroll-Position, deshalb reagiert die Seite, sobald du sie berührst.
Eine Schleife, keine Timeline
Die Hintergrundbewegung kommt aus der 6,4s-Schleife in 1470x1080 und nicht aus Scroll-Effekten, deshalb bleibt die Seite ruhig und die Schrift lesbar. Ein Posterbild springt ein, wenn Autoplay blockiert wird, die Bewegung ist also ein Zusatz und keine Voraussetzung. Dreh oder exportiere in 1470x1080 oder breiter.
Was du in Travel Journal zuerst änderst
Die meisten fangen mit der Akzentfarbe an. Fang stattdessen beim Versprechen an: Schreib die Display-Zeile um und prüf dann gedämpftes petrol #77A0B0 gegen deine eigenen Medien. Dein Akzent muss denselben Kontrasttest bestehen wie der der Referenz.
Was sich in Travel Journal bewegt
Jeder Übergang hier hat eine Zahl. Deshalb lassen sich Übergänge von 150ms und eine Medienschleife von 6,4s Wert für Wert portieren, statt nach Gefühl neu abzustimmen. Nichts in diesem Eintrag Blog-Bereich animiert um seiner selbst willen.
Die Zahlen hinter dem Eintrag Blog-Bereich
Der Preis für Wiederholbarkeit sind feste Zahlen: Radius 52px, Abstände in 10px-Schritten und 150ms Übergänge. Genau darum geht es bei dieser Referenz: dieselbe Seite in einer anderen Marke, ohne einen neuen Satz Vermutungen. Nichts in diesem Eintrag Blog-Bereich hängt an einer Voreinstellung.
Häufige Fragen
Wie ist dieser Eintrag zu Travel Journal aufgebaut?
Alles, was auf der Seite zitiert wird, stammt aus dem erfassten Briefing mit 5.151 Zeichen und nicht aus einer nachträglich verfassten Beschreibung. Deshalb passen die Zahlen und der Text zusammen.
Was bekomme ich, wenn ich das Briefing zu Travel Journal kopiere?
Das Briefing beschreibt den Bau, nicht die Stimmung: Es nennt die Komposition bei 1470x1080, die Abstände und die Bewegungswerte. Das gerenderte Bild dient darin an keiner Stelle als verbindliche Grundlage.
Wie viel von Travel Journal hängt von React und Tailwind CSS ab?
Travel Journal wurde in React und Tailwind CSS gebaut, und der Eintrag nennt das, um die Herkunft zu belegen. Das Briefing beschreibt Positionen, Größen und Zeitwerte, also lässt sich die Seite in jedem Framework nachbauen, das Schrift setzen und Elemente platzieren kann.
