Webdesign-Trends: Große Bilder-Slider

Bilder-Slider sind ein beliebtes Webdesignelement, um Fotografien, Produktbilder oder Typografie ansprechend und platzsparend auf einer Webseite zu präsentieren. Und natürlich gibt es auch bei Bilder-Slidern jede Menge Design-Varianten und vielseitige Lösungsansätze. Daher habe ich eine Übersicht moderner Webseiten Bilder-Slider zur Inspiration zusammen gestellt.

Heath Waller Creative


Der Image-Slider auf der Webseite der Webdesignerin Heath Waller ist sehr schön in die Webseite integriert. Die Navigation funktioniert über schlichte Vor- und Zurück-Buttons und eine weitere dezente Übersichts-Navigation am unteren Sliderrand. Sehr elegant gelöst ist auch die Integration von Text in den Slider-Bildern.

Fish


Sehr elegant gelöst ist der Image-Slider auf der Webseite Fish. Die Bilder befinden sich hinter dem leicht transparenten Webseiten-Menü. Auch die Navigations-Buttons des Sliders liegen auf dem Menübalken.

Humaan


Das Besondere am Bilder-Slider auf der Webseite der australischen Designagentur Humaan ist, dass die Navigations-Buttons auf dem Webseiten-Hintergrund liegen. Die Slider-Bilder füllen die gesamte Webseiten-Breite aus.

LK Hjelle


Auf der norwegischen Webseite von LK Hjelle zieht sich der Image-Slider über die komplette Browser-Breite. Navigiert wird über schlichte Pfeil-Buttons in der linken Bildhälfte.

Lars Ahrens


Die minimalistische Webseite von Kommunikationsdesigner Lars Ahrens zeigt einen schlichten, großen Bilder-Slider auf der Startseite. Sehr schön ist auch die dezent animierte Typografie über den Bildern.

FreeAssociation


Der Slider bei FreeAssociation hat eine sehr schöne Unter-Navigation. Die dezent animierten Vor- und Zurück-Buttons sitzen ganz rechts und links am Bildschirmrand.

Brave Nu Digital


Der schlichte Slider auf der Webseite der Creative Agency Brave Nu Digital zeigt, dass auch typografische Elemente sehr gut in einem Bilder-Slider funktionieren.

IWC Schaffhausen


Die Webseite des Uhrenherstellers IWC Schaffhausen zeigt auf der Startseite einen eleganten Image-Slider mit einer sehr schön animierten Timeline.

Freunde von Freunden


Die Slider-Bilder auf der Webseite des Interview-Magazins Freunde von Freunden sliden von oben nach unten. Die Navigations-Buttons werden erst bei Maus-Hover sichtbar.

afgn


Der Bilder-Slider auf der Webseite afgn ist innovativ gestaltet. Die Bilder füllen die gesamte Browsergröße, die Navigation erfolgt über schlichte Buttons am rechten Bildrand. Das Logo und Introtext-Balken kann komplett ausgeblendet werden.

NL Engenharia


Die Bilder des Sliders auf der Webseite NL Engenharia können sowohl in einer Gesamtübersicht als auch einzeln angezeigt werden. Das Navigations-Menü blendet sich mittig am unteren Slider-Rand ein und zeigt zusätzliche Vorschaubilder an.

Rickard Sund


Der Bildschirmfüllende Slider auf der Webseite des Fotografen Rickard Sund ist durch eine spielerische Navigation gelöst. Durch Drag’n’Drop können die Bilder weiter geschoben werden, der Mauszeiger malt dabei eine dünne Linie über die Bilder.

Assistly


Auf der Webseite Assistly nimmt das Slider-Element die obere Bildschirmhälfte ein. Die Slider-Elemente beinhalten Text, Illustrationen und einen Link-Button.

Gauged2


Der kreative Slider auf der Webseite von Gauged2 reagiert auf Bewegungen mit der Maus und lässt die Bilder leicht wackeln. Die Animation der Bilder ist ebenfalls innovativ gelöst.

Gughi Fassino


Ein sehr innovatives Slider-Element gibt es auch auf der Webseite von Gughi Fassino zu bewundern. Die Fotografien lassen sich entweder in einer Vorschauansicht sliden oder in größeren Einzelbildern. Eine Navigation am unteren Bildschirmrand bietet weitere Filterfunktion der Bilder.

The Greenway Pro


Die Webseite des The Greenway Pro Fesivals besteht aus einem großen horizontalen Image-Slider der den Webseiten-Hintergrund bildet. Das Logo, Webseiten-Menü und die Sponsoren-Logos bleiben in einer darüber liegenden Ebene an ihrer festen Position stehen.

Hunt Studio


