Was geht ab im Internet?

Welches sind die aktuellen Webtrends?

Eine typische Frage, die uns Kunden stellen, wenn sie sich mit der Neugestaltung ihres Internetauftrittes beschäftigen, ist die Frage nach Webtrends. Sie kurz und knapp und vor allem eindeutig zu beantworten, ist nicht ganz einfach. Trends sind, wie in allen anderen Bereichen auch, zu einem bestimmten Anteil auch vom individuellen Geschmack geprägt. Trends kommen und gehen. Manchmal schneller, manchmal langsamer. Daher sind aktuelle Trends halt auch letztendlich nur aktuelle Erscheinungen, die für eine bestimmte Zeit Bestand haben.

Allerdings sollte man sich bewusst machen, dass sich das Internet in den vergangenen Jahren sehr verändert hat. Daher sollte man Webtrends nicht alleine nach Designaspekten beurteilen, sondern beachten, dass sie aus technologischen Gründen entstanden sein oder geänderte Nutzerverhalten wiederspiegeln können. Das Thema Webtrends ist daher ein sehr spannendes. Wer dem Zeitgeist entsprechen möchte (oder muss), der sollte sich regelmäßig darüber informieren, was im Moment „trendy“ und angesagt ist. Vergessen Sie dabei aber nicht, dass es gegebenenfalls auch mal sinnvoll sein kann, absichtlich etwas zu machen, dass jedem Trend widerspricht. Wer weiß, vielleicht wird genau das zum neuen Trend…

Ein kurzer Abriss über aktuelle Webtrends und ihren Zweck

Große (Fullsize) Bilder, Hero Images und Videos im Hintergrund; Ghost Buttons

Dieser Trend ist schon fast zum Standard geworden. Immer mehr Websites werden durch große Bilder in Szene gesetzt, die Gefühlsebene (Emotionalität) wird angesprochen. Botschaften werden durch passende Bilder schneller erfasst. Die Verweildauer des Besuchers wird durch stimmungsvolle Bilder und ansprechende Videos verlängert, da die Seite interessanter und der Betrachter „mitgenommen“ wird. Unter Hero Images versteht man große Webbanner, die an große Werbeanzeigen erinnern: das emotionale Bild und der kurze, knackige Text verstärken sich gegenseitig. Hero Images sorgen dafür, dass Botschaften schnell erfasst werden und Wichtigkeiten/Prioritäten/Neuigkeiten explizit betont und in den (optischen) Vordergrund gestellt werden. Statt Hero-Bilder eignen sich auch (kurze) Videosequenzen, die im Hintergrund abgespielt werden. Durch Videos erhält die Seite eine höhere Lebendigkeit und wirkt unterhaltsamer als ein statisches Bild.

Gerne kombiniert werden sogenannte „Ghost Buttons“, durchsichtige Klickfelder, die meistens auf den Rahmen und eine kurze Aufschrift reduziert werden und sich bei Mausberührung oder Klick leicht verändern.

Scrollen statt Klicken: Long-Pagers

Wurde früher immer tiefer in eine Internetpräsenz eingetaucht/verzweigt und per Klick Unterseiten mit weiteren Informationen aufgerufen, wird heute vermehrt nach „unten“ gescrollt. Warum? Der Hintergrund sind geänderte Surfgewohnheiten, vor allem auf mobilen Geräten. Sich auf gut gegliederten Einzelseiten zu bewegen (zu scrollen) ist einfacher und schneller als Links und Buttons mit dem Finger zu bedienen. Positiver Nebeneffekt: der Betrachter „verläuft“ sich nicht in einer verschachtelten Seitenarchitektur! Längere und umfangreichere Inhalte ermöglichen dem Designer viel Gestaltungsspielraum. Mit einem gekonnten „Storytelling“ folgt der Betrachter durch Scrollen einem inhaltlichen roten Faden. Sinnvoll bei Long Pagern ist eine „Fixed Navigation“, die am oberen Browserrand auch während des Scrollens stehen bleibt. Sie wird also nicht weggescrollt, sondern bleibt immer sichtbar. Hierdurch kann der Benutzer jederzeit leicht weiternavigieren. Alternativ kann ein „Nach-Oben-Button“ eingebaut werden.

