Zum Inhalt springen

Jetzt anfragen!

Bilder

Der visuelle Aspekt ist im World Wide Web sehr wichtig, um Inhalte aufzulockern. Bilder können eine Website sehr bereichern und Informationen sowie Emotionen auf einfachem Wege vermitteln.

Damit Bilder richtig wirken können, müssen die passenden Rahmenbedingungen geschaffen werden.

In den letzten 20 Jahren haben sich einige Muster entwickelt, wie Bilder als „Eye-Catcher“ erfolgreich eingesetzt werden können und entweder als eigenes Element oder als Sprungmarke für weitere Bereiche dienen können.

Galerie

Das Galerie-Pattern beschreibt wie in der realen Welt eine Lösung, den NutzerInnen eine Serie von Bildern vorzuführen.

Funktion & Anwendung

Galerien bestehen üblicherweise aus einer Übersicht und einer Detailansicht.

Die Übersicht wird durch eine Serie von kleinen Vorschaubildern (Thumbnails) hergestellt, die oben, neben oder unter einer größeren Version des Bildes angezeigt werden. Damit nicht zu viele Vorschaubilder auf einmal angezeigt werden, kann eine Pagination zum Einsatz kommen, welche die Liste an „Previews“ in mehrere Seiten aufteilt. Durch die Angabe, aus wie vielen Bildern die Galerie besteht und an welcher Position man sich befindet („Bild 2 von 10“) wird die Übersichtlichkeit weiter erhöht.

In der Detailansicht wird das Bild vergrößert angezeigt. Dazu können weitere Informationen wie eine Beschreibung, der Urheber, technische Daten o.ä. eingeblendet werden. Häufig gibt es bei der Detailansicht die Möglichkeit, über Links zum nächsten oder vorherigen Bild in der Reihe zu navigieren. Manchmal wird diese Weiterschaltung auch automatisiert. Man spricht dann von Slideshow-Funktionalität.

Eine gern gewählte Variante der Detailansicht ist, das große Bild in einer Lightbox zu öffnen.

Slideshow

In einer Slideshow wird den BesucherInnen automatisch eine Folge von Bildern oder Inhalten angezeigt - wie bei einer Multimedia- oder Dia-Show.

Funktion & Anwendung

Im Hauptbereich der Slideshow wird der Inhalt, also das Bild gezeigt.

Durch einen kurzen Beschreibungstext kann das Bild näher erläutert werden. Die Betonung liegt hier auf „kurz“, da die Slideshow jedes Bild nur kurz anzeigt und dann zum nächsten weiterschaltet.

Die aktuelle Position inerhalb der Galerie kann durch Zahlenangaben („14 / 20“), Miniaturansichten („Thumbnails“) oder kleine Symbole (z.B. Kreise) angezeigt werden. Jedes Symbol steht dann für ein Element der Slideshow. Die aktuelle Position (z.B. der dritte Kreis, wenn man beim dritten Bild ist) wird graphisch hervorgehoben.

Die Thumbnails oder Symbole können zugleich klickbar gemacht und somit als Navigationslemente verwendet werden. Zusätzlich werden gerne Links zum nächsten und vorherigen Bild eingeblendet. Sie können entweder über das Bild gelegt werden oder rund um das Bild angebracht werden.

Um den BenutzerInnen größere Handlungsfreiheit zu geben, können weitere Bedienelemente angebracht werden, um die Slideshow zu pausieren oder die Abspielgeschwindigkeit zu ändern.

Slideshows eigenen sich für das Teilen in sozialen Netzwerken. Deswegen ist es zu empfehlen, an dieser Stelle Share-Buttons einzubauen.

Thumbnail

Thumbnails sind Miniatur-Ansichten von Graphiken, Videos oder Dokumenten.

Funktion & Anwendung

Dieses Design-Pattern kann genutzt werden, um BesucherInnen eine Vorschau auf eine größere Version des Inhalts zu geben. Thumbnails werden vorwiegend bei Bildern eingesetzt.

Für den Einsatz von Thumbnails gibt es vorwiegend zwei Argumente:

  1. Man kann den UserInnen einen Überblick über viele Elemente auf einmal geben (z.B. bei einer Galerie oder Slideshow).
  2. Die Miniatur-Ansicht hat eine geringere Dateigröße und wird dadurch schneller geladen als die vollständigen Versionen.

Animierte Icons

Animierte Icons bieten eine gute Möglichkeit Abläufe oder Aktivitäten dynamisch darzustellen. Außerdem bleiben Animationen beim Betrachter besser in Erinnerung als statische Objekte.

Zoom

Mit der Zoom-Funktion können große Bilder auf begrenztem Platz mit allen Details angezeigt werden.

Funktion & Anwendung

Dieses Pattern kommt zum Einsatz, wenn man den BesucherInnen große Bilder anbieten möchte und nur begrenzter Platz auf der Seite verfügbar ist oder keine großen Bildschirme zum Einsatz kommen.

Entweder ausgelöst durch einen Klick oder das Überfahren des Bildes mit dem Maus-Cursor wird quasi eine Lupen-Funktion angewendet. Durch die Bewegung der Maus kann ein beliebiger Ausschnitt der Graphik in voller Größe betrachtet werden. So können Details besser ins Auge gefasst werden.

Themen

Photos, Bilder, Zeichnungen, Galerien, Bildpräsentation, Bilderliste, Lightbox, Popup, Dia-Show

Callback Service

Wir rufen Sie gern für ein Beratungsgespräch zurück!