20 beste Portfolio-Websites 2026, live überprüft und Speed-getestet

Hier sind 20 der besten Portfolio-Websites im Internet: Designer, Entwickler, ein Fotograf und ein Architekt, die ihre eigene Arbeit präsentieren, Studios und Agenturen, die ihre Arbeit verkaufen, plus einige Projekt-Websites wie ein Markenhandbuch und einen Branchenbericht. Der Geschmack entschied nicht über die Liste. Ich habe alle 20 zufällig aus 23 live, von Hand überprüften Portfolio-Websites ausgewählt, überprüft, dass jede lädt, gemessen auf einem Telefon und notiert, was Sie für Ihre eigene Website adaptieren könnten. Die Überraschung: keine der 8 Websites mit ausreichend Echtzeitbesucher-Daten erfüllt alle drei Core Web Vitals von Google, und der mittlere Lighthouse-Wert auf dem Handy liegt bei 61,5. Dies ist der Portfolio-Teil von 64 schöne Websites, live überprüft und Speed-getestet.

Wie diese 20 ausgewählt und getestet wurden

Die meisten Listen der besten Portfolio-Websites sind kuratierte Favoriten. Das sagt nichts über die Ladezeit-Kosten dieser Auswahl aus, daher nutzte ich stattdessen eine Zufallsauswahl.

• Der Vorrat: 23 live Portfolio-Websites aus einer kuratierten Design-Datenbank, die ich führe. Jede wurde von Hand überprüft, hat Desktop- und Mobile-Aufnahmen und bestand eine Verfügbarkeitsprüfung in den letzten 30 Tagen.
• Die Auswahl: 20 Websites in fester Zufallsreihenfolge, mit nicht mehr als zwei von einem Studio. Keine musste ausgetauscht werden. Nichts hier ist meine Kundenarbeit, und niemand zahlte, um enthalten zu sein.
• Die Live-Prüfung: Jede Website wurde am 31. Okt 2026 in einem Browser (Chromium) geöffnet und lud die gleiche Website, für die sie aufgeführt war.
• Der Lab-Test: Ein mobiler Lighthouse-Durchlauf pro Website zwischen 12. und 20. Okt 2026, mit Aufzeichnung des Performance-Scores, Largest Contentful Paint und Page-Größe.
• Die Echtzeitbesucher-Daten: Chrome UX Report-Zahlen für Telefone, die Google von echten Chrome-Nutzern erfasst. Eine Seite erscheint erst, wenn sie genug Besucher hat (Chrome UX Report), was viele persönliche Portfolios nie erreichen, daher zeigen 11 von 20 „keine Daten".
• Keine Rangliste: Die Reihenfolge unten ist die Durchzugsreihenfolge.

Was 20 Portfolio-Websites an Geschwindigkeit kosten

Google kennzeichnet eine Seite als gut, wenn ihr Largest Contentful Paint (LCP) 2,5 Sekunden oder weniger beträgt, ihr Interaction to Next Paint (INP) 200 Millisekunden oder weniger beträgt und ihr Cumulative Layout Shift (CLS) 0,1 oder weniger beträgt, gemessen beim 75. Perzentil der Seitenaufrufe. Eine Seite besteht die Core Web Vitals nur, wenn sie alle drei erfüllt (web.dev).

Zum Vergleich: Der Chrome UX Report vom September 2026 von Google gibt den Anteil der Origins mit guten Core Web Vitals mit 55,9 % über 18.376.044 Origins an (Chrome UX Report Release Notes). Keine der 8 hier beurteilten Portfolios besteht. Von diesen 8 verfehlen 7 das LCP-Ziel von 2,5 Sekunden, 5 reagieren zu langsam auf Tippen und 2 verschieben ihr Layout zu sehr.

Eine leichte Seite garantiert keine gute Punktzahl, und eine schwere Seite garantiert keine schlechte. Karl Barnards Portfolio wiegt 0,7 MB, erreicht aber 37 Punkte im Labor, wo der Test 908 ms Blockierungszeit während der Skriptausführung aufzeichnete. Glitch&Grit wiegt 47,4 MB und erreicht 66 Punkte. Die kleinste Seite in der Auswahl, GØDN.studio mit 0,2 MB, ist auch die einzige, die 90 oder mehr Punkte erreicht.

