Webdesigner Portfolio: Beispiele & Aufbau 2026
- Ein Webdesigner-Portfolio zeigt lokalen Kunden, dass du ihr konkretes Problem lösen kannst. Design allein überzeugt Handwerker oder Friseure selten, der Nutzen zählt. Ohne eigene Kundenprojekte baust du es mit offen gekennzeichneten Demo-Websites für reale Betriebe, etwa mit LumaSite erstellt. Entscheidend sind drei bis fünf Case Studies mit Vorher-Nachher-Vergleich, ein sichtbarer Preis und ein klarer Call-to-Action.
Was ist ein Webdesigner-Portfolio und wofür brauchst du es wirklich?
Ein Webdesigner-Portfolio ist eine Sammlung deiner besten Arbeitsproben, erreichbar über einen einzigen Link. Im Unterschied zum Lebenslauf listet es keine Skills auf, es belegt sie. Ein CV sagt „Ich kann responsive Design und UX/UI Design“. Ein Portfolio zeigt die fertige Website, den Vorher-Nachher-Vergleich und im besten Fall ein Testimonial der Person, die dafür bezahlt hat.
Der eigentliche Zweck ist Vertrauen, nicht Ästhetik. Ein Friseursalon, der eine neue Website braucht, kann dein CSS nicht beurteilen. Er beurteilt, ob die Seiten in deinem Portfolio aussehen wie etwas, das zu seinem Betrieb passen könnte. Genau deshalb scheitern viele technisch brillante Portfolios bei lokalen Kunden: Sie zeigen Design für andere Designer, nicht für Menschen, die eine Website kaufen wollen.
Für eine tiefere Schritt-für-Schritt-Anleitung zum Aufbau eines verkaufsstarken Portfolios lohnt sich der Guide zum Portfolio-Website-Design als Ergänzung zu diesem Artikel.
*Weiterlesen: Portfolio Online erstellen: Tools, Kosten & Recht 2026*
*Weiterlesen: Creative Portfolio: Aufbau, Beispiele, Tipps für Freelancer*
Beispiele für starke Webdesigner-Portfolios und was sie richtig machen
Gute Portfolios unterscheiden sich stark je nachdem, wen sie überzeugen sollen. Ein Agentur-Recruiter, ein Direktkunde und ein Handwerksbetrieb lesen dieselbe Seite völlig unterschiedlich.
UX/UI-Portfolios für Agenturbewerbungen
Agenturen wollen den Denkweg sehen, nicht nur das Ergebnis. Typische UX/UI-Portfolios zeigen Wireframes, User-Flows und Research-Notizen neben dem fertigen Interface, weil Hiring-Manager prüfen, wie jemand ein Problem zerlegt. Adobe betont in seinen Leitfäden zu Grafikdesign-Portfolios genau dieses Prinzip: Process work proves that your final design wasn't accidental. It shows critical thinking, practice, and creative exploration. You can include early drafts, wireframes, sketches, or alternative concepts to demonstrate how your ideas evolved.
Die Lektion für Einsteiger: Wenn du dich bei Agenturen bewirbst, brauchst du Case Studies mit Problemstellung, Recherche und Entscheidungsbegründung. Reine Bildschirmfotos reichen hier nicht.
Freelancer-Portfolios für Direktkunden
Direktkunden kaufen Ergebnisse, keinen Prozess. Ein Freelancer, der Soloselbstständige und kleine Firmen bedient, zeigt lieber die Vorher-Nachher-Ansicht einer Website plus eine Zahl, etwa mehr Anfragen über das Kontaktformular, statt zehn Wireframe-Screenshots. Die Sprache ist einfacher, der Fokus liegt auf Geschäftsnutzen statt Designtheorie.
Business-orientierte Portfolios für lokale Kunden
Diese Portfolios sprechen kaum Design-Vokabular. Sie zeigen Branchenbeispiele wie Friseursalon, Malerbetrieb oder Architekturbüro, jeweils mit einer kurzen, konkreten Formulierung des Nutzens, etwa „neue Online-Terminbuchung reduziert Anrufe während der Stoßzeiten“. Pixelgenauigkeit interessiert hier niemanden. Verständlichkeit schon.
Die Struktur, die bei lokalen Kunden wirklich konvertiert
Die Reihenfolge der Abschnitte entscheidet, ob ein Handwerker weiterliest oder abspringt. Above the Fold, also der sichtbare Bereich ohne Scrollen, muss sofort klarmachen, wem du hilfst und wie.
| Abschnitt | Zweck | Konkreter Inhalt |
|---|---|---|
| Hero | Positionierung in 3 Sekunden | „Websites für Handwerksbetriebe in [Region], online in 2 Wochen“ |
| Vorher/Nachher | Beweis durch Kontrast | Screenshot der alten Seite neben der neuen |
| Case Studies | Vertrauen durch Nachvollziehbarkeit | 3 bis 5 Projekte mit Problem, Lösung, Ergebnis |
| Testimonials | Soziale Bestätigung | Ein bis zwei Sätze, Name und Betrieb, kein Design-Jargon |
| Preis oder Einstiegsangebot | Reduziert Hemmschwelle zur Kontaktaufnahme | Grober Preisrahmen oder Paketübersicht |
| Call-to-Action | Nächster Schritt | Telefonnummer, Formular oder Terminbuchungslink |
Fehlt der letzte Punkt, verliert selbst das schönste Portfolio Anfragen. Besucher, die nicht wissen, wie sie Kontakt aufnehmen sollen, schließen den Tab.
Das Henne-Ei-Problem: Portfolio ohne echte Kundenprojekte
Kein Kunde ohne Portfolio, kein Portfolio ohne Kunde. Der Ausweg ist, Demo-Projekte für reale, existierende Betriebe zu bauen, bevor ein Auftrag überhaupt besteht.
Nimm als Beispiel einen Frisörsalon namens „Haarwerk“ in einer mittelgroßen Stadt, der laut Google-Suche keine eigene Website hat. Mit LumaSite lässt sich in wenigen Minuten ein kompletter Entwurf mit Texten, Bildern und Terminbuchungs-Sektion generieren, inklusive Vorschau-Link zum Teilen. Diesen Entwurf passt du mit eigenen Anpassungen an Farben und Struktur an und stellst ihn als Case Study ins Portfolio. Kein Auftrag, kein Honorar, aber ein echtes, vorzeigbares Stück Arbeit für eine konkrete Branche.
Um passende Betriebe für solche Demo-Projekte zu finden, hilft die Methodik aus dem Beitrag zum Finden von Betrieben ohne Website.
Mockups ehrlich kennzeichnen
Jedes Demo-Projekt gehört sichtbar als Konzeptentwurf markiert, nicht als abgeschlossener Kundenauftrag. Ein einziger Satz reicht: „Konzeptentwurf, kein bezahltes Kundenprojekt“. Lokale Branchen sind klein, Betriebsinhaber kennen sich oft gegenseitig. Wer ein Mockup als echten Auftrag ausgibt und dabei auffliegt, verliert mehr Vertrauen, als er durch den Trick gewonnen hat. Ehrlichkeit kostet hier nichts, Lügen dagegen schon.
Erste echte Projekte gegen Referenz oder reduzierten Preis gewinnen
Das erste echte Projekt lohnt sich eher zum reduzierten Preis als gratis. Gratisarbeit signalisiert, dass die eigene Leistung nichts wert ist, und macht es schwer, beim nächsten Kunden einen normalen Preis zu verlangen. Realistischer ist ein Projekt zu 150 oder 250 Euro statt der üblichen 600 bis 1.000 Euro, im Gegenzug für ein Testimonial und die Erlaubnis, das Projekt mit echtem Namen im Portfolio zu zeigen.
Wer dabei nebenberuflich startet, sollte die steuerlichen und rechtlichen Grundlagen kennen, bevor das erste Honorar fließt. Der Beitrag zum nebenberuflichen Einstieg als Webdesigner deckt das ab. Für den Verkaufsprozess selbst, also wie aus dem fertigen Portfolio tatsächlich zahlende Aufträge werden, lohnt sich die Anleitung zum Verkauf von Websites an lokale Betriebe.
Was Handwerker, Friseure & Architekten in einem Portfolio sehen wollen
Lokale Betriebe bewerten ein Portfolio nicht nach Designtrends, sondern danach, ob sie sich selbst darin wiedererkennen. Ein Agentur-Recruiter sucht Prozesstiefe, ein Handwerksbetrieb sucht sich selbst.
| Kriterium | Design-Agentur oder Recruiter erwartet | Lokaler Betrieb erwartet |
|---|---|---|
| Prozess-Dokumentation | Wireframes, Research, Entscheidungslogik | Spielt kaum eine Rolle |
| Branchenbezug | Nicht entscheidend | Sehr wichtig, am liebsten die eigene Branche |
| Preisangabe | Unüblich | Reduziert Hemmschwelle deutlich |
| Sprache | Fachjargon akzeptiert | Klartext ohne UX/UI-Vokabular |
| Mobile-Darstellung | Wird vorausgesetzt | Wird aktiv getestet, oft auf dem eigenen Handy |
| Kontaktweg | E-Mail reicht | Telefonnummer sichtbar, am liebsten above the fold |
Lokale Relevanz zählt doppelt. Ein Architekturbüro aus derselben Region, das im Portfolio erwähnt wird, wirkt glaubwürdiger als zehn generische Beispiele aus unbekannten Städten. Wer zusätzlich mit Local SEO arbeitet, etwa durch Ortsnamen in Case-Study-Titeln, erhöht die Chance, dass potenzielle Kunden das Portfolio überhaupt über Google finden.
Tools zum Erstellen deines Portfolios
Die Wahl des Tools hängt davon ab, wer dein Portfolio später sieht, nicht davon, welches Tool am meisten Funktionen hat. Bewertet wurden die folgenden Optionen nach drei Kriterien: Einstiegspreis laut aktueller Anbieter-Preisseite, Eignung für Nicht-Designer-Zielgruppen und wie schnell sich eine erste Version online bringen lässt.
| Tool | Einstiegspreis | Stärke | Grenze |
|---|---|---|---|
| Adobe Portfolio | In den meisten bezahlten Creative-Cloud-Abos enthalten, kein separates Abo verfügbar | Direkte Anbindung an Lightroom und Behance, gute Bildqualität | Wirkt für reine Business-Zielgruppen oft zu kunstlastig |
| Wix | Ab rund 17 Euro pro Monat (Light-Plan) bei jährlicher Zahlung, höhere Pläne bis über 150 Euro laut Wix-Preisseite | Große Auswahl an Portfolio- und CV-Templates, einfache Bedienung | Templates wirken teils austauschbar ohne Anpassung |
| WordPress | Software kostenlos, Hosting meist 3 bis 10 Euro monatlich | Volle Kontrolle, beliebig erweiterbar, gut für eigene Nische | Erfordert mehr technisches Einrichten als Baukästen |
| LumaSite für Demo-Projekte | Kostenlose Generierung einer Vorschau, Hosting-Kosten erst bei Veröffentlichung | Fertige, mehrsprachige Demo-Website in Minuten als Case-Study-Grundlage | Ist kein Portfolio-Builder selbst, nur Quelle für Demo-Inhalte |
Für Einsteiger ohne Kundenprojekte ist die Kombination oft am schnellsten: Mit LumaSite eine realistische Demo-Website für einen lokalen Betrieb generieren, Screenshots davon in Adobe Portfolio oder WordPress als Case Study einbetten, fertig ist die erste vorzeigbare Arbeit.
Ehrliche Erwartungen: Was ein Portfolio NICHT leistet
Ein Portfolio bringt keine Kunden von allein. Es unterstützt den Verkaufsprozess, ersetzt aber nicht die aktive Ansprache. Wer eine Website online stellt und wartet, wartet oft monatelang auf die erste Anfrage.
Das Portfolio ist der Beleg, nicht die Akquise selbst. Betriebe ohne eigene Website suchen selten aktiv nach einem Webdesigner, sie merken meist gar nicht, dass ihnen etwas fehlt. Ohne direkten Kontakt, sei es per Telefon, auf Empfehlung oder über ein lokales Netzwerk, bleibt das beste Portfolio unsichtbar. Dabei gilt rechtlich: Werbliche Kalt-E-Mails an Betriebe ohne vorherige ausdrückliche Einwilligung sind nach § 7 Abs. 2 Nr. 2 UWG grundsätzlich unzulässig, auch im B2B-Bereich. Ein Werbeanruf bei Gewerbetreibenden kann dagegen im Rahmen einer mutmaßlichen Einwilligung in bestimmten Fällen zulässig sein, das ist aber im Einzelfall zu prüfen und ersetzt keine rechtliche Beratung.
Ebenso unrealistisch: ein Portfolio allein ersetzt kein Freelancer-Branding und keine klare Nische. Wer „alles für alle“ anbietet, überzeugt niemanden besonders. Ein Portfolio mit fünf verschiedenen Branchen wirkt beliebiger als eines, das sich klar auf Handwerksbetriebe oder Architekturbüros festlegt.
FAQ
Was muss ein Webdesigner können, um ein gutes Portfolio zu bauen?
Technisches Können ist zweitrangig. Grundkenntnisse in Layout und responsive Design reichen aus, entscheidend ist, die eigenen Projekte als Geschichte mit Problem, Lösung und Ergebnis erzählen zu können. Ein mittelmäßig gecodetes Portfolio mit klarer Kommunikation schlägt ein technisch perfektes Portfolio ohne erkennbaren Kundennutzen.
Wie sieht ein gutes Portfolio aus?
Es beginnt mit einer klaren Positionierung above the fold, gefolgt von drei bis fünf Case Studies nach dem Muster Problem, Lösung, Ergebnis. Testimonials und ein direkter Kontakt-Call-to-Action runden es ab. Ohne diesen letzten Schritt bleiben viele Besucher unentschlossen.
Gibt es ein Beispiel für ein Portfolio eines Mediengestalters?
Ja, allerdings unterscheiden sich Ausbildungsportfolio und Business-Portfolio stark. Ein Ausbildungsportfolio für Mediengestalter zeigt oft breit gefächerte Schulprojekte zur Notenvergabe. Ein Freelancer-Portfolio dagegen fokussiert auf wenige, zielgerichtete Projekte für eine bestimmte Zielgruppe, meist mit erkennbarem Geschäftsergebnis statt reiner Aufgabenerfüllung.
Was ist ein digitales Portfolio?
Ein digitales Portfolio ist eine Online-Sammlung von Arbeitsproben, abrufbar über einen Link statt in physischer Mappenform. Der Vorteil liegt in der sofortigen Teilbarkeit per E-Mail, Social Media oder Visitenkarten-QR-Code, ohne dass jemand eine Mappe physisch durchblättern muss.
Wie baue ich ein Portfolio ohne echte Kundenprojekte?
Mit klar gekennzeichneten Demo-Projekten für reale, existierende lokale Betriebe. Ein Tool wie LumaSite erzeugt in Minuten eine fertige Beispielwebsite für einen konkreten Betrieb, die sich als Konzeptentwurf im Portfolio zeigen lässt. Entscheidend ist die ehrliche Kennzeichnung als Demo, nicht als bezahlter Auftrag.
Reicht ein gutes Portfolio aus, um Kunden zu gewinnen?
Nein. Ein Portfolio unterstützt den Verkaufsprozess, ersetzt aber keine aktive Kundenansprache. Ohne Telefonate, Netzwerk oder Empfehlungen bleibt selbst ein starkes Portfolio meist unentdeckt, weil Betriebe ohne Website selten von sich aus danach suchen.
Weiterlesen
Design Portfolio erstellen: Guide für Freelancer
Creative Portfolio: Aufbau, Beispiele, Tipps für Freelancer
Portfolio-Website erstellen: Leitfaden für Freelancer
Webdesign Portfolio: 15 Beispiele, die Kunden wirklich gewinnen
Jede Woche ein ehrlicher Ratgeber
Kostenlos in dein Postfach — Kunden finden, Websites verkaufen, sauber starten. Kein Spam, mit einem Klick abbestellbar.
✓ Schau in dein Postfach — ein Klick auf den Bestätigungslink, fertig.