So gehe ich jedes Website-Projekt an, bevor ich eine Zeile Code schreibe. Der Prozess funktioniert unabhängig davon, ob du selbst codest oder mit KI baust — er sorgt dafür, dass am Ende Design rauskommt und kein Template.
Schritt 1 — Vibe definieren
Bevor du eine einzige Farbe oder einen Font anfasst: Versteh erst das Gefühl, das die Seite auslösen soll.
Drei Fragen, die du dir stellst:
- Wer schaut die Seite an? → Zielgruppe
- Wie soll sich die Person dabei fühlen? → Emotion
- Wie tritt der Kunde selbst auf? → Ton und Persönlichkeit
Praxis-Tipp: Frag deinen Kunden direkt: „Nenn mir 3 Adjektive, die dein Business beschreiben sollen.”
Schritt 2 — Seitenstruktur festlegen
Entscheide, welche Sections auf die Seite kommen — bevor du baust. Das spart später enorm viel Zeit.
Was du festlegst:
- Welche Sections kommen vor? (Hero, About, Services, CTA, Footer, …)
- In welcher Reihenfolge erscheinen sie?
- Was ist das Ziel jeder einzelnen Section?
Schritt 3 — Inspiration suchen
Jetzt weißt du, WAS du bauen willst — jetzt schau dir an, WIE andere das gelöst haben.
Deine drei Quellen:
- Pinterest — breiter Überblick, gut für Stimmungsbilder und Layouts
- Awwwards — preisgekrönte Seiten, das Beste, was es gibt
- Claude Design / 21st.dev — Ideen und Components direkt testen, bevor du sie baust
Was du dir dabei anschaust:
- Layout — Wie ist der Platz aufgeteilt? Viel Whitespace oder dicht?
- Farben — Welche Palette passt zum Vibe aus Schritt 1?
- Fonts — Serif, Sans-Serif, Display? Wie groß, wie mutig?
- Animationen und Effekte — Was fällt auf, was fühlt sich gut an?
Die wichtigste Regel dieses Schritts: Du sammelst keine fertigen Designs — du sammelst Mechaniken. Eine Scroll-Animation, bei der ein Haus zusammengebaut wird, funktioniert genauso mit einem Auto, einem Schuh oder einem Produkt. Die Technik bleibt, der Inhalt wechselt.
Praxis-Tipp: Leg einen Ordner an und mach Screenshots. Nicht alles im Kopf behalten — sehen und sammeln. Das ist dein persönliches Moodboard.
Schritt 4 — Hero Section definieren
Die Hero Section ist der erste Eindruck. Du hast 3 Sekunden. Was passiert da?
Was du dir überlegst:
- Einstiegsanimation — Wie kommt der Content rein? Fade, Slide, Scroll-getriggert?
- Hauptelement — Bild, Video, 3D, Text-only?
- Headline — Was steht da, wie groß, wie mutig?
- Call to Action — Gibt es einen direkt in der Hero?
Wichtig: Die Hero-Ideen, die du hier sammelst, sind noch lose und projektunabhängig. Du entscheidest erst danach, welche wirklich zum Kunden passt. Nicht jede coole Animation passt zu jedem Projekt.
Schritt 5 — Fonts und Farben festlegen
Aus Vibe und Inspo hast du schon ein Gefühl — jetzt wird es konkret.
Fonts — Orientierung:
| Stil | Font-Typ | Beispiele |
|---|---|---|
| Edgy / Modern | Grotesque Sans | Space Grotesk, Neue Haas |
| Elegant / Luxury | Serif | Playfair, Cormorant |
| Brutal / Stark | Display | Bebas Neue |
| Freundlich / Locker | Rounded Sans | DM Sans, Plus Jakarta |
Farben — Vorgehen:
- Schau auf deine Inspo-Screenshots: Welche Farben dominieren bei deinem Vibe?
- Entscheide erst grob: hell oder dunkel, bunt oder monochrom, warm oder kalt.
- Dann konkret: mit Coolors.co eine Palette zusammenstellen.
Die wichtigste Regel:
Maximal 2 Fonts. Maximal 3 Farben plus 1 Neutralton. Mehr verwirrt nur.
Schritt 6 — Bauen
Deine Checkliste, bevor du die erste Zeile Code anfasst:
- Vibe definiert
- Seitenstruktur festgelegt
- Inspiration gesammelt, Moodboard erstellt
- Hero-Idee ausgewählt
- Fonts und Farben festgelegt
Erst wenn alle Punkte abgehakt sind, fängst du an zu bauen. Design-Entscheidungen beim Bauen zu treffen ist der Grund, warum Seiten nach Template aussehen.
Bonus — Wenn du mit Claude Code baust: Tokens sparen
- Leg eine CLAUDE.md an (global und pro Projekt) — kurz halten, kein Roman.
- Nutze /clear, wenn du innerhalb eines Projekts ein neues Thema anfängst.
- Kleine Tasks Stück für Stück — nicht zu viele Änderungen in einem Schritt.
- Nutze /compact, wenn die Session sehr lang wird.
Fragen? Schreib mir auf Instagram: @made.by.prill