Das Labor und echte Besucher sind sich auch hier uneinig. Gionatan Nese erreicht 37 Punkte im Labor, doch echte Besucher sehen den Hauptinhalt in 1,2 Sekunden; die Website verfehlt nur die Reaktionsfähigkeit bei 232 ms gegenüber Googles 200 ms Grenzwert. Lighthouse ist ein Durchlauf auf einem emulierten Telefon, und wenn es mit dem Chrome UX Report in Konflikt gerät, sagt web.dev, dass die Daten echter Besucher wahrscheinlich die genauere Sicht sind (web.dev).

Womit diese 20 gebaut sind

Next.js wird auf 6 von 20 ausgeführt. Nuxt und Webflow werden auf 2 ausgeführt, und Framer, SvelteKit und WordPress auf je eine. Bei den anderen 7 konnte der Stack nicht aus dem HTML gelesen werden. Félix Péaults Fotografie-Portfolio auf SvelteKit erreicht 76 Punkte auf einer 1,4 MB großen Seite. Wenn du ein Framework für deine eigene Website auswählst, behandelt <a id="1">Astro vs Next.js</a> den Trade-off.

Was die 20 gemeinsam haben

Jede Website in der Datenbank erhält während der Überprüfung Style-Tags, und der Stack wird aus dem Live-HTML erkannt, daher handelt es sich um Zählungen, nicht um Impressionen.

• Großer Typ ist das Erkennungszeichen. 11 von 20 setzen einen Namen oder eine Überschrift in sehr großem Typ, das häufigste Tag in der Gruppe. Bei einem Portfolio ist der Name oft der ganze erste Bildschirm.
• Interaktion über Dekoration. 7 sind als interaktiv gekennzeichnet, mehr als jedes andere Stil: 3D-Szenen, Hintergründe, die auf den Cursor reagieren, und Projektionsringe, die du neu anordnen kannst. Minimal und Typografisch folgen mit je 6.
• Die Arbeit macht den Verkauf. 9 beginnen mit Fotografie und 8 mit Illustration, und die besten von ihnen zeigen ein Stück groß statt zehn klein.
• Motion ist nicht das, was sie verlangsamt. 6 laden eine Smooth-Scroll- oder Animationsbibliothek wie GSAP oder Lenis. Ihre mittlere Lab-Punktzahl beträgt 77, gegenüber 57,5 bei den anderen 14, daher erklärt Animation allein in dieser Auswahl nicht die langsamen Punktzahlen.

Die 20 Portfolio-Websites

Alle 20 erscheinen unten in Reihenfolge der Auswahl, mit Messungen zuerst, dann ein genauerer Blick auf jede mit einer Homepage-Erfassung, dem Muster, das es wert ist zu leihen, und dem Trade-off zum Verstehen. Zahlen für echte Besucher stammen von Telefonen; „keine Daten" bedeutet, dass Google zu wenige Besucher zum Melden hatte. Für deine eigene Website siehe Portfolio-Webdesign.

1. Hobro Digital

Der Name sitzt in einer sehr schweren, breiten, serifenlosen Schrift in Weiß, fast von Kante zu Kante über einem unscharfen, eng zugeschnittenen Gesicht in tiefem Rot und Bernsteinton gestreckt. Die warme Farbe bleibt innerhalb einer Familie, sodass die weiße Schrift sofort lesbar ist. Eine kleine, dicktengleiche Zeile darunter gibt den Agentur-Deskriptor und den Ort an, und der Kontrast zwischen massiver Display-Schrift und leichtgewichtiger Schreibmaschinen-ähnlicher Schrift hält die Hierarchie klar.

So kannst du es adaptieren: Setze deinen Studio-Namen in einer einzigen schweren Display-Schrift in voller Breite über ein unscharfes, warm getöntes Foto oder Video-Standbild, und kombiniere es mit einer kleinen, dicktengleichen Deskriptor-Zeile.

Pass auf: Die Seite ist schwerer als durchschnittlich und schneidet in den Lab-Ergebnissen mittelmäßig ab. Echte Besucher erleben auch langsames Laden des Hauptinhalts und träge Reaktion auf Tippen und Klicks, was zu einem Vollbild-Hintergrund mit skriptgesteuerter Animation passt.

Intern entworfen. Besuche hobro.digital.

2. Valentin Gassend

Der Name leistet die Arbeit. Eine schwere, hochgewachsene, schmale Serifenlose stapelt sich in einen engen Block, und das G sowie das abschließende N wechseln zu einer grünen Pinsel-Schrift, was einem schlichten Wortmarken-Design Persönlichkeit gibt. Dünne grüne Gitterlinien teilen den blassrosa Untergrund in Zellen auf, während kleine Großbuchstaben-Beschriftungen in den Ecken sitzen und das Zentrum freilassen.

