Portfolioseite gestalten: Wie baut man eine Galerie, die überzeugt?

Wir, Talha Aslan und Team, sehen in unserer Projektarbeit sehr viele Portfolioseiten. Das häufigste Problem ist schlicht: Die Arbeiten sind gut, aber die Portfolioseite erklärt sie nicht. Das heißt, Hunderte Fotos stehen nebeneinander, und keines hat einen Kontext. In diesem Leitfaden gehen wir deshalb jeden Schritt praktisch durch. Konkret geht es um Projektkarten, Filter, Fallstudien, Bildoptimierung, barrierefreie Lightbox und die Freigabe durch Kunden.

Welche Aufgabe hat eine Portfolioseite?

Eine Portfolioseite schafft zunächst Vertrauen. Besucher suchen vor allem eine Antwort auf eine Frage: Hat dieses Team schon etwas Ähnliches wie mein Projekt umgesetzt? Daher besteht die Aufgabe nicht darin, alles zu zeigen. Die Seite soll die richtige Arbeit der richtigen Person zeigen.

Die zweite Aufgabe besteht darin, die Entscheidung zu erleichtern. Wer zum Beispiel auf der Website eines Architekturbüros ein Wohnprojekt sucht, sollte keine Zeit mit Bürotürmen verlieren. Die dritte Aufgabe ist ein klarer nächster Schritt. Anfrageformular, Telefonnummer oder Terminlink sollten stets sichtbar bleiben.

Die drei Aufgaben lassen sich so zusammenfassen:

• Vertrauen: echte Arbeiten, klarer Kontext und gleichbleibende Qualität.
• Leichte Auswahl: schnelles Eingrenzen nach Kategorie, Branche oder Leistung.
• Führung: ein deutlicher Handlungsaufruf am Ende jedes Projekts.

Deshalb empfehlen wir, das Design mit diesen drei Fragen zu beginnen und nicht mit den Bildern. Wer kommt, was sucht diese Person, und was soll sie danach tun? Sobald die Antworten klar sind, ergeben sich Layout, Filter und Kartenaufbau fast von selbst. Zudem muss die Seite zur gesamten Webdesign Strategie passen. Unser Beitrag zu conversionorientiertem Webdesign ist dafür ein guter Einstieg.

Was unterscheidet eine Galerie von einer Fallstudie?

Eine Galerie ist ein visueller Bereich zum schnellen Überfliegen. Eine Fallstudie erzählt dagegen die Geschichte eines einzelnen Projekts: den Bedarf am Anfang, den gewählten Weg und das Ergebnis. Beide können auf derselben Seite stehen, erfüllen allerdings unterschiedliche Aufgaben.

Galerien glänzen dort, wo die Arbeit selbst visuell ist. Fotografen, Innenarchitekten, Eventplaner und Produkthersteller profitieren am stärksten. Andererseits sagt in Beratung, Software oder Ingenieurwesen ein einzelner Screenshot sehr wenig. Dort interessieren Besucher vor allem Prozess und Ergebnis.

In der Praxis bewährt sich eine Struktur mit zwei Ebenen. Oben steht ein Kartenraster oder eine Galerie zum Überfliegen. Darunter führt jede Karte zu einer eigenen Fallstudie. Somit finden schnelle Leser und gründliche Leser gleichermaßen, was sie brauchen.

Beispielszenario: Denken Sie an einen Küchenbauer. Die Galerie zeigt zwanzig verschiedene Küchen. Klickt jemand allerdings auf das Projekt „Küche in U Form auf engem Raum“, landet er auf einer eigenen Seite. Dort stehen Maße, Materialwahl und Montagedauer. Die Galerie weckt also Aufmerksamkeit, die Fallstudie überzeugt.

Welche Projekte gehören ins Portfolio?

Es ist verlockend, alles zu zeigen. Eine überfüllte Portfolioseite wirkt jedoch schwächer als eine ausgewählte. Besucher sehen auch Ihre schwächste Arbeit und beurteilen die Qualität nach dem Durchschnitt. Daher ist die Auswahl der erste und wichtigste Schritt.

Für die Auswahl empfehlen wir diese Kriterien:

