5 Webdesign-Trends, die Du 2019 nicht verpassen solltest

 

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.

01

(Quelle: https://www.bionic-sport.com/en/, Zugriff am 16.10.2018)

 

04

(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.

OZ-MASTER-with-Color9801

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. 

video

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.

nike5

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.

hal-gatewood-613602-unsplash-1

(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.

dada-data2-870x500

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.

reza-harek-870x500

(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