So kannst du es adaptieren: Setze deinen Namen in riesiger Größe in einer einzigen schweren Schrift, ersetze ein paar Buchstaben durch eine Skript-Schrift in einer Akzentfarbe, und wiederhole diese Farbe in dünnen Gitterlinien dahinter.

Pass auf: Der Lab-Test bewertete die Seite als langsam, obwohl sie leicht ist, und Google hat zu wenig echte Besucherdaten, um zu bestätigen, wie sie für tatsächliche Nutzer funktioniert.

Intern entworfen. Besuche valentingassend.com.

3. Vivien's Creative

Ein randloses Dünen-Foto in blassem Ton füllt den Bildschirm, mit zwei Wanderern in dunklen Mänteln klein gegen den Sand positioniert, was der Seite Maßstab und Ruhe gibt. Das Intro sitzt in einer leichten, buchähnlichen Serifenschrift über dem graugrünen Himmel, während der Name darunter eine riesige, schwere weiße Serifenlose verwendet, die von Kante zu Kante läuft. Die kleinen großgeschriebenen Menü-Links bleiben aus dem Weg, sodass das Bild und der Name die Eröffnung tragen.

So kannst du es adaptieren: Kombiniere ein randloses Foto mit einer übergroßen Wortmarke, die am unteren Rand abgeschnitten ist, und einer kurzen Serif-Einleitung darüber, sodass ein kleines Studio von einem guten Bild und einem Paar Schriftarten einen selbstbewussten ersten Bildschirm bekommt.

Pass auf: Die Seite ist leicht, aber das Lab-Ergebnis ist nur mittelmäßig, und Google hat nicht genug echte Besucherdaten, um zu beurteilen, wie sie für echte Menschen funktioniert.

Gestaltet von Christopher Doyle & Co.. Besuche vivienscreative.com.au.

4. Oimachi

Die Headline setzt eine große, schlichte Groteske gegen ein einzelnes, kursives Serif-Wort, was der Seite eine klare Stimme gibt, bevor jemand den Body-Text liest. Ein blassgrauer Untergrund, enge Ränder und ein großes dunkles Panel mit zwei cremefarbenen, abgerundeten Formen halten die Palette ruhig, während eine schmale Spalte von Postkarten rechts Fotografie und einen orangen Akzent hinzufügt. Auf dem Mobilgerät stapeln sich die gleiche Headline ordentlich über einem Raster aus dicken schwarzen Symbolen, die über faint Konstruktionsgittern gezeichnet sind.

So kannst du es adaptieren: Kombiniere eine schlichte Serifenlose-Headline mit einem einzelnen, kursiven Serifenwort, um einer textgesteuerten Hero eine erkennbare Stimme zu geben, und zeige dann Prozessarbeiten wie Symbole auf faint Konstruktionsgittern.

Pass auf: Der Lab-Test fand die Seite langsam und sehr schwer, mit GSAP-Bewegungen neben Webflow erkannt, und es gab nicht genug echte Besucherdaten von Google, um zu sagen, wie sie für echte Nutzer funktioniert.

Hausinterner Entwurf. Besuchen Sie oimachi.co.

5. Squarespace Foundations

Ein fast schwarzes Feld hält eine kurze, zentrierte Aussage in einer sauberen, gleichmäßigen serifenlosen Schrift, und nichts sonst konkurriert damit. Kleine Bildkacheln, schief in eine isometrische Neigung gekippt, sitzen um die Ränder wie eine lockere Umlaufbahn, vermischend ein weißes Logozeichen, einen Keramikkrug in warmem Schatten und einen blassen metallischen Streifen. Die Zurückhaltung und der breite Abstand lassen die Seite ruhig und selbstsicher wirken, und die gekippten Kacheln deuten Bewegung an.

Borge diesen Ansatz: Kombiniere einen einzigen kurzen Satz in einer sauberen serifenlosen Schrift mit einer Handvoll schiefer Bildkacheln auf flachem dunklem Hintergrund, was nur wenige zugeschnittene Bilder und eine CSS-Transformation erfordert.

Achte auf: Dies ist ein immersives Brand-Buch statt einer Verkaufsseite, und seine Bilder erzeugen einen großen Download: echte Besucher warten länger als die Ziele von Google für den Hauptinhalt und für Tap-Reaktionen.

Gebaut von Resn. Besuche brand.squarespace.com.

6. AI in Design Report 2026

