Webdesign Trends 2014 Beispiele und Analyse – Parallax Scrolling

In unserer neuen Artikelserie „Webdesign Trends 2014-Beispiele und Analyse“ dreht sich alles um die aktuellen Trends im Webdesign. Die erste Strömung, die ich mir heute vornehme, ist das Parallax Scrolling. Woher kommt der Trend? Was zeichnet Parallaxes Scrolling aus? Welche Vor- und Nachteile hat diese Darstellungsweise? Das und ein paar schöne Beispiele für Parallax Scrolling mit WordPress gibt es in diesem Post.

Als Begründer dieses Trends im Webdesign gilt die Marke Nike, die 2011 eine der ersten Webseiten mit Parallax-Effekt für seine Produkte veröffentlicht hat. Doch schaut man ein wenig über den Tellerrand hinaus, so gab es das Parallax-Design schon viel viel früher. Die Basis sind zwei Ebenen, die sich beim Scrollen unterschiedlich schnell bewegen und so eine Tiefenwirkung erzeugen.

 

In der Psychologie ist der Effekt schon seit geraumer Zeit als Bewegungsparallaxe bekannt. Und auch in der Medienbranche war der Effekt 2011 nichts Neues. Erinnert man sich an die Konsolenspiele Super Mario und Co. zurück, so stellt man fest, dass schon dort die Bewegungsparallaxe zur Tiefenwirkung eingesetzt wurde.

Doch kommen wir wieder zum Webdesign. Mithilfe von Google Trends lässt sich sehr genau zeigen, dass das Parallax Scrolling seit Ausgust 2011vermehrt recherchiert wurde. Ein weiterer Grund neben der Präsentation von Nikes Webseite könnten die neuen Webstandards HTML5 und CSS3 sein, mit denen sich die Implementierung solcher Effekte deutlich einfacher gestalten lässt als vorher. Allgemein haben HTML5 und CSS3 innerhalb kürzester Zeit dafür gesorgt, dass ein Großteil der Webseiten interaktiver und dynamischer wurden.

Mit Parallx Scrolling lässt sich nicht nur Tiefenwirkung erzeugen. Dank der verschiedenen Ebenen lassen sich die Inhalte einer Webseite so präsentieren, dass man damit sogar eine kleine Geschichte erzählen kann. Das ganze nennt sich dann Storytelling und wird von einigen als eigener Webdesign Trend angesehen. Ich denke jedoch, dass Storytelling schon immer eine Rolle im Webdesign gespielt hat und sich derzeit nur in einer neuen Form präsentiert. Man braucht nur an die vielen Werbevideos und Texte denken, die Unternehmen schon immer zu Marketing-Zwecken mit Geschichten gestaltet haben.

Parallax Scrolling ist ein Designelement, das die Produktpräsentation auf Webseiten verbessern und, richtig eingesetzt, auch als Storytelling-Mittel genutzt werden kann. Doch verbergen sich hinter dem schönen Effekt auch einige Nachteile für Website-Betreiber. Auf diese möchte ich im Folgenden etwas näher eingehen.

Große Bilder und mehr benötigte Rechenleistung

Parallax Scrolling nutzt große Bilder, um einen bleibenden Eindruck zu hinterlassen und kann je nach Programmierung sehr rechenintensiv sein. Das hat zu Folge, dass es nicht auf allen Geräten sauber läuft und so potentielle Kunden verschreckt. Ein weiterer viel kritisierter Punkt ist, dass der Effekt nicht zu jedem Produkt und Unternehmen passt. Einige Templates für WordPress Nutzen den Parallax Effekt deshalb für Slogans und kurze Texte. Hier hat jedes Unternehmen, dass denkt, dass Parallax Scrolling in Ihr Konzept passt, auch die Möglichkeit die verschiedenen Ebenen mit Bildern und Texten zu versehen und so Ihre Motive und Slogans ein wenig spektakulärer zu präsentieren. Auch Galerien mit den eigenen Referenzen lassen sich so eindrucksvoller in Szene setzen.

Wichtig beim Einsatz von mehreren Ebenen ist es, auf die Details der Bilder, die man nutzt, zu achten. Sind die verwendeten Grafiken zu detailreich und die Schrift zu minimalistisch, wird eine Webseite mit Parallax Effekt schnell unübersichtlich und die Usability leidet darunter. Selbständige, die den Effekt nutzen möchten und Storytelling betreiben wollen, sollten ebenfalls aufpassen, denn das ist ein Thema für sich und wenn man sich nicht lange genug mit seiner Homepage auseinandersetzt oder nicht das Budget für eine professionelle Planung und Gestaltung hat, wirkt auch Parallax Storytelling unprofessionell, so dynamisch es auch sein mag.

WordPress Themes mit Parallax-Effekt

Scroller*

Scroller-parallax-scrolling-beispiel

 

Nonus*

Nonus-parallax-scrolling-beispiel

Newave*

Newave-parallax-scrolling-beispiel

Montreal*

Montreal-parallax-scrolling-beispiel

Encore*

Encore-parallax-scrolling-beispiel

Eight Degree*

Eight Degree-parallax-scrolling-beispiel

Doch nicht nur im Webdesign nutzt man den Parallax-Effekt

iPhone5-Nutzer wissen genau was jetzt kommt, denn auch Apple hat sich den Parallax-Effekt bei seinem neuen Betriebssystem zu Nutze gemacht. Bewegt man das Smartphone hin und her, bewegen sich die Icons von den Apps auf der einen Ebene und auf der Anderen verschiebt sich der Hintergrund versetzt dazu (ab der Minute 1:26).

Ebenso das nächste Beispiel: Die Tierschutzorganisation WWF hat aus vielen verschiedenen Tierbildern auf unterschiedlichen Ebenen eine sehenswerte Präsentation erstellt:

 

0 Kommentare

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

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