Was ist das am besten präsentierte Portfolio im Web?

[Hexodus]

Immer wieder entzündet sich in unserer Firma eine Diskussion, wie wir unsere Gallery umstrukturieren sollen, ohne dass wir zu einem Ergebnis kommen. Aber wie präsentiert man Bilder am eindruckvollsten und professionellsten? Kennt Ihr Beispiele für solche Portfolio-Wunderwerke?

[Jabo]

Eindrucksvoll sollte immer "benutzerorientiert" und "einfach" weichen. Es gibt allerdings unterschiede zwischen Werbe-Portfolios und Illustration. Einige der wichtigsten Anhaltspunkte meiner Meinung nach:

- Mit zwei Klicks von der Startseite will ich spätestens das erste Arbeitsbeispiel sehen können. Besser nur einer.
- Vor- und Zurückbuttons zum Durchklicken
- Thumbnails sollten dennoch immer alle sichtbar sein, wenn man sich eine spezielle Arbeit betrachtet
- Thumnails sollten immer das komplette Bild zeigen, nicht nur Ausschnitte
- Thumbnails ausreichend groß
- Sinnvolle Strukturierung der Arbeitsbeispiele, keine separaten Seiten für unterschiedliche Kategorien
- Dateigröße spielt eigentlich keine große Rolle mehr, aber es gibt einige Leute, die keine DSL-Leitung bekommen können (auch Firmen), deshalb nicht einfach große Bilder aneinander reihen (obwohl es die zukunftsträchtigste Methode ist, siehe Massive Black).

Hier unser Portfolio, wobei ich einige der oben aufgestellten "Regeln" erst danach für mich definiert habe. Dennoch denke ich, dass es vorallem simpel ist:

http://www.digitaldesign.de

[digitaldecoy]

Ich muss sagen, seitdem ich die Webseite von Erwin Madrid gesehen habe, ich ein großer Freund von komplett schnörkelloser Präsentation geworden bin. Ich finde es auch cool, dass er komplett auf Thumbnails verzichtet. Die Bandbreiten im Netz lassen das mittlerweile eigentlich zu und ich habe bisher noch nie so komfortabel so viele Bilder anschauen können. Gerade wenn man seine Arbeiten sinnvoll in Projekte gliedern kann, ist das vielleicht eine schöne Möglichkeit. Gut, auf Frames, wie sie Madrid verwendet, würde ich vermutlich verzichten.

Na ja, vermutlich ist meine Präferenz da aber nicht der allgemeine Geschmack.

EDIT:

@ Jabo: Stimmt, bei Massive Black ist das ja auch so. Also, ich finde das voll ok. Man muss ja nicht ALLE Bilder auf EINE Seite packen.

[Hexodus]

Um diese Page gehts übrigens:
http://www.augenpulver-design.de

Ich sehe schon, dass ich einige Regeln Jabos verletzt sehe. Darüber muss ich noch nachdenken, inwiefern sich diese Sinnvoll einsetzten lassen.
Am besten würde ich mir gerne ein paar Portfolios ansehen wollen, die mich in der Präsentation und Gliederung umhauen, um mich davon inspirieren zu lassen.
Daniels Beispiel finde ich vielleicht zu schnörkellos. Das ist sicher ein Portfolio das man bei einem Freelancer gerne sieht und das die Wirkung nicht verfehlt. Doch als Firma sehe ich mich verpflichtet etwas komlexeres zu gestalten.

[bruZard]

Die Site von "Erwin Madrid" geht garnicht. Die Arbeiten sind super, aber der Rest ist furchtbar. Wir haben heute so tolle Möglichkeiten ein Portfolio strukturiert darzustellen und dabei nicht auf Design zu verzichten (ja ja, mein eigenes Portfolio rechtfertigt hier sicher keine Kritik).

Aber wer seine Arbeiten wie Erwin Madrid präsentiert, der kann auch einfach nur ein Verzeichnis-Listing machen.

[lucy]

das gute an der seite ist, dass man sich so sehr schnell viele bilder angucken kann.
mit einem klick schnell durch viele bilder scrollen, die alle schon geladen sind.

