Großartige Auftritte - großflächige Bilder, Videos und Slideshows in Webdesign

25.07.2014 von

Großartige Auftritte - großflächige Bilder, Videos und Slideshows in Webdesign

HD, Retina - unsere Bildschirme können immer bessere, hochauflösende Bilder anzeigen und auch großflächige Videos im Hintergrund der Website sind dank immer kürzeren Ladezeiten sehr beliebt. Mit dem Aufkommen dieser großen Bilder, die den Header der Seite oft bis zum Fold (der “Falz” von Websites liegt meist bei 500-600 px Höhe) hin ausweiten, wurde von manchen Seiten schon ein Ende der Slideshows vorraus gesagt. Aber die Wandlungskünstlerin Slideshow hat sich angepasst und ist neben statischen großen Bildern und Videos weiterhin häufig auf Startseiten vertreten.

Die folgenden Beispiele setzen großflächige Slideshows, Bilder und Videos in Kombination mit unterschiedlichen aktuellen Webtrends ein und können dir Anregungen für dein nächstes Projekt liefern.



Slideshows


Rose Cottage Canberra

Die Slideshow und die Navigation nehmen den gesamten Bereich über dem Fold ein.

Die Slideshow und die Navigation nehmen den gesamten Bereich über dem Fold ein. Weiter unten auf der Startseite befindet sich dann noch eine weitere große Slideshow, die, anders als die obere, mit Pfeilen bedienbar ist.



Greenland

Die Startseite besteht ganz aus der großflächigen Slideshow.

Die Startseite besteht ganz aus der großflächigen Slideshow. Sie ist hier nicht nur dekorativ sondern führt zu verschiedenen Unterseiten und ist mit Überschriften und kurzen Teaser-Texten versehen.


Wam Bam Club

Diese Slideshow stellt die verschiedenen Events des Nachtclubs vor.

Diese Slideshow stellt die verschiedenen Events des Nachtclubs vor. Der Link auf jedem Slide führt immer zum gleichen unteren Teil des Onepagers. Wie bei Onepagern häufig üblich, ist die Navigation fixiert und erlaubt so zu unterschiedlichen Bereichen der Seite zu springen.


Bryter

Hier stehen die Bilder völlig im Zentrum.

Hier stehen die Bilder völlig im Zentrum. Auch die Navigation tritt in den Hintergrund und ist, wie sonst eher bei mobilen Websites, über ein Icon erreichbar. Diesen Trend, mobile Navigationen auch in der Desktopvariante von Responsive Websites zu verwenden, sieht man immer häufiger.


Galway International Arts Festival

Dieses Design ist auf den ersten Blick irgendwo zwischen statischem Bild und Slideshow anzusiedeln.

Dieses Design ist auf den ersten Blick irgendwo zwischen statischem Bild und Slideshow anzusiedeln. Von der Umsetzungsseite her ist es aber eindeutig eine Slideshow, die sich in diesem Fall über die ganze Höhe und Breite der Website erstreckt. Durch Scrollen rutschen die Bilder in den Hintergrund. In den Vordergrund treten dann die Inhalte der Website, die in einem Raster präsentiert werden.


Statische Bilder

Blackwelder

Das großflächige Bild bietet direkt einen Eindruck von der zu vermietenden Bürofläche und außerdem genug Platz für einige Informationen.

Das großflächige Bild bietet direkt einen Eindruck von der zu vermietenden Bürofläche und außerdem genug Platz für einige Informationen.



Die folgenden drei Websites unterscheiden sich stark von der Thematik, verwenden aber alle drei große statische Bilder, um unterschiedliche Bereiche innerhalb längerer Unterseiten oder Onepager abzugrenzen. Optisch ähneln sie so etwas den Slideshows. Außerdem kommen hier auch oft feststehende Navigationen und der Parallax-Effekt beim Scrollen vor.


Naturel

Website mit großflächigen Bildern von Natural


Maja and the Jacks

Website mit großflächigen Bildern von  Maja and the Jacks


Asciano

Website mit großflächigen Bildern von  Asciano


Hintergrundvideos

Großflächige Videos in Websites können verschiedenen Zwecken dienen, mehr dazu erfährst du in meinem Artikel von vor ein paar Wochen. Aber auch die Videos selbst haben unterschiedliche Stile. Die folgenden zwei Seiten stehen beispielhaft für zwei häufige unterschiedliche Darstellungsarten.


Lou & Friends

Dieses Video gibt Einblicke in das Team hinter dem Produkt

Dieses Video gibt Einblicke in das Team hinter dem Produkt, die Planung und die Herstellung. Durch die leichte Körnung und den weißen Text rutscht es in den Hintergrund. Hier wird eine Geschichte erzählt, die den Besucher dazu verleitet auf der Seite zu bleiben, bis das Video wieder von vorne beginnt.


Negrar

Auf dieser Seite wird ein kurzes, sich fast ohne merklichen Bruch wiederholendes Video angezeigt.

Auf dieser Seite wird ein kurzes, sich fast ohne merklichen Bruch wiederholendes Video angezeigt. Es erzählt keine Geschichte, sondern wird verwendet um dem Motiv mehr Tiefe zu verleihen, als es mit einem statischen Bild möglich wäre. So wird eine positive Stimmung erzeugt, die den Besucher direkt auf das Produkt Wein einstimmt.


La Petite Mauson Favart

eine Website auf der sowohl mit einer Slideshow, großflächigen Bildern als auch einem Video im Hintergrund gearbeitet wurde.

Zum Abschluss noch eine Website auf der sowohl mit einer Slideshow, großflächigen Bildern als auch einem Video im Hintergrund gearbeitet wurde. Wie bei einem Onepager typisch fixiert sich die Navigation beim scrollen am oberen Ende der Website. In der Mitte der Seite findet sich ein Video, das als verschwommener Teaser bereits im Hintergrund abläuft. Weiter unten gibt es noch ein großes Bild, das beim Scrollen durch halb transparente Farbflächen mit Parallax-Effekt überlagert wird.


Apropos Slideshow, momentan sind wir bei den letzten Tests für eine verbesserte Bearbeitung der Slideshows in smooster CMS. Mit der neuen Funktion wird es dann möglich sein die Bilder der Slideshow auch direkt per Inline Editing in der Website zu verwalten. Mehr dazu dann in Kürze.


Habt ihr einen Favoriten unter den drei großflächigen Startseiten-Stars? Mischt ihr die drei auch, oder würdet ihr pro Unterseite oder Onepager immer nur eine Variante verwenden?


zurück
comments powered by Disqus