1. Ähnelt das Projekt der Arbeit, die Sie verkaufen möchten? Zeigen Sie keine Projektarten, die Sie nicht mehr annehmen.
2. Haben Sie hochwertige Bilder oder Unterlagen? Ein unscharfes Foto schadet selbst einer starken Arbeit.
3. Dürfen Sie das Projekt zeigen? Der Freigabe widmen wir weiter unten einen eigenen Abschnitt.
4. Gibt es eine Geschichte? Ein schwieriger Bedarf mit klarer Lösung schlägt einen Routineauftrag.
5. Ist es aktuell? Alte Stile führen neue Kunden in die Irre.

Achten Sie außerdem auf Balance zwischen den Kategorien. Ist zum Beispiel eine Ihrer Leistungen sehr stark, aber nur mit einem Projekt vertreten, halten Besucher sie für ein Nebenangebot. Kurz gesagt spiegelt die Portfolioseite Ihre Vertriebsprioritäten.

Ein Startpunkt aus unserer Praxis: Wählen Sie für jede Hauptkategorie einige starke Projekte und ergänzen Sie mit der Zeit. Das ist keine feste Regel. Entscheidend bleibt, ob ein Besucher ohne Umwege entscheiden kann.

Welche Angaben gehören auf eine Projektkarte?

Eine Projektkarte ist jedes Feld im Raster und zugleich die Tür zur Fallstudie. Weil die Karte klein ist, muss jedes Element seinen Platz verdienen. Betrachten Sie die Karte also als Zusammenfassung, nicht als Plakat.

Eine wirksame Karte enthält meist diese Elemente:

• Ein starkes Titelbild, das das Projekt am besten repräsentiert.
• Einen kurzen, aussagekräftigen Titel wie „Sanierung einer Dreizimmerwohnung in Köln“ statt „Projekt 12“.
• Kategorie oder Branche mit denselben Begriffen wie in den Filtern.
• Eine Satzzusammenfassung mit Fokus auf Bedarf oder Ergebnis.
• Eine vollständig klickbare Fläche, nicht nur ein winziges „Details“.

Den Kartentitel als Linktext zu nutzen, hilft zudem der Barrierefreiheit. Screenreader Nutzer hören dann in der Linkliste sinnvolle Projektnamen statt Dutzender „Mehr lesen“. Verlinken Sie außerdem Bild, Titel und Label nicht einzeln, denn so entstehen drei Links auf dieselbe Adresse. Nutzen Sie stattdessen einen einzigen Link.

Ebenso sollten die Kartengrößen einheitlich bleiben. Titelbilder mit unterschiedlichen Seitenverhältnissen lassen das Raster unruhig wirken. Deshalb spart es viel Nacharbeit, die Bilder von Anfang an im gleichen Format zuzuschneiden.

Welches Rasterlayout passt zu Ihrer Arbeit?

Für eine Portfolioseite gibt es drei verbreitete Layouts: ein gleichmäßiges Raster, ein Mauerwerk Layout (Masonry) und eine Listenansicht. Masonry stapelt Bilder unterschiedlicher Höhe ohne Lücken. Die richtige Wahl hängt von Ihrer Arbeit ab und davon, wie Besucher scannen.

Die Tabelle ist ein Startpunkt, keine starre Regel. Ein Fotostudio kann zum Beispiel auf der Startseite Masonry und auf Kategorieseiten ein gleichmäßiges Raster nutzen. Das heißt, verschiedene Seiten derselben Website dürfen verschiedene Layouts haben, solange jede ihren Zweck erfüllt.

Masonry verlangt allerdings besondere Sorgfalt. Weicht die visuelle Reihenfolge von der Reihenfolge im Dokument ab, springt der Fokus für Tastaturnutzer über den Bildschirm. Sorgen Sie daher dafür, dass beide Reihenfolgen derselben Logik folgen.

Prüfen Sie außerdem das visuelle Gewicht. Ein einziges grelles Foto kann das ganze Raster überstrahlen. Wie Sie hier Balance schaffen, zeigt unser Beitrag zum visuellen Gewicht im Webdesign.

Wann brauchen Sie Filter?