Ein verwaschenes, invertiertes Blumenfoto in Grau und Pfirsich sitzt hinter einer Streuung von körnigen Gradient-Karten in Orange, Lila und Grün. Jede Karte trägt ein winziges Monospace-Label mit der Benennung einer Jobbezeichnung, was der Collage eine stille redaktionelle Ordnung gibt. Der schwarze zentrale Bereich mit einem schweren weißen geometrischen serifenlosen Wortzeichen verankert die Komposition, und die mobile Ansicht behält die Palette mit einem schwarzen Logo-Block neben einer hellen orangefarbenen Menüleiste.

Borge diesen Ansatz: Kombiniere eine große, eng beabstandete serifenlose Überschrift mit kleinen Monospace-Labels, und erstelle die Hero-Collage aus einer Handvoll körniger Gradient-Bilder, die über ein einzelnes getöntes Foto geschichtet sind.

Achte auf: Die Seite ist schwerer als im Durchschnitt, und echte Besucher sehen langsames Laden des Hauptinhalts und etwas Layout-Verschiebung, daher ist die große Collage das Erste, das überprüft werden muss.

Gebaut von ++hellohello. Besuche stateofaidesign.com.

7. Julia Stafi

Die Seite ist fast nur Whitespace, mit einem zentrierten Wortzeichen in hochkontrast-Serife und einer kurzen Einleitung in einer leichteren Serifenschrift. Die Einleitungszeilen schreiten in einem gestaffelten, diagonalen Muster über die Seite, was einem schlichten Absatz Bewegung ohne Dekoration gibt. Darunter fügt ein hohes Porträt der Architektin in Schwarz vor einer verschlissenen, fleckigen Wand die einzige starke Tönung hinzu, daher balancieren sich das dunkle Bild und die helle Seite gegenseitig.

Borge diesen Ansatz: Staffele die Zeilen deiner Einleitung über die Seite mit einfachen linken Einzügen, und kombiniere sie mit einem hohen Porträt auf umlackiertem weißem Grund.

Achte auf: Die Seite ist schwerer als im Durchschnitt und nur mittelmäßig im Lab-Test, was zu einem Layout passt, das auf einem großen Foto aufgebaut ist, und es gibt nicht genug echte Besucherdaten von Google, um zu sagen, wie es für echte Nutzer funktioniert.

Gebaut von Sasha Khudova. Besuche juliastafi.com.

8. Studio K95

Ein flaches, gesättigtes Blau füllt den Bildschirm, und eine pixelierte Rose aus blassen, glasähnlichen Blöcken sitzt in der Mitte, ohne dass etwas mit ihr konkurriert. Kleine Projektkarten treiben in Ringen um sie herum, und die roten und cremefarbenen Plakate stechen in der Telefonansicht gegen das Blau heraus. Die Navigation nutzt winzige Großbuchstaben-Schrift serifenlos in Weiß, daher führt die Grafik und die Schnittstelle bleibt leise.

Borge diesen Ansatz: Nutze einen flachen Block starker Farbe als Bühne und füge einen kleinen Ringe- und Spiral-Stil-Umschalter hinzu, der deine Projekt-Miniaturen neu anordnet, sodass die gleiche Arbeit in einem anderen Layout durchsucht werden kann.

Achte auf: Die Seite selbst ist leicht, doch der Lab-Test ist nur mittelmäßig und echte Besucher sehen langsames Laden des Hauptinhalts und langsame Reaktion auf Taps und Klicks, daher ist die 3D-Szene das Erste, das überprüft werden muss.

Intern gestaltet. Besuche k95.it.

9. Direct Design

Ein glänzend gerendertes Verkehrslicht sitzt vor einem sanften gelben Farbverlauf, mit einer grünen Smiley-Lampe und einem Diamantzeichen, die die Richtungsidee der Agentur in ein Bild verwandeln. Die Schlagzeile nutzt eine große, enge serifenlose Groteskschrift in Schwarz auf Weiß, sodass sie sofort neben dem Bild lesbar ist. Eine schwarze abgerundete Navigationsleiste und ein kleiner gelber Kontaktbutton halten die Palette auf Schwarz, Weiß, Gelb und Grün.

Das können Sie sich abschauen: Kombinieren Sie ein einzelnes maßgefertigtes gerendertes Objekt mit einer sehr großen Schlagzeile, und führen Sie dessen Farben in die Menüleiste und den Button ein, sodass die Seite branded wirkt, ohne dass viele Assets nötig sind.

Achtung: Die Seite ist schwerer als der Durchschnitt und schneidet im Labortest nur mittelmäßig ab, was zu den gerendertem Bildern und den erkannten Animations-Bibliotheken passt, und es gibt nicht genug echte Besucherdaten von Google, um zu sagen, wie sie für tatsächliche Nutzer funktioniert.

