Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Das Portfolio für Selbstständige und Freiberufler

Das Portfolio für Selbstständige und Freiberufler

Wer das Web als Medium für die Selbstvermarktung nutzen will, braucht als Webdesigner ein aussagekräftiges Portfolio. Nils Pooker erläutert, was Ihr dabei beachten solltet.

Gemälde (Ausschnitt): David Teniers d. J., Erzherzog Leopold Wilhelm in seiner Galerie, ca. 1647. Prado, Madrid.

Grundsätzich ist es völlig egal, ob und wie Ihr Eure Referenzen präsentiert. Wer ausschließlich oder überwiegend für größere Unternehmen oder Agenturen arbeitet, unterzeichnet oft ein NDA (Non Disclosure Agreement), mit dem Verschwiegenheit bezüglich des Projektes vereinbart wird. Zumindest bei den bekannten Köpfen der Branche kann man auch bei magerem Portfolio davon ausgehen, dass die Auftragsbücher sowieso gut gefüllt sind.

Potentielle Kunden werden Eure Blogbeiträge zur Datenspeicherung oder zum neuesten jQuery-Update eher nicht lesen. Was einen Kunden interessiert, sind konkrete Beispiele Eurer Arbeit, am besten existierende Beispiele im Web. Sofern Ihr schon in der Startphase mehrere Projekte unter Verschwiegenheitspflicht umgesetzt habt, könnt Ihr Details oder Kernaspekte Eurer Arbeit in komplett modifizierter und anonymisierter Form präsentieren.

Referenzen für potentielle Kunden

Wenn Ihr ein Portfolio als Marketinginstrument nutzen wollt, müsst Ihr besonders auf die Qualität der präsentierten Inhalte achten.

Kunden nehmen eine Webseite zuerst visuell wahr. Die meisten Webdesigner verärgert das, und doch werden auf vielen Portfolioseiten oft nur Screenshots mit einer kurzen Bildunterschrift verwendet – also ebenfalls rein visuelle Informationen. Wie Ihr die Portfolioseiten präsentiert und gestaltet, ist nicht entscheidend. Denkt daran: auch mit schönen Effekten zeigen Screenshots oder Ausschnitte als visuelle Platzhalter nur ein blasses Spiegelbild der Komplexität Eurer Webseiten.

Der Besucher sieht beim Klick auf eine Referenz nur das Endergebnis Eurer Leistungen. Was auch Kunden stets spannend finden, sind Entwicklungsschritte zur Designentwicklung oder Vorher-Nacher-Beispiele. Hier können sich die Designer unter Euch ruhig austoben. Die Informationen bieten einen echten Mehrwert und zeigen außerdem die Flexibilität Eurer Designkompetenz. Die Visualisierung einzelner Projektphasen sind zudem eine wunderbare Argumentationshilfe zur Preisgestaltung, wenn Euer Kunde den kalkulierten Arbeitsaufwand einer professioneller Designentwicklung nicht auf Anhieb nachvollziehen kann.

Kunden erkennen mit Euren Referenzen auch immer einen bestimmten Stil. Das muss kein Nachteil sein, im Gegenteil. Ihr habt die Chance, auf Eurer eigenen Portfolioseite grauenhafte Farbvorgaben oder uralte Designrichtlinien des Kunden zu thematisieren. Sofern ein Projekt nicht Eurem Verständnis von technischer oder gestalterischer Qualität entspricht, könnt Ihr diese konkreten Aspekte sachlich erläutern.

Texte zu den Referenzen

Zu einem Portfolio als Marketinginstrument gehört immer ein erläuternder Text. Einige Webdesigner formulieren ihre Referenzen so, wie das Ärzte oder Rechtsanwälte mit Veröffentlichungen praktizieren. Ergebnis: Fachtexte für Experten.

»Content is king« bedeutet auch, dass Ihr den Nutzern einen leichten Zugang zu den Inhalten Eurer Leistungen bieten müsst. Vermeidet unnötige Fachbegriffe, Abkürzungen und technische Details. Wenn Ihr auf Qualitätsmerkmale wie zum Beispiel Validierung, Webstands, CSS3, Barrierefreiheit oder Graceful Degradation eingehen wollt, müsst Ihr diese Aspekte verständlich machen.
Hier bietet sich das an, was man allgemein soft marketing nennt: eine Seite unter der Rubrik »Qualität moderner Webentwicklung« (oder ähnliches) zeigt dann eben nicht Inhalte voller Selbstbeweihräucherung, sondern konkrete, objektive, allgemein gültige Aufklärung für alle Nutzer – nicht nur für potentielle Kunden. Solche Inhalte werden übrigens sehr intensiv gelesen. Mit dieser Seite könnt Ihr dann Fachbegriffe problemlos im Portfolio verwenden und verlinken.

