Großzügige Typografie
Klare Informationen kombiniert mit der Kunst der Buchstaben
In den letzten Jahren spielte die Typografie in vielen Webseiten eine große Rolle. Dieser Trend wird sich wohl in der nächsten Zeit nicht ändern. Uns begegnen Überschriften, deren Typografie immer großzügiger wird, dabei im Gesamtbild der Webseite allerdings nicht überladen erscheint. Dieser Webdesign-Trend setzt auf einfache, meist fette Schriften, die mit einem großen Bild oder Video kombiniert werden. Der Webseitenkonsum auf unterschiedlichsten Medien erfordert heutzutage eine vielseitigere und ansprechendere Typografie. Viele Designer nutzen dafür seit einiger Zeit sogenannte Webfonts wie die umfangreichen Google Fonts.
(Quelle: https://www.bionic-sport.com/en/, Zugriff am 16.10.2018)
(Quelle: https://bestwebsite.gallery/sites/sotd/2017/12/11/huge, Zugriff am 16.10.2018)
Unser Tipp:
- Mit starker Typografie kann man seine Botschaft schnell und klar ausdrücken
- Aufmerksamkeit und Akzente erhält man mit großer, fetter Typografie
- große Schriftarten benötigen entsprechend viel Raum in der Gestaltung und auch viel Whitespace um diese wirken lassen zu können
Aktualität: ★☆☆
Verbreitung: ★★☆
Zukunft: ★☆☆
Cinemagraphs
Unaufdringliche Bewegungen, die Aufmerksamkeit auf sich ziehen
Cinemagraphs sind sehr hochwertige, aufwändig produzierte Standbilder, die kleine wiederholende Bewegungen enthalten und somit wie ein kurzes Video wirken. Die Wiederholung ist sehr dezent und schafft die Illusion eines fortlaufenden Videos. Cinemagraphs bringen mehr Bewegung ins Webdesign. Lebendiger Content, der dadurch viel interessanter für den Nutzer wird. Mehr Aufmerksamkeit des Nutzers bedeutet auch eine längere Verweildauer auf der Webseite. Natürlich sollte man diese Elemente nur mit Bedacht einsetzen. Zu viel Bewegung bringt Unruhe in die Webseite. Ebenso muss der Pagespeed (Ladezeit) im Auge behalten werden.
copyright Kevin Burg and Jamie Beck
Unser Tipp:
- die Wiederholung ist sehr dezent und daher nicht aufdringlich
- fungiert als Eyecatcher
- nehmen für die Erstellung sehr viel Zeit in Anspruch
Aktualität: ★★★
Verbreitung: ★☆☆
Zukunft: ★★☆
Animationen & Microinteractions
Vom kleinen Helfer bis hin zum Augenschmauß, der Spaß macht
Wer kennt es nicht: Man füllt fröhlich ein langes Formular auf seinem Smartphone aus, möchte es abschicken und was passiert? Nichts. Die meisten Nutzer würden den Vorgang genervt abbrechen und die Seite verlassen. Was war das Problem?
Wenn man als Nutzer kein Feedback bekommt, erhöht man gleichzeitig die Absprungrate. Die Lösung sind Mikrointeraktionen, oder auch Microinteractions genannt. Bei Microinteractions handelt es sich um kurze Aktionen, die wesentlich für die Nutzererfahrung sind. Diese erhöhen die Benutzerfreundlichkeit überall da, wo der User mit der Seite interagieren kann - z.B. Formulare, Buttons, Menüs, etc. Es muss sichergestellt werden, dass der Nutzer in all den Bereichen ein eindeutiges Feedback erhält. Dieses muss zuverlässig über Erfolg, Misserfolg oder die Dauer der Aktion informieren.
by Vlad Fedoseyev on dribbble.com
Bei der Gestaltung der Microinteractions ist es wichtig, ausschließlich das zu präsentieren, was unbedingt erforderlich ist, um die bevorstehende Aktion erfolgreich absolvieren zu können. Auch hier gilt: Reduktion auf das Wesentliche. Der Nutzer soll möglichst schnell, einfach bedienen können - ohne ihn zu nerven.
by Dannniel for Norde on dribbble.com
Unser Tipp:
- der Nutzer muss von den Microinteractions ein klares Feedback erhalten
- auf dezente Darstellung und Verwendung achten
- größere Animationen wie z.B. Bildslider mit animiertem Text sollten möglichst vermieden werden, um den Nutzer nicht zu überfordern
Aktualität: ★★★
Verbreitung: ★★☆
Zukunft: ★★★
Mobile zuerst
Vom Kleinen zum Großen
Neben der Geschwindigkeit, die Google bei Webseiten misst, priorisiert Google nun auch mobile Webseiten über Webseiten, die nicht für Mobilgeräte optimiert sind.
Deshalb ist es nicht verwunderlich, dass das Design auf dem mobilen Gerät zum Trend geworden ist. Das so genannte “Mobile First Design” bedeutet, die Art und Weise der Webseiten-Gestaltung zu ändern. Als Standard galt, ein Design zu produzieren, dass für Desktop-Computer entwickelt wurde. Anschließend konnte man dann ein mobiles Layout in Ableitung vom Desktop-Layout gestalten. Mobile First Design ist quasi genau das Gegenteil: man startet mit der Gestaltung der Webseite für den mobilen Nutzer, bevor eine Version produziert wird, die auch für den Desktop-Benutzer funktioniert.
Dieser Schritt in Richtung Mobile First Design basiert nicht nur auf SEO oder auf Ranking-Faktoren. Viel wichtiger ist das visuelle Ergebnis, das die Benutzererfahrung mit der Webseite auf dem Gerät verbessert. Dieser Design-Trend ist eine Antwort auf die Nachfrage, die von mobilen Nutzern gefordert wird. So müssen wir Webdesigner nutzerorientierter gestalten, auf große Impressionen verzichten. Allerdings sind Icons ja auch viel platzsparender und für jedermann verständlich.
(Quelle: Unsplash)
Unser Tipp:
- Mobile First Design wird immer wichtiger. Deshalb muss vor jedem Projekt und auch bei jedem Screendesign überlegt werden, ob der Einsatz von Bedeutung ist.
- Ladezeit, Inhaltsdarstellung, Navigationsmöglichkeiten, Interaktionen beachten – vieles ist auf mobilen Endgeräten anders
- Inhalte, die auf kleinen Bildschirmen funktionieren, funktionieren auch auf großen Bildschirmen gut
Aktualität: ★★☆
Verbreitung: ★☆☆
Zukunft: ★★★
Außergewöhnliche Layouts
Raster - kann man das essen?
Es sind nur die Wenigen da draußen, die mal etwas wagen, die aus der Reihe tanzen und sich nicht an einem Raster orientieren. Gemeint sind die außergewöhnlichen Webseiten mit experimentellen Layouts.
Für gewöhnlich orientieren sich die Inhalte einer Webseite an einem Raster/Grid, die strukturiert angeordnet sind, um für ein harmonisch wirkendes Layout zu sorgen. Um genau das zu verhindern und dem “Einheitsbrei” der Webseiten zu entfliehen, lässt man einfach Elemente außerhalb des Rasters auftauchen. Die Webseite wirkt aufgelockert und interessant - anders eben.
Ein Blick auf die Website von dada-data.net.
Perfekt für diesen Webdesign-Trend sind Webseiten, die nicht allzu viel Content haben und den man gut in Szene setzen kann. Allerdings muss man sich dessen bewusst sein, dass der Lesefluss durch die aufgebrochenen Strukturen des Layouts beeinträchtigt wird. Bei sehr textlastigen Webseiten ist das eher ungeeignet. Hier ist eine klare Struktur förderlicher, um den Nutzer durch die Seite zu führen und eine klare Hierarchie zu vermitteln. Eine Webseite mit vielen Inhalten und sehr viel Textinformationen ist für diesen Trend also nicht zu empfehlen. Klare Abgrenzungen dürfen auch hier nicht fehlen.
Für traditionelle Unternehmen, die eher klassisch auftreten wollen, werden innovativere Layouts eher weniger eine Alternative sein.
(Quelle: https://www.rezaharek.nl/, Zugriff am 14.01.2019)
Unser Tipp:
- schon kleine Experimente können Akzente setzen
- bei viel Inhalt nur dezente Layout-Experimente wagen
- sich dessen bewusst sein, dass das Erfassen des Inhalts durchaus anspruchsvoll sein kann
Aktualität:★☆☆
Verbreitung: ☆☆☆
Zukunft: ★☆☆
Unser Fazit zu den Webdesign Trends:
2019 scheint sich als ein Jahr der Optimierung zu entwickeln. Viele Trends bauen auf "alten" Webdesign-Trends auf - wie immer und überall. Möglicherweise… Vielleicht kristallisieren sich auch einige Trends als totaler Flop heraus. Fakt ist, dass auf Schnelligkeit und Usability gesetzt wird. Ihr Interesse wurde geweckt? Gern beraten wir Sie. Kontaktieren Sie uns!Sie möchten sich über Ihre Möglichkeiten in diesem Bereich erkundigen? Dann werfen Sie doch einen Blick auf unser Leistungsangebot.
Lesequellen
theedesign.com – Web Design Trends 2019
Webdesign Journal - Webdesign Trends
Kreativdesign Karlsruhe - Webdesign Trends - die Zukunft beginnt jetzt
Merehead - Top Webdesign Trends 2019
cmds online - Webdesign Trends 2019
Inkbotdesign - Webdesign Trends 2019
Optuno - Webdesign Trends to look for in 2019
vizzwebsolutions - Top 5 Webdesign Trends 2019