Filter brauchen Sie, sobald die Zahl der Projekte wächst und Besucher Unterschiedliches suchen. Bei wenigen Projekten erzeugt eine Filterleiste nur leere Unruhe. Andererseits verlassen Besucher eine lange Projektstrecke ohne Filter oft, bevor sie etwas finden.

Für ein gutes Filtersystem empfehlen wir diese Grundsätze:

• Nutzen Sie die Sprache der Besucher: Leistungen oder Branchen, nach denen Kunden suchen, keine internen Abteilungsnamen.
• Halten Sie die Zahl der Optionen klein, denn zu viele Filter ermüden.
• Lassen Sie die Option „Alle“ immer sichtbar.
• Heben Sie den aktiven Filter visuell hervor und teilen Sie ihn auch dem Screenreader mit.
• Ist ein Ergebnis leer, lassen Sie keine leere Fläche stehen. Zeigen Sie stattdessen einen Hinweis auf andere Kategorien.

Für die Barrierefreiheit sollten Filterknöpfe echte Schaltflächen sein. Ein passendes ARIA Attribut für den gedrückten Zustand verrät Screenreader Nutzern, welcher Filter aktiv ist. Zudem verhindert eine Live Region, die die Trefferzahl wie „6 Projekte“ ansagt, dass Nutzer nach einem Wechsel die Orientierung verlieren.

Die Umsatzwirkung von Produktfiltern im Onlineshop ist ein eigenes Thema. Details finden Sie in unserem Beitrag zu Produktfiltern im Onlineshop. Im Portfolio soll der Filter dagegen vor allem Vertrauen aufbauen, nicht direkt verkaufen.

Wie wirken sich Filter URLs auf SEO aus?

Wie Filter in der Adresszeile erscheinen, bestimmt, wie Suchmaschinen Ihre Seite sehen. Filter, die nur per JavaScript laufen und die URL nie ändern, können für Nutzer gut funktionieren. Allerdings wird eine Kategorie wie „Wohnprojekte“ dann nie zu einer eigenen, auffindbaren Seite.

Ist eine Kategorie ein echtes Suchthema, lohnt sich eine eigene, dauerhafte URL. Ist zum Beispiel „Projekte Büroeinrichtung“ eine wertvolle Suchanfrage, kann diese Kategorie eine eigenständige Seite werden. Sie bekommt dann einen eigenen Titel, eine kurze Beschreibung und eine Projektliste. Somit erreichen Besucher und Suchmaschinen sie direkt.

Erzeugen dagegen viele kleine Kombinationen aus Sortierung, Farbe oder Jahr jeweils eine eigene URL, entstehen schnell Hunderte fast gleicher Seiten. Das verschwendet Crawl Budget. Vergeben Sie daher dauerhafte URLs nur für sinnvolle Kategorien und lassen Sie feine Filter auf der Seite.

Kurz gesagt teilen Sie Ihre Filter in zwei Gruppen. Die erste Gruppe umfasst gesuchte Kategorien, die eine eigene Seite verdienen. Die zweite dient nur dem Komfort und braucht keine Indexierung. Diese Trennung schon im Design zu treffen, erspart später Weiterleitungen und Aufräumarbeit.

In welcher Reihenfolge bauen Sie eine Fallstudie auf?

Eine Fallstudie erzählt die Geschichte eines Projekts von Anfang bis Ende und trägt den größten Teil der Überzeugungskraft. Beim Lesen soll der Besucher denken: Mein Problem sieht genauso aus. Also muss die Seite wie eine Erzählung funktionieren, nicht wie ein Fotoalbum.

Für Fallstudien nutzen wir meist diese Reihenfolge:

1. Übersichtsbox: Kundentyp, Branche, Leistungsumfang und Dauer.
2. Bedarf: die Ausgangslage vor dem Projekt und das Ziel.
3. Vorgehen: welche Optionen Sie abgewogen haben und warum Sie diesen Weg gewählt haben.
4. Prozessbilder: Skizze, Zwischenstand und Endergebnis.
5. Ergebnis: messbare Daten mit Quelle, sonst qualitative Beobachtungen.
6. Kundenstimme: nur ein echtes, freigegebenes Zitat.
7. Nächster Schritt: ein Handlungsaufruf für ähnliche Projekte.