ich finds sehr praktisch.

[IronCalf]

bruZard: Verstehe ich nicht, wieso geht das garnicht?

Was ich absolut nervtötend finde und ich gleich mal die Seite wieder verlasse ist dieses unsägliche Lightbox.

[Jabo]

Seite verlassen muss man nicht. Die beste Methode ist, die Thumbnails immer an einer festen Stelle stehen zu haben. Wenn man dann draufklickt, wird der jeweilige Thumb hervorgehoben (damit man weiß wo man ist) und das komplette Bild öffnet sich daneben. Dazu darf man aber keineswegs die Buttons zum Durchklicken vergessen. Thumbnails sind zum gezielt klicken vorhanden ("Siehst du, das hier meinte ich *klick*" oder "Oh, das sieht ganz nett *klick*"), die meisten Leute klicken aber am liebsten durch.

Die Lösung mit der Bildersammlung ist zwar ganz nett, aber es treten einige Usability-Probleme auf:

1. Man kann Leute nicht auf ein einzelnes Bild verweisen, ohne dass:
1.1 derjenige alle Bilder der Seite laden muss. Ist das gewollte Bild ganz unten, dauert es auf jeden Fall, unabhängig von Bandbreite. Art Directoren sind nicht unbedingt für Geduld bekannt.
1.2 man die Bild-URL verschickt. Das hat zur Folge, dass jeglicher Beschreibungstext oder Titel des Bildes verloren geht, mal abgesehen von jeglicher Präsentation. Und da Google unser Freund ist, geht das Suchmaschinentechnisch gar nicht.

2. Bandbreite. Die Telekom berichtet immer von ihrer schönen 95-prozentigen Netzabdeckung für DSL. Dass es tatsächlich aber nur 70% sind, die für die Telekom "rentabel" sind, wissen die wenigsten. Ich lebe in einer der Gegenden, wo wir von der Telekom keine Leitungen gelegt bekommen und surfe mit sündhaftteurem 800/800er DSL von der Mafia einem Drittanbieter. Eine der Seiten von Erwin Madrid lädt selbst bei mir etwa 3 Minuten. Das ist nicht akzeptabel. Auch wenn es nicht mehr die Mehrheit ist, Light-DSL (mit weniger als 800 Downstream, 7-10 Minuten Wartezeit bei Herrn Madrid) ist immer noch in Benutzung.

Lösung: Jedes Bild sollte eine eigene HTML-Seite mit Bild sein, die richtig strukturiert ist. Das heißt den Titel des Bildes als Überschrift und im <title>-Tag des HTML-Kopfes als Minimum.


Hexodus: Die Thumbnails sind das typische Beispiel. Was sollen mir diese 32x32px großen Pixelansammlungen sagen? Da kannst du auch gleich den Bildtitel ohne Bild anzeigen lassen (hatte ich mir mal überlegt, aber eher sinnlos) oder einfach ein generisches Symbol (wie bei uns auf der Seite, auch suboptimal).


Allgemein: In Deutschland herrscht wie in wenigen Ländern sonst nocht die 10 Jahre alte Mentalität "Der Benutzer soll sich meiner Präsentation fügen!". Richtig und seit Jahren als richtig erwiesen hat sich die Methode "Der Benutzer ist der Herr, ich biete ihm Informationen an. Er soll entscheiden, was er sich ansieht". Das gefällt den meisten nicht, ist aber unaufhaltsam und auch richtig so.

Um dennoch nicht übersehen zu werden (das geschieht am ehesten durch die alte Mentalität), braucht es einige essentielle Dinge:

a) richtige Informationsstrukturierung, leicht erreichbar, SCHNELL und schnörkellos.
b) guten Inhalt. Das hat technische (Suchmaschine) und soziologische (Leseverhalten, Aufmerksamkeitsdauer) Gründe. Die meisten Seiten von Wikipedia werden gerade in "Simple Englisch" übersetzt. Mehr, dafür kürzere Sätze, kaum Nebensätze oder Kommata, viel Information, gestückelt in kleine Häppchen.
c) keine Benutzer-Unterdrückung. Man gibt dem Benutzer die komplette Kontrolle über die Seite. Keine "Back to Main Menu" Buttons, stattdessen lässt man den Benutzer über die Browser-internen Back- und Forward-Buttons die Navigation übernehmen.

