Futuristisches Webdesign

Was macht Futuristisches Webdesign?

Eine Arbeitsmethode für Single-Page-Marketing-Websites, die sich wie inszeniert anfühlen, nicht wie generiert: ein klares Briefing, ein Designsystem, einzeln erstellte und geprüfte Abschnitte, visuelle Elemente, die wie aus einem Guss wirken, und ein kleines, bewusst gewähltes Budget für kinematografische Bewegungen.

Warum Websites generisch wirken

Jedes Detail, das eine Anfrage offen lässt, wird mit der statistisch wahrscheinlichsten Wahl gefüllt. Eine einzeilige Anfrage liefert daher die durchschnittliche Website: zentrierte Überschrift, weicher Farbverlauf, eine Reihe identischer abgerundeter Karten. Der Großteil der eigentlichen Arbeit findet vor dem Code statt. Kläre die offenen Fragen (Zielgruppe, die gewünschte Aktion, das Gefühl, Schriftarten, Farbpalette), dann baue in ausreichend kleinen Schritten auf, um sie mit dem Auge prüfen zu können.

Halte die Rollen klar. Der Benutzer bestimmt, was gebaut wird. Du bestimmst, wie. Und keine Arbeit ist abgeschlossen, bevor sie jemand in einem Browser bei Smartphone-Breite betrachtet hat.

Wo anfangen

Situation	Vorgehen
Neue Website, leerer oder fast leerer Ordner	Phase 1, dann direkt weiter
Bestehende Website, ein Abschnitt soll hinzugefügt oder neu erstellt werden	Lies die Projektregeln, dann die Abschnitts-Routine in Phase 5
"Mach es kinoreif / 3D / scroll-gesteuert"	Phase 7 und references/cinematic-moves.md
Bilder, Hero-Video oder Prompts dafür	references/assets.md
Die Website sieht generisch oder KI-gemacht aus	Prüfe sie auf "Anzeichen einer generischen Website" in references/design-system.md, dann Phase 3
Smartphone-Fixes, Feinschliff, Formular, Deployment, Domain, SEO	references/ship.md

Öffne eine Referenzdatei erst, wenn du ihre Phase erreichst, nicht früher. Jede Datei ist in sich abgeschlossen.

Die Phasen

1. Briefing