Methodik: One-Page-Design, Infinite Scrolling, Parallax-Scrolling

Navigation

Die steigende Nutzung mobiler Geräte beim Surfen im Internet hat auch Konsequenzen für die Navigation. Gefordert wird immer häufiger eine touchfähige Navigation, die auf Tablets und Smartphones gut nutzbar ist. Mit steigender Tendenz setzt sich das sogenannte „Hamburger Menü“ oder „Navigation Drawer“ durch, das von mobilen Apps übernommen wurde. Beim Hamburger Menü rückt die Navigation in den Hintergrund und erscheint erst dann, wenn sie gebraucht wird. Das klassische Drop-Down-Menü verschwindet demgegenüber immer mehr. Eine moderne Menüführung legt sich über den restlichen Inhalt, sie blättert auf.

Typographie

Große Schriften für Headlines sind weiterhin wichtiges Design-Element und dominieren die Ästhetik einer Webseite. Unterschiedliche Schriftarten und -größen werden miteinander kombiniert. Das Stichwort hier lautet: „Very large typography“. Je nach Bildschirmauflösung passen sich die Schriftgrößen flexibel an. Nützlicher Nebeneffekt: die Inhalte werden auf kleineren Displays besser lesbar. Eine große Auswahl an Webfonts steht hierfür heutzutage zur Verfügung, bedürfen aber eines sicheren „Grafikerhändchens“, damit sie so wirken wie geplant.

Pop-Ups

Pop-Ups werden als Tool immer beliebter, um Nachrichten oder Informationen prominent zu platzieren. Wie der Name verrät, „ploppt“ hierbei ein Textfeld über dem normalen Inhaltsbereich auf. Der Betrachter muss es aktiv wegdrücken, damit es wieder verschwindet. Nachteil von Pop-up-Fenster: Sie können durchaus nerven und schmälern ehrlich gesagt auch die Benutzerfreundlichkeit, da sie den Betrachter von dem ablenken, was er/sie sich gerade anschaut. Aber dezent und mit einer für den Betrachter wichtigen Info, sind Pop-Ups ohne Frage ein tolles Mittel, um sofortige Aufmerksamkeit des Betrachters zu erhalten. Beachten sollte man hierbei, dass man Pop-Up eher dezent einsetzt, nicht full-screen, und dass man genau überlegen sollte, welche Nachricht wichtig genau ist, um aufzuploppen. Das freundliche Angebot, den Newsletter zu abonnieren oder in einen Chat einzusteigen, sollte daher eher am Rand des Inhaltsbereiches erscheinen.

Animationen & Microinteractions, Hover-Effekte

Animationen sind von modernen Webseiten nicht mehr wegzudenken. Dabei sind es nicht die großen animierten Elemente, sondern viele kleine Effekte, die eine Webseite attraktiv machen und die Benutzerführung verbessern. Elemente kommen hiereingeflogen oder erscheinen erst, wenn weitergescrollt wird und sie in den sichtbaren Bereich kommen. Gerne verwendet werden auch sogenannte Hover-Animationen, die bei Mouseover ablaufen. Dies können Farbwechsel sein, oder auch Inhaltswechsel, die quasi umgeklappt werden.

Split-Screen Design

Ein noch junger Webtrend ist die Teilung des Bildschirms in zwei vertikale Hälften. Der Bildschirm wirkt damit wie ein aufgeschlagenes Magazin. Häufig werden bei einem Split-Screen-Design auf der einen Hälfte die aktuellen Menüpunkte graphisch ansprechend dargestellt, die Inhalte erscheinen auf der anderen Hälfte. Oder eine Hälfte präsentiert den Text, die andere ein großformatiges Bild/Video.

Freie Formen bei Headerbereichen (Non-Rectangular Headers)

Zwangsläufig ergeben sich aus der Webgestaltung mit seinen HTML-Containern rechteckige bzw. quadratische Design-Elemente. Dank moderner Programmiermöglichkeiten in CSS3 und mit Hilfe von SVGs können nun auch andere Formen gewählt werden. Besonders für den Headerbereich ergeben sich hieraus tolle Gestaltungsmöglichkeiten, die sofort Aufmerksamkeit erzeugen.

