Kreatives Portfolio-Website-Design

Ein Portfolio, das mehr erklärt als seine Projekte

Maya Rowans Portfolio trifft eine bewusste Entscheidung: Es verleiht Projektnamen das visuelle Gewicht, das viele Portfolios Screenshots geben. Die Eröffnungsaussage „I make ideas visible" leitet zu einem Raster typografischer Projektkarten über – nicht zu einer Wand aus Gerätenmockups. Die Seite ist daher auf ihre Beschreibungen angewiesen, um zu erklären, worum es bei den Arbeiten tatsächlich geht.

Dieselbe redaktionelle Struktur wiederholt sich auf drei Ebenen: Nummerierte Abschnitte gliedern die Seite, große Namen heben die Projekte hervor, und kleine Beschriftungen kennzeichnen die Arbeitsnotizen. Das macht die Seite auch als Referenz für kreatives Portfolio-Website-Design nützlich, bevor die fiktive Persona ersetzt wird. Entscheidend ist, wie diese Ebenen zusammenwirken – nicht die konkrete Rot- oder Blautönung.

Warum die Projektkarten wie Plakate wirken

Das Desktop-Projektraster ist bewusst ungleich: Seine Spalten verwenden ein Verhältnis von 1,2:0,8, sodass die linke Karte rund 60 % der verfügbaren Breite erhält. Jede Karte ist mindestens 420px hoch. Das schafft Platz für einen eng umgebrochenen Titel oben und einen separaten erklärenden Satz unten.

01

Eine Titelbreite von acht Zeichen verändert den Rhythmus

Die Quelle begrenzt Projektüberschriften auf 8ch und verwendet eine Zeilenhöhe von 0,92. „Field Notes for Better Cities" wird so zu einem hohen Block statt zu einer einzigen Zeile. Das enge Maß verleiht dem Titel seinen plakatartigen Rhythmus – kein zufälliger Umbruch durch einen kleinen Screenshot.

02

Die Beschreibung trägt die konkrete Bedeutung

Die erste Karte benennt eine partizipative Karte und erklärt, dass kleine Beobachtungen zu bürgerlichen Signalen werden. Das ist wesentlich informativer als „ein innovatives Kartierungserlebnis". Die Beschreibung sitzt 24px über dem unteren Rand und gibt dem Leser über unterschiedlich eingefärbte Karten hinweg eine konsistente Stelle, an der er die Erklärung findet.

Von ausgewählten Arbeiten zu einer wiederholbaren Praxis

Der Praxis-Abschnitt kehrt die Gewichtung des Projektrasters um. Ein großes Zitat belegt die schmalere Spalte; drei nummerierte Erläuterungen belegen die breitere. Jede Erläuterung hat eine eigene obere Trennlinie und eine feste Zahlenspalte. Der Effekt ist ein Wechsel vom Stöbern in Einzelideen zum Lesen einer Handlungsabfolge.

1. „Find the Signal" benennt die Eingaben

   Die erste Zeile listet explizit Menschen, Einschränkungen, Sprache und Verhalten auf. Vergleicht man das mit Field Notes, dessen Gegenstand Beobachtungen über Städte sind: Die Projektbeschreibung benennt das Material, während die Praxiszeile erklärt, wonach die Designerin in diesem Material suchen würde. Die Seite legt diese Beziehung nahe; sie dokumentiert keine abgeschlossene Forschungsstudie.

2. „Build to Learn" benennt den Grund für einen Prototypen

   Die zweite Zeile positioniert einen funktionierenden Prototypen als Mittel zur Beantwortung von Fragen. Das ist eine andere Aussage als die Lieferung eines polierten Endinterfaces. Es passt zur Mischung des Portfolios aus Ambient-KI, redaktionellen Systemen und Gruppenentscheidungswerkzeugen, bei denen das Erkunden von Verhalten Teil der Designfrage ist.

3. „Leave a System" benennt die Übergabe

   Die letzte Zeile benennt Komponenten, Tokens und Leitlinien, anstatt mit „Launch" zu enden. Das macht den vorgeschlagenen Output konkreter: Eine andere Person sollte in der Lage sein, auf Basis der getroffenen Entscheidungen weiterzuarbeiten. In einer echten Fallstudie wäre dies die Stelle, an der ein Komponentenbeispiel oder eine kurze Verwendungsregel die Aussage stützen würde.

Eine Portfolio-Referenz für Hackathon-Projekte

OpenDesign hat dieses fiktive Portfolio als offizielles Hackathon-Beispiel erstellt. Für den eigenen Beitrag eines Teilnehmers ist die stärkste wiederverwendbare Idee die Trennung zwischen dem Zweck eines Projekts, den dahinterstehenden Entscheidungen und dem, was noch offen ist. Eine Projektkarte kann einen Beitrag vorstellen, während ein verknüpftes Konto die eigentliche Evidenz liefert.

Wo das Portfolio-Konzept endet

Die Quelle wechselt das Projektraster und den Praxis-Abschnitt unterhalb von 760px auf eine Spalte, blendet dabei aber auch die Navigationslinks aus. Das ist eine konkrete Einschränkung, die in einem echten Portfolio behoben werden sollte: ein kompaktes Abschnittsmenü beibehalten, anstatt Besucher durch jedes Projekt bis zum Kontakt scrollen zu lassen.

Die fiktiven Projekte sind keine dokumentierten Kundenprojekte. Notizen sind Überschriften statt eines befüllten Publikationssystems, und Kontakt verweist auf [email protected]. Diese Platzhalter ersetzen und die Ziele prüfen, bevor ein echtes Portfolio geteilt wird.