News

Neues aus dem Alltag einer Onlinemarketing Agentur!

Home/Design/Die 5 wichtigsten Webdesign Trends 2013 / 2014

Die 5 wichtigsten Webdesign Trends 2013 / 2014

Flat-Design, Responsive-Design, One-Page-Design  – diese Begriffe springen einem förmlich ins Gesicht, wenn man sich mit den Design-Trends des Jahres beschäftigt. Doch was genau ist das eigentlich und was für Vor- und Nachteile gibt es?

1. Flat-Design

Mit der Veröffentlichung von Microsofts Windows8 und dessen Metro-Design, erlangte das Flat-Design immer mehr an Beliebtheit. Grafikern ist es schon seit geraumer Zeit bekannt, doch nun kommt es auch im Mainstream an. Der klare und einfache Aufbau überzeugt die Nutzer. Mit einfachen Formen und Kontrasten wird der Inhalt sauber und deutlich dargestellt. Skeuomorphismus  mit seinen 3D-Effekten, Schattierungen und Hintergrundstrukturen gehört der Vergangenheit an. Man wird weniger vom Design abgelenkt und die Funktionalität der Elemente tritt wieder in den Vordergrund. Ganz dem Leitsatz form follows function.

Doch man sollte bedenken, dass mit dem flachen Design auch schnell die Tiefenwahrnehmung verloren gehen kann und z.B. Buttons nicht mehr als solche erkannt werden. Zudem darf man nicht die Hierarchie der Elemente vergessen. Man sollte zwischen Überschriften, einfachem Text und Links unterscheiden können.

Flat-Design von Etch

Flat-Design von Etch

Microsofts Metro-Design

Microsofts Metro-Design

Vergleich Microsoft-Apple

Vergleich Microsoft-Apple

2. Responsive-Design

Mit immer größer werdendem Marktanteil der Smartphones, müssen auch immer mehr Webseiten auf diesen funktionieren. Responsive-Design ist eine elegante Lösung um Webseiten an unterschiedliche Bildschirmgrößen anzupassen, ohne eine mobile Webseite entwickeln zu müssen. Beim Laden der Seite wird ausgelesen wie groß die Anzeigefläche ist und auf welchem Gerät sie geladen wird. Dabei passt sich die Seite der verfügbaren Fläche an. Flexible Breiten und skalierbare Bilder sind die gängigsten Methoden ein Responsive-Design zu kreieren. Es gibt aber auch andere Möglichkeiten. Beispielsweise können Sidebars entweder komplett gezeigt werden, oder bei kleiner werdender Fläche anders angeordnet werden bzw. versteckt und verlinkt werden.

Es stellt sich allerdings die Frage, was für Nachteile das Design hat, es klingt doch so vielversprechend?! Gestalterisch gesehen gibt es fast keine, da man sich dort frei ausleben kann. Man muss sich nur sicher sein, wie die Webseite am Ende aussehen soll. Eine Planung nach dem Mobil-First -Ansatz ist dabei sehr interessant. Mobil-First heißt, dass Webseite zuerst für kleinste Displays gestaltet werden und dann erst für größer werdende Auflösungen wie Tablets und Desktops.

Nachteilig kann beim Responsive Design allerdings der erhöhte Zeitaufwand für die Programmierung sein. Bei komplexen Seitenstrukturen sind gute Programmier- und Responsive Design-Kenntnisse erforderlich.

Auf der Seite be-responsive.de haben Sie die Möglichkeit ihre Webseite auf verschiedenen Geräten zu testen. Sowohl Layout als auch Funktionalität können überprüft werden.

responsive3

Wootten

responsive2

United Pixelworkers

responsive1

Bella Vita

3. Off-Canvas

Eine besondere Art des Responsive-Designs ist das Off-Canvas-Design. Hat man früher bei einer geringen Bildschirmgröße die Inhalte untereinander in einer Spalte angeordnet und somit eine sehr lange Scrollseite generiert, so bietet Off-Canvas die Möglichkeit Inhalte außerhalb des Sichtbereichs anzuordnen.

Es wird demnach immer nur ein Ausschnitt der kompletten Webseite gezeigt. Nur bei sehr großen Bildschirmen werden alle Inhalte angezeigt. Bei Smartphones werden Neben-Elemente wie Navigationen oder Sidebars an den Seiten der Anzeigefläche angeordnet.

Mit einem Button-Klick werden diese dann in das Sichtfeld eingeblendet. Meist sliden sie von den Seiten herein. Off-Canvas-Design lässt lange Scrollseiten auf Smartphones Geschichte sein und bietet eine elegante Lösung dennoch alle Inhalte verfügbar zu machen.

Selbsterklärende Off Canvas Seite

Off Canvas

Off Canvas Menü

Nixon

Off Canvas mal anders

Skybox

4. One-Page-Design

In den vorherigen Jahren hat man sich daran gewöhnt auf Webseiten von Seite zu Seite springen zu müssen, um all seine Informationen zu erhalten. Mit dem One-Page-Design hat man die Möglichkeit diese Struktur zu durchbrechen.

Hierbei werden alle Inhalte in einer logischen Reihenfolge untereinander auf einer einzigen Seite angeordnet. Somit erhält man eine lange, scrollbare Seite, dessen Inhalt nachvollziehbar aufgenommen werden kann. Dank Responsive-Design ist die Bedienung einer One-Page-Website auch auf allen Geräten gleich.

Allerdings ist dieser Aufbau nicht für jede Art von Website geeignet. Hat man als Betreiber der Seite viele Informationen in unterschiedlichen Kategorien, so ist dies in der Regel die falsche Wahl. Die meisten One-Page-Seiten haben wenig Text, große Bilder und erzählen eine Geschichte von Anfang bis Ende.

Eine zu lange Geschichte sorgt aber auch für zu lange Ladezeiten, die viele Nutzer nicht hinnehmen wollen. Ein weiterer Nebeneffekt ist, dass man ggfls. Nachteile im Bereich der Suchmaschinenoptimierung hat, wenn die Optimierung für mehrere verschiedene Keywords erreicht werden soll. Für einzelne oder wenige Keywords ist das One-Page-Design allerdings geradezu ideal, weil die Inhalte wie bei einer guten Landingpage gebündelt sind.

Nathan B. Weller hat auf dem Blog Digital Telepathy einen interessanten Artikel (englisch) geschrieben, in dem er die Vorteile von OnePage Seiten aufzählt.

Firmenvorstellung

Putzengel

Buchvorschau

De Vriend

Firmenvorstellung

Big Cartel Shop

5. Parallax Scrolling

In der Realität nennt sich dieser Effekt „Bewegungsparallaxe“. Dabei handelt es sich um das Phänomen, dass sich verschiedene Objekte mit unterschiedlichen Entfernungen zum Betrachter unterschiedlich schnell bewegen.

Ein Beispiel dafür ist eine Zugfahrt. Während der Fahrt schaut man aus dem Fenster und genießt die Landschaft. Nahe Objekte rauschen an einem vorbei und weit entfernte scheinen sich überhaupt nicht fortzubewegen.

Im Videospielbereich wird dieser Effekt schon seit Jahren in sog. Side-Scroller-Spielen benutzt. Nun findet Parallax Scrolling auch seinen Weg ins Webdesign. Einzelne Elemente werden auf unterschiedlichen Ebenen angeordnet und bewegen sich beim Scrollen unterschiedlich schnell. So entsteht der Eindruck von Tiefe. Viele Seiten nutzen diesen Effekt um Geschichten zu erzählen und sie somit natürlicher und interessanter zu machen.

So schön parallaxes Scrolling auch ist, es ist und bleibt ein Effekt. Wie jeder andere Effekt auch, dient er nur dazu um etwas Dynamik in die Seite zu bringen. Er darf den Nutzer nicht zu sehr vom eigentlichen Inhalt ablenken. Zudem kann dieser Effekt sehr rechenintensiv sein und bei älteren Computern zu Schwierigkeiten führen. Will man diese vermeiden, ist es wieder mehr Aufwand für den Programmierer.

parallax3

ala

parallax2

Dangers of Fracking

parallax1

GEZE – 150 Jahre

Weitere Trends zusammengefasst

Full-Screen-Design
Schluss mit den Zeiten in denen Webseiten nur eine bestimmte Breite und Höhe haben durften. Sicher hat das seine Vorteile, aber wieso nicht den zur Verfügung stehenden Platz nutzen, bei immer größer werdenden Bildschirmen? Fullscreen-Layouts locken den Nutzer mit großen Aufmacher-Bildern und nur wenig Text. Ganz dem Motto: Bilder sagen mehr als Worte. Wurde Bild und Text gut aufeinander abgestimmt, so ist das Fullscreen-Design sehr ansehnlich und sorgt für Aufmerksamkeit. Die Bilder passen sich der Auflösung des Endgeräts an. Doch sollten sie nicht zu viel Speicher brauchen, sonst kommt es zu unschönen Ladezeiten.