Das klingt imme so esotherisch oder als ob die großen Usability-Nazis Parolen rufen. Tatsächlich hat sich aber gezeigt, dass die Seiten, die diese Dinge beachten, die beliebtesten sind. Und deshalb gibt's seit einigen Jahren keine Flash-Intros mehr


Guter (und lustiger) Artikel genau zum Thema Künstler-Portfolios:

http://www.linesandcolors.com/2007/05/3 ... n-the-web/

[MartinH.]

@hexodus: mehr als 3 bilder auf eurer seite hält meine lightbox-aufklappen-seh-allergie nicht aus, dann spätestens muss ich eure seite wieder verlassen.
ich habe einmal so ein script (nicht lightbox, ich glaube simplebox wars) eingebunden, weil ein freund das unbedingt haben wollte. wenn man übers CSS das desing an die eigene seite anpasst und im java script alle verzögernden timer auf nahezu 0 setzt, dann kann das eine schnelle und bequeme variante zum durchklicken werden. so wie ihr es eingesetzt habt, ist es einfach nur furchtbar.

@jabo: ich bin ansich auch ein usability-prediger, und dem meisten was du sagst stimme ich absolut zu, aber ich frag mich immer, wo soll man die grenze ziehen? wenn ich z.b. eine bildergallerie habe, soll die dann barriere frei sein? soll ich überall noch tags einbauen, die bei browsern für blinde bestimmte wichtige bereiche anders betonen?
und soll ich eine seite gestalten die es mit light-DSL angenehmer, mit DSL 6000 aber langwieriger macht zu benutzen, weil man mehr klicken muss?
aber danke für die hinweise mit verlinkbarkeit direkt aufs bild usw. ich werd versuchen möglichst viel bei meiner website demnächst zu berücksichtigen.
und eure seite ist wirklich schön schnell. thumbnails hätt ich mir aber trotzdem gewünscht.

[Jabo]

Ja, war technisch nicht möglich. Ich kenne mich nicht in PHP aus, deshalb musste es so realisiert werden, heh.

Die Grenze liegt bei mir sehr niedrig, ehrlich gesagt. Ich achte vorallem auf sinnvolle HTML-Strukturierung. Tags und Screenreader-Unterstützung braucht man in der Galerie wohl kaum. Aber wenn man sich einfach mal in die Lage desjenigen versetzt, der später die Seite benutzt, das ist schon etwas, was die meisten nicht tun. Lustig ist auch zu sehen, wie schnell Leute schwitzen, wenn sie auf ihrer eigenen Website etwas gezielt suchen. Das sind dann oft 5 bis 10 Klicks, nur um eine Bild zu finden. Muss ja irgendwie nicht sein, es geht oft viel leichter.

Auf jeden Fall schön, dass wir diesbezüglich übereinstimmen

[blarg]

Ich hoffe irgendwann genug Kohle zusammen zu haben, um mir mal ein vernünftiges Portfolio bauen zu lassen. Habe einige Sachen gebookmarked (welch Unwort), die mir gefallen haben, keine davon ist perfekt - ich wuerde noch einiges aendern. Passt aber hier rein, deshalb:

http://www.heatherwaraksa.com
http://www.highcontrast.co.uk/
http://www.dock11.com/
http://www.retouched.de/

[Pictor]

Schau mal hier Hexodus, vielleicht hilft dir das auch weiter.
http://www.digital-web.com/articles/the ... portfolio/

[Jabo]

Super Artikel. Dankeschön!

Drin steht ein schöner Satz, der auf die eigentliche Frage "Schön designed und trotzdem simpel?" eine klare Antwort gibt:

If you want to show your interactive creativity, it’s best to do it in the portfolio, not on it.

[Hexodus]

Oh, vielen Dank das sind sehr gute Anregungen.
Was in der Page sehr hochgelobt wurde ist die page von Recom:
http://recom-post.de/
Persönlich finde ich die Bedienung sehr umständlich, dafür ist die Präsentation eine Augenweide.