Standard-Layouts / Design-Templates

So verrückt es klingt: Jedes Unternehmen möchte eine individuelle Webseite erhalten und doch setzen sich Standardlayouts immer mehr durch. Immer häufiger findet man moderne Websites in folgender Design-Logik aufgebaut:

Inhalt auf voller Breite
Foto/Video in voller Breite mit Headline oder Call-to-Action-Button auf dem Bild
Hamburger-Menü auf der rechten Seite (mit einem Overlay-Menü im Vollbildmodus).
Darunter drei Spalten mit Icons und zentriertem Kurztext
Darunter Parallax-Effekte und/oder sich smooth einblendende Texte usw.

Hinter dieser Vereinheitlichung steckt ein pragmatischer Grund: Dem Benutzer ist diese Struktur vertraut, er weiß sofort, wie er navigieren muss. Die Gestaltung ist damit bedienfreundlich. Standard-Layouts müssen dennoch nicht bedeuten, dass alle Webseiten gleich aussehen. Vertrauen Sie auf unsere erfahrenen Designer und bedenken Sie, dass es sich manchmal auch lohnen kann, bewusst andere Wege zu gehen.

Authentische Fotografie

So schön und einfach Bilddatenbanken sind und auch professionelle Imagebilder zu fast jedem Thema liefern, so groß ist auch deren Nachteil. Markante Bilder tauchen nicht nur bei Ihnen auf, sondern im schlimmsten Fall sogar bei Ihrem Mitbewerber. In vielen Fällen ist auf den ersten Blick zu erkennen, dass das Foto nicht bei Ihnen entstanden sein kann. Die Authentizität fehlt. Um diesem Problem zu entgehen, sollten Sie so viele eigene Fotos auf Ihrer Webseite verwenden, wie möglich. Dabei muss natürlich auch auf Qualität geachtet werden. Nichts spricht dagegen, wenn Sie sich selbst auf Fotosafari begeben. Moderne Smartphones haben heute sehr gute Kameras und ermöglichen tolle Schnappschüsse. Auch die Auflösung reicht für großformatige Bildausschnitte. Doch wenn es um die professionelle Produktdarstellung oder auch die Darstellung Ihres Unternehmens geht, sollten Sie Profis ins Boot holen. Wir haben gute Partner an unserer Seite, die Ihnen ein tolles Fotoshooting garantieren – zu einem fairen Budget. Gerne unterstützen unsere Designer mit dem passenden Bildkonzept und Briefing.

Farbverläufe vs. Weißraum

Farbverläufe werden wieder Trend. Lange Zeit waren sie verpönt, nun kehren sie zurück. Dezente, kleine Farbverläufe kommen ebenso vor, wie Effekte in kräftigen Farben, mit markanten Verläufen, auch in sehr unterschiedlichen Farbtönen. Es wird eindeutig wieder bunter. Farbenfrohe Töne, die für Aufmerksamkeit sorgen, sind wieder „in“. Die Farbgebung wird mutiger und extrovertierter – jedenfalls dort, wo es zum Unternehmen passt.

Dem widerspricht der Trend zu mehr Weißraum. Webseiten mit viel Weißraum fokussieren auf das Wesentliche, setzen Prioritäten bei den Inhalten. Hier kommt der alte Spruch zur Geltung: weniger ist mehr. Das wirklich Wichtige kommt bei Webseiten mit viel Weißraum sofort und besser zur Geltung. Aber auch hier gilt, dass es zum Unternehmen passen muss.

Bildslider

Bildslider sind eine platzschonende Möglichkeit sein, um mehrere Bilder zu einem Thema/Event darzustellen. Beachten sollte man allerdings dabei, dass der Betrachter oftmals nicht genug Zeit investiert, um sich alle Slides anzuschauen. Daher sollte man Bildslider nicht dafür verwenden, um wichtige Inhalte darzustellen. Studien belegen, dass oftmals nur der erste Slide wahrgenommen wird. Bildslider eignen sich demgegenüber aber durchaus als Bildergalerie-Ersatz, da sie deutlich weniger Platz einnehmen. Die Klickraten sollten unbedingt benutzerfreundlich eingestellt werden.