Bleiben Sie beim Ergebnis vor allem ehrlich. Erfundene Prozentwerte, unprüfbare Erfolgszahlen oder Aussagen wie „wir haben den Umsatz verdreifacht“ ohne Quelle zerstören Vertrauen. Fehlen messbare Daten, genügt eine Beschreibung des gelieferten Umfangs und des Kundenfeedbacks.

Diese Struktur bauen wir auf Ihrer Website auf: Unser Webdesign Service umfasst alles von den Projektkarten bis zur Vorlage für Fallstudien, und die Inhaltsanordnung planen wir gemeinsam mit Ihnen. So passt jedes neue Projekt danach in dieselbe klare Vorlage.

Wie bereiten Sie Portfoliobilder vor?

Portfoliobilder sind die schwerste Last jeder Portfolioseite. Laden Sie hochauflösende Fotos unverändert hoch, wird die Seite langsam, und mobile Besucher warten. Deshalb braucht jedes Bild vor dem Upload eine Vorbereitung.

Wir empfehlen diese Schritte:

1. Verkleinern Sie jedes Bild auf die größte Größe, in der es tatsächlich erscheint. Behalten Sie keine riesige Datei für eine schmale Karte.
2. Nutzen Sie ein modernes Format. Google unterstützt gängige Formate, darunter WebP und AVIF.
3. Erstellen Sie eine kleine Version für die Karte und eine große für die Lightbox.
4. Vergeben Sie sprechende Dateinamen statt Zahlenfolgen.
5. Entfernen Sie unnötige Metadaten, vor allem Standortdaten.

Zum Verkleinern und Umwandeln können Sie unser Tool zum Bild verkleinern und unseren Konverter von JPG in WebP nutzen. Außerdem lassen sich mit dem Attribut srcset mehrere Versionen für verschiedene Bildschirmbreiten anbieten; der Browser wählt dann die passende.

Auch Googles Seite zu Best Practices für Bilder empfiehlt für responsive Bilder das picture Element oder srcset, stets mit einer src Adresse als Rückfall. Mehr Details liefert unser Leitfaden, wie Sie Bilder für Ladezeit und SEO optimieren.

Wie steuern Sie Lazy Loading und Layoutverschiebungen?

Lazy Loading bedeutet, dass der Browser Bilder außerhalb des sichtbaren Bereichs erst lädt, wenn der Besucher sich ihnen nähert. In einer langen Galerie entlastet das den ersten Seitenaufruf deutlich. Falsch eingesetzt bewirkt es allerdings das Gegenteil.

Der web.dev Artikel zum browsereigenen Lazy Loading von Bildern warnt klar: Nutzen Sie Lazy Loading nur für Bilder außerhalb des ersten Sichtbereichs. Das heißt, das Titelbild und die erste Kartenreihe laden normal. Sonst erscheint das Element für den Largest Contentful Paint (LCP) zu spät.

Der zweite kritische Punkt sind Layoutverschiebungen. Reserviert die Seite vor dem Laden keinen Platz, schiebt das Foto beim Erscheinen alles darunter nach unten. Deshalb empfiehlt dieselbe Quelle Breiten und Höhenangaben für jedes Bild, damit der Browser den Platz vorab reservieren kann.

Beide Punkte beeinflussen die Core Web Vitals direkt. Details finden Sie in unseren Beiträgen zu Lazy Loading und Ladezeit und zur Behebung von Cumulative Layout Shift. Kurz gesagt: Laden Sie die erste Galeriereihe schnell, verzögern Sie den Rest und zeichnen Sie jeden Bildrahmen vorab.

Wie funktioniert eine barrierefreie Lightbox?

Eine Lightbox ist die Ebene, die ein Bild nach einem Klick groß über der Seite zeigt. Technisch handelt es sich um einen modalen Dialog, also gelten die Regeln für Modale. Eine Lightbox, die sich per Tastatur nicht öffnen oder schließen lässt, hält Besucher auf der Portfolioseite gefangen.

Das Muster für modale Dialoge des W3C beschreibt dieses Verhalten:

1. Beim Öffnen wandert der Fokus auf ein Element innerhalb der Ebene.
2. Tab sowie Umschalt mit Tab bewegen den Fokus innerhalb der Ebene, und der Fokus kann nicht entweichen.
3. Die Escape Taste schließt die Ebene.
4. Nach dem Schließen kehrt der Fokus zum auslösenden Element zurück.
5. Eine sichtbare Schaltfläche zum Schließen steht immer bereit.
6. Die Ebene hat einen zugänglichen Namen, etwa über den Bezug auf eine sichtbare Überschrift.

In modernen Browsern übernimmt das native dialog Element einen großen Teil dieser Arbeit. Öffnen Sie es als Modal, wird der Inhalt dahinter inaktiv, und die Escape Taste funktioniert standardmäßig. Somit beginnen Sie auf einer soliden Basis, statt eine Fokusfalle von Grund auf zu schreiben.

Zudem brauchen die Schaltflächen für vorheriges und nächstes Bild sinnvolle Namen. Ein Knopf, der nur ein Pfeilsymbol zeigt, klingt im Screenreader leer. Außerdem hilft eine Positionsangabe wie „3 von 12“ den Besuchern, sich in der Galerie zu orientieren.

Wie schreiben Sie Alternativtexte in einer Galerie?

Ein Alternativtext ist eine kurze Beschreibung, die den Zweck eines Bildes an Menschen vermittelt, die es nicht sehen. Das WCAG Erfolgskriterium für Nicht Text Inhalte verlangt für jedes bedeutungstragende Bild eine gleichwertige Textalternative. Rein dekorative Bilder sollen Hilfstechnologien dagegen überspringen können.

Für Alternativtexte im Portfolio empfehlen wir diesen Ansatz:

• Beschreiben Sie, was das Bild im Kontext vermittelt, nicht nur, was es zeigt.
• Nennen Sie Projekt und markantes Detail, etwa „Offene Küche mit Holzverkleidung, Kochinsel und Pendelleuchten“.
• Kopieren Sie nicht denselben Text auf alle Bilder eines Projekts. Sagen Sie, was jedes Bild anders zeigt.
• Vermeiden Sie Keyword Stuffing.
• Beschreibt der Kartentitel das Bild schon, wiederholen Sie ihn nicht.

Der letzte Punkt ist wichtig, denn sonst entsteht Doppelung. Stehen Bild und Titel im selben Link, liest der Screenreader bei wiederholtem Alternativtext dasselbe zweimal. Prüfen Sie dann, ob das Bild rein dekorativ ist.

Unser Leitfaden zum richtigen Schreiben von Alt Text erklärt die allgemeinen Regeln mit Beispielen. Für die Barrierefreiheit der gesamten Website hilft zudem unser Beitrag zur barrierefreien Website nach WCAG und BFSG.

Welche Entscheidungen zählen für die Portfolioseite auf dem Smartphone?

Auf dem Smartphone fällt eine Portfolioseite oft auf eine Spalte zurück, und das ist eine natürliche Wahl. Ein vierspaltiges Desktopraster einfach auf zwei Spalten zu verkleinern, erzeugt allerdings winzige, schwer lesbare Karten. Behandeln Sie das mobile Layout daher als eigene Designentscheidung.

Auf dem Smartphone zählen vor allem diese Punkte. Erstens darf die Filterleiste seitlich scrollen, aber der aktive Filter muss sichtbar bleiben. Zweitens sollten Tippflächen groß genug für den Daumen sein. Drittens können Wischgesten für vorheriges und nächstes Bild in der Lightbox die Schaltflächen ergänzen.

Andererseits sollte die Bildgröße auf dem Smartphone nicht der Desktopgröße entsprechen. Ein Foto in Desktopauflösung auf einen schmalen Bildschirm zu schicken, verschwendet Daten und Zeit. Hier kommen die Attribute srcset und sizes ins Spiel. Unser Überblick zu Bildgrößen für Websites nennt praktische Startmaße.

Beispielszenario: Ein Besucher öffnet die Website eines Innenarchitekturbüros in der U Bahn mit schwacher Verbindung. Die ersten zwei Karten erscheinen sofort, der Rest lädt beim Scrollen. Danach füllt die Lightbox den Bildschirm, und die Schließen Schaltfläche liegt in Daumennähe. Solche kleinen Entscheidungen halten Besucher auf der Seite.