Entworfen von COSMOFLOW Agency. Besuchen Sie wearedirect.co.

10. House of Honey

Das Wortzeichen verläuft von Kante zu Kante in einer schweren, breiten schwarzen serifenlosen Schrift, mit einem dünnen kursiven Serifen-"of" als Kontrast durchgesetzt. Auf zartem Rosa in dunkelbrauner Schrift wirkt es sofort lesbar und warm. Das Tagline sitzt in kleiner Großbuchstaben-Serifen an beiden Ecken, und die vollflächige Innenfotografie darunter wiederholt die Rosa- und Orangetöne der Palette.

Das können Sie sich abschauen: Kombinieren Sie ein sehr schweres serifenloses Wortzeichen mit einem einzelnen feinen kursiven Serifen-Wort, und halten Sie die Palette auf eine flache Hintergrundfarbe und eine dunkle Tinte, sodass die Fotografie alles andere trägt.

Achtung: Die Seite selbst ist leicht, aber echte Besucher sehen langsames Laden des Hauptinhalts (LCP), was üblich ist, wenn eine große vollflächige Fotografie das erste auf dem Bildschirm ist, und das Laborergebnis ist nur mittelmäßig.

Umgesetzt von Edoardo Lunardi. Besuche houseofhoney.com.

11. Félix Péault

Die Seite ist kaum mehr als ein Farbverlauf, der sich von tiefem Blau durch ein klares Grün in ein warmes Off-White zieht, und diese Fläche trägt alle Farbe. Ein Paar übergroßer dunkler Buchstaben, ein F und ein P, sitzt in den Ecken wie ein Monogramm, während eine hohe verdichtete serifenlose Schrift das Tagline und das kleine Menü trägt. Auf Mobilgeräten fügt eine Fotografie von oben gesehener Menschen mit langen Schatten das einzige Bild hinzu.

Das können Sie sich abschauen: Setzen Sie Ihre Initialen als übergroße Buchstaben in entgegengesetzten Ecken und füllen Sie den Hintergrund mit einem sanften Farbverlauf, sodass die Seite eine Identität hat, ohne schwere Bilder zu brauchen.

Achtung: Der Labortest schnitt mittelmäßig ab, obwohl die Seite selbst leicht ist, und es gibt nicht genug echte Besucherdaten von Google, um zu sagen, wie sie für tatsächliche Nutzer funktioniert.

Designed in-house. Visit felixpeault.com.

12. Karl Barnard

Die Schlagzeile nutzt eine hochkontrast-Serifen, mit einem Wort in kursivem Grün, das die ganze Betonung trägt. Alles andere bleibt ruhig: warmer Off-White-Grund, schwache Gitterlinien, und eine kleine nichtproportionale Schrift für Beschriftungen. Das Porträt ist aus typischen Zeichen gebaut, sodass das Bild die Schrift widerspiegelt und die Seite wie eine Idee wirkt, nicht wie ein Haufen Teile.

Das können Sie sich abschauen: Wählen Sie ein Wort in Ihrer Schlagzeile, setzen Sie es kursiv und in einer einzigen Akzentfarbe, und lassen Sie den Rest der Palette in neutralen Tönen.

Achtung: Der Labortest bewertete die Seite als langsam, obwohl die Seite selbst leicht ist, und es gab nicht genug echte Besucherdaten von Google, um zu sagen, wie sie für tatsächliche Nutzer wirkt.

Entworfen intern. Besuchen Sie karlbarnard.co.za.

13. Gionatan Nese

Eine weiße Seite, eine kleine Gruppe von Produktfotos, Postern und Objekten in einem lockeren Ring angeordnet, und fast nichts sonst. Das winzige Menü oben kombiniert eine schlichte serifenlose Schrift für die Initialen mit einer feinen Serifenschrift für Creative Space, in hellem Grau gesetzt, was einen ruhigen Kontrast erzeugt. Bilder überlappen sich in verschiedenen Größen, sodass das Auge den Kreis umwandert, und die leeren weißen Ränder lassen jede Miniatur wie ein Exponat wirken.

Leihen Sie sich das aus: Ordnen Sie eine kleine Menge Ihrer besten Projekt-Miniaturen in einem lockeren Ring auf einer einfachen weißen Seite an, mit Überlappungen und unterschiedlichen Größen, damit die Arbeit für sich selbst spricht, ohne ein Leitbild oder eine Überschrift.

Achten Sie auf: Der Lab-Test ergab eine langsame und sehr schwere Seite, und echte Besucher sehen langsame Reaktionen auf Taps (INP), obwohl der Hauptinhalt selbst schnell ankommt.

Eigenständig gestaltet. Besuchen Sie gionatannese.com.

14. SUSO Digital

Der Hero bleibt auf einem ruhigen weißen Feld mit einem einzelnen sanften Gradient-Glühen aus Pfirsich, Flieder und hellem Blau hinter einer dünnen weißen Wireframe-Form. Die Überschrift verwendet eine saubere, gleichmäßige serifenlose Schrift in großer Größe, mit einem kleinen monospaced-Label darüber und zwei klaren Pille-Buttons darunter. Der Abstand ist großzügig, sodass die Seite schnell lesbar ist und die eine Grafik die Dekoration darstellt.

Leihen Sie sich das aus: Kombinieren Sie eine saubere serifenlose Überschrift mit kleinen monospaced-Labels und Buttons, dann setzen Sie eine sanfte Gradient-Grafik hinter dem Text, damit die Seite gestaltet wirkt, ohne Fotografie zu benötigen.

Achten Sie auf: Die Seite ist leicht, aber echte Besucher sehen Probleme damit, wie schnell der Hauptinhalt lädt (LCP), und die große Gradient-Grafik im Hero ist wahrscheinlich das Erste, das man überprüfen sollte.

Erstellt von Fhoke. Besuchen Sie susodigital.com.

15. Nordpixel

Ein dunkles, nebliges Bergfoto füllt den ganzen Bildschirm aus, mit einer gläsernen Kabine, die schwach unten rechts leuchtet. Die Wortmarke sitzt in der Mitte in weit auseinander stehenden fetten geometrischen Großbuchstaben, endet mit einem blauen Punkt, der sich im Logo und in den Buttons wiederholt. Eine weiße gerundete Menüleiste schwebt über dem Bild, sodass die blaue Akzentuierung und die blasse Schrift den gesamten Kontrast liefern.

Leihen Sie sich das aus: Kombinieren Sie ein volles Foto mit einer Abdunklung durch einen Overlay mit einer breiten fetten Wortmarke und einer einzelnen Akzentfarbe, die nur für den Punkt und die Buttons verwendet wird.

Achten Sie auf: Die Seite ist schwerer als durchschnittlich und im Lab-Test nur mittelmäßig, was eine Vollbildfotografie in der Regel kostet, und es gibt nicht genug echte Besucher-Daten von Google, um zu sagen, wie sie für echte Besucher funktioniert.

Umgesetzt von Michael Schnyder. Besuche nordpixel.ch.

16. Alvara House

Ein Vollbild-Foto eines flachdachigen Hauses in der Dämmerung sitzt unter einer riesigen breiten weißen serifenlosen Wortmarke, und das Wort HOUSE verläuft halbtransparent über der Dachlinie, sodass Schrift und Gebäude als ein Bild gelesen werden. Der blaue Himmel bietet sauberen, ruhigen Platz für kleine Ecken-Labels, und der warme Glanz in den Fenstern kontrastiert mit dem kühlen Hintergrund. Ein Pille-Button und eine Frosted-Card sind die einzigen konkurrierenden Elemente.

Leihen Sie sich das aus: Kombinieren Sie ein starkes Foto mit einer übergroßen Wortmarke, die das Objekt überlappt, und halten Sie alle anderen Elemente klein und in den Ecken verstaut.

Achten Sie auf: Der Lab-Test war mittelmäßig, obwohl die Seite leicht ist, sodass das große Hero-Foto der wahrscheinlichste Ort ist, um Verbesserungen zu suchen, und es gab nicht genug echte Besucher-Daten von Google, um zu sagen, wie es sich in der Praxis anfühlt.

Erstellt von Visuvate Studio. Besuchen Sie alvara.visuvate.com.

17. Haoqi Wen

Ein glänzendes, aufgeblasenes blaues Script mit dem Wort „hello" sitzt über einem hellen himmelsblauen Hintergrund und ist das einzige weiche Objekt auf einer Seite, die ansonsten von dünnen Gitterlinien und kleinen Fadenkreuzmarken beherrscht wird. Die schwere, breite schwarze serifenlose Schlagzeile verankert die untere linke Ecke, während eine Schriftart mit fester Laufweite Navigation und Biografie übernimmt. Dieser Kontrast zwischen verspielt und technisch passt zu einem Design Engineer.

Davon leihen: Paaren Sie ein taktiles, gerendertes Objekt mit einem strikten haarfeinen Gitter und einer einzelnen Schriftart mit fester Laufweite für kleine Texte, damit eine persönliche Website gleichzeitig warm und präzise wirkt.

