01 · Die Offenlegung
Es sind Konzeptprojekte
Die großen Web-Builds wurden nicht von den fiktiven Marken beauftragt, die sie darstellen. Ich habe die zehn ausgewählt. Ich habe für jedes die Prämisse gesetzt, die Art Direction gewählt, es gestaltet, das HTML, das CSS und das JavaScript geschrieben und es mit einem Bericht darüber veröffentlicht, wie der Build verlief — einschließlich der Stellen, die sich gewehrt haben.
Die Namen, Geschäftsdaten, Statistiken und Szenarien darin sind Teil der Designübung, sofern nicht ausdrücklich anders angegeben. Ich halte diese Unterscheidung sichtbar, weil ein Portfolio leicht erkennen lassen sollte, was jemand tatsächlich getan hat.
Eine Anmerkung zum Geltungsbereich, damit hier nicht mehr hineingelesen wird, als dasteht: Es geht um die zehn Web-Builds. Die Logo-, Identitäts- und Werbearbeiten an anderer Stelle dieser Site sind ein eigenes Werk, für das diese Seite nicht spricht. Ich nenne nirgends auf der Site echte Kundennamen — ein Name, den Sie mir glauben müssten, ist das Gegenteil dessen, wofür diese Seite da ist.
02 · Warum ganze Projekte?
Ein poliertes Mockup kann viel verbergen
Eine vollständige Site muss Navigation, Inhalte, responsive Layouts, Formulare, Interaktion, Accessibility-Entscheidungen und all die kleinen Zustände zwischen den Screenshots überstehen. Ein statisches Frame in einer Designdatei muss auf nichts davon antworten. Deshalb bevorzuge ich vollständige Builds — jeder ist eine laufende Seite, nicht das Bild einer Seite.
Was ein fertiger Build richtig machen muss und ein Mockup nicht
- Jede Breite, nicht eine
- Ein Screenshot zeigt einen Viewport. Ein echter Build muss bei jeder Breite dazwischen umbrechen, auch bei den unbequemen, für die sich ein Mockup nie verantworten muss.
- Die Zustände, die niemand absichtlich gestaltet
- Leer, ladend, Fehler, Fokus, Hover, reduzierte Bewegung. Diese Zustände existieren erst, wenn tatsächlich etwas im Browser läuft.
- Ob die Interaktion wirklich funktioniert
- Ein Formular, das abschickt, ein Akkordeon, das öffnet, eine Tastatur, die jedes Bedienelement erreicht — das trifft auf den Code entweder zu oder nicht, und ein Bild kann das in keine Richtung entscheiden.
Ein fertiger Build lässt sich öffnen, durchklicken, in der Größe ändern und lesen — eine andere, entblößendere Art von Prüfung, als ein Mockup sie je bestehen muss.
03 · Was sie zeigen
Was zehn fertige Builds beweisen können — und was nicht
Jeder Punkt steht unten seiner ehrlichen Grenze gegenüber. Beide Spalten haben dieselbe Größe, dasselbe Gewicht und dieselbe Farbe — denn die linke zu verkleinern ist der Weg, auf dem aus einer Offenlegung Kleingedrucktes wird.
-
Was sie zeigen
Visuelle Richtung. Zehn Branchen, zehn Art Directions, kein Hausstil zweimal wiederholt — Sie sehen, wie ein Konzept behandelt wird, bevor es eine Seite wird.
Was sie nicht beweisen
Kundenkommunikation. Niemand hat mir eine Änderung geschickt, mit der ich nicht einverstanden war, und kein zweiter Entscheider hat die Farbe gehasst. Wie ich mit Feedback umgehe, das ich nicht wollte, steht nicht in diesem Portfolio — keines der zehn konnte es dort hineinbringen.
-
Was sie zeigen
Interface-Design und Frontend-Implementierung. Jede Entscheidung über die zehn hinweg ist meine, und jeder Bericht sagt, warum ich sie getroffen habe und was ich zuerst verworfen habe.
Was sie nicht beweisen
Produktionstraffic. Keines der zehn hat echte Besucher erlebt, eine echte Supportanfrage oder einen Dienstagnachmittag, an dem etwas ausfällt.
-
Was sie zeigen
Responsives Denken und technisches Problemlösen. Jeder Bericht sagt, was kaputtging, was es in Stunden gekostet hat und was ich anders machen würde — nichts hier unterliegt einer Vereinbarung, die das vertraulich halten würde.
Was sie nicht beweisen
Kommerzielle Ergebnisse. Keines von ihnen trägt eine Umsatzzahl, eine Traffic-Kurve oder eine Conversion-Rate, und keines wird es je — es wurde nichts verkauft, und es gab niemanden, an den man hätte verkaufen können.
-
Was sie zeigen
Accessibility-Entscheidungen und Konsistenz über eine vollständige Experience hinweg. Zehn Formulare, zehn Sätze interaktiver Zustände, alle nach derselben Praxis gebaut.
Was sie nicht beweisen
Echte Geschäftsergebnisse. Nichts hier hatte ein echtes Budget, das man überziehen, oder einen echten Stakeholder, den man zufriedenstellen konnte — also kann es nicht zeigen, wie mit diesem Druck umgegangen wird.
Nichts anderes vortäuschen — ein Portfolio aus eigeninitiierter Arbeit beweist die linke Spalte nicht automatisch, nur weil sie sich leicht zeigen lässt. Was es stattdessen bieten kann, ist das, was rechts auf dieser Seite steht: eine Messung, mit Datum und Methode.
Auf dieser Site gemessen. Am 9. August 2026 lieferte npm run a11y — axe-core plus echte Tastenanschläge, 13 Routen bei 1440×900 und 390×844, reduzierte Bewegung erzwungen, jede Seite vor dem Lauf zur Ruhe gekommen und vollständig gescrollt — 0 axe-Verstöße und 0 von 829 Tab-Stopps ohne sichtbaren Fokusindikator.
Im Klartext: Ein automatischer Prüfer fand nichts zu beanstanden, und jede Stelle, auf der die Tastatur landen kann, zeigt Ihnen, wo sie ist. Keines von beidem ist die ganze Barrierefreiheit, und keines ist ein Zertifikat. Es sind zwei Messungen, mit Datum und Methode versehen.
04 · Andere Probleme, andere Regeln
Jedes beginnt bewusst mit einer anderen Prämisse
Jedes Projekt beginnt absichtlich mit einem anderen fiktiven Briefing. Ein leises Hotel sollte sich nicht wie ein Kraftsport-Gym verhalten. Ein Gesundheits-Interface sollte nicht dieselbe visuelle Sprache sprechen wie ein Cyberpunk-Agenturkonzept.
Es geht nicht darum, einen persönlichen Stil zehnmal zu wiederholen. Es geht darum zu sehen, ob die Designentscheidungen der Idee folgen können — ob sich ein Wechsel der Prämisse tatsächlich als Wechsel von Schrift, Farbe, Rhythmus und Bewegung zeigt, statt als dasselbe Template unter anderem Namen.
- Die Prämisse setzt die Vorgabe
- Restaurant, Hotel, Praxis, Fitnessstudio, Fotostudio, Hautpflegemarke, Maklerhaus, SaaS-Produkt, Agentur, Bildungsplattform — jedes Konzept wählt seine eigene visuelle Sprache, bevor eine einzige Komponente gebaut wird.
- Die Vorgabe muss den Kontakt mit dem Build überstehen
- Eine Designsprache, die nur im Mockup funktioniert und in dem Moment zusammenbricht, in dem sie echte Inhalte, echte Breakpoints und echte Interaktion tragen muss, ist der Idee nicht wirklich gefolgt — sie hat sie dekoriert.
- Zehn Stimmen, kein Hausstil
- Editorial-Print, Luxus-Heritage, skandinavische Ruhe, radikal minimal, neobrutalistisch, dunkel-cineastisch, organisch-botanisch, präzise-dunkel, Cyberpunk-HUD, optimistisch-hell. Keine zwei der zehn teilen sich eine visuelle Sprache.
05 · Das Protokoll
Lesen oder ausführen — Sie haben die Wahl
Was jede Fallstudie dokumentiert
Jede behandelt die Idee, die gestalterischen Vorgaben, die technische Struktur, was Probleme verursachte und was ich behalten würde. Die Live-Builds stehen neben der Erklärung, damit die Arbeit geprüft werden kann, statt nur beschrieben zu werden.
Das ist die ganze Methode: sagen, was ein Projekt ist, das Ganze bauen statt einer Scheibe davon, und aufschreiben, was sich unterwegs gewehrt hat.
Zehn eigeninitiierte Konzepte, zehn Berichte, zehn Live-Vorschauen.