[MartinH.]

@blarg: finde die alle nicht gut, teilweise sogar sehr nervig. Vor allem ruckeln die flasch sachen alle mehr oder weniger penetrant bei mir. und an meinem PC sollte es eigentlich nicht liegen.

[digitaldecoy]

Ich habe auch das Gefühl, hier trennen sich die Geschmäcker. Animationen für den Bildaufbau finde ich unnütz und wenn ich eines wirklich hasse bei Webseiten, dann sind es Ladebalken. Wenn Bilder geladen werden müssen, dann soll man das den Browser machen lassen. Dann sieht man wenigstens schon die Bilder, die runtergeladen sind. Aber wie gesagt, hier gibt es wohl einfach sehr unterschiedliche Ansichten und umso wichtiger ist wohl die Klärung der Zielgruppenfrage.

[MartinH.]

die frage ist, wo der kleinste gemeinsame nenner ist. wer jetzt z.b. auf aufwändige flash präsentationen steht, wird der eine seite enttäuscht verlassen, die ihm einfach nur schnell und einfach bilder zeigt?

[Duracel]

Allgemein: In Deutschland herrscht wie in wenigen Ländern sonst nocht die 10 Jahre alte Mentalität "Der Benutzer soll sich meiner Präsentation fügen!". Richtig und seit Jahren als richtig erwiesen hat sich die Methode "Der Benutzer ist der Herr, ich biete ihm Informationen an. Er soll entscheiden, was er sich ansieht". Das gefällt den meisten nicht, ist aber unaufhaltsam und auch richtig so.

Dem möchte ich vehement widersprechen.
Natürlich gibt man dem Besucher die Informationen genau so, wie man will, dass er sie zu sehen bekommt. In jedem gut komponierten Bild funktioniert das genauso; der Betrachter bekommt genau das zu genau dem Zeitpunkt zu sehen, wie es der Gestalter vorsieht.
Selektion und Ordnung seitens des Gestalters ist (wie auch)IMMER gegeben und ganz wichtig. Oder packst du z.B. auf deine Homepage auch deine "dir nicht gelungenen" Bilder, damit sich der Betrachter aussuchen kann, was er sich ansehen möchte?

Gekonnt ist es dann, wenn der Betrachter nicht (negativ be)merkt, dass er garkeine Freiheit hat.
Gutes Beispiel dafür und ein schönes Beispiel aus Nicht-Deutschland ist das Spielprinzip von Halflife. Man ist komplett dem vorgegebenen Spielablauf ausgeliefert.


(in diesem Sinne ist meine Homepage auch sicher ein negativ-Beispiel; allerdings ist meine HP auch vorallem auf "für mich" einfache Pflege ausgerichtet und dient auch dazu "mir" einen Überblick über meine eigenen Bilder zu liefern.)

In die selbe Kerbe wie deine Behauptung, Jabo, geht auch der Ausspruch "der Kunde ist König". Auch den halte ich für absolut einseitig und dadurch stellt er sich eigentlich schon von selbst in Frage.


Und für die DSL-nicht bekommer Minderheit seine Sachen zu optimieren halte ich auch für eine Krücke; das Problem wird dadurch ja auch nicht behoben. Das ist Symtombekämpfung, und die führt eh zu nichts. Im Gegenteil wäre das total fortschrittshemmend. Jeder darf da seine Priorität setzen und besitzt zumindest hier in Deu die Option umzuziehen. Die ganze INet-Geschichte ist eh nur für einen Bruchteil der Welt zugänglich; wer am falschen Fleck wohnt sollte eben seinen Standort optimieren(gerne auch durch Politik).

[Logan]