Split-Screen-Design
Wieso nicht einfach mal die Webseite in zwei Hälften teilen und einen Scrolleffekt erzeugen? Beim Split-Screen-Design wird genau dies gemacht. Beim Scrollen der Seite bewegen sich die einzelnen Hälften entgegensetzt und bilden somit einen aufregenden Effekt. Selten werden die Hälften mit unterschiedlichem Text gefüllt, um somit mehr Inhalt zu transportieren.

Split-Screen-Design ist vorwiegend ein Effekt, der die Seite auflockern soll. Doch sollte man auch hier aufpassen, dass dieser nicht vom eigentlichen Inhalt ablenkt.

Long-Shadow-Design
Ausgehend vom Flat-Design, welches völlig auf Schattierungen verzichtet, kam das Long-Shadow-Design auf. Hierbei wir mit Schlagschatten geradezu übertrieben. Dennoch wirken die Elemente gestalterisch ansprechend und interessant.

Full-Screen-Design

eden Full-Screen

Long-Shadow-Design

Long-Shadow-Design

Splitt-Screen-Design

Valentina Gallo Splitt-Screen

Fixe Navigation
Mit immer mehr Scrollseiten verschwinden auch immer mehr Menüs aus dem Sichtfeld des Nutzers. Eine fixe Navigation ist eine einfache und immer öfter auftauchende Variante diese jeder Zeit zur Verfügung zu stellen. Dabei ändert sich die Position der Navigation auch beim Scrollen der Seite nicht. Der Nutzer hat immer Zugriff auf weitere Menüpunkte und kann sich einwandfrei durch die Webseite navigieren.

Mobile First
Ein Trend der weniger was mit der Gestaltung als mit der Konzeptionierung einer Webseite zu tun hat, ist der Mobile First Gedanke. Generell geht man beim Erstellen einer Webseite von einer großen Auflösung zu einer kleinen Auflösung. Das heißt, die Webseite wird vorwiegend für den PC konzipiert und anschließend fürs Smartphone optimiert. Doch wieso nicht gleich mit der Smartphone-Variante anfangen und dann erst die PC-Variante? Vorteil des Gedanken ist, dass man sich auf das Wesentliche seiner Seite konzentrieren muss. Was ist wirklich wichtig und muss auf die Seite, worauf kann verzichtet werden? Auch für die Desktop-Version ist dies von Vorteil, da die Nutzer so nicht mit Überflüssigem Inhalt konfrontiert werden.

Unser Fazit zu den Webdesign Trends 2013 / 2014

Es gibt viele Trends und Entwicklungen im Webdesign. Einige werden sich durchsetzen, andere nicht. Wie überall..

Einige Trends werden in der Nische bleiben, weil sie nicht in den „Mainstream“ passen und andere Techniken werden uns die nächsten Jahre begleiten, wie es mit Sicherheit für das Responsive Design der Fall sein wird.

Sie wollen wissen, ob Sie den ein oder anderen Trend bei Ihrer Webseite zukünftig einsetzen sollen? Das können wir Ihnen natürlich nicht pauschal beantworten. Denken Sie an Ihre Zielgruppe und an das was Sie mit der Webseite erreichen wollen. Ist es Storytelling oder eher Verkauf?

Wenn Sie mögen, können wir gerne gemeinsam analysieren, welcher „Schuh“ für Ihr Unternehmen am besten passt. Kontaktieren Sie uns gern!

Sie haben Fragen? Kontaktieren Sie uns!

Lesequellen

Hier finden Sie ein paar interessante Lesequellen auf denen sie weiterführend nachlesen und recherchieren können. Diese Artikel waren auch für uns eine Inspirationsquelle.

Responsive:
Smashing Magazine – Guidlines for responsive design
PC-Magazin – Responsive-Design oder mobile Website

Parallax:
Liechtenecker – Parallaxes Scrolling

OnePage:
t3n – OnePage Design Trend
Site-Check – OnePage-Design

FlatDesign:
bjoerntantau – FlatDesign sieht gut aus verbessert das Marketing
t3n – Jakob Nielsen über FlatDesign
Manx – FlatDesign Was es ist und warum es bleibt

OffCanvas:
Elmastudio – OffCanvas Layouts
Kulturbanause – Die CSS Pseudoklasse target

Über Dennis Born

Ich bin Geschäftsführer der viminds GmbH. Als gelernter Kaufmann stieg ich 2007 mit einer Geschäftsidee ins Onlinemarketing-Business ein und fand meine Berufung. In der Agentur bin ich für das Projektmanagement und die strategische Beratung verantwortlich. Privat liebe ich die Zeit mit der Familie, trinke gerne Kaffee und schnüre regelmäßig die Laufschuhe.