Der minimalistische Portfolio Bilder-Slider von Hunt Studio zeigt Bildschirmfüllende Bilder der neusten Arbeiten. Die Navigations-Buttons werden dezent ausgeblendet. Eine zusätzliche Übersichts-Navigation befindet sich am unteren linken Bildrand. Ein Infotext zu den einzelnen Projekten kann aus- oder eingeblendet werden.

Atlason


Die Arbeiten einer Produkt-Kategorie können auf der Webseite der Design Company Atlason in einem Image-Slider angeschaut werden. Die einzelnen Bilder sliden von oben nach unten und werden über eine Navigation mit Vorschaubildern bewegt. Über ein Plus/Minus-Button gelangt man zurück auf die Übersichtsseite.

Tangent Graphic


Die Designagentur Tangent Graphic zeigt ihre Projekte in einem schlichten Slider, der den gesamten Webseiten-Inhalt ausfüllt. Ein beschreibender Text ist auf einem dunklen, leicht transparenten Feld darübergelegt.

SLINT


Auf der Webseite des Singaporer Designstudios SLINT kann man sich durch die einzelnen Projekte mit Hilfe eines vertikalen Sliders navigieren. Die Bilder eines jeweiligen Projekts werden dann noch einmal in einem horizontalen Slider präsentiert. Die Navigation funktioniert über schlichte Text-Links.

Wie gefallen dir die Slider-Inspirationen? Fallen dir noch weitere Webseiten mit tollen Slider-Lösungen ein? Über dein Feedback und weitere Links freue ich mich sehr!

Hallo, ich bin Manuel - Webdesigner, Illustrator und Blogger bei Elmastudio. Ich liebe Kunst und minimalistisches Design, Zeichnen, scharfes Essen, schwarzen Kaffee und dunkle Schokolade. Du findest mich auch bei Twitter, Facebook und Google+!

13 Kommentare

  1. Sind ja richtig schicke Dinger dabei :-) Vielen Dank fürs drüber-stolpern, dann zusammentragen und dann noch drüber schreiben.

    • Hallo drwitt,

      Vielen Dank für dein Kommentar. Es freut mich, dass dir die Inspirationen gefallen :-)

      Ja, bei einigen der gezeigten Beispiele haben sich die Designer schon ordentlich was einfallen lassen um das Sliden sinnvoller und auch ergonomischer zu machen.

      Gruß Manuel

  2. I’m sorry that I have to respond in English… I just wanted to thank you so much, Manuel, for featuring my site on your blog. I received a very kind note from one of your readers as a result.

    And looking at this post as led me to some great designers of whom I’d not been aware previously.

    So glad to have found your site – I’ll be sure to visit it in the future :)

  3. Hello Heath,

    Thanks a lot for your nice comment. That’s great, that you got a friendly note from someone.

    Your Website looks really awesome and of course we like your bird illustrations very much.

    We have a sparrow called Kubi as our website mascot :-)

    many greetings
    Manuel

  4. Ich bin auf der Suche nach einem Content Slider Plugin für WordPress. Ich möchte damit die Featured Blogeinträge auf der Homeseite präsentieren. Könnt ihr mir dafür ein Plugin empfehlen?

    Vielen Dank für die Hilfe im Voraus.

    lg JoLau

      • Ich werde diese Plugins mal anschauen. Merci.

        Über einen Artikel würde ich mich sehr freuen. Cool wäre auch wenn du zeigen würdest, wie so ein Content Slide direkt ins Theme einbaut, wie z.B. beim Theme JournalCrunch.

        Freue mich
        JoLau

  5. Toller Artikel, sehr geschmackvolle Auswahl – ich stehe vor folgendem Problem: alle Slider (vorzugsweise mit transparentem Text-Overlay) die ich für WP gefunden habe, waren (Blog)Artikel bezogen. Ich nutze WP aber als CMS bzw. habe nur statische Seiten. Und genau dafür habe ich keinen passenden Slider gefunden, muß aber dazu sagen, daß ich kompletter Laie bin und auch keinerlei Programmiersprachen beherrsche. Ich habe in verschiedenen Foren einige Leute gefunden, die ähnliche Erfahrung gemacht haben – ein Slider-PlugIn, das stumpf auf hinterlegte Odner zugreift und ein Text-Overlay bietet, wäre interessant. Natürlich wäre ein Tutorial zu bestehenden Lösungen hier auf diesem Blog ebenfalls sehr willkommen, die obigen Slider-Varianten machen doch etwas neidisch…

  6. sehr schöne slider. ich bin auf der suche nach einem slider-plugin über die ganze browsergröße, könnt ihr mir da weiterhelfen. vielen dank schon mal

  7. Hallo tolle Ideen die es hier gibt .
    Was mich wirklich sehr interessieren würde wie man so ein Hintergrund Slider erstellt wie auf der Seite von Gughi Fassino . Kann mir da jemand einen Tip geben ??? Danke

Hinterlasse eine Antwort

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