Also ich persönlich mag Lightbox auch nicht. Ich mag reduzierte Seiten wie die von Erwin Madrid. Aber Bild für Bild ist auch nicht schlecht. Am besten finde ich, wenn es über und unter dem gezeigten Bild genau 3 Buttons gibt: vorheriges Bild, Thumbnails, nächstes Bild. Wenn ich ein bestimmtes Bild anschauen möchte gehe ich auf die Thumbnails, ansonsten klicke ich mich eben durch. Alles was ich brauche, ohne Schnickschnack. http://www.ryanchurch.com/04PRO.htm ist so ein Beispiel, wobei er die Thumbnails noch nach Projekt hätte aufsplitten können, finde ich. Auch bei http://www.dylancolestudio.com/ funktioniert das meiner Meinung nach sehr gut, obwohl ein Link von einem Projekt auf die übergeordnete Kategorie fehlt. Wenn man auf irgendeinem Riddick Bild ist, weiß man nicht unbedingt, ob man bei Matte Painting ist. Was helfen würde wäre ein Verlauf: Matte Painting > Riddick > Bild X von Y.

[Jabo]

Ja Dura, du wirst wohl recht haben.

[coodle]

Klar hat Duracel in vielen Punkten recht, allerdings ist seine Einstellung ggü. Internetverbindung/DSL auch einseitig und stellt sich somit selbst in Frage.

Ich find das Portfolio von Madrid auch nicht schlecht btw, ist halt ein wenig wie in CA Threads reinschauen ... BAM! Da sind die Bilder!

[Logan]

Aber die Bilder sind doch das wichtige, oder?

[jaymo]

Also ich finde Lightbox und seine Klone eigentlich ziemlich gut als Bildbetrachter in Inet-Galerien. Lediglich das animierte Überblenden, was sehr häufig zu langsam eingestellt ist, kann massiv nerven, da es einfach nur unnötige Wartezeiten produziert. Besonders gut fand ich eine Lightboxvariante die auch per Hotkeys steuerbar ist. Der inflationäre Einsatz des ganzen ist natürlich auch etwas nervig, aber je reduzierter die Gestaltung, desto universeller. Am Din A4 Format haben wir uns ja auch noch nicht sattgesehen...

Was IMO gar nicht geht, ist erzwungenes Maximieren des Browserfensters.

[Jaster]

Ich mag die lightbox auch ganz gern, besonders die Variante bei der man eben wie jaymo schon gesagt hat mit dne Pfeiltasten durchmanövrieren kann. Sie ist zwar wirklich sehr, sehr weit verbreitet, aber ich glaub nicht dass das nur ein Trend ist. Sie ist einfach sehr schlicht und auf Benutzerfreundlichkeit optimiert.
Ansonsten sind diese blogartigen Gallerien die alle Bilder in einer Wurst reinladen am liebsten. Ich hasse es wenn fuer jedes Bild ein neues Fenster aufgemacht wird, bzw, die Bilder nicht miteinander verlinkt sind, und man jedes Bild seperat öffnen muss.

[Taros]

Interessante, wenn auch sehr subjektive Debatte.

@Hexodus: Vielleicht hilft Dir in diesem Chaos auch meine neue Website. Ich habe sie noch nicht breit kommuniziert, da sie noch nicht den Bereich "Flash und Film" enthält, den muss ich noch programmieren, aber 90% sind enthalten und sie ist von der Usibility her fertig.

Meine persönlichen(!) ArtDirector-Erfahrungen und vor allem Erwartungen einer Grafiker-Website sind dort enthalten und das sind nicht viele:
1. Die präsentierte Arbeit steht im optischen Vordergrund, nicht die GUI
2. Schnell an mein Ziel
3. Ich will auch mal ausschließlich das sehen, das mich interessiert

Vielleicht hilft's.

Ich bin weiterhin kein Freund von massigen Flashsites und auch kein Freund von großen Ladezeiten. Meine Kunden sind meist keine Agenturen, die über die Lade-Geduld und Bandbreiten verfügen, daher ist die Seite auf Schnelligkeit und kompakte Information ausgelegt, auch was die Pflege von meiner Seite angeht. Deswegen enthält die Site auch ein kleines CMS, das mir ermöglicht in wenigen Minuten ein neues Update zu machen, die Inhalte sortieren sich von selbst - nach Aktualität, die Neuesten zuerst.

Hoffe, es hilft bei der Optimierung.

www.grafikbuero-werner.de

Be creative
Chris