Warum sind Kundenfreigabe und Datenschutz wichtig?

Jedes Projekt im Portfolio gehört einem Kunden, und für die Veröffentlichung brauchen Sie eine Freigabe. Das gilt für Logos, Fotos von Räumen, Screenshots und Kundenzitate gleichermaßen. Eine Veröffentlichung ohne Freigabe gefährdet die Beziehung und Ihren Ruf.

Für die Freigabe empfehlen wir diese Praxis:

• Nehmen Sie eine Portfolioklausel in den Vertrag auf und beschreiben Sie den Umfang klar.
• Entfernen Sie bei vertraulichen Projekten Kundennamen, Logo und erkennbare Details und zeigen Sie das Projekt als anonymen Fall.
• Holen Sie die Einwilligung abgebildeter Personen ein.
• Machen Sie echte personenbezogene Daten in Screenshots unkenntlich oder ersetzen Sie sie durch Beispieldaten.
• Entfernen Sie Standortdaten aus Bilddateien vor der Veröffentlichung.

Bei Wohnprojekten ist besondere Vorsicht nötig. Denn treffen Innenaufnahmen einer Wohnung auf Standortdaten, kann die Privatsphäre der Bewohner leiden. Daher genügt meist die Angabe von Stadtteil oder Stadt statt der Adresse.

Einen allgemeinen Rahmen zum Umgang mit personenbezogenen Daten gibt unser Leitfaden zur datenschutzkonformen Website. Hinweis: Dieser Abschnitt ist keine Rechtsberatung; sprechen Sie für Vertragsklauseln mit einer Anwältin oder einem Anwalt.

Wie findet Google Ihre Portfolioseite und ihre Bilder?

Google findet Bilder über das src Attribut des img Elements im HTML. Googles offizielle Dokumentation sagt klar, dass CSS Hintergrundbilder nicht in den Index gelangen. Platzieren Sie wichtige Portfoliobilder daher als echte Bildelemente, nicht als Hintergrund.

Zweitens zählt der Kontext. Überschrift, Beschreibung und Alternativtext in der Nähe eines Bildes sagen Google, worum es geht. Eine Portfolioseite nur aus Bildern ohne Text bleibt in der Suche deshalb schwach. Eine kurze Kategoriebeschreibung und sinnvolle Kartentitel schließen diese Lücke.

Drittens geht es um Auffindbarkeit. Auf Websites mit vielen Bildern hilft eine Bilder Sitemap, damit Google auch Dateien findet, die es sonst übersehen könnte. Dieselbe Dokumentation erwähnt zudem, dass Sie Bilder dort auch dann aufführen können, wenn sie in einem Content Delivery Network liegen.

Außerdem sollten Dateinamen und Endungen zum tatsächlichen Dateityp passen. Erscheint in den Google Ergebnissen ein falsches Bild, erklärt unser Beitrag zum falschen Vorschaubild in Google die Lösungswege. Kurz gesagt sorgen sichtbare, eingebettete und auffindbare Bilder dafür, dass Ihr Portfolio auch in der Suche arbeitet.

Wie führt die Portfolioseite Besucher zur Anfrage?

Conversion bedeutet hier, dass Besucher nach dem Blick auf Ihre Arbeiten Kontakt aufnehmen. Eine schöne Galerie allein schafft das nicht, denn Besucher brauchen einen klaren nächsten Schritt. Verstecken Sie den Handlungsaufruf also nicht ganz unten.

Diese Platzierungen funktionieren meist gut. Nutzen Sie am Ende jeder Fallstudie einen passenden Aufruf wie „Angebot für ein ähnliches Projekt anfragen“. Auf Kategorieseiten bietet sich unter der Projektliste ein kurzes Formular für genau diese Leistung an. In langen Galerien können Sie zudem einen schlichten Kontaktknopf einsetzen, der beim Scrollen erreichbar bleibt.

Platzieren Sie außerdem Vertrauenselemente nahe am Aufruf. Ein freigegebenes Kundenzitat, eine kurze Liste Ihrer Branchen oder eine Übersicht Ihrer Prozessschritte räumen zum Beispiel letzte Zweifel aus. Übertreiben Sie es trotzdem nicht; ein ruhiges Layout überzeugt mehr als eine Wand voller Siegel.

