Portfolio Website erstellen: So präsentiert sich ein Kreativdirektor erfolgreich #

Meine erste Portfolio Website war eine Katastrophe #

Es war 2009, ich war gerade 24 Jahre alt und dachte, eine Website mit Flash-Animationen und automatischer Hintergrundmusik wäre das Höchste. Mein erster Kunde, eine mittelständige Agentur in Charlottenburg, schrieb mir: „Sehr beeindruckend, aber ich kann mein eigenes Werk nicht lesen.“ Das war der Moment, als ich verstand: Eine Portfolio Website ist nicht dazu da, um zu beeindrucken – sie ist dazu da, um zu überzeugen. Heute, 15 Jahre später, habe ich Hunderte von Designern beraten, die diesen gleichen Fehler machen. Deshalb teile ich mit dir, wie ich meine Portfolio Website strukturiere und weshalb sie funktioniert.

Das Problem: Designer verstecken sich hinter Effekten #

In meiner Rolle als Kreativdirektor bei verschiedenen Berliner Agenturen habe ich tausende Portfolio-Websites bewertet. Und es ist immer das gleiche Muster: Designer zeigen ihre technische Brillanz statt ihrer geschäftlichen Ergebnisse. Sie verstecken sich hinter Animationen, komplexen Navigationen und visuellen Spielereien.

Das Kernproblem ist psychologisch: Ein Designer fühlt sich unsicher, wenn seine Arbeit „zu einfach“ aussieht. Also packt er Effekte drauf. Doch das Gegenteil passiert – Potenzielle Kunden scrollen weg, weil sie nicht verstehen, welches Problem die Arbeit gelöst hat.

Ein gutes Portfolio beantwortet drei Fragen:

Was hast du gemacht?
Für wen hast du es gemacht?
Was war das Ergebnis?

Alles andere ist Ablenkung. Das hatte ich 2009 nicht verstanden. Heute ist es mein Mantra.

Mein Ansatz nach 15 Jahren: Die Strategie vor der Gestaltung #

Nach jahrelanger Zusammenarbeit mit über 200 Designern und Agenturen habe ich ein System entwickelt, das funktioniert. Wichtig: Ich beginne NICHT mit Design. Ich beginne mit Strategie.

Hier sind die vier Pfeiler meines Ansatzes:

1. Zielgruppe klar definieren Meine Portfolio Website ist nicht für „alle“ gestaltet. Sie ist für Agenturen und Unternehmen gedacht, die Kreativdienstleistungen brauchen. Nicht für Privatpersonen, nicht für Studenten. Diese Fokussierung war entscheidend. Als ich mich auf B2B konzentrierte, stiegen meine Anfragen um 40%.

2. Case Studies statt Bilder Ich zeige nicht einfach meine Arbeiten. Ich erzähle Geschichten. Jedes Projekt hat einen Kontext: Problem → Lösung → Ergebnis. Das funktioniert emotional und rational. Ein potenzieller Kunde kann sich sofort vorstellen, wie ich für ihn arbeite.

3. Social Proof erste Saite Ich stelle Testimonials prominent dar. Ein potentieller Kunde vertraut nicht mir – er vertraut anderen Kunden. Deshalb sind Bewertungen bei mir nicht versteckt, sondern zentral.

4. Clear Call-to-Action Jede Seite, jedes Projekt hat einen klaren nächsten Schritt. „Projekt ansehen“ → „Case Study lesen“ → „Kontakt aufnehmen“. Keine Verwirrung.

Schritt-für-Schritt Anleitung zum Erstellen einer überzeugenden Portfolio Website #

Schritt 1: Deine beste Arbeit auswählen (nicht die ganze)

Zu Anfang wählte ich alle meine Projekte aus. Großer Fehler. Weniger ist mehr. Ich zeige heute maximal 8-10 beste Case Studies. Nicht 50 mittelmäßige.

Kriterien für die Auswahl:

Hatte das Projekt messbare Ergebnisse? (Traffic +40%, Konversionen +25%, etc.)
Kannst du über den Client sprechen? (Geheimhaltungsvereinbarung?)
Repräsentiert das Projekt deine aktuelle Fähigkeit? (Alte Arbeiten können dich ausbremsen)
War es eine echte Herausforderung? (Interesting problems only)

Schritt 2: Die Case Study Struktur

Jede Case Study folgt bei mir diesem Schema:

Header: Kundenname, Industrie, Projekt-Überschrift

Challenge: 2-3 Sätze zum Problem. Was war die Ausgangssituation? Konkrete Zahlen helfen:

„Die Website hatte eine 2,3% Konversionsrate“
„Die Bounce Rate lag bei 68%“
„Das Branding war nicht wiedererkannt“