Vorsicht vor: Der Labortest zeigte, dass die Seite langsam und sehr schwer ist, und echte Besucher sehen Probleme beim Laden, bei der Responsivität und bei der Layout-Stabilität – das ist der übliche Preis für einen großen gerenderten Hero und Live-Details.

Hauseigen gestaltet. Besuchen Sie haoqi.design.

18. Warm & Fuzzy

Ein vollständiges, sanft verschwommenes Filmstill füllt den ganzen Bildschirm, und seine Bonbon-Rosas, Senf-Gelbs und Blattgrüns prägen den Anfang. Die glänzende Bubble-Beschriftung sitzt in der Mitte, während die kleine Navigation in einer schlichten serifenlosen Schrift aus dem Weg bleibt. Eine fette Grotesk-Schlagzeile über dem unteren Rand verankert die Seite und setzt einen freundlichen, selbstbewussten Ton.

Davon leihen: Nutzen Sie ein vollbildgroßes bewegtes Bild als ganzen Anfang, dann halten Sie das Logo, ein paar kurze Links und eine einzelne fette Textzeile als einzige Möblierung oben.

Vorsicht vor: Der Labortest war mittelmäßig, obwohl die Seite selbst leicht ist, also ist der vollbildgroße bewegte Hintergrund der wahrscheinliche Preis, und es gibt nicht genug echte Besucherdaten von Google, um zu sagen, wie es sich für tatsächliche Nutzer anfühlt.

Von Neutral Studio gebaut. Besuchen Sie warmnfuzzy.tv.

19. Glitch&Grit

Die Seite teilt den Bildschirm in der Mitte, mit einer flach schwarzen Hälfte auf der linken Seite, die eine große graue Blütensilhouette trägt, und einer leicht helleren Holzkohle-Hälfte auf der rechten Seite. Über beiden sitzt eine riesige Überschrift in einer fetten, offenen serifenlosen Schrift in zartem Limonengrün, die gegen das Grau und das Schwarz gleichermaßen lesbar bleibt. Navigation und Studioname sitzen in kleinen weißen Großbuchstaben, die in die Ecken geklemmt sind, damit die Mitte frei bleibt.

Davon leihen: Paaren Sie eine riesige Überschrift in einer einzelnen Akzentfarbe mit einem gespaltenen flachen Hintergrund und einer ausgeschnittenen Form, damit die Seite prägnant wirkt, ohne ein Fotografie-Budget zu haben.

Vorsicht vor: Die Seite ist sehr schwer und nur mittelmäßig im Labortest, und Google hat zu wenig echte Besucherdaten, um zu sagen, wie es sich in der Praxis anfühlt, also sind die großen Grafiken der erste Ort, um Einsparungen zu suchen.

Besuchen Sie glitchandgrit.com.

20. GØDN.studio

Ein fast schwarzes Feld trägt eine riesige Aussage in schwerer, eng gesetzter Grotesk-Großschrift, und das letzte Wort fällt in eine leichte kursive Serifenschrift, die die Stimme sofort verändert. Eine körnige, gesprenkkelte Markierung sitzt hinter dem Text wie statisches Rauschen und fügt Tiefe hinzu, ohne Fotografie. Kleine, weit verteilte Bezeichnungen in Schriftart mit fester Laufweite bleiben leise darum herum, damit die Überschrift zuerst gelesen wird.

Davon leihen: Paaren Sie eine schwere serifenlose Überschrift mit einem Wort in einer leichten kursiven Serifenschrift, und halten Sie alles andere in kleinen verteilten Großbuchstaben mit fester Laufweite auf dunklem Grund.

Vorsicht vor: Die Seite war schnell im Labortest und ist leicht, was gut ist, da sie GSAP und Three.js nutzt, aber es gab nicht genug echte Besucherdaten von Google, um zu sagen, wie sie für tatsächliche Nutzer funktioniert.

Gebaut von Bruno Godinho. Besuchen Sie studio.godn.pt.

So erstellen Sie ein Portfolio, das schön und schnell ist

Die 20 oben zeigen, dass ein Portfolio auf fast jedem Stack unverwechselbar aussehen kann. Die schnelleren unterscheiden sich von den langsameren darin, wie sie die Arbeiten selbst laden.