Was wird wie dargestellt?

Im Laufe der Jahre kristallisieren sich bei vielen Webdesignern Schwerpunkte heraus. Das betrifft nicht nur Kompetenzen, sondern auch Zielgruppen. Viele Referenzen auf einer Seite zu zeigen ist machbar, besser ist aber eine Trennung nach Kategorien. Oft sieht man auf Referenzseiten, dass hier ein Template erstellt wurde, dort ein Screendesign und im nächsten Beispiel das komplette Projekt. Drei Screendesigns hintereinander, und der eilige Nutzer könnte glauben, der Webdesigner kann nur Screendesign. Lasst Eure Phantasie spielen: zeigt Kategorien zu Leistungssvarianten, bildet Kategorien von Kunden- bzw. Projektgrößen oder sortiert Eure Beispiele nach Branchen.

»Weniger ist mehr« – dieses Sprichwort gilt auch für eine erfolgreiche Portfolioseite. Befreit Eure Seite einmal jährlich von Altlasten oder Beispielen, die nicht mehr zu Eurer Zielsetzung passen und präsentiert regelmäßig neue, gute Referenzen. Unterschätzt den Aufwand nicht: ich bin hier gerade der Schuster mit den schlechtesten Schuhen…

Tipps für Entwickler

Die bisherigen Ausführungen beziehen sich vor allem auf Webdesigner. Als reine Frontend-Entwickler solltet Ihr potentiellen Kunden keine 50 Zeilen Quellcode mit technischen Erläuterungen zumuten. Ihr könnt vielleicht kein klassisches Portfolio zeigen, dennoch habt Ihr genug Möglichkeiten, Eure Kompetenzen angemessen zu präsentieren. Euer Job ist das Qualitätsmanagement einer Website und die mediengerechte Umsetzung eines Layouts oder Designdetails, das Portfolio sollte also eher durch Aufklärung als durch Präsentation gekennzeichnet sein.

Zeigt und formuliert beispielsweise die Vorteile eines schlanken, validen Codes bei einem Relaunch: jeder versteht, dass sich 20 Zeilen Code schneller laden als 100 Zeilen. Was die Qualität ausmacht, könnt Ihr konkret und in einfachen Worten anhand der Referenzen erläutern. Potentielle Kunden interessieren sich dafür, wie und warum Ihr Eure Entscheidungen getroffen habt, um aus medienspezifischen Qualitätsvorgaben und konkreten Kundenanforderungen ein professionelles Ergebnis zu erzielen. Zeigt mit Screenshots beispielsweise die Skalierung von Layouts, Schriften oder Bildern, zeigt schön gestaltete Tabellen und Formulare, greift den Themenkomplex CSS3, Grafiken und Browserkompatibilitäten auf, erläutert die Zukunft einzelner HTML5-Elemente oder präsentiert interessante Javascript-Funktionen.

Beispiele und Inspiration

Gemälde (Ausschnitt): David Teniers d. J., Erzherzog Leopold Wilhelm in seiner Galerie, ca. 1647. Prado, Madrid.

Kommentare

Marco Kunz
am 14.12.2010 - 09:28

Vielen Dank für diesen Beitrag.

Als Azubi in einem Betrieb, in dem ich mich selbst ausbilde, kommen natürlich wenig Tips um die Ecke. Gerade in Punkten wie:"Wie präsentiere ich mich selbst vor potentiellen Kunden!" habe ich starke Defizite. Über Screendesign und validen Code liest man an allen Ecken und natürlich auch was gerade aktuell angesagt ist oder man ausprobieren kann in punkto Markup.

Man könnte also sagen, ich habe genau auf diesen Beitrag gewartet, seit ich 2009 auf die Webkrauts gestoßen bin.

Permanenter Link

Matthias Mees
am 14.12.2010 - 17:23

Ergänzend: Meines Erachtens darf das Portfolio vor allem eines nicht sein -- „Verlegt wie bei Suhrkamp. Unauffindbar.“ (Wolfgang Neuss).

Viele Besucher (und damit potenzielle Kunden) interessiert an der Webseite eines Webworkers zunächst nur das Portfolio, ergo sollte es schnell und ohne Hürden zu finden und erreichen sein.

Auf sehr inhaltslastigen Seiten, die viele textliche Informationen liefern, kann eine Vorschau mit z.B. zufällig ausgewählten Screenshots aus dem (nebst Link zum vollständigen) Portfolio sehr hilfreich sein.

Permanenter Link
Nils Pooker

Nils Pooker (Autor)
am 14.12.2010 - 20:18

@ Matthias: absolut richtig, das Portfolio/Referenzen gehört in die Primärnavigation. "Aktuelle Projekte", Voransichten oder ein Teaser passt auch auf die Startseite.

Permanenter Link

Die Kommentare sind geschlossen.