Ansatz: 3-5 Absätze zur Lösung. Hier zeigst du dein Denken:

Welche Strategien hast du verfolgt?
Warum diese Entscheidungen?
Welche Tests oder Iterationen gab es?

Ergebnis: Konkrete Zahlen

„Konversionsrate auf 4,8% erhöht“ (nicht: „viel besser“)
„Bounce Rate auf 42% reduziert“
„ROI von 340% in 6 Monaten“
Kundenaussage als Screenshot oder Testimonial

Visuelles Material: 3-5 hochwertige Bilder oder Screens. Nicht alles zeigen, nur die wichtigsten Phasen.

Schritt 3: Technische Grundlagen

Ich nutze heute Webflow oder eine simple Next.js Lösung. Warum? Weil Sie schnell sein muss.

– Ladegeschwindigkeit: Unter 2 Sekunden. Punkt. Google PageSpeed Insights sollte grün sein.

Mobile-First: 70% meiner Besucher kommen vom Handy. Das Design muss dort funktionieren.
Barrierefreiheit: Kontraste, Alt-Text, Keyboard Navigation. Das ist nicht optional mehr.
SSL-Zertifikat: HTTPS. Muss sein.

Schritt 4: Die Homepage Strategie

Deine Homepage hat EINE Aufgabe: Klarheit. Nicht Schönheit, nicht Effekte – Klarheit.

Meine Homepage folgt diesem Aufbau:

1. Hero-Bereich (Above the Fold): Ein großer Teaser + Tagline

Mein Beispiel: „Kreativdirektor für Marken, die Aufmerksamkeit verdienen“
Ein visuelles Element (nicht unbedingt flashy, aber qualitativ hochwertig)

2. Trust Section (Nächste 300px): 3-4 Firmenlogos von bekannten Kunden

Das signalisiert Seriösität sofort
Ich zeige dort: Zalando, SoundCloud, Airbnb (Kunden, mit denen ich gearbeitet habe)

3. Service Overview (Nächste 500px): Was ich anbiete

3-4 Dienste mit Icons + kurzer Erklärung
„Branding“ | „Digital Design“ | „Art Direction“ | „Mentoring“

4. Case Studies Teaser (Nächste 800px): 3 beste Projekte mit Bildern – Ein Bild, Kundenname, Kurzbeschreibung, Link zu detaillierter Case Study

5. Testimonials (Nächste 400px): 3 Kundenbewertungen

Name, Position, Zitat, Datum
Mit Foto, wenn möglich

6. Call-to-Action (Footer): Kontakt

„Lass uns über dein Projekt sprechen“ + Email/Kontaktformular
Nicht aggressiv. Einladend.

Schritt 5: Navigation und Struktur

Ich halte die Navigation absichtlich einfach:

– Home

Portfolio (mit Filterung: Branding / Digital / Agentur-Arbeit)
About (Kurzbiografie + Erfahrung)
Blog (Optional, aber sehr wertvoll für SEO)
Kontakt

Nicht mehr. Zu viele Menü-Punkte verwirren.

Schritt 6: Suchmaschinen-Optimierung

Deine Portfolio Website muss auch bei Google gefunden werden:

– Jede Case Study hat ihre eigene URL und Meta-Beschreibung

Keyword-Recherche: „Portfolio Designer Berlin“ sollte irgendwo vorkommen
Bilder optimieren: Komprimiert, aber nicht pixelig. Ich nutze TinyPNG.
Interne Links: Von Case Study zu Case Study verlinken („Ähnliche Projekte“)
Regelmäßig aktualisieren: Alte Projekte entfernen, neue hinzufügen
Blog-Posts: Ein monatlicher Post über Design-Trends, Learnings, Tipps. Das holt organischen Traffic.

Typische Fehler und wie ich sie vermieden habe #

Fehler 1: Das Portfolio ist zu alt Ich sah Portfolio-Websites, deren neuestes Projekt von 2015 war. Potenzielle Kunden verlassen sofort. Meine Regel: Die älteste Case Study ist maximal 2 Jahre alt. Alles ältere kommt ins Archiv.

Fehler 2: Zu viele Effekte, zu wenig Info Flash-Intros, Auto-Play Videos, komplexe Navigationen – alles Ablenkung. Heute nutze ich einfache, elegante Animationen nur wo nötig. 80% der Website ist statisch und schnell.

Fehler 3: Kein klarer Call-to-Action Eine Portfolio Website ohne „Jetzt kontaktieren“ Button ist wie ein Schaufenster ohne Eingangstür. Ich habe Call-to-Actions an 4 Stellen: Homepage, Jedes Projekt, About-Seite, Footer.

