Die 7 Wichtigsten Webdesign Trends 2014

Trends kommen und gehen.

Es ist total unabsehbar woher diese Trends kommen.

Zum Glück nicht.

Natürlich sind einige Webdesign Trends nur von kurzer Natur, aber auf diese Trends möchte ich nicht tiefer eingehen. Ich möchte euch die längerfristigen Webdesign Trends 2014 vorstellen und wieso sie entstanden sind.

Seit dem Vortrag auf der Konferenz im November 2013 sind auch schon ein paar Monate vergangen. Daher lohnt es sich umso mehr die Trends zu aktualisieren.

1. Auffällig Hero-Header

A.I.D.A. ist ein populäre Prinzip aus dem Marketing. Das Akronym steht für Attention, Interest, Desire und Action. Als erstes muss eine Website die Aufmerksamkeit des Besuchers erfassen. Diese Studie hat erst vor dabei gezeigt, dass der normale Internetbenutzer nur noch eine Aufmerksamkeitsspanne von 8 Sekunden hat. Weniger als ein Goldfisch, der immerhin 9 Sekunden hat.

Vor ein paar Jahren wurde noch versucht möglichst viele Informationen „above the fold“ zu platzieren. Inzwischen wurde aber erkannt, dass dies Besucher eher verwirrt. Besonders der Headerbereich auf der Homepage wird daher immer öfter dazu genutzt nur eine zentrale Botschaft zu platzieren. Der Call-to-Action Button ergänzt den Hero-Shot sinnvoll um den Benutzer zu einer Interaktion zu ermutigen.

Mijlo – Minimales Design

Header mit Call-to-Action - Webdesign Trend 2014

Full-Screen Background mit Call-to-Action Button und Headline – Miljo

Mijlo bietet platzsparende Lösungen für den Haushalt an. Der Hero-Header zeigt eine Küche und die Botschaft und einen Call-to-Action Button, der zum Shop weiterleitet.

Zur Website

Hipsta Food – One-Page Layout

Full-Screen Background mit Kernbotschaft - Hipsta Food

Full-Screen Background mit Kernbotschaft – Hipsta Food

Hipsta Food ist eine Iphone App für die Küche. Neben dem Header verwendet diese One-Page Website auch konsequent alle weiteren Webdesign Trends 2014. Ein gutes Beispiel für modernes Webdesign. Die Website wurde mit dem Startup Framework erstellt.

Zur Website

Zum Startup Framework

2. Single-Page bzw. One-Page Websites

Der ganze Inhalt der Website auf einer einzigen Seite – geht das? Ob dieses Konzept funktioniert hängt zum größten Teil vom Geschäftsmodell ab. Das One-Page Konzept funktioniert dann besonders gut, wenn der vorgestellte Service bzw. das Produkt einfach verständlich ist.

One-Page Websites eignen sich daher bestens für kleine Firmen, Agenturen, Selbständige und Produkte. Im Header wird dabei die Message und das Produkt präsentiert. Je weiter der Besucher nach untern scrollt umso mehr erfährt er in Form von Features, Testemonials, Preisen und Details.

Dieses Webdesign eignet sich auch besonders gut für mobile Geräte. Der Besucher muss sich nicht mit der Navigation quälen sondern nur scrollen.

Visage – Flat Design & Schöne Typo

Bold Typographie und One-Page Layout

Bold Typographie und One-Page Layout

Flat Design war bereits 2013 ein starker Webdesign Trend. Daran hat sich dieses Jahr nichts geändert. Visage setzt diesen Trend, wie auch viele weitere hier vorgestellte Trends, elegant um. Mit vielen Screenshots und wenig Text wird das Produkt trotzdem sehr ausführlich vorgestellt.

Zur Website

WPTheory – One-Page Layout im Flat Design

Minimales Webdesign & One-Page Website - WPTheory

Minimales Webdesign & One-Page Website – WPTheory

WPTheory ist ein exzellentes Beispiel für eine minimale One-Page Website im Flat Webdesign. Die Typographie und die farbliche Abtrennung der Content-Blöcke sind gut abgestimmt.

Zur Website

3. Größere Typographie

Wieso soll die Schrift auf einmal größer werden? Zum einen wird die Schrift prägnant im Header für die Kernbotschaft eingesetzt. Hier wird geklotzt und nicht gekleckert. Um auf modernen 24″ oder 27″ Monitoren zur Geltung zu kommen sind daher 60px oder mehr keine Seltenheit.

Der Fließtext wird ebenfalls größer. Die goldenen Regeln der Typographie sprechen von einem Ideal von 66 Zeichen pro Zeile – Leerzeichen und Zeichen addiert. Grob gesagt sind im Web 60 – 75 Zeichen pro Zeile das Optimum. Eine Schriftgröße von 16 px ist häufig schon das Minimum.

Johnathan Krause – Frontend Entwickler

Blog des Webentwicklers Krause - Schöne Typo

Blog des Webentwicklers Krause – Schöne Typo

Die Website des deutschen Webentwicklers Johnathan Krause verzichten auf alles Unnötige. Der einspaltige Blog ist ohne Sidebar und andere störende Elemente. Der Fließtext hat eine Schriftgröße von 23 px, wirkt aber dennoch nicht überdimensioniert.

Zur Website

Writer – Ghost Theme

Ghost Theme Writer - Webdesign für einen Blog

Ghost Theme Writer – Webdesign für einen Blog

Ghost ist eine Blogging-Plattform, mit einem sehr minimalen Blog-Design. In diesem Theme wird noch mehr Wert auf typographische Hierarchie und klare Struktur gelegt.

Zur Website

4. Große Inhaltsblöcke mit viel Whitespace

