Wie jedes Jahr beschäftigten wir uns auch dieses Jahr wieder mit den aktuellen Webdesign-Trends und welche davon mittlerweile zum Standard geworden sind. Wir haben fünf Webdesign-Trends für das Jahr 2016 für Sie genauer unter die Lupe genommen.
Vereinheitlichte UI-Modelle
UI steht für das (grafische) User Interface. Darunter versteht man die Benutzeroberfläche, über die zum Beispiel eine Webseite von einem Nutzer bedient wird. Aktuell zeigt sich hier der Trend, dass die UI-Modelle wie zum Beispiel Menüs, Anmeldung für Accounts und Kachel-Layouts vereinheitlicht werden bzw. sind.
Woran liegt das?
Die Antwort auf diese Frage ist einfach: Warum sollte man das Rad neu erfinden, wenn sich Systeme und bestimmte Funktionen einer Webseite schon etabliert haben und von den Usern sofort erkannt und richtig verwendet werden. Die – zumindest meisten – Internetnutzer wissen, dass sie sich mit E-Mail-Adresse bzw. Benutzernamen und Passwort für Ihren Lieblings-Onlineshop einloggen müssen, um ihren Kauf abzuschließen. Oder drei parallel verlaufende horizontale Striche bedeuten mittlerweile nicht nur bei mobilen Endgeräten, dass sich hinter diesen Strichen das Menü bzw. die Navigation der Seite befindet. Man kann also sagen, dass manche UI-Modelle heute zum Standard geworden sind und sie somit einheitlich von Webdesignern eingesetzt werden.
Rich Animations für eine bessere User Experience (UX)
Rich Animations kommen vor allen Dingen einer besseren User Experience (UX) zugute. Webseiten werden dadurch interaktiver und unterhaltender. Wer freut sich denn nicht über eine pfiffige Animation, die die Wartezeit bis zur geladenen Webseite verkürzt. Außerdem unterstützen Rich Animations das Storytelling, das heutzutage im Onlinemarketing immer wichtiger wird.
Typische Animationen
- Lade-Animationen:
Niemand freut sich darüber, wenn eine Webseite lange Zeit zum Laden braucht, aber durch eine kleine Animation wird die Zeit für den User deutlich geschickter überbrückt, als wenn er sekundenlang auf eine weiße Fläche starren muss. - Navigations- und Menü-Animationen:
Über diesen Weg lässt sich zum Beispiel eine versteckte Navigation einblenden oder Teile eines Menüs weiter ausklappen. - Hover-Animationen:
Hierbei fährt man mit der Maus über ein Element, welches sich dann bewegt, ohne mit der Maus dieses Element anzuklicken. So können zum Beispiel Verlinkungen im Text sichtbar gemacht oder Infokästen eingeblendet werden. Der Vorteil: Inhalte können so nur bei Bedarf erscheinen, sie stören nicht das Design und nehmen keinen unnötigen Platz weg. - Slideshows:
Sie sind eine gute Möglichkeit, um viele auch großflächige Bilder zu präsentieren, ohne dass das Design oder der User damit erschlagen wird. - Moving Animations:
Sich bewegende Animationen kommen vor allen Dingen dann zum Einsatz, wenn das Auge gezielt auf ein bestimmtes Element gelenkt werden soll. Es sollte als Blickfang und daher sparsam eingesetzt werden.
Scroll-Animationen:
Auch das längst bekannte Scrollen einer Webseite wird zur Animation gerechnet. Hier kann der User selber bestimmen, in welcher Geschwindigkeit er sich den Inhalt einer Seite ansehen möchte.
Animationen bieten eine gute Möglichkeit, eine Webseite interessanter zu machen und Blicke gezielt auf bestimmte Dinge zu lenken. Doch hier gilt ganz klar das Motto „Klasse statt Masse“.
Alles muss responsive sein!
Dank der täglich wachsenden Suchanfragen auf mobilen Endgeräten ist responsive Webdesign heute zum Standard geworden. Es ist ein einfacher und günstiger Weg, um eine Webseite optimal auf mobilen Endgeräten zu präsentieren und für eine gute UX zu sorgen. Responsive Webdesign bedeutet, dass sich das Layout einer Seite und die darin enthaltenen Elemente wie Bilder oder Buttons an die Breite der verschiedenen Bildschirme automatisch anpassen. Dazu wird meist ein Raster-System verwendet. Responsive Webseiten zeichnen sich auch durch ein eher minimalistisches Design aus. Dadurch wirkt die Webseite auf kleinen Bildschirmen wie Smartphones nicht überladen und auch die Ladezeit wird geringer gehalten. Eine möglichst geringe Ladezeit ist beim responsive Webdesign enorm wichtig, da sich diese positiv auf die UX auswirkt.
Material Design
Bisher kannte man das Material Design eher von den mobilen Apps, doch dieser dort vorherrschende Minimalismus und der Fokus auf die User Experience sind 2016 auch auf Webseiten zu finden. Damit will man sowohl bei mobilen Anwendungen (Apps), als auch bei mobilen Internetseiten und Webseiten an Desktopgeräten eine Vereinheitlichung schaffen, die sich besonders auf die UI und UX konzentriert. Das Material Design lehnt sich sehr stark an das Flat Design, das bereits 2015 ein sehr großes Thema bei den Webdesign Trends war, an. Im Gegensatz zum Flat Design unterliegt das Material Design strikteren Designvorschriften, die von Google festgelegt werden. Ein weiterer Unterschied liegt darin, dass das Material Design vielschichtiger ist. Das heißt, nicht nur das Layout selbst sondern auch Texte können nun in mehreren Ebenen dargestellt werden und durch die Einbeziehung der Z-Achse können leichter realistischere Effekte sowie 3-D-Effekte erzielt werden. Auch werden beim Material Design vermehrt Animationen eingesetzt.
Das Flat-Design etabliert sich weiter
Das Flat Design wird nicht, wie man vielleicht vermuten könnte 2016 vom Material Design abgelöst, sondern es etabliert sich weiterhin. Warum? Die Antwort ist ganz einfach: Flat Design zeichnet sich vor allen Dingen durch ein natürliches und minimalistisches Design aus mit einem starken Fokus auf Funktionalität einer Webseite. Dieses Design-Denken unterstützt sowohl responsive Webdesign als auch das oben erwähnte Material Design.
Fortschreitende Trends für das Flat Design:
- Kräftige und leuchtende Farben
- Einfache und gut leserliche Schriftarten
- Minimalismus fördert eine übersichtliche und einfache Benutzeroberfläche (UI)
- Ghost Buttons: Diese durchsichtigen Buttons lassen den Hintergrund durchscheinen und lenken nicht zu stark vom Rest der Webseite ab.
Viele der sogenannten Trends haben sich bereits als Standard etabliert wie die einheitlichen UI-Modelle oder das responsive Webdesign. Diese Entwicklungen zeigen, dass die neuen Trends wie Material Design oder Rich Animations auch in Zukunft von einem guten Webdesign nicht mehr wegzudenken sind.
Quelle: http://www.awwwards.com/6-web-design-trends-you-must-know-for-2015-2016.html