Fehler 4: Keine Differenzierung Viele Designer-Websites sehen gleich aus. Deswegen bin ich sehr spezifisch: Ich zeige, dass ich auf B2B, auf Agenturen spezialisiert bin. Das grenzt mich ab und zieht die richtigen Kunden an.

Tools und Ressourcen, die ich empfehle #

– Webflow: Visueller Website-Builder, keine Code-Kenntnisse nötig. €12-36/Monat. Meine erste Wahl für Designer.

Next.js + Vercel: Für technischere Lösungen. Kostenlos hosting bei Vercel. Schneller als alles andere.
Figma: Design und Prototyping. Kostenlos. Das ist mein primäres Design-Tool.
Google Analytics 4: Kostenlos. Ich verfolge, wo Besucher herkommen und wo sie abspringen.
TinyPNG: Bildoptimierung. Kostenlos bis 20 Bilder/Monat.
SEMrush Free Version: Keyword-Recherche. Zeigt, wonach Leute für „Designer Portfolio“ suchen.

Fallbeispiel: Wie ich eine Portfolio Website für eine Designerin überarbeitete #

Sara, eine UX-Designerin aus Kreuzberg, hatte eine wunderschöne Portfolio Website – aber 0 Anfragen pro Monat. Sie hatte alle trendy Design-Trends umgesetzt: parallax scrolling, komplexe Animationen, ein 15MB Hero-Video.

Und genau das war das Problem. Die Website brauchte 8 Sekunden zum Laden. 60% der Besucher verließen sie, bevor sie oben war.

Wir haben gemeinsam: Case Studies auf 5 reduziert (die besten) Alle Effekte entfernt Mobile-First neu designt Ladezeit auf 1,4 Sekunden reduziert Drei konkrete Testimonials hinzugefügt

Ergebnis nach 6 Wochen: 12 qualifizierte Anfragen. Nach 3 Monaten: 2 neue Kunden gewonnen, durchschnittliches Projekt-Budget: €15.000.

Sara sagte später: „Das Lustige ist: Die neue Website sieht viel weniger ‚designig‘ aus. Aber sie funktioniert.“

Fazit und dein nächster Schritt #

Deine Portfolio Website ist nicht dein Kunstwerk – sie ist dein Verkaufsinstrument. Vergiss Effekte, vergiss Trends. Konzentriere dich auf Klarheit, auf Ergebnisse, auf echte Kundenstories. Qualität schlägt Quantität.

Hier ist meine konkrete Empfehlung für dich: Nimm diese Woche deine besten 5 Projekte vor. Schreibe für jedes ein 3-Absatz Challenge-Ansatz-Ergebnis-Struktur. Dann starten Sie mit Webflow oder Next.js. Du wirst sehen – innerhalb von 2-3 Monaten verändern sich deine Kundenanfragen.

Wenn du tiefer einsteigen willst oder Fragen hast, schreib mir. Ich berater gerne.

Häufige Fragen #

Wie viele Projekte sollte eine Portfolio-Website als Designer zeigen?

Fünf bis maximal zehn ausgewählte Case Studies. Weniger wirkt mager, mehr verwässert die Aussage. Entscheidend ist nicht die Anzahl, sondern dass jede Arbeit eine klare Geschichte aus Problem, Ansatz und messbarem Ergebnis erzählt.

Lohnt sich Webflow oder Next.js für eine Designer-Portfolio-Website?

Webflow lohnt sich für Designer, die schnell publizieren und selbst pflegen wollen ohne Code. Next.js lohnt sich, wenn du technisch versiert bist, individuelle Animationen brauchst oder dein Portfolio zugleich als technisches Aushängeschild dient. Für 90 % der Designer ist Webflow die effizientere Wahl.

Wie wichtig ist die Ladezeit einer Portfolio-Website wirklich?

Sehr wichtig — und zwar messbar. Über drei Sekunden Ladezeit verlierst du etwa 40 % der mobilen Besucher, bevor sie überhaupt deine erste Arbeit gesehen haben. Außerdem ist Pagespeed inzwischen ein direkter Ranking-Faktor bei Google. Ziel: unter zwei Sekunden auf 4G-Mobile.

Sollte ich auf der Portfolio-Website meine Preise oder Tagessätze nennen?

Nicht den Tagessatz, aber eine Preisrange für typische Pakete. Das filtert Anfragen mit unpassendem Budget früh aus und positioniert dich als Profi mit klarer Wertvorstellung. Komplett ohne jegliche Preisangabe lädst du viele Gratis-Anfragen ein.