Die visuelle Abtrennung von Inhalten spielt für die Lesbarkeit und Verständlichkeit eine große Rolle. In den letzten Jahren wurde häufiger mit 3er und 4er Blöcken gearbeitet. Hier werden z.B. 3 Serviceleistungen nebeneinander dargestellt. Für den Leser ist diese Darstellung jedoch deutlich unübersichtlicher und schlechter zu verstehen.

Werden Inhalte untereinander platziert wird der Leser besser geführt und seine Aufmerksamkeit wird stärker fokussiert.

 Shokunin – Klare Struktur & Hierarchie

Klar getrennte Inhalte für bessere Verständlichkeit

Klar getrennte Inhalte für bessere Verständlichkeit

Shokunin machen mit ihrer Website alles richtig. Der Leser wird geführt und die Inhalt sind klar und deutlich von einander abgetrennt. Der Tausch von Bild und Text bei aufeinander folgenden Elementen kommt ebenfalls gut zur Geltung . Insgesamt eine durchdachte One-Page Website mit Grafiken im Flat Webdesign.

Evan Knight – Minimales Webdesign

Viel Whitespace und schöne Hierarchie

Viel Whitespace und schöne Hierarchie

Der Designer Evan Knight arbeitet mit viel Whitespace für die visuelle Trennung von Inhalten. Im Ausschnitt ist das Portfolio zu sehen, dass ein optischer Hochgenuss ist. Evan setzt ebenfalls auf ein One-Page Layout.

Zur Website

Fangauge – Visuelles Chaos vom Feinsten

Fangauge - Visuelles Chaos ohne Hierarchie

Fangauge – Visuelles Chaos ohne Hierarchie

So wird es NICHT gemacht. Viel zu geringe Abstände und 4 nichtssagende Elemente nebeneinander platziert erzeugen visuelles Chaos.

Fangauge verwendet außerdem einen Slider – der hoffentlich bald ausstirbt. Warum? Zwischen 48% und 64% klicken nur auf den ersten Slide laut dieser Studie. Die restliche Inhalte sind quasi für den Benutzer versteckt.

Zur Website

5. Stroytelling

Inhalte und Wissen, die in eine Geschichte eingebetet sind werden viel einfacher vom Menschen gespeichert. Natürlich lässt sich ein Produkt oder Service in die Geschichte integriert, um dort subtil beworben zu werden.

Storytelling im Webdesign wird nahezu immer in einem One-Page Layout umgesetzt. Kombiniert mit vielen CSS3-Effekten und Animationen wird der Geschichte Leben eingehaucht.

The Most Northern Place – Grönland

Eindrucksvolle Videos erzeugen starke Emotionen

Eindrucksvolle Videos erzeugen starke Emotionen

Die Website erzählt von Grönland und die Besetzung durch die US Armee. Es werden eindrucksvolle Videos und Musik verwendet um Emotionen zu erzeugen. Die Website vermittelt einen sehr persönlichen Eindruck von Grönland.

Zur Website

Make Your Money Matter – Flat Webdesign

Storytelling mit Flat Webdesign

Storytelling mit Flat Webdesign

Ganz im Gegensatz zu „the most northern place“ ist diese Website komplett im Flat Design. Es wird der Vorteil einer Kreditunion im Vergleich zu einer Bank erläutert. Etwas zu lang für meinen Geschmack.

Zur Website

6. High-Quality Bilder und Videos

Wie du siehst werden viel häufiger Fullscreen Bildern und Videos verwendet. Sei es nun im Hero-Shot für den Header oder immer häufiger auch im Content. Hochauflösende Detailbilder und Renderings laufen Stockbildern deutlich den Rang ab. Je individueller und passender das Bild, umso besser gelingt es die Idee zu übermitteln.

Videos sind sogar noch wirksamer und werden inzwischen auch sehr gerne im Header eingesetzt um das Produkt zu inszenieren.

Hello Nod – Präsentation des Produkts

Nod Ring - Detailaufnahmen und Rederings

Nod Ring – Detailaufnahmen und Rederings

Nod ist ein Ring zur Gestensteuerung, der Ende 2014 erscheint. Das Produkt wird mit Videos, Bildern und mit schönen Renderings in Szene gesetzt.

Zur Website

Chaval Blanc – Fullscreen Backgrounds

Hochqualitative Bilder machen Lust auf mehr

Hochqualitative Bilder machen Lust auf mehr

Die Bilder von Cheval Blanc sind natürlich von außerordentlicher Qualität. Da fällt es leicht, diese als Hintergrund zu verwenden und so alle anderen Elemente einfach auszublenden.

Zur Website

7. Ausgeblendete Menüs und Sidebars

Wenn du dir die Beispiele in den Punkten zuvor genau ausgehen hast, wird dir dieser Trend bestimmt aufgefallen sein. Menüs, Sidebars und alle weiteren Navigationselemente treten noch stärkern in den Hintergrund oder verschwinden sogar ganz. Was vor etwas über 1 Jahre mit dem Flat Design begann wird jetzt entschlossen weiter entwickelt.

Die Aufmerksamkeit des Besuchers soll  auf 1 oder 2 Botschaften pro Seite gebündelt werden.

Dieser Webdesign Trend 2014 ist auf allen gezeigten Beispielen gut sichtbar, darum stelle ich keine weiteren Beispiele vor.

Im nächsten Artikel zu den Webdesign Trends 2014 erkläre ich dir, welche Elemente du auf keinen Fall mehr verwenden solltest.

Habe ich einen Trend vergessen oder bist du ganz anderer Meinung? Dann freue ich mich über deinen Kommentar.

Titelbild: ollyi – photodune.net