• Zeigen Sie drei bis fünf Projekte ordnungsgemäß. Die Umfrage der Nielsen Norman Group unter 204 UX-Fachleuten, die einstellen, empfiehlt die Auswahl von 3 bis 5 Projekten als detaillierte Fallstudien, Qualität statt Quantität (NN/g).
• Machen Sie es überfliegbar. Die gleiche Forschung ergab, dass Personalverantwortliche ein Portfolio sehr selten von Anfang bis Ende lesen (NN/g), also platzieren Sie das Problem, Ihre Rolle und das Ergebnis dort, wo das überfliegende Auge landet.
• Laden Sie das erste Bild früh. Setzen Sie niemals loading="lazy" auf das Bild, das den ersten Bildschirm ausfüllt, halten Sie es im HTML der Seite statt es mit JavaScript hinzuzufügen, und geben Sie ihm fetchpriority="high" (web.dev).
• Lazy-Load alles darunter, mit eingestellten Größen. Verwenden Sie loading="lazy" nur für Bilder außerhalb des ersten Bildschirms, und fügen Sie width und height zu jedem Bild hinzu, damit das Layout nicht springt (web.dev).
• Achten Sie auf die Gesamtmenge. Im 90. Perzentil senden Websites bereits über 5 MB Bilder (web.dev), und 5 dieser 20 Portfolios wiegen zusammen mehr als 10 MB.
• Messen Sie echte Besucher selbst. Ein kleines Portfolio erhält möglicherweise nie genug Traffic, um im Chrome UX Report zu erscheinen, und web.dev empfiehlt dringend, Ihr eigenes Real-User-Monitoring einzurichten (web.dev).

Wenn Sie ein Portfolio möchten, das Arbeit gewinnt, nicht nur gut aussieht, ist Portfolio-Webdesign meine Vorgehensweise: schnell, in der Suche auffindbar und rund um die Arbeiten geschrieben. Wenn Ihre aktuelle Website nur einen neuen Look und einen schnelleren ersten Bildschirm braucht, ist ein Website-Redesign der richtige Anfang.

Fragen, die Leute stellen

Was macht eine gute Portfolio-Website aus?

Zeigen Sie die Arbeiten groß und früh, mit genug Kontext, um sie zu erklären. Auf diesen 20 machen die stärksten ersten Bildschirme eine Sache: einen Namen in sehr großer Schrift, ein einzelnes Projekt oder ein einzelnes Foto. Die Forschung der Nielsen Norman Group fügt den Teil hinzu, der Arbeiten gewinnt: ein paar Projekte als Fallstudien geschrieben, nicht eine Wand aus fertigen Bildern (NN/g).

Wie viele Projekte sollte ein Portfolio zeigen?

Die Nielsen Norman Group empfiehlt die Auswahl von 3 bis 5 Projekten als detaillierte Fallstudien, mit Qualität statt Quantität (NN/g). Weniger, tiefere Projekte bedeuten auch weniger große Bilder auf der Seite.

Was ist die beste Plattform für eine Portfolio-Website?

Diese Daten geben keinem Stack einen Sieg. Next.js betreibt 6 der 20, Nuxt und Webflow je 2, und Framer, SvelteKit und WordPress je eines, während 7 auf Weise gebaut sind, die nicht erkannt werden konnte. Next.js allein hat hier sowohl eine 79 als auch eine 37, also wählen Sie diejenige, die Sie aktuell halten können, und verwenden Sie die Mühe darauf, wie Ihre Bilder geladen werden.

Warum ist meine Portfolio-Website langsam?

Die Ursache ist normalerweise die Arbeit selbst: Bilder und Videos in voller Größe auf dem ersten Bildschirm, oder ein erstes Bild, das langsam lädt, weil es lazy-loaded ist oder von JavaScript hinzugefügt wird (web.dev). In dieser Auswahl verpassen 7 der 8 von Google bewerteten Portfolios das 2,5-Sekunden-LCP-Ziel.

Warum hat mein Portfolio keine Core Web Vitals-Daten?

Der Chrome UX Report enthält nur Seiten und Websites mit genug Besuchern, um eine statistisch signifikante Stichprobe zu bilden (Chrome UX Report). 11 dieser 20 Portfolios haben überhaupt keine Real-User-Daten. Verwenden Sie in der Zwischenzeit einen Lab-Test wie Lighthouse, und fügen Sie Ihr eigenes Real-User-Monitoring hinzu, wenn Sie Field-Zahlen möchten.

Wo kann ich mehr schöne Websites sehen?

Die 64 wunderschönen Websites Säule deckt acht Kategorien mit den gleichen Tests ab. Für Restaurants und Lebensmittelmarken siehe die 20 besten Restaurant- und Lebensmittel-Websites, und zum Durchsuchen von Galerien die Web-Design-Inspirations-Website Zusammenfassung.