Es gibt immer wieder Trends im Webdesign, die sich nicht lange halten oder nur ein kurzes Leuchtfeuer am Design-Himmel bleiben. Doch es gibt auch Trends, die mehr sind als nur Hype. TWT Interactive liefert die 6 wichtigsten Entwicklungen im Überblick, an die wir uns gewöhnen sollten.
Zuerst von Pinterest popularisiert, hat sich das Card Design auch bei verschiedenen anderen Content-Seiten etabliert. Insbesondere für contentlastige Websites bietet sich das Layout an. Webdesigner nutzen das Card Design für die Gestaltung eines übersichtlichen und intuitiven Interfaces. Inhalte und Informationen werden beim Card Design über rechteckige, visuelle Karten angeboten, die aus einem hochwertigen Bildteil und einer kurzen Beschreibung bestehen.
Card Design ist für diverse Endgeräte durch eine grenzenlose Skalierung nach unten und oben einfach mobil adaptierbar. Aufgrund verschiedener Bildgrößen kann der User auf der Website strukturiert geführt werden, wichtige News werden entsprechend größer dargestellt.
Bei der kreativen Anordnung der Karten haben Designer das sogennante Grid-System oder das Masonry-Layout zur Auswahl. Bei dem Grid-System ist die Breite der Cards bereits festgelegt. Das Masonry-Layout ist in der Breite genauso wie auch in der Höhe flexibel. Heutzutage nutzen beispielsweise viele Zeitungen, wie der Stern, dieses Format, um Artikel online anschaulich darzustellen und wichtige, hochaktuelle News besonders hervorzuheben. Kostenlose Plugins wie jQuery Masonry können verwendet werden, um dieses Layout-Stil für verschiedene Höhen und Breiten mit animierten Karten zu imitieren.
Interactive Loading Screens
Loading-Screens und Intros wurden früher oft dafür genutzt, große Bilder vorzuladen. Der User musste oftmals warten, hat sich gelangweilt und schnell weggeklickt. Loading Screens waren lange Zeit also kein sonderlich beliebter Webdesign Trend. Loading Screens zu einem spannenden und mehrwertstiftenden Design-Element zu gestalten, war eine große Herausforderung der letzten Jahre. Interactive Loading Screens bieten eine unterhaltende Einleitung in die Website. Dabei wird der Nutzer nicht gelangweilt, sondern mit interessanten Informationen oder Entertainment-Elementen versorgt. Konkrete und relevante Inhalte im Loading-Screen darzustellen, bleibt weiterhin angesagt.
Interaktive Ladebildschirme können Hover-Effekte nutzen, die sich nach der Mausbewegung des Users richten. Ziel dabei ist es, die Aufmerksamkeit der Website-Besucher so lange zu halten, bis die Seite komplett geladen ist. Dies schafft man nicht mit langweiligen Screens sondern durch interaktive Elemente. Die Hover-Effekte schmälern dabei Performance und Ladezeiten nicht. Ein gelungener Einsatz von Grafik und Sounds rundet die User Experience ab und bietet einen gelungen Einstieg in Ihre Webpräsenz. Auch Minigames sind für einige Branchen eine spannende Möglichkeit, den User zu unterhalten und “bei der Stange” zu halten.
Hero Video Headers
Ein Hero Header ist ein vollflächiges Display-Visual mit visuellen, textlichen und Navigationselementen. Hero Header sind seit einigen Jahren gerade im B2C-Sektor eine gute Möglichkeit, einen tollen ersten Eindruck zu hinterlassen. Und nun kommt Bewegung ins Spiel: Mit dem Anstieg des Video-Contents im Netz verbreiten sich seit wenigen Jahren auch Hero Video Header immer stärker – zu Recht, wie ein Best Practice aus den USA zeigt:
Sie sehen gerade einen Platzhalterinhalt von Standard. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf den Button unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Scrollytelling
Das Scrollytelling ist eine gelungene Mischung aus Storytelling und Scrolling. Durch die jeweilige Scroll-Geschwindigkeit wird der Ablauf der Story gesteuert und wird somit aktiv vom Betrachter beeinflusst. Das Scrollytelling-Element besteht zumeist aus einer einzigen langen Microsite, also einem One-Pager. Diese Seite kommt zumeist gänzlich ohne Navigationselemente, Banner, Sidebars oder andere störende Elemente aus. Der User navigiert ausschließlich mit Scrollen durch die lineare Handlung. Texte, Bilder, Infografiken und Videos können als Medienelement zum Einsatz kommen und verschmelzen im One-Pager zu einer in sich geschlossenen Storyline. Es gibt immer einen Anfang und ein Ende der Geschichte. Sowohl das Konzept als auch die Storyline müssen hervorragend ausgearbeitet sein, um den Nutzer zu begeistern. Scrollytelling ist in Deutschland noch nicht sehr verbreitet, was sich jedoch mit zunehmender Bekanntheit und guten Best Practices ändern wird.
Combining Typefaces
Noch größer werdende Schriften und die Nutzung verschiedener Textfelder liegen im Trend. Was früher als No-Go verschrien war, gilt heute als ansprechender Style. Die Combining Typefaces haben sich in den vergangenen Jahren als klickstarkes Design-Element erwiesen. Große Schrift-Kombinationen zu schaffen, ist eine Kunst, keine Wissenschaft. Hierbei geht es meist um die Kombination von serifenloser mit Serifen-Schrift.
Material Design
Googles Designsprache Material Design nimmt 2016 Fahrt auf. Nicht nur für Android-Apps, sondern auch für immer mehr Web-Anwendungen wird das Konzept eingesetzt. Großflächige Elemente, Kontraste in Farbe, Icons und Schriften machen die Designsprache aus. Sie erkennen Parallelen zum Flat Design? Das ist auf der einen Seite richtig, auf der anderen Seite steckt viel mehr hinter dem Designkonzept aus dem Hause Google.
Die Funktion steht beim Material Design im Vordergrund. Ziel ist es, eine positive, benutzerfreundliche Interaktion zwischen User und Website oder App zu schaffen. Eine schlichte, klare Font sowie ein frisches User Interface – das sind weitere Elemente des Material Designs. Diese klaren Formen helfen dem User, sich zu orientieren und verringern so den Navigationsweg auf einer Website oder innerhalb einer App.
Fazit
Webdesign ist, genau wie die Mode, immer eine Erscheinung seiner Zeit. Doch genau wie in der Mode gibt es auch im Webdesign zeitlose Klassiker.