Halten Sie das Formular dann kurz. Name, Kontaktdaten und ein Feld zum Projekt reichen meist aus. Zudem beschleunigt es das erste Gespräch, wenn das Formular mitsendet, von welchem Projekt der Besucher kam, weil Ihr Team das Interesse so von Anfang an kennt.

Möchten Sie Ihre Portfolioseite nach dieser Logik neu aufbauen, können Sie über unsere Seite für Webdesign Leistungen ein Angebot anfordern. Wir prüfen Ihren Projektumfang und schlagen eine passende Struktur samt Arbeitsplan vor.

Checkliste vor dem Livegang

Bevor die Portfolioseite online geht, empfehlen wir, die folgende Liste Punkt für Punkt zu prüfen. Jeder Punkt dauert nicht lange, zusammen machen sie allerdings einen großen Unterschied.

• Liegt für jedes Projekt eine schriftliche Freigabe vor?
• Haben alle Titelbilder dasselbe Seitenverhältnis?
• Sind die Kartentitel aussagekräftig und in einem einzigen Link?
• Funktionieren die Filterknöpfe per Tastatur und melden sie ihren Zustand?
• Laden die Bilder im ersten Sichtbereich normal und der Rest mit Lazy Loading?
• Hat jedes Bild Breiten und Höhenangaben?
• Schließt die Lightbox mit Escape, und kehrt der Fokus zum Auslöser zurück?
• Sind die Alternativtexte kontextbezogen und ohne Wiederholung?
• Haben Sie Standortdaten entfernt?
• Endet jede Fallstudie mit einem passenden Handlungsaufruf?
• Sind die Tippflächen auf dem Smartphone bequem, und funktioniert die Filterleiste?

Es hilft außerdem, die Liste im Team zu teilen. Zum Beispiel prüft die Redaktion Freigaben und Alternativtexte, während die Entwicklung Ladeverhalten und Tastatur testet. So bleibt die Verantwortung klar, und kein Punkt geht verloren.

Nutzen Sie die Liste auch bei jedem neuen Projekt. Denn eine Portfolioseite lebt, und Probleme schleichen sich meist mit der Zeit durch eilige Ergänzungen ein.

Welche Fehler passieren am häufigsten?

Die Fehler, die wir am häufigsten sehen, ähneln sich. Zunächst laden viele jedes Projekt ohne Auswahl hoch. Starke Arbeiten gehen dann in der Masse unter, und Besucher bewerten die Qualität nach dem Durchschnitt.

Zweitens fehlt oft der Kontext. Eine Seite nur mit Fotos sagt nicht, was Sie getan haben, für wen und wie. Kurze Beschreibungen und Fallstudien lösen das.

Drittens bremsen schwere, unkomprimierte Bilder. Dateien direkt aus der Kamera machen die Seite langsam und vertreiben mobile Besucher. Ein vierter Fehler ist eine Lightbox ohne Tastaturbedienung; Besucher können die geöffnete Ebene nicht schließen und verlassen die Seite.

Fünftens veröffentlichen manche ohne Freigabe. Ein Projekt zu zeigen, das der Kunde nicht öffentlich sehen wollte, entwertet selbst das beste Design. Schließlich fehlt häufig der Handlungsaufruf. Der Besucher ist überzeugt, weiß aber nicht, wohin er klicken soll.

Alle diese Fehler haben eine gemeinsame Wurzel: Niemand hat die Portfolioseite mit den Augen der Besucher betrachtet. Geben Sie deshalb vor dem Livegang einer Person, die die Seite nie gesehen hat, ein Smartphone und bitten Sie sie, ein bestimmtes Projekt zu finden. Jede Stelle, an der sie zögert, ist eine Stelle zum Verbessern.

Zusammengefasst ist eine gute Portfolioseite ausgewählt, kontextreich, schnell, barrierefrei und führend. Bauen Sie diese fünf Eigenschaften zusammen auf, sieht Ihre Galerie nicht nur gut aus, sondern bringt auch Aufträge.