Ein einzelner Absatz, geschrieben vor dem Code, der drei Punkte abdeckt: die Zielgruppe, die eine Sache, die ein Besucher tun soll, und das beabsichtigte Gefühl (drei Adjektive und ein Vergleich, z. B. „ruhig, präzise, großzügig, wie ein gut geführtes Studio an einem Wochentagmorgen").

Wenn der Benutzer dies nicht geliefert hat, fordere es in einer einzigen Nachricht an. Wenn er gesagt hat, mach einfach weiter, skizziere das Briefing selbst, formuliere es als Annahme in einer Zeile und fahre fort. Spätere Entscheidungen (der dominante Button, welche Abschnitte es gibt, welche Bewegung ihr Gewicht rechtfertigt) werden alle durch das erneute Lesen dieses Absatzes getroffen. Das ist der Grund, warum er nicht übersprungen werden kann.

2. Plan

Schreibe die Abschnittsliste von oben nach unten. Jeder Eintrag gibt den Zweck des Abschnitts in einem Satz an und nennt das Asset, auf das er angewiesen ist. Warte mit dem Bauen. Bevor irgendetwas existiert, ist eine Richtungsänderung kostenlos. Lege daher bei Arbeiten, die sich über mehrere Dateien erstrecken, den Plan vor und warte auf Zustimmung. Verwende den Plan-Modus, wenn der Agent einen hat.

Eine typische Abfolge: Navigation, Hero, Vertrauensleiste, das Angebot, Geschichte oder Prozess, Kundenstimmen, ggf. Preise, häufige Fragen, abschließender Aufruf zum Handeln, Footer. Entferne Abschnitte, deren Zweck du nicht angeben kannst. Erfinde für ein echtes Unternehmen niemals Kunden, Bewertungen oder Statistiken; lasse den Abschnitt weg oder fordere das echte Material an.

3. Designsystem

Lege das Aussehen einmal für die gesamte Site fest und dokumentiere es. Präsentiere drei Kandidatenrichtungen auf einer einfachen Vorschauseite, damit die Wahl mit dem Auge getroffen werden kann. Jede kombiniert eine Überschriftenschriftart mit einer Leseschriftart, weist fünf Hex-Farben Rollen zu (Seite, Text, Primär, Akzent, Dezent) und fasst ihre Stimmung in einem Satz zusammen. Kodiere den Gewinner in die Projekt-Theme-Tokens, lösche dann die Vorschauseite. Erkundungsseiten sind Gerüste: Wenn sie im Projekt bleiben, werden sie mit der Site ausgeliefert.

references/design-system.md enthält die Details, das Vokabular und eine Vorlage.

4. Projektregeln

Setze die permanenten Regeln in die Regeldatenbank, die der aktuelle Agent beim Start lädt (CLAUDE.md, AGENTS.md, GEMINI.md). Verwende eine vorhandene Datei wieder; erstelle andernfalls die richtige für diesen Agenten. Da sie jede Sitzung geladen wird, halte sie kurz: was die Site ist, der Stack, das Designsystem, ein paar Grundregeln.

Vernünftige Standardeinstellungen, wenn das Projekt noch keine Meinung hat:

• Stack: Next.js und Tailwind CSS. Für interaktive Widgets (Akkordeon, Dialog, Menü, Eingaben) installiere eine zugängliche Komponentenbibliothek wie shadcn/ui; baue sie nicht von Hand.
• Jede Komponente in einer eigenen Datei unter components/.
• Erst Smartphone. 390px ist die Breite, bei der nichts brechen darf.
• Nur echte Texte. Kein Lorem Ipsum, kein "Funktion eins".
• Hole die Zustimmung ein, bevor du ein Paket hinzufügst, und erkläre seinen Zweck.
• Reduzierte Bewegung bedeutet alle Bewegung: sanftes Scrollen, Hover- und Icon-Übergänge inklusive, nicht nur die Effekte der Kür.

Permanente Regeln gehören in diese Datei. Die aktuelle Aufgabe nicht.

5. Abschnitt für Abschnitt bauen

Eine ganze Seite auf einmal anzufordern, liefert eine Seite mittelmäßiger Abschnitte ohne klaren Ansatzpunkt für Reparaturen. Baue einen Abschnitt, überprüfe ihn, fahre fort. Sobald das Muster etabliert ist, können die schlichteren Schlussabschnitte (Zitate, Fragen, abschließender Aufruf zum Handeln, Footer) gebündelt werden. Alles Visuell wichtige wird allein gebaut.

Die Abschnitts-Routine für jeden hinzugefügten oder neu erstellten Abschnitt:

1. Lies zuerst die Designregeln und -Tokens.
2. Bestätige den Inhalt. Wenn Fakten wichtig sind (Preise, Behauptungen, Zitate), frage. Ansonsten schreibe echte Texte und markiere die Zeilen, die du erfunden hast.
3. Gib dem Abschnitt eine eigene Komponentendatei.
4. Rendere in drei Breiten: Smartphone (390px), Tablet (768px), Laptop (1440px). Repariere Überläufe, hässliche Umbrüche und schlechte Beschnitte.
5. Vergleiche die Abstände oben und unten mit denen benachbarter Abschnitte.
6. Schließe mit einem kurzen Bericht: der Abschnitt, sein Dateipfad und was die Augen des Benutzers benötigt.

Verwende die meiste Mühe auf den Hero, da er entscheidet, ob Besucher überhaupt scrollen. Gib jedes wichtige Detail an:

• Eine Überschrift von maximal etwa acht Wörtern, die angibt, was angeboten wird, ein einzelner unterstützender Satz und eine Navigation mit dem Markenzeichen, ein paar Links und einem einzigen Button.
• Ein klarer Haupt-Button: gefüllt, in Akzentfarbe, mit der Aktion aus dem Briefing verbunden. Die sekundäre Aktion wird ein dezenter Textlink. Zwei gleichwertige Buttons signalisieren, dass keine Entscheidung getroffen wurde.
• Text so positioniert, dass er nicht mit dem Brennpunkt des visuellen Elements kollidiert, getrennt für Desktop und Smartphone entschieden.
• Bei Text über Video oder Fotografie löse die Lesbarkeit lokal mit einem Farbverlaufsschleier unter dem Text. Dimme nicht das gesamte visuelle Element.
• Beurteile den ersten Bildschirm anhand eines Screenshots bei Smartphone- und Desktop-Breite. Ein großer leerer Streifen, ein einsames Element, das wie Clipart wirkt, oder ein zu dunkles visuelles Element bedeuten, dass der Hero noch nicht fertig ist, selbst wenn das echte Asset noch ein Platzhalter ist: Der Platzhalter muss die Komposition bis dahin tragen.

Jeder Button führt irgendwohin. Jeder Aufruf zum Handeln braucht ein echtes Ziel: einen Shop- oder Checkout-Link, eine Buchungsseite, ein Formular, eine E-Mail-Adresse. Wenn das Ziel unbekannt ist, verwende das nächstgelegene ehrliche Ziel (den Produktabschnitt, einen mailto-Link) und liste jede nicht verdrahtete Schaltfläche in deinem Bericht auf. Ein Button, der lautlos zur selben Seite scrollt, sieht fertig aus und ist es nicht.

Wenn die Seite zusammengestellt ist, scrolle sie von Anfang bis Ende durch, identifiziere den schwächsten Abschnitt (einen gibt es immer) und schlage zwei Alternativen auf Vorschaurouten dafür vor. Sobald eine ausgewählt ist, lösche die anderen Varianten und ihre Routen.

6. Visuelle Elemente

Ein starkes Layout kann schwache Bilder nicht retten. Beginne mit einer kurzen Shot-Liste von etwa sieben Assets und halte eine einzige Stilrichtung (Licht, Linse, Palette) durchgängig bei ihnen ein. Prompt-Formeln, Anleitung für Hero-Videos und Vorbereitung für das Web findest du in references/assets.md.

Ohne verbundenen Bild- oder Videogenerator gib dem Benutzer die Prompts und fahre mit klar gekennzeichneten Platzhaltern fort. Gib niemals Generierungsguthaben ohne Zustimmung aus.

7. Kinematografische Effekte

Fünf Techniken stehen zur Auswahl: ein langsames Hintergrundvideo im Hero, bewegungsabhängiges Scrollen, ein Abschnitt, der fixiert wird, während sich sein Inhalt ändert, Parallax-Tiefe und ein live gerendertes 3D-Objekt. Gehe sparsam damit um: das Hero-Video und nicht mehr als zwei der restlichen, jeweils dort platziert, wo sie etwas klären oder ein bestimmtes Gefühl erzeugen. Die gleichzeitige Verwendung aller Techniken wirkt wie ein Showreel, ermüdet den Besucher und verwässert jeden Effekt.

Jede Technik benötigt elegante Fallbacks: ein normales Layout bei reduzierter Bewegung, ein statisches Bild auf kleinen Smartphones und eine Seite, die das Versagen des Effekts überlebt. Messe anschließend die Kosten. Rezepte und Leitplanken findest du in references/cinematic-moves.md; lies sie, bevor du Scroll- oder 3D-Code schreibst.

8. Smartphone, Feinschliff, Formular, Launch

Smartphones machen die meisten Besuche aus. Führe einen eigenen Durchgang bei 390px durch, einen Konsistenz-Durchgang und eine Geschwindigkeitsprüfung; verbinde dann das Formular, deploye und arbeite die Launch-Checkliste durch. Siehe references/ship.md.

Arbeitsgewohnheiten

Diese gelten durchgehend.

• Eine Änderung pro Runde. Wenn eine Korrektur angefordert wird, ändere diese und nur diese. Ein Diff, der breiter ist als die Anfrage, verdeckt, welche Bearbeitung geholfen hat, und „Aufräumen" von etwas, mit dem der Benutzer zufrieden war, ist ein Rückschritt.
• Prüfen vor dem Melden. Lade die Seite und inspiziere sie in mehreren Breiten, bevor du sie als erledigt bezeichnest. Layouts können alle Regeln erfüllen und trotzdem falsch aussehen.
• Vage Rückmeldungen in ein benanntes Problem verwandeln. "Es fühlt sich schwer an" ist bearbeitbar: Stelle fest, ob Abstände, Stärke oder Kontrast verantwortlich sind, sage dies und passe nur das an. Wenn der Benutzer keine Vorliebe äußern kann, platziere zwei oder drei Varianten auf Vorschaurouten mit einer einzeiligen Beschreibung pro Variante. Menschen wählen leichter aus, als sie spezifizieren.
• Überraschungen auf nicht Spezifiziertes zurückführen. Wenn die Ausgabe nicht dem entspricht, was der Benutzer erwartet hat, finde die offene Frage dahinter und kläre sie in der Regeldatenbank, damit sie nicht von Hand erneut geflickt werden muss.
• Fehler an der Wurzel beheben und die Ursache in einer Zeile angeben.
• Funktionierende Zustände speichern. In einem Git-Projekt, in dem der Benutzer Commits wünscht, committe nach jedem funktionierenden Schritt mit einer Nachricht, die Wochen später noch Sinn ergibt.
• Schlüssel und Daten schützen. Geheimnisse gehören in .env.local und bleiben außerhalb von Quelldateien und der Git-Historie. Wenn sich ein Formular weigert zu speichern, repariere die Zugriffsregel. Deaktiviere niemals die Sicherheit, um es zum Laufen zu bringen.
• Ehrlich berichten. Gib an, was verifiziert wurde, was nicht verifiziert werden konnte (ein physisches iPhone, die Produktionsdomain) und welcher Text erfunden ist. Eine Bestätigung auf dem Bildschirm beweist nichts; die gespeicherte Zeile tut es.
• Versionen prüfen. Für GSAP, Three.js, React Three Fiber, Motion und Lenis konsultiere die aktuelle Dokumentation zu kompatiblen Versionen, anstatt dich auf das Gedächtnis zu verlassen, und kennzeichne Unsicherheiten.

Referenzdateien

Datei	Lies sie, wenn
references/design-system.md	Du Schriftarten, Farben und Abstände auswählst; vage Stilwörter in konkrete umwandelst; eine generisch aussehende Seite prüfst
references/assets.md	Du Bild- oder Videoprompts schreibst, visuelle Elemente konsistent hältst, Medien für das Web komprimierst
references/cinematic-moves.md	Du einen Video-Hero, eine fixierte Scroll-Geschichte, Parallax, einen 3D-Akzent, ein scrollgesteuertes Video oder eine vollständige Live-3D-Scroll-Geschichte hinzufügst
references/ship.md	Du Medien platzierst, den Smartphone-Durchgang, Feinschliff, Geschwindigkeit, das Kontaktformular, Deployment, Domain, SEO und die Launch-Checkliste durchführst