Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Attraktive Bildpräsentation – Teil 1

Attraktive Bildpräsentation – Teil 1

Detailarme Bilder in Briefmarkengröße gehören zum grauen Alltag im Netz. Dabei kann ein Bild bekanntlich für mehr als tausend Worte stehen. Dass es auch anders, vor allem attraktiver geht, zeigen große ebenso wie weniger bekannte Vertreter. Bilderpräsentationen,...

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 5 Minuten
  • von Michael Dobler
  • 18. Januar 2006
Bookmarke mich
Share on pocket

Detailarme Bilder in Briefmarkengröße gehören zum grauen Alltag im Netz. Dabei kann ein Bild bekanntlich für mehr als tausend Worte stehen. Dass es auch anders, vor allem attraktiver geht, zeigen große ebenso wie weniger bekannte Vertreter. Bilderpräsentationen, die Spaß machen und eine Website aufwerten.

Die Online-Dependance von Die ZEIT wählt als Navigationselement für ihre Fotogalerie die Analogie einer Bibliothek. Der Nutzer „geht“ von Etage zu Etage und findet dort jeweils eine Fotoausstellung.

Screenshot
Die aktuelle Ausstellung ist im ersten Stock. An der „Fassade“ der Bibliothek ist ein exemplarisches Bild zu sehen.

Die Gebäudeanalogie wird in der Fotopräsentation konsequent durchgehalten. Usability-Guru Jakob Nielsen bekäme zwar angesichts eines horizontal zu scrollenden Screens weitere graue Haare, jedoch sind die der Reihe nach gehängten Fotos stimmig und entsprechen dem realen Besuch einer Ausstellung.

Zur Realitätsnähe trägt auch die dreidimensionale Anmutung und Türen, durch die der Ausstellungsbesucher die einzelnen Räume betritt, bei. Unter jedem Bild ist ein Link zur Vita des Fotografen angebracht. Jedes Foto lässt sich in der Großansicht, hinter der auch eine wirklich deutlich größere Version zum Vorschein kommt, näher studieren.

Die Großansicht wurde mit einem Javascript-Popup realisiert. Popup-Blocker könnten hier den Ausstellungsgenuss trüben. Kleines Manko. Hat der Besucher sich an allen Fotos auf einer Etage satt gesehen und möchte zur nächsten Etage gehen, muss er unter Umständen das Aufsichtspersonal fragen, denn die Navigationstreppe versteckt sich unterhalb der Fotopräsentation und ist selbst auf einem 19 Zoll-Monitor nur teilweise zu erkennen.

Screenshot
Per Mausklick kann sich Besucher schnell von Ausstellungsraum zu Ausstellungsraum „beamen“..

Screenshot

Die Galerie von Die ZEIT ist ein Paradebeispiel für eine ansprechende Foto-Präsentation. Besonders wohl fühlen wird sich der entdeckerische Nutzer, den unkonventionelle Navigationskonzepte herausfordern. Künstler könnten mit der Raumanalogie auf ihren Internetpräsenzen Werke spannend ins rechte Licht rücken.

Der Tag in Bildern
Der Stern begleitet die wichtigsten Themen und Ereignisse eines Tages mit einer chronologischen Bilderschau, die sowohl im Headerbereich als auch am Ende jeder Seite des Nachrichtenmagazins beworben wird. Im Headerbereich begnügen sich die Layout-Strategen mit einer eher unauffälligen Grafik links neben dem Suchfeld. Am Seitenende wird der Leser prominenter mit einer Thumbnail-Vorschau der letzten fünf Bilder zum Klicken eingeladen.

Screenshot
Direkt neben dem Suchfeld ist der „Tag in Bildern“ ein optionaler Zugang zu Informationen.

Aus Usability-Sicht schade ist, dass ganz gleich auf welches der Vorschaubilder der Mausklick erfolgt, immer nur das zuletzt in die Bilderschau eingespeiste Motiv zum Vorschein kommt.

Die Bilderschau glänzt mit einer Zeitleiste aus kleinen Quadraten, die stellvertretend für ein Bild stehen. Datum und Trennlinien grenzen die Tagesstrecken voneinander ab. Als navigatorische Alternative kann der Leser die gewohnten Vor- und Zurück-Links zum Blättern verwenden.

Screenshot
Der Tag in Bildern. Ohne Grafikschnickschnack, dezent im Corporate Design des Gesamtauftritts.

Textlich flankiert werden die Bilder durch Bildunterschriften und Teaser, Appetitanreger, die einen Klick auf den darunter stehenden Link zum Langartikel provozieren sollen. Die Bilderschau ist somit keine Einbahnstraße, sondern ein visuelles Navigationselement, welches zu weiterführenden Informationen überleitet und dazu dient, den Leser möglichst lange im eigenen, werbevermarkteten Angebot zu halten.

Wer seinen Cursor weiter suchend über die Stern-Seite bewegt, der findet das „Liebes Leben“, eine Form der Bildpräsentation, die auch für alle Homepagebetreiber jenseits nackter Haut eine sprudelnde Inspirationsquelle darstellt. Der Einstieg erfolgt über die letzten drei Fotostrecken, angerissen durch ein repräsentatives Bild, den Namen des Fotografen und dem Thementitel.

Screenshot
Die ausgewählte Fotostrecke öffnet sich in einem Extra-Fenster, während im Hintergrund die erste Übersichtsseite von „Liebes Leben“ geladen wird.

Die Fotogalerie

Screenshot

1. Fotostrecken-Navigation
Der Nutzer hat die Wahl. Entweder er sieht sich die Bilder der Reihe nach an, klickt dazu auf das Einzelbild, benutzt den „Vor“-Link. Oder er wählt gezielt eines aus der Thumbnail-Vorschau aus, die passend zum Fotografen-Sujet in Form eines Negativstreifens gestaltet ist. Die Thumbnails sind groß genug um zu sehen, ob sich ein Besuch lohnt. Alternativ geht es auch im „Blindflug“ durch Klick auf eine Zahl – die Anzahl der Zahlen verrät gleichzeitig den Umfang der Fotostrecke. Am Ende des Bildstreifens kann der Besucher Informationen zum Fotografen abrufen.

2. Servicefunktion
Falls dem User ein Bild aus der Fotostrecke so gut gefällt, dass er es gerne einem anderen empfehlen würde, kann er das ohne in sein E-Mail-Programm wechseln zu müssen, mittels der „Foto versenden“-Funktion tun, die auf jeder Seite unterhalb des Bildes zur Verfügung steht.

3. Pull-Down Fotografen-Liste
Der Wechsel zu anderen Fotostrecken kann über das Pull-Down im Header erfolgen. Die Fotografen sind dort in chronologischer Reihenfolge gelistet. Nur einen dekorativen oder typografischen Zweck erfüllt der „Go“-Button rechts neben dem Pull-Down. Er wird nie benötigt, da die Auswahl eines Fotografen automatisch einen Seitenwechsel auslöst.

4. Übersichtsseiten
Übersichtsseiten runden die verschiedenen Auswahlmöglichkeiten der Fotostrecken ab. Hier kann der Besucher gezielter als beim Pull-Down weitere Serien auswählen. Kleine Anreißertexte mit weiterführenden Links versuchen neben den bereits bekannten Thumbnails zum Klicken zu animieren. Wer auf „mehr“ klickt, erhält nicht etwa mehr Text, sondern landet ebenso wie bei der Auswahl eines Thumbnails auf dem ersten Bild der Fotostrecke.

Screenshot
Als weiteres Schmankerl könnte bei jedem Seitenwechsel ein anderes Header-Bild erscheinen.

Die Internetausgabe des bilderlastigen Magazins gibt durch eine vielseitige und ansprechende Präsentation ihres Bildmaterials Anschauungsunterricht für Webworker. Über die reine Bildpräsentation hinausgehen die „Bilder des Tages“ als Ergänzung zur textbasierten Navigation. Dies steht nicht nur einer Medienseite gut zu Gesicht, sondern jeder Firma mit einem Newsbereich oder einer Firmenchronologie. Sehr schön ließen sich so zudem Produktneuheiten auf einen Blick präsentieren.

Erstveröffentlichung 18.01.2006

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Michael Dobler

Michael Dobler

Ich bin der Herausgeber von Dr. Web. Um praxisfit zu bleiben, unterstütze ich darüber hinaus Kunden bei der digitalen Kundengewinnung und Kundenbindung. Erste eigene Gehversuche im Internet unternahm ich 1999 mit einem Kinomagazin. Nach 15 Jahren in Lohn und Brot, u.a. als Projektmanager für digitale Medien, machte ich mich schließlich Ende 2005 selbständig. Das war die beste berufliche Entscheidung meines Lebens.

Agenturpartner

YOYABA

Hamburg

Timo Specht – SEO Freelancer München & Online Marketing Experte

München

Der Informations­designer

Kaufbeuren

Berlin Translate

Berlin

WeDeSu Online-Agentur

Speyer

Alle Agenturpartner

Jobs

Frontend-Entwickler Angular, React

Bonn

Cloud Engineer Container & Kubernetes

Karlsruhe

SEO Manager – Vollzeit

Remote

Junior Online Marketing Manager

München

Copywriter – Vollzeit

Remote

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.