Erst die Fragen, dann das Fundament, dann die Seiten.

Jahrelang habe ich mit der Oberfläche angefangen. Ein Moodboard, eine Startseite in Figma, Farben, eine Schrift, die sich gut anfühlt. Das ging schnell und sah früh gut aus. Und dann kam der Moment, in dem jemand fragte: „Und wo steht jetzt der Preis?“ – und die schöne Seite hatte keinen Platz dafür.

Heute arbeite ich in drei Schritten, und die Reihenfolge ist nicht verhandelbar: Grundriss, Wände, Licht. Im Klartext: erst die Fragen – wer kommt, was braucht die Person, welche Seiten gibt es. Dann das Fundament – Marke, Farben, Typografie, Abstände, wiederkehrende Bauteile. Und zuletzt die Anwendung: die fertigen Seiten, die auf diesem Fundament entstehen.

1. Der Grundriss – was die Seite leisten muss

Es fängt mit einem Formular an, das ich vorher verschicke. Zehn Minuten ausfüllen, damit wir im ersten Gespräch nicht bei Null anfangen. Im Gespräch selbst kommen dann immer dieselben fünf Fragen:

• Zeig mir drei Websites, die dir gefallen – und sag mir, was genau daran.
• Wer kommt auf diese Seite? Alter, Beruf, was die Person gerade braucht. Und: Sie oder du?
• Was soll dieser Mensch als Erstes tun? Eine Antwort, nicht drei.
• Gibt es schon Logo, Farben, Schriften?
• Wer ändert später Inhalte – du selbst oder ich?

Die letzte Frage klingt nach Technik, entscheidet aber alles danach: ob am Ende ein CMS steht oder eine statische Seite. Dazu kommt die unbequeme Sortierung – was ist ein Must-Have, was ein Nice-to-Have, und was kommt ausdrücklich nicht auf die Seite.

Das Ergebnis ist unspektakulär: Text in einem Dokument, keine Bilder.

• Welche Seiten es gibt – und welche es ausdrücklich nicht gibt.
• Für jede Seite eine Aufgabe in einem Satz.
• Die Reihenfolge der Abschnitte, von „warum bin ich hier“ bis „was mache ich jetzt“.
• Die Wege dazwischen: von wo nach wo klickt man, und wo ist die Sackgasse?

Das ist keine Skizze, sondern eine Liste von Entscheidungen – und der günstigste Moment, sie noch zu ändern.

2. Die Wände – Marke und Design-System

Erst danach wird gestaltet – aber noch nicht die Seite, sondern das Fundament, auf dem sie stehen wird: Markenkern, Farben, Typografie, Hierarchie, Abstände, wiederkehrende Bauteile. Ein Karten-Muster, ein Abschnittskopf, ein Kontaktblock. Das sammelt sich an einer Stelle – in einem Style Guide, einer einzelnen HTML-Datei, die man im Browser öffnet. Darin steht:

• Die Farbpalette mit Hex-Codes und der Angabe, wofür jede Farbe da ist.
• Schriftgrößen, Gewichte, Zeilenhöhen – nicht „irgendwie groß“, sondern in Zahlen.
• Buttons in allen Zuständen: normal, Hover, Fokus, deaktiviert.
• Die Bauteile: Karte, Abschnittskopf, Formular, Kontaktblock.
• Abstände aus einem festen Raster – 8, 16, 24, 32, 48, 64.
• Ansprache und Tonalität, mit Beispielsätzen. Sie oder du, und wie klingt das?

Diese Datei bekommen meine Kund:innen zur Freigabe, bevor die erste Zeile Code entsteht. Nicht, weil Design-Systeme gerade modern sind, sondern weil ich beim dritten Mal nicht wieder entscheiden will, wie eine Karte aussieht – und weil eine Änderung hier Minuten kostet und später Tage.

3. Das Licht – was daraus entsteht

Und dann, ganz zum Schluss: der Teil, den alle meinen, wenn sie „Design“ sagen – das Sichtbare. Jetzt wird das Fundament angewendet, und zwar so oft es nötig ist: auf die Website, auf eine Software-Oberfläche, auf ein Layout für Print. Dieselbe Basis, jedes Mal anders eingesetzt. Das ist nicht der unwichtigste Schritt – er entscheidet, wie sich die Sache anfühlt. Aber er entscheidet es auf etwas, das schon trägt.

Auch hier hängt nicht alles am Geschmack. Gebaut wird ab 375 Pixel, also am Handy zuerst. Kontraste mindestens 4,5:1, damit Text auch bei Sonne auf dem Display lesbar bleibt. Bedienelemente mindestens 44 Pixel, damit ein Daumen sie trifft. Übergänge zwischen 0,2 und 0,3 Sekunden – lang genug, um weich zu sein, kurz genug, um nicht zu warten. Und getestet wird auf einem echten Gerät, nicht nur im Browser-Simulator.

Wenn das Licht zuerst kommt, verschiebt man später Wände – und wundert sich, dass es dunkel wird.

Woran ich merke, dass die Reihenfolge stimmt

• Das Feedback klingt anders. Statt „das Blau gefällt mir nicht“ kommt „hier fehlt noch ein Schritt“.
• Änderungen sind billig. Einen Abschnitt umziehen ist Arbeit von Minuten, kein Neuentwurf.
• Es bleibt bei zwei Design-Runden. Mehr plane ich nicht ein, weil das Grundsätzliche vor dem Aussehen geklärt ist.
• Am Ende ist niemand überrascht. Die Seite sieht aus wie das, was vorher besprochen wurde.

Das ist keine Methode, die ich verkaufe. Es ist einfach, wie ich arbeite – auch bei dieser Website hier. Der ganze Ablauf liegt bei mir als Vorlage im Ordner: Formular, Briefing, Checklisten, Style-Guide-Template. Nicht, weil ich Prozesse mag, sondern weil ich nicht bei jedem Projekt neu darüber nachdenken will, in welcher Reihenfolge ich anfange.

---