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
Ladezeit und Page Speed
Immer zentraler wird die Frage, wie gut eine Internetseite technisch umgesetzt wurde. Studien belegen, dass Internetnutzer nicht länger als 3 Sekunden warten wollen, bis eine Seite vollständig geladen ist. Dauert es länger, springt der Seitenbesucher ab. Ob er wiederkehrt, ist fraglich. Daher sind Kriterien wie die Ladezeit und die „Page Speed“ zum zentralen Gütekriterium einer Webseite gewachsen und einer der wichtigsten Webtrends 2022! Darüber hinaus beeinflusst die technische Performance maßgeblich die Suchmaschinenoptimierung einer Seite und ist Maß für eine hohe User Experience (UX), also die Bedienfreundlichkeit.
Card Design
Inhalte auf Internetseiten über visuelle „Karten“ (Card-Design) übersichtlich darzustellen, ist nicht neu, dennoch wird das Card Design immer häufiger vor allem auf Seiten verwendet mit umfangreichem Content. Dabei werden Inhalte als Kacheln oder Module angeboten, die sich flexibel anordnen lassen. Vorreiter dieses Designs war die Social Media Plattform Pinterest. Inhalte werden klassischerweise als recht- oder viereckige Karten/Kacheln angeboten, mit einem Bildteil einer einer kurzen Beschreibung (Teaser). Durch den klaren Seitenaufbau schafft man eine sehr übersichtliche und klare inhaltliche Struktur.
Mobile First - bis hin zur daumenfreundlichen, mobilen Navigation
Responsives Webdesign ist heute kein Trend oder Option mehr, es ist zum Standard beim Webdesign und der Webprogrammierung geworden. Eine Internetseite, die nicht auf allen digitalen Endgeräten optimal dargestellt wird, ist heutzutage für den Internetnutzer nicht mehr akzeptabel. Und die Entwicklung schreitet weiter voran: Das Internet ist definitiv mobil geworden. Laut aktueller Umfragen zur Mediennutzung* wird vorrangig das Smartphone zum Surfen im Internet genutzt. Damit hat das Handy den PC eindeutig abgelöst. Die Webdesigner haben reagiert und daraus einen neuen Webtrend generiert: Webseiten dürfen in 2022 nicht „irgendwie auch mobil“ sein, sondern müssen zuallererst mobil funktionieren („Mobile First“). Manche Entwickler gehen noch einen Schritt weiter und sprechen bereits von „thumb-friendly“ Design, einer daumenfreundlichen mobilen Bedienbarkeit. Dahinter steckt die Prämisse, dass viele Internetnutzer ihr Smartphone in nur einer Hand halten und mit dem Daumen navigieren. Das bedeutet für das Konzept und den Aufbau von Internetseiten, dass die Navigation und alle klickbaren Elemente beim daumenfreundlichen Design in der erreichbaren „Daumenzone“ angeordnet sein müssen. Erste Prognosen sagen, dass dies nur der Anfang der mobilen Entwicklung sei und weitere Anpassungen im Webdesign und der Webentwicklung zu erwarten seien.
(*Quellen: https://wearesocial.com/de/digital-2021-deutschland, https://www.hootsuite.com/de/ressourcen/digital-trends, Postbank Digitalstudie 2021, Statista)
(*Quellen: https://wearesocial.com/de/digital-2021-deutschland, https://www.hootsuite.com/de/ressourcen/digital-trends, Postbank Digitalstudie 2021, Statista)
Sichtbare Rahmen
Hatte man früher Content eher „frei“ im digitalen Raum inszeniert, sieht man jetzt immer häufiger Webseiten, bei denen der Content durch Umrandungen oder Rahmen, auch farbig, voneinander getrennt werden. Durch dieses optisch sichtbare Raster können Inhalte gut nachvollziehbar voneinander getrennt werden. Auch Seiten mit viel Content fühlen sich dadurch nicht überladen an, da das Auge geführt wird.
Farbverläufe und Gradienten vs. Weißräume
Es wird deutlich bunter! Denn Webdesigner setzten immer häufiger auf Farbverläufe und nutzen das Spiel mit den Farben. Möglich sind auch Kombinationen, die einen Eindruck von räumlicher Tiefe vermitteln. Als Hintergrundfarbe eingesetzt, erzeugen Farbverläufe und Gradienten visuelles Interesse, lenken den Fokus des Betrachters, bieten eine Menge Raum für Kreativität sowie Individualität, implizieren Dynamik und unterstreichen dabei die Unternehmensfarben.
Fast gegensätzlich mutet der Trend zu Weißraum an. 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. Auch hier gilt, dass es zum Unternehmen passen muss.
Fast gegensätzlich mutet der Trend zu Weißraum an. 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. Auch hier gilt, dass es zum Unternehmen passen muss.
Horizontales Scrollen
Vertikales zu scrollen ist seit vielen Jahren Gang und Gäbe. Relativ neu ist die Möglichkeit auch in der Horizontalen zu scrollen. Genutzt wird diese Funktion gerne zur Darstellung von Referenzen und Bildergalerien. Wichtig hierbei ist es, dass deutlich erkennbar wird, dass man sich horizontal durch die Inhalte bewegen kann. Funktionalität und Optik dürfen einem vertikalen Scrollen in nichts nachstehen, müssen eindeutig zu erkennen sein.
Wichtig: Horizontales Scrolling sollte nie die einzige Alternative sein, um sich durch den Content zu bewegen. Es kann aber eine sinnvolle zusätzliche Möglichkeit sein, mit der inhaltlich komplexere Seiten strukturiert werden und dadurch trotzdem nicht überladen wirken. Für Textblöcke bietet sich horizontales Scrolling weniger an, für Bildergalerien und andere visuelle Inhalte, die den übrigen Seitencontent ergänzen, aber durchaus.
Wichtig: Horizontales Scrolling sollte nie die einzige Alternative sein, um sich durch den Content zu bewegen. Es kann aber eine sinnvolle zusätzliche Möglichkeit sein, mit der inhaltlich komplexere Seiten strukturiert werden und dadurch trotzdem nicht überladen wirken. Für Textblöcke bietet sich horizontales Scrolling weniger an, für Bildergalerien und andere visuelle Inhalte, die den übrigen Seitencontent ergänzen, aber durchaus.
Dark Mode – auch bereits ein Trend?
Dark Mode kommt ursprüngliche aus der Software- und Programmierecke. Der Dunkelmodus soll augenschonender sein, mit seinem schwarzem Hintergrund und den hellen Texten. Vertraut ist uns dieser Modus sicherlich vom Autofahren und den Autocomputern. Browerseitig lässt sich so ein Dunkelmodus bei modernen Browsern natürlich jederzeit aktivieren. Nur hat dies aus Webdesign-Sicht meistens eher „unschöne“ Effekte, da Farben fein aufeinander abgestimmt sind.
Daher wird der Dark Modus auch bereits im Webdesign angewandt. Es entspricht ein wenig der Entwicklung des mobilen Internets, bei der in schlecht beleuchteten Räumen oder unterwegs bei strahlendem Sonnenlicht aufs Internet zugegriffen wird. In diesen Settings lassen sich Texte auf dunklen Webseiten deutlich besser lesen. Ob Dark Mode zum Trend wird, bleibt abzuwarten.
Daher wird der Dark Modus auch bereits im Webdesign angewandt. Es entspricht ein wenig der Entwicklung des mobilen Internets, bei der in schlecht beleuchteten Räumen oder unterwegs bei strahlendem Sonnenlicht aufs Internet zugegriffen wird. In diesen Settings lassen sich Texte auf dunklen Webseiten deutlich besser lesen. Ob Dark Mode zum Trend wird, bleibt abzuwarten.
Trends, die uns schon länger begleiten...
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.
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
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, die nicht nerven...
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 vs. 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.
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.
