Die besten UX/UI-Portfolios sind selbst ein UX-Test. Der Besucher ist ein Personalverantwortlicher oder ein Kunde, die Aufgabe lautet: „Diesen Designer in weniger als zwei Minuten verstehen“, und die Website besteht den Test oder nicht.
Die Designer, die zum Vorstellungsgespräch eingeladen werden, haben selten die aufwendigste Website. Sie haben die übersichtlichste: Die Rolle wird in einem Satz beschrieben, zwei oder drei Fallstudien veranschaulichen den Lösungsweg, und das Layout ist so gestaltet, dass es den Fokus nicht auf die Arbeit selbst richtet.
Nachfolgend finden Sie acht UX- und UI-Portfolios, die von professionellen Designern erstellt wurden. Pixpa, nach Schwerpunkt gruppiert und aus einer größeren Galerie ausgewählt UI/UX-Portfoliobeispiele.
Jedes bietet Design-, Farb- und Schriftartoptionen, die es wert sind, genauer betrachtet zu werden, und eine Entscheidung, die es wert ist, übernommen zu werden.
Was ein überzeugendes UX/UI-Portfolio ausmacht
Ein starker UI/UX-Portfolio Beschreibt in einer Zeile, welcher Designertyp Sie sind, und zeigt zwei oder drei Fallstudien, die vom Problem zum Ergebnis führen.
Es sorgt für eine unaufdringliche Benutzeroberfläche, sodass die eigentliche Arbeit auf der Seite im Vordergrund steht. Es lädt schnell und ist auch auf Smartphones gut lesbar.
Die unten aufgeführten Websites haben sich ihren Platz durch vier Kriterien verdient: wie gut das Design die Arbeit unterstützt, wie klar die Fallstudien strukturiert sind, ob die Website ihren eigentlichen Zweck erfüllt, eine Stelle oder einen Kunden zu gewinnen, und wie gut sie auf Mobilgeräten funktioniert.
Portfolios von UI/UX-Designern
Bei diesen vier handelt es sich um UX/UI-Portfolios von Einzelbeitragenden: ein Designer, eine Handvoll Fallstudien und ein Layout, das darauf ausgelegt ist, einen Personalverantwortlichen schnell in die Arbeit zu bringen.
Elizabeth Lodvikov
UI/UX-Design. New York.
Elizabeth Lodvikov Das Bild beginnt auf einem warmen cremefarbenen Hintergrund, wobei ihre Rolle in einer anthrazitgrauen Zeile und ein bogenförmig beschnittenes Porträt auf der rechten Seite angegeben ist.
Die Farbpalette ist bewusst zurückhaltend: Creme, anthrazitfarbene Schrift und ein einzelner, dezenter Terrakotta-Akzent auf dem „Sag Hallo“-Button.
Diese Wärme wirkt weitaus menschlicher als der standardmäßige Dunkelmodus, und die klare geometrische Sans-Serif-Schrift lenkt den Fokus auf das, wonach der Besucher sucht.
Gaelle Monin
UX/UI-Design. London.
Gaelle Monin Die Homepage präsentiert die Arbeit. Unter einem dünnen, luftigen Logo und dem mit einem handgezeichneten, pfirsichfarbenen Textmarker unterstrichenen Tag „UX/UI Design“ gelangt man direkt in eine Projektübersicht – ohne vorher abgelesene Biografie.
Die Farbpalette bleibt nahezu weiß, sodass die Farbe aus den Inhalten selbst entsteht: ein Finanz-Dashboard mit einem Ausgaben-Donut, eine Rezept-App mit Importfunktion, mobile Bildschirme in Geräte-Mockups. Ein warmer Akzent verhindert, dass das Raster steril wirkt.
Sasank Anipeddi
UX/UI-Design. Maryland.
Sasank Anipeddi betreibt eine düstere, redaktionelle Website, die in einer Serifenschrift gestaltet ist, was in einem Bereich, der standardmäßig auf serifenlose Schriften setzt, selten ist.
Der fast schwarze Hintergrund, der weiße Text und die grüne Hervorhebung seines Namens verleihen dem Ganzen einen ruhigen, selbstbewussten Ton, der eher an ein Magazin als an eine Vorlage erinnert.
Die Navigation unterteilt Fallstudien, Blog und GitHub in separate Zielorte unterteilt, und jede Fallstudie trägt Methodentags (Nutzerforschung, Wettbewerbsanalyse, Usability-Tests), sodass die Struktur der Arbeit bereits vor dem Öffnen erkennbar ist.
Matthew Park
UX-Design und Konzeptkunst. Sunnyvale.
Matthew Park Die Startseite wird in eine farblich abgesetzte Galerie verwandelt. Jedes Projekt wird in einer eigenen, randlosen Kachel in einer anderen, gesättigten Farbe präsentiert – Blau, Türkis, Magenta, Indigo, Beige – und enthält jeweils ein Laptop- oder Smartphone-Mockup des Produkts.
Es ist auf die richtige Art und Weise auffällig, denn die Farbe dient der Orientierung und die dahinter steckende Arbeit ist echte SaaS: Lacework, Endgame, XonaDas Logo ist eine unauffällige serifenlose Großbuchstabenschrift, die den Kacheln die Hauptrolle überlässt.
Produktdesigner und Designleiter
Produkt- und Strategierollen verkaufen Urteilsvermögen ebenso wie handwerkliches Können, daher stellen diese beiden Rollen die Arbeit in den Vordergrund und vermitteln einen klaren Standpunkt.
Marcin Spiewak
Produktdesign. Berlin.
Marcin Spiewak Es beginnt mit einem fettgedruckten Helden auf dunkelgrauem Hintergrund, der alle seine bisherigen Berufsbezeichnungen auflistet: Grafikdesigner, Webdesigner, UI-Designer, UX-Designer. Anschließend werden alle durchgestrichen, bis nur noch „Produktdesigner“ übrig bleibt, wobei „Berlin“ grün hervorgehoben ist. Es ist eine in Typografie erzählte Karrieregeschichte in einem einzigen Satz.
Ein ganzseitiges, ungestelltes Foto von ihm im Feld lockert die dunkle Farbpalette auf, und Projektkacheln verlinken zu Figma Für alle, die die volle Tiefe erleben wollen.
Michael Collins
Produktdesign und -strategie.
Michael Collins Die Website präsentiert sich minimalistisch und zentriert in einer klaren serifenlosen Schriftart auf cremeweißem Hintergrund, wobei ein dunkelroter Schriftzug den einzigen Farbakzent setzt. Diese Zurückhaltung ist strategisch gewählt.
Das Projektraster besteht aus randabfallenden Fotos mit darübergelegten, erkennbaren Kundennamen. Silvertree, ExxonMobil, lululemonDie Glaubwürdigkeit resultiert also aus den Logos, nicht aus dem Layout. Ein kleines Schlosssymbol kennzeichnet die Fallstudien, die nur eingeschränkt zugänglich sind – ein dezenter Hinweis auf unternehmensweite Geheimhaltungsvereinbarungen.
Multidisziplinäre Designer
Wenn eine Praxis mehrere Disziplinen umfasst, wirkt das Risikomanagement wie eine Ansammlung mehrerer zusammengefügter Portfolios. Diese hier sorgt für Kohärenz.
Forest
Multimedia- und UI-Design.
Forest setzt auf einen überdimensionalen, typografisch geprägten Hero-Schriftzug: „Hi I'm Forest!“, riesig in fettem Schwarz auf hellgrauem Grund, mit einem horizontalen Lauftext, der seine Disziplinen auflistet: UI Design, Motion Graphics, Grafikdesign, Videobearbeitung.
Die monochrome Farbpalette verhindert, dass die vielfältigen Inhalte unübersichtlich wirken, und die Tickersignale decken ein breites Spektrum ab, ohne ein überladenes Kompetenzraster zu erzeugen. Die Benutzeroberfläche ist neben Animationen und Grafiken angesiedelt, anstatt einen reinen UX-Fokus zu propagieren, und die Website kommuniziert dies offen.
Isabella Zelasko
UX/UI- und Medienkunstdesign. Phoenix.
Isabella Zelasko Das Unternehmen arbeitet in den Bereichen UX/UI, UX-Forschung, Spieledesign und interaktive Medien, und die Website präsentiert all dies auf einem tiefvioletten Hintergrund mit cremefarbener Serifenschrift, die eher an eine Galerie als an eine Vorlage erinnert.
Die Projekte werden nacheinander angezeigt, jedes mit den zugrunde liegenden Disziplinen und Werkzeugen gekennzeichnet (Game Design + UI Design oder Web Design, HTML und CSS), und ein sechsteiliges Kompetenzraster gliedert die breite Praxis in überschaubare Fähigkeitsbereiche.
Es handelt sich um Arbeiten aus der frühen Karrierephase, einen Prototyp für eine Spieloberfläche und ein Webprojekt im Rahmen des Bachelorstudiums, aber sie sind mit einer Klarheit präsentiert, die den meisten Portfolios von Nachwuchswissenschaftlern fehlt.
Was die besten UX/UI-Portfolios gemeinsam haben
Betrachtet man alle acht Beispiele, so tauchen immer wieder dieselben wenigen Entscheidungen auf. Keine davon hat mit Geschmack zu tun. Es geht ihnen darum, einen Besucher schnellstmöglich mit dem Werk vertraut zu machen.
- Die Rolle wird in einem Satz beschrieben. Lodvikov und Sasank Anipeddi Beide benennen ihre Tätigkeit bereits im ersten Satz, sodass niemand raten muss, ob sie die richtigen Designer sind.
- Auf der Startseite steht die Arbeit im Vordergrund, nicht eine Biografie. Gaelle Monin passt direkt in ein Projektraster und Matthew Park Er verwendet Farbblöcke, sodass das Werk das Erste ist, was man sieht.
- Fallstudien zeigen die Methode, nicht nur die Bildschirme. Sasank Anipeddi's Methodentags und Marcin Spiewak's verlinkt Figma Die Dateien beweisen, dass hinter den Pixeln Gedanken steckten, und genau das kauft ein Personalmanager.
- Benannte Werke überzeugen. Michael Collins führt mit ExxonMobil und lululemon und Matthew Park bei echten SaaS-Produkten, denn erkennbare Arbeit schafft schneller Vertrauen als jedes Layout.
- Eine visuelle Idee, festgehalten. Jede hier vertretene, überzeugende Website legt sich auf eine einheitliche Farbpalette und ein einheitliches Schriftsystem fest, anstatt drei Ästhetiken zu vermischen und dadurch unentschlossen zu wirken.
- Geschwindigkeit und Mobilität sind nicht optional. Die meisten ersten Feedbackgespräche finden zwischen Meetings auf dem Smartphone statt, daher ist eine Ansammlung von Desktop-Screenshots dort unleserlich, wo es am wichtigsten ist.
Wie Sie Ihr Portfolio nach Zielen strukturieren
Ein Portfolio, das auf die Erlangung einer Vollzeitstelle abzielt, ist anders strukturiert als eines Akquise von freiberuflichen KundenEntscheiden Sie, wofür die Website gedacht ist, und gestalten Sie die Website dann entsprechend.
Pixpa's UI/UX-Portfolio-Vorlagen Sie basieren auf Fallstudien und Projektrastern, daher hängt die Auswahl der Zeile oben hauptsächlich davon ab, welche Abschnitte Sie aktivieren.
Häufige Fehler in UX/UI-Portfolios, die Sie vermeiden sollten
Fünf Fehler, die man leicht übersieht und die sich schnell beheben lassen, sobald man sie entdeckt hat.
- Jede Fallstudie wird mit einem Passwort geschützt. Geheimhaltungsvereinbarungen sind wichtig, aber ein Portfolio, in dem man nichts ohne vorherige Anfrage per E-Mail einsehen kann, schreckt Besucher ab, die nur dreißig Sekunden Zeit hatten. Halten Sie mindestens ein Projekt vollständig öffentlich zugänglich.
- Die Fallstudie als Tagebuch verfassen. „Zuerst habe ich die Analyse durchgeführt, dann Personas erstellt, dann Wireframes“ ist eine Aufgabenliste. Stellen Sie das Problem und das Ergebnis in den Vordergrund und lassen Sie den Prozess als Beleg im Hintergrund stehen.
- Prozessartefakte in den Vordergrund stellen. Eine Eröffnungsszene mit einer Wand aus Haftnotizen und Landkarten verbirgt den Kern der Sache. Präsentieren Sie zuerst das Ergebnis; die Recherche ist der Beweis, nicht die Schlagzeile.
- Das Vergessen des Portfolios ist an sich schon ein UX-Test. Langsame Ladezeiten, winzige Tippziele, ein Hamburger-Menü, das die einzigen beiden relevanten Seiten verdeckt. Überprüfen Sie die UX Ihres eigenen Portfolios so, wie man es bei einem Kunden tun würde.
- Ein anderes Design für die Homepage als für die Fallstudien. Die uneinheitliche Schriftart und Farbgebung zwischen dem Layout und dem eigentlichen Inhalt erweckt den Eindruck, dass die Website aus Vorlagen zusammengestellt und nicht individuell gestaltet wurde.
Wie Sie Ihr eigenes UX/UI-Portfolio erstellen
Sie müssen weder programmieren noch einen Entwickler beauftragen. Der Prozess ist kurz.
- Jetzt kostenlos testen, keine Kreditkarte erforderlich.
- Pick a Vorlage für UI/UX-Designer.
- Fügen Sie zwei oder drei Fallstudien hinzu, beginnend mit jeder schriftlichen Aufgabe. Falls Sie sich nicht sicher sind, was Sie zeigen sollen, beginnen Sie mit diesen. UX/UI-Projektideen.
- Legen Sie eine einzige Akzentfarbe und ein einheitliches Schriftartsystem fest und beschränken Sie die Navigation auf das Wesentliche.
- Verbinde deine Domain, überprüfe sie auf deinem Handy und veröffentliche sie.
Fazit
Ein UX/UI-Portfolio wird so beurteilt, wie man jede andere Benutzeroberfläche beurteilen würde: Hilft es dem Besucher, seine Aufgabe schnell zu erledigen?
Beschreiben Sie Ihre Rolle in einem Satz, präsentieren Sie zunächst zwei oder drei Fallstudien zum jeweiligen Problem, stellen Sie die Arbeit in den Vordergrund und lassen Sie das Design in den Hintergrund treten. Jede der oben genannten Websites löst einen dieser Aspekte gut. Übernehmen Sie die Lösung, nicht das Aussehen.
Geben Sie Ihren Arbeiten das Portfolio, das sie verdienen – 15 Tage lang kostenlos.
FAQs zum UX/UI-Portfolio
Wie viele Projekte sollte ein UX/UI-Portfolio enthalten?
Zwei bis vier. Tiefe schlägt Breite: Eine gründliche, umfassende Fallstudie, die zeigt, dass Ihre Denkweise mehr wert ist als sechs oberflächliche Projektgalerien.
Die Gutachter beurteilen nicht die Anzahl der Einsendungen, sondern ob Sie in der Lage sind, Probleme logisch zu lösen.
Sollten UX-Fallstudien passwortgeschützt sein?
Nur wenn eine Geheimhaltungsvereinbarung dies erfordert, und selbst dann sollte mindestens ein Projekt vollständig öffentlich zugänglich sein. Ein Portfolio, in dem nichts ohne vorherige Kontaktaufnahme einsehbar ist, verliert Besucher, die nur wenige Sekunden Zeit hatten.
Wenn der Großteil Ihrer Arbeit einer Geheimhaltungsvereinbarung unterliegt, sollten Sie ein eigenes Projekt starten, das Sie offen präsentieren können.
Was sollte die Homepage eines UX-Portfolios beinhalten?
Eine Zeile darüber, wer Sie sind und worauf Sie sich konzentrieren, ein Glaubwürdigkeitssignal, Links zu zwei oder drei Fallstudien und eine klare Kontaktmöglichkeit.
Die Missionsbeschreibung können Sie überspringen. Es gibt eine ausführlichere Liste. Elemente, die in Ihr Portfolio aufgenommen werden sollten Wenn Sie es wünschen, können Sie es tun, aber die Aufgabe der Homepage besteht darin, einen Besucher schnell zur gewünschten Arbeit zu leiten.
Muss ich programmieren können, um ein UX-Portfolio zu erstellen?
Nein. Die meisten überzeugenden UX/UI-Portfolios werden mit einem Website-Baukasten erstellt, und das spielt für einen Personalverantwortlichen keine Rolle.
Ihre Zeit ist besser investiert, wenn Sie prägnante Fallstudien schreiben, anstatt CSS zu debuggen.
Worin besteht der Unterschied zwischen einem UX-Portfolio und einem UI-Portfolio?
Ein UX-Portfolio legt den Fokus auf Prozess und Ergebnis: Problemstellung, Recherche, Entscheidungen und messbare Resultate. Ein UI-Portfolio hingegen konzentriert sich auf visuelle Gestaltung: Layout, Typografie, Farbe und Benutzeroberfläche.
Die meisten professionellen Designer zeigen beides, wobei der Schwerpunkt eher auf dem liegt, worauf ihre jeweilige Tätigkeit ausgerichtet ist.
Was kostet eine Portfolio-Website?
PixpaDie Tarife von [Name des Anbieters] beginnen bei 5.40 US-Dollar pro Monat für einen jährlichen Basistarif, und jeder Tarif beinhaltet eine 15-tägige kostenlose Testphase ohne Kreditkarte sowie eine 30-tägige Geld-zurück-Garantie. Preise für den aktuellen Tarif ist nach Stufen aufgeschlüsselt.
Welche Plattform eignet sich am besten für ein UX/UI-Portfolio?
Es gibt keine einzige beste Plattform. Pixpa Passt zu Designern, die ein Portfolio, einen integrierten Blog und ein übersichtliches Templates-System an einem Ort mit persönlichem Support wünschen.
Wenn Sie die verschiedenen Optionen abwägen möchten, finden Sie hier eine Aufschlüsselung der Die besten Website-Baukästen für UI/UX-Designer vergleicht sie nebeneinander.
Soll ich unaufgefordert eingereichte oder Konzeptprojekte zeigen?
Ja, insbesondere zu Beginn der Karriere oder beim Branchenwechsel. Ein gut strukturierter, selbstinitiierter Redesign beweist, dass man ein Problem durchdenken kann, auch wenn man noch keine veröffentlichten, anerkannten Arbeitsergebnisse vorweisen kann.
Kennzeichnen Sie es klar als Konzept.