Webdesign Trends 2014
Kommentare

Das Internet erfindet sich immer wieder neu und verändert sein Aussehen mit jeder neuen technologischen Entwicklung. Wo geht 2014 die Webdesign-Reise hin?

Wir haben sieben Webdesign Trends für Euch zusammengefasst. Einen Überblick zu aktuellen Design Trends erhaltet ihr zudem in dieser Infografik

Welche Trends spiegeln Webdesign 2014 wieder? 

1. Split Screen

Smartphones haben schon längst unseren Alltag erobert. Der positive Effekt ist, dass immer mehr Menschen immer häufiger im Netz unterwegs sind – der negative Aspekt daran ist, dass die Webseiten auf immer kleineren Displays präsentiert werden. Mehr Platz auf Smartphones und Tablets bietet der sogenannte Split Screen oder auch Split Layout genannt.

Wie der Name bereits sagt, wird hier der Screen in meist zwei Hälften geteilt, die sich oft unabhängig voneinander scrollen lassen. Die beiden Bereiche der Webseite stehen in der Regel in einem farblichen Kontrast zueinander.

Der so entstehende Effekt passt gut zu Webseiten, die im Flat Design konzipiert sind und bindet die Besucher interaktiv ins Geschehen ein. Hier ein Beispiel:

split screen webdesign 2014

Screenshot: https://www.mission-motorcycles.com/

2. Off Canvas

Geld verdienen kommt nie aus der Mode und wird für Werbetreibender im mobilen Netz immer schwieriger. Kleinere Bildschirme bieten weniger Platz für Werbung. Vor gut eineinhalb Jahren stand Facebook vor demselben Problem. Nach dem Börsengang der weltweit größten Social-Media-Plattform kritisierten Beobachter, dass Facebook nicht in der Lage sei, das große Potenzial seiner über eine Milliarde-Nutzer starken Community nutzen zu können, weil keine geeigneten Mobile-Marketing-Möglichkeiten vorhanden seien.

Facebook schaffte mit Off Canvas mehr Platz auf den kleinen Bildschirmen. Weniger häufig genutzte Inhalte verschwinden dank Off-Canvas in die nicht sichtbare Fläche des Displays und können bei Bedarf mit einem Wisch (links oder rechts) aufgerufen werden. Der gewonnene Platz im Zentrum des Bildschirms kann für den Main Content, sponsored Posts und für mehr Werbeflächen genutzt werden.

off canvas

Screenshot: Screenshot:Facebook-App für iOS

3. Parallax Scrolling

Was sich bereits letztes Jahr abgezeichnet hat, begegnet uns 2014 noch öfter: Die Rede ist von Parallax Scrolling, jene Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt. Der dabei entstehende 3D-Effekt verleiht der Seite Tiefe und lädt den Besucher der Seite zum Verweilen ein.

Wie unterschiedlich Parallax Scrolling umgesetzt werden kann, zeigt folgendes Beispiel:

parallax

Screenshot: http://www.spokespedicabs.com/

4. Video Hintergründe

Große White Spaces, flache, fast Piktogrammhafte Icons und eine schlichte Typografie: Flat Design hat sich spätestens seit iOS 7 im Netz etabliert. Trotz aller Vorteile, die ruhige Hintergründe bieten, können White Spaces auf die Dauer etwas langweilig wirken. Was manche Webseiten bereits im vergangenen Jahr vorgemacht haben, könnte sich in den kommenden Monaten noch stärker verbreiten: Video-Hintergründe.

Schließlich ist Bewegung der stärkste optische Reiz überhaupt und zieht deshalb die Aufmerksamkeit des Betrachters stark an. Wenn das Video nicht zu unruhig ist, eignet es sich hervorragend als Hintergrund.

HTML5 bietet uns die technischen Möglichkeiten, Filme in Seiten einfach zu integrieren.

webdesign 2014

Screenshot: https://www.spotify.com/de/video-splash/?utm_source=spotify&utm_medium=w…

5. Flat Design

Klar, eindeutig und ohne Firlefanz: So schön die bunten Websites auch aussehen, manchmal fällt es Usern schwer, sich in der Flut an Animationen zurechtzufinden: Hinter welchem zuckenden Bild verbirgt sich die Info, die ich suche?

Flat Design verzichtet auf glänzende Texturen, Leder- oder Stitch-Effekte und präsentiert den Content klar, übersichtlich und „flach“, wie der Name schon sagt. Damit könnte Flat Design 2013 als Webdesign-Trend seinen zweiten Frühling erfahren.

So setzt Microsoft im Gegensatz zu Apple bei Windows 8 auf Flat Design und konzentriert sich damit auf die Klarheit des User Interface. Auf Flat Design setzen schon seit jeher auch die einflussreichsten Websites im Internet: Google und Facebook.

Vor allem Besucher, die auf der Website schnell an die gewünschten Informationen kommen wollen, werden es zu danken wissen, wenn sie nicht erst mit Intros oder anderen Gimmicks ausgebremst werden. So werden auf Seiten im Flat Design zum Beispiel klickbare Elemente ganz klar von nicht anklickbaren Elementen unterschieden.

flat design

Screenshot: http://www.soyuzcoffee.com/ru/coffee

6. Infinite Scrolling

Ta panta rhei – alles bleibt im Fluss. Das wussten bereits die alten Griechen, lang bevor es das Internet, geschweige denn Webseiten gab. Dennoch könnte dieser Spruch nicht besser auf Infinite Scrolling passen, denn damit lassen sich Webseiten unendlich lang scrollen. Berühmte Beispiele für Infinite Scrolling sind etwa Facebook oder Pinterest. Kein Wunder, bieten diese Seiten enorm viele Bilder und Kommentare – auf eine Paginierung wird hier weitestgehend verzichtet und das kommt der User Expierence zugute, weil einfach alles auf einer unendlich langen Seite zu finden ist.

Ein weiteres Beispiel für ein gut umgesetztes Infinite Scrolling findet sich auf der Mikroblogging-Seite Tumblr. Hier können Fotos gebloggt oder re-bloggt werden, die anschließend im Dashboard erscheinen. Sobald sich ein User neu einloggt, erscheinen die neuesten Posts, indem sie automatisch im Infinity-Style heruntergescrollt werden.

Diese Technik eignet sich zwar nicht für jede Art von Webseite, denn wenn es nicht genug Content gibt, gibt es auch nichts zu scrollen.

webdesign 2014

Screenshot: http://www.brandnewschool.com/

7. Fixed Position Navigation

Klicken ist Out; Scrollen ist In. Stimmt das wirklich? Tatsächlich nutzen immer mehr Webseiten die Scroll-Naviagation in den verschiedensten Formen. Ob als Parallax Scrolling, jene Technik, bei der sich verschiedene Ebenen in unterschiedlichen Geschwindigkeiten bewegen, wenn man über die Webseite scrollt, oder als Infinite Scrolling, bei der der Besucher einen scheinbar unendlich langen Feed scrollen kann.

Was so schick aussieht und sich gut anfühlt, muss aber auch übersichtlich und zweckmäßig bleiben. Denn was nützt die schönste Seite, wenn sich der User ins Abseits gescrollt hat und die Orientierung verloren hat?

Abhilfe schafft hier die Fixed Position Navigation, die an einer bestimmten Position auf der Seite fixiert ist, und den Besucher überall hin begleitet. Im Notfall findet man über die fixierten Menüpunkte immer wieder zurück zu den gesuchten Unterpunkten.

webdesign 2014

SCreenshot: http://www.tobiasblumtritt.de/

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -