Dein Portfolio ist das Erste, was potenzielle Kunden sehen — und oft das Einzige, was über Auftrag oder Absage entscheidet. Kein Lebenslauf, kein Zertifikat und kein LinkedIn-Profil ersetzt eine überzeugende Sammlung deiner Arbeiten.
Trotzdem haben viele Webdesign-Freelancer entweder gar kein Portfolio oder eines, das nicht konvertiert. Die SERPs zum Thema werden von Baukästen wie Canva und Squarespace dominiert — Anleitungen, die sich an Freelancer richten, fehlen fast komplett.
Dieser Guide ändert das. Hier erfährst du, wie du ein Webdesign-Portfolio erstellst, das Kunden auf den ersten Blick überzeugt.
Was gehört in ein Webdesign-Portfolio?
Ein gutes Portfolio ist mehr als eine Bildergalerie mit Screenshots. Es erzählt die Geschichte hinter jedem Projekt und zeigt, dass du Probleme lösen kannst — nicht nur hübsche Seiten baust.
Diese Elemente sollte jedes Webdesign-Portfolio enthalten:
Projektvorstellungen als Case Studies
Jedes gezeigte Projekt braucht Kontext. Statt nur einen Screenshot zu zeigen, beantworte diese Fragen:
- Ausgangslage: Was war das Problem des Kunden? Welche Ziele hatte das Projekt?
- Dein Ansatz: Welche Entscheidungen hast du getroffen und warum? Welche Technologien hast du eingesetzt?
- Das Ergebnis: Was hat sich messbar verbessert — Ladezeit, Conversion Rate, Anfragen, Rankings?
- Live-Link: Damit der Interessent die Seite selbst testen kann.
Case Studies zeigen deine Denkweise. Kunden wollen wissen, ob du ihre Probleme verstehst — nicht nur, ob du Figma bedienen kannst.
Über-mich-Seite mit Positionierung
Wer bist du, was machst du, für wen arbeitest du? Diese drei Fragen muss deine Über-mich-Seite beantworten. Halte dich kurz, sei konkret und vermeide generische Floskeln wie “Ich bin leidenschaftlicher Webdesigner”.
Besser: “Ich gestalte Websites für Handwerksbetriebe im DACH-Raum — schnell, mobiloptimiert und mit klarer Nutzerführung.”
Kontaktmöglichkeit
Klingt offensichtlich, wird aber erstaunlich oft vergessen. Jede Seite deines Portfolios sollte einen klaren Call-to-Action haben. Ein Kontaktformular, eine E-Mail-Adresse oder ein Buchungslink — Hauptsache, der Interessent muss nicht suchen.
Leistungsübersicht
Was genau bietest du an? Webdesign ist ein breiter Begriff. Machst du nur Design oder auch Entwicklung? WordPress oder Custom Code? E-Commerce oder Corporate Sites? Je klarer du das kommunizierst, desto besser passt die Anfrage.
Wie viele Projekte sollte ein Portfolio zeigen?
Die kurze Antwort: zwischen drei und acht. Die lange Antwort hängt von deiner Situation ab.
Qualität schlägt Quantität
Drei herausragende Case Studies überzeugen mehr als zwanzig mittelmäßige Screenshots. Wenn du nur drei Projekte hast, die wirklich gut sind — zeige nur diese drei. Kunden scrollen selten durch mehr als sechs bis acht Projekte. Was danach kommt, wird ignoriert.
Kuratiere bewusst
Zeige nicht alles, was du je gemacht hast. Wähle Projekte, die zu deiner Zielgruppe passen. Wenn du dich auf E-Commerce spezialisierst, braucht dein Portfolio keine Blog-Designs. Wenn du für lokale Unternehmen arbeitest, zeige lokale Projekte.
Aktualisiere regelmäßig
Ein Portfolio mit Projekten von 2019 wirkt veraltet. Tausche alle sechs bis zwölf Monate deine schwächsten Projekte gegen neuere aus. Dein Portfolio sollte immer deinen aktuellen Skill-Stand widerspiegeln.
Portfolio ohne Kundenreferenzen — was tun?
Du stehst am Anfang und hast noch keine bezahlten Projekte? Das ist kein Hindernis — du musst nur strategisch vorgehen.
Eigene Website als Referenz
Deine eigene Portfolio-Website ist bereits dein erstes Referenzprojekt. Investiere hier besonders viel Zeit. Wenn deine eigene Seite schlecht aussieht, wird kein Kunde dir vertrauen. Umgekehrt: Eine perfekte eigene Website ist der beste Beweis deiner Fähigkeiten.
Redesign-Konzepte erstellen
Nimm dir bestehende Websites vor — den lokalen Bäcker, den Sportverein, die Arztpraxis um die Ecke — und erstelle ein unaufgefordertes Redesign. Kennzeichne es klar als Konzeptarbeit. Das zeigt Initiative, Kreativität und handwerkliches Können.
Pro-Bono-Projekte
Vereine, gemeinnützige Organisationen und Initiativen brauchen oft dringend eine moderne Website und haben kein Budget dafür. Biete deine Hilfe an. Du bekommst ein echtes Projekt mit echten Anforderungen — und eine Referenz, die du zeigen darfst.
Mehr Strategien für den Einstieg findest du in unserem Guide Webdesign Aufträge bekommen.
Persönliche Projekte
Side Projects, Experimente und kreative Spielwiesen sind legitime Portfolio-Stücke. Ein fiktiver Online-Shop, eine Landing Page für ein erfundenes Produkt oder eine interaktive Microsite — solange die Qualität stimmt, ist die Herkunft zweitrangig.
Technische Umsetzung: Wo dein Portfolio hosten?
Eigene Domain ist Pflicht
Dein Portfolio muss auf einer eigenen Domain liegen. “maxmustermann.de” oder “mustermann-webdesign.de” — keine Subdomain eines Baukastens. Du bist Webdesigner. Deine Website ist deine Visitenkarte.
Welche Technik?
Das hängt von deinen Skills ab:
- Statische Seite (Astro, Hugo, Eleventy): Schnell, günstig, sicher. Perfekt, wenn du Entwicklungskenntnisse hast.
- WordPress: Flexibel und erweiterbar. Sinnvoll, wenn du ohnehin WordPress-Projekte anbietest.
- Baukästen (Squarespace, Webflow): Schnell aufgesetzt, aber als Webdesigner solltest du zeigen, dass du mehr kannst.
Performance zählt
Dein Portfolio muss schnell laden. Unter zwei Sekunden, keine Ausreden. Wenn du als Webdesigner keine performante Website hinbekommst, warum sollte ein Kunde dich beauftragen? Optimiere Bilder, minimiere JavaScript und nutze modernes Hosting.
Aufbau einer überzeugenden Case Study
Eine Case Study ist das Herzstück deines Portfolios. So baust du sie auf:
1. Projektzusammenfassung
Zwei bis drei Sätze: Wer war der Kunde, was war das Ziel, was hast du geliefert? Das ist der Einstieg — er muss neugierig machen.
2. Herausforderung beschreiben
Was war die Ausgangssituation? Langsame Website, keine mobilen Nutzer, schlechte Conversion? Je konkreter du das Problem beschreibst, desto besser versteht der Leser den Wert deiner Arbeit.
3. Deine Lösung zeigen
Hier kommen die Visuals: Screenshots, Vorher-Nachher-Vergleiche, Wireframes, Design-Entscheidungen. Erkläre, warum du bestimmte Entscheidungen getroffen hast. Das zeigt strategisches Denken.
4. Ergebnisse präsentieren
Messbare Resultate sind Gold wert. “Ladezeit von 6 auf 1,8 Sekunden reduziert.” “Anfragen über das Kontaktformular um 140 % gesteigert.” Wenn du keine Zahlen hast, beschreibe qualitative Verbesserungen.
5. Kundenzitat einbinden
Ein kurzes Testimonial vom Kunden rundet die Case Study ab. Ein Satz reicht. Frag aktiv danach — die meisten Kunden helfen gerne.
Häufige Fehler bei Webdesign-Portfolios
Vermeide diese typischen Stolperfallen:
- Nur Screenshots, kein Kontext: Bilder ohne Erklärung sagen nichts über deine Arbeitsweise aus.
- Veraltete Projekte: Websites von vor fünf Jahren zeigen nicht, was du heute kannst.
- Keine Zielgruppe: Wenn du alles für jeden zeigst, sprichst du niemanden an.
- Fehlender Call-to-Action: Jede Seite muss den Besucher zur Kontaktaufnahme führen.
- Schlechte Performance: Ironie pur — ein langsames Portfolio eines Webdesigners.
- Zu viel Text, zu wenig Visuelles: Dein Portfolio soll zeigen, nicht erklären.
So präsentierst du verschiedene Projekttypen
Nicht jedes Projekt lässt sich gleich präsentieren. Hier ein paar Tipps für unterschiedliche Projektarten:
Corporate Websites
Zeige die Startseite, eine Unterseite und die mobile Ansicht. Betone Nutzerführung, Informationsarchitektur und Markenkonsistenz. Wenn du Zugriff auf Analytics hast, nenne Kennzahlen wie Absprungrate oder Verweildauer.
Online-Shops
E-Commerce-Projekte leben von Conversion-Daten. Zeige den Produktkatalog, den Checkout-Prozess und — falls vorhanden — Umsatz- oder Conversion-Verbesserungen. Die Komplexität eines Shop-Projekts spricht für sich.
Landing Pages
Landing Pages sind ideal, um Conversion-Optimierung zu demonstrieren. Zeige A/B-Test-Ergebnisse, wenn du sie hast. Erkläre deine Entscheidungen bei Headline, CTA-Platzierung und visueller Hierarchie.
Redesign-Projekte
Vorher-Nachher-Vergleiche sind hier dein stärkstes Werkzeug. Stelle die alte und neue Version gegenüber und erkläre, welche Probleme du gelöst hast. Das ist besonders wirkungsvoll, weil der Unterschied sofort sichtbar wird.
Wenn du wissen willst, worauf Kunden bei der Auswahl eines Webdesigners achten, lies unseren Artikel Professionellen Webdesigner finden.
SEO für dein Portfolio
Dein Portfolio sollte nicht nur direkt überzeugen, sondern auch über Google gefunden werden. Grundlegende SEO-Maßnahmen:
- Aussagekräftige Seitentitel und Meta-Beschreibungen für jede Case Study.
- Alt-Texte für alle Bilder — beschreibe, was zu sehen ist.
- Schnelle Ladezeiten — ein Core-Web-Vitals-Signal, das Google belohnt.
- Lokale Keywords — wenn du regional arbeitest, erwähne deinen Standort.
Wie der gesamte Webdesign-Prozess aussehen sollte, haben wir in einem separaten Artikel aufgeschlüsselt.
Portfolio-Struktur: Der ideale Seitenaufbau
Ein durchdachter Aufbau führt Besucher systematisch zur Kontaktaufnahme. Diese Reihenfolge hat sich bewährt:
- Startseite mit Positionierung: Ein klarer Satz, der sagt, was du machst und für wen. Darunter zwei bis drei Highlight-Projekte.
- Projektübersicht: Alle Case Studies auf einen Blick, idealerweise filterbar nach Branche oder Projekttyp.
- Einzelne Case Studies: Detailseiten mit dem oben beschriebenen Aufbau.
- Über mich: Deine Geschichte, deine Spezialisierung, dein Arbeitsprozess.
- Kontaktseite: Formular, E-Mail, optional Telefonnummer und Kalender-Buchungslink.
Jede dieser Seiten sollte einen sichtbaren Button oder Link zur Kontaktseite enthalten. Mache es dem Besucher so einfach wie möglich, den nächsten Schritt zu gehen.
Dein Portfolio ist nie fertig
Ein gutes Portfolio ist ein lebendes Dokument. Es wächst mit dir, verändert sich mit deiner Positionierung und wird mit jedem neuen Projekt stärker. Setze dir einen festen Rhythmus — zum Beispiel quartalsweise — um dein Portfolio zu überprüfen und zu aktualisieren.
Starte lieber mit drei soliden Projekten als ewig auf das perfekte Portfolio zu warten. Dein nächster Kunde wartet nicht.
Du suchst Inspiration oder willst sehen, wie andere Webdesign-Freelancer sich präsentieren? Stöbere durch unsere Freelancer-Profile und finde Beispiele, die dich weiterbringen.