Trends im Webdesign 2014

Ob Responsive Webdesign, Mobile First, Parallax Design oder auch Off-Canvas, alles samt Buzzwords im Webdesign, die einem 2014 mindestens ein Dutzend mal über den Weg gelaufen sind. Neben den technischen Hintergründen sind es vor allem die kreativen Umsetzungen dieser Techniken, die Besucher der Website ins Staunen versetzen können. In  diesem Beitrag geht es um diese Trends, welche mittlerweile eigentlich State of the Art sind, und einige Best Practise Beispiele für frisches Webdesign im Jahr 2014.

[toc]

Responsive Webdesign

Beim Konzept des Responsive Webdesign geht es vereinfacht gesagt darum, dass man flexible Designs entwickelt (engl. responsive = ansprechbar/reagierend), die nicht auf feste Bildschirmbreiten ausgerichtet sind, sondern diese aufgrund verschiedener Devices & Größen anpassbar sind. Deshalb muss man bei der Website-Programmierung die Größe außer Acht lassen. Das bedeutet natürlich auch, dass die Website auf dem Smartphone nicht direkt kaputt gehen darf. In der Praxis hat es dazu geführt, dass man alle möglichen Optimierungen vornimmt, sodass der Unterschied zwischen einer Mobile Website und einer Responsive Seite schon sehr im Detail liegt, wenn man es richtig gut macht.

Heißt aber dennoch nicht – gerade im E-Commerce, wo die Kleinstoptimierungen eine Rolle spielen – dass man da auch eine Mobile Website nochmal drauf legen kann und sagen kann: „Ich habe eine Responsive Website, die funktioniert überall, aber für Smartphone habe ich nochmal eine extra Website, die diese Sachen, die das Device kann, also sozusagen Webapp-Funktionen auch nochmal spezieller und optimierter ausspielt.“

Ein Kritikpunkt beim Responsive Design ist die Geschwindigkeit. Allerdings lässt sich die Performance wie bei jeder anderen Seite auch optimieren. Beispielsweise können bestimmte CSS Dateien nur dann geladen werden, wenn man sich auf einer bestimmten Viewport-Breite befindet (vgl. geräteabhängige Stilvorgaben mit CSS Media Queries). Um zu überprüfen, wie schnell seine Seite performt empfiehlt es sich regelmäßig die Website Speed zu checken.

Mehr zu Responsive Webdesign

ShopTechTalks #3: Responsive Webdesign – der Tech Podcast. HÖR-TIPP für Webentwickler & Co!

Splash Screen Desgin

Sogenannte Splash Screens waren in den Anfangsjahren des Web – respektive bis Mitte der 2000er- ein beliebtes Stilmittel im Webdesign. Dabei handelte es sich um eine vorgelagerte Startseite, bevor man auf die eigentliche Seite mit dem Menü gelangte. Typischerweise war auf der Startseite nur wenig Layout, lediglich das Logo und ein paar Informationen, welcher Browser und welche Monitorauflösung unterstützt wird. Heute sehen wir ein Revival des Splash Screens, welche aber wesentlich benutzerfreundlicher sind als diese ursprünglichen vorgelagerten Startseiten.

Moderne Splash Screens sind direkt in die Hauptseite integriert und füllen den kompletten Bildschirm mit einem passenden Bild und ggf. nur dem Logo oder sehr kurzem Text. Sie dienen als Willkommensbildschirm, um praktisch das richtige Setting für die folgenden Seiten zu schaffen. Der Besucher der Website soll damit praktisch eingestimmt werden, auf das was ihn erwartet.

Beispiele für State of the Art Websign

Die Website von TWLVR – studio créatif Paris – beeindruckt zwar mehr auf einem Desktop als auf einem Mobilgerät, aber ich finde die FullscreenVideo Installation im Kunstkontext außergewöhnlich. Die Videos wirken nicht wie 08/15 Youtube Clips, sondern entfalten nichtzuletzt im Zusammenspiel mit den Sound-Loops ein außergewöhnliches Web-Erlebnis. Wirklich eine der besten künstlerischen Websites des Jahres 2014 aus meiner Sicht.

TWLVR.com

Das zweite Beispiel von Blue Dolphin überzeugt im wesentlich durch das Fullscreen Image in Blau. Man weiß sofort, hier geht es um Meer, Delfine und Tauchen. Auf den Punkt Webdesign, das anspricht. Nice.

Ein interaktiv klaustrophobisches Web-Erlebnis gibt es auf SortieEnMer zu bestaunen. Zwar wiederum nur auf einem Desktop PC  in voller Pracht zu sehen, aber das sollte mit den nächsten Gerätegenerationen ebenfalls auf Mobilgeräten zu sehen sein. Der Clou bei der Website ist, dass es sich um ein Fullscreen Video handelt, das interaktive Elemente enthält. Ein Must-See 2014 und nichts für schwache Nerven.

Umzweifelhaft lässt sich an den Beispielen erkennen, dass die Bildsprache das Element Nummer 1 ist, wenn es um den Wow-Effekt geht. Die Visualisierung ist im Creative Bereich ähnlich dominant  wie es Print vorgemacht hat. Die Agentur D.FY aus Südkorea schafft es mit Fotos ihres Arbeitsplatzes, richtig in Szene gesetzt, ebenfalls Besucher der Seite zu fesseln.

Man braucht im Prinzip nur ein überdimensionales, perfekt in Szene gesetztes Bild, dass sein Produkt / seine Website visualisiert – et voliá ein gelungene Visualisierung einer Website – am Beispiel von letswander

Last but not least – sogenanntes Multi Layer Parallax Webdesign. Klingt strange, ist aber im Grunde genommen ein horizontaler Parallax Effekt, bei der verschiedene Bildebenen einen kleinen 3D-Effekt erzeugen. Wie ich finde, eine simple aber effektive Methode der Website noch das gewisse Etwas zu verleihen.

Der besondere Clou kommt erst auf einem Mobilgerät zum Tragen: Neigt man das Gerät, verschiebt sich das Bild und man erhält einen räumlichen Eindruck. Zusammen mit der Off-Canvas Lösung, dass Menüs oben links und und rechts in der Mobilansicht verfügbar sind, auch ein gelungenes Feature, und das in einem Theme, das man sich günstig shoppen, und mit ein paar Webdesign-Basics selbst anpassen kann.