Webdesign Trends Thumbnail

Die 27 wichtigsten Webdesign Trends 2019

Als Webdesigner sollte man aktuelle Webdesign Trends kennen. Eine moderne Webseite bedient sich zumeist an eben diesen Webdesign Trends. Oder sollte ein professioneller Webdesigner überhaupt irgendwelchen Webdesign Trends folgen? In diesem Artikel zeige ich dir die aktuellen Webdesign Trends 2019 und ob du sie verwenden solltest.


Ist es überhaupt möglich eine fancy und benutzerorientierte Website zu erstellen – ohne sich dabei an aktuellen Webdesign Trends zu bedienen? Gibt es eine zeitlose Website die auch in 15 Jahren noch genauso beeindruckend ist wie zum Launch? Aus ästhetischer Sicht: Vielleicht. Aus technischer Sicht: Nein.

Technik beeinflusst Webdesign beeinflusst Trends

Die Web-Technologien haben sich im Laufe der Jahre enorm weiterentwickelt. Und mit neuen Technologien konnte auch das Webdesign neue Wege gehen. Dabei konnte man immer auch eine Übersättigung eines Trends beobachten. Vielleicht kannst du dich noch an Flash erinnern – und welche seltsamen Webdesignlayouts daraus entstanden sind.

Da Webdesign nicht im luftleeren Raum existiert, sondern auch technisch umgesetzt werden muss, werden Webdesign Trends stark von technischen Neuerung und Möglichkeiten beeinflusst. Und umgekehrt.

Einige dieser „Webdesign Trends“, die auf technischen Neuerungen basieren, machen richtig viel Sinn. Deshalb sollte man dabei nicht von einem Trend sprechen. Trends sind temporär an eine Zeit gebunden und verschwinden danach wieder. Aber beispielweise Responsive Webdesign ist kein Trend. Responsive Webdesign war eine Reaktion auf das Surfverhalten der Nutzer und hat sich (verdient) einen festen Platz im modernen Webdesign gesichert.

Andere Trends werden heute eher belächelt. Ein kritischer Umgang mit einigen Webdesign Trends ist unumgänglich für nachhaltiges Webdesign. Deshalb solltest du als Webdesigner immer innovativ bleiben und nicht alles eins zu eins übernehmen. Denke über Trends kritisch nach und gib auch deinen eigenen gestalterischen Senf dazu. Webdesign Trends sind gut und schön, sollten aber auch Sinn machen bzw. deine Ziele unterstützen.

Einige Trends entpuppten sich später als absoluter Fehler und trotzdem wurden diese Webdesign Trends über Jahre von vielen Webdesigner übernommen und eingesetzt. Ein gutes Beispiel für so ein Fail ist das Metro Design von Microsoft (das später von vielen anderen übernommen wurde). Neuste Studien beweisen: Metro Design war ein Fehler. Und trotzdem damals ein gehypter Webdesign Trend.

Webdesign Trends – gut oder schlecht?

Solltest du dich bei der Website Erstellung an den Trends orientieren? Die Frage kann sicherlich nur jeder für sich selbst beantworten. Doch bevor du antwortest, will ich dir noch ein paar Gedanken auf den Weg geben: Sicherlich sollte sich ein Webdesigner im Webdesign sehr gut auskennen und sich immer über technische und gestalterische Entwicklungen informieren. Er sollte die Webdesign Trends kennen.

Viele Kunden erwarten von einem Webdesigner eine moderne Website, die sich an den aktuellen Webdesign Trends orientiert. Einige Kunden verbinden damit sogar eine gewisse Kompetenz. Auf den Trend Trampelpfaden kann man nicht viel falsch machen und du brauchst auch kein großes ästhetisches Gespür. Gestaltung wurde vorgedacht. Das eckt nicht an, der Kunde hat es bereits gesehen und der User findet sich schnell zurecht, weil er es bereits von anderen Webseiten kennt.

Allerdings kann es passieren, dass die Website dann in ein paar Jahren abgelutscht und kopiert daher kommt. Einige Trends werden heute belächelt und die bedingunglose Nachahmung eines Trends erkennt man heute auf einigen älteren Websiten deutlich. Und ja – auch ich habe am Anfang meiner Webdesigner Laufbahn Trends schamlos kopiert. Heute schäme ich mich dafür. Sicherlich gibt es das gelernte Verhalten des Users. Dies zu nutzen, um die Webseite möglichts intuitiv zu gestalten, sollte oberstes Ziel sein.

Aber bitte denk immer daran nur Elemente und Trends zu übernehmen, die auch Sinn machen. Insofern würde ich zusammenfassen:

Webdesign Trends sind wichtig. Dennoch solltest du sie mit Vorsicht einsetzen und auch deine eigene Gestaltung einfließen lassen.

Aber nun genug lamentiert. Hier nun die aktuellen Webdesign Trends 2019:

 

Serifen im Web

Jeder Webdesigner weiß (bzw. wusste): Serifen Schriftarten gehören auf Papier und serifenlose Schriftarten auf den Bildschirm. Dann kam einer und hat es einfach gemacht! Und viele sollten ihm folgen. Nun sieht man auf vielen Websiten Serifenschrift – ja sogar die Garamond habe ich neulich im Web gesehen. Diese Schriftart wurde für den Buchdruck entwickelt und hat eigentlich im Web nichts verloren. Zumindest wenn man alle Typografen über 40 fragt. Aber scheinbar sind wir im Web schon an alle Grenzen gestoßen und nun müssen alte Regeln neu überdacht werden.

Zum Glück bleiben die normalen Fließtexte im Web meist serifenlos. Diese Schriften sind für lange Texte im Web besser lesbar – aber Serifenschriften sind eben sehr dekorativ und werden von einigen Webdesignern nun als dekorative Headlines benutzt. Ich persönlich fand Serifenschriften noch nie besonders chic – aber das ist nur eine Meinung.

Serifen Schriftarten sind mittlerweile ganz schön trendy im Webdesign
Serifen erfreuen sich großer Beliebtheit im Webdesign
Auch Startups verwenden mittlerweile Serifenschriften in ihren Weblayouts
Serifen waren ursprünglich gar nicht für das Web gedacht

 

kontrastreiche Farbverläufe

Totgeglaubte leben länger! Früher waren Farbverläufe nach einer absoluten Übersättigung im Web verpönt. Heute werden sie wieder salonfähig. Und wer jetzt denkt es geht hier um dezente Grauverläufe hat sich geschnitten. Umso knalliger der Farbverlauf desto besser. Auf Gradient Hunt oder Grabient kannst du dich selbst inspirieren lassen. Diese neuen Farbverläufe wirken dynamisch und durch die Kombinationen von Retro-Farben erzeugen sie eine Emotionalität. Meist werden diese Farbverläufe mit einer nüchternen, cleanen Gestaltung kombiniert. Diese Kombination ist neu. Früher wurden Farbverläufe gefeiert und bei allen Möglichkeiten eingesetzt. Heute dienen sie eher als Kontrast gegen den cleanen Rest der jeweiligen Website – zum Beispiel im Header

Aber nicht nur als CSS3 Backgrounds tauchen diese Farbverläufe auf. Auch als Iconfarbe oder als Logofarbe werden zunehmend Farbverläufe mit starken Kontrasten benutzt. Als Beispiel hier das Redesign des Instagram Logo von 2016 oder auch das Logo von Chatter.

Verläufe sind wieder zurück im Webdesign
Farbverläufe zählen zu den Webdesign Trends
Kontrastreiche Farbverläufe sind zeitgemäß
Ein Beispiel für Farbverläufe im Webdesign

 

Farben! Farben! Farben!

Wie auch das damalige Metro Design bedienen sich die Webdesign Trends 2019 einer teilweise eigenen Farbpalette. Diese Farbpalette ist nicht unbedingt durch konkrete Farben charakterisiert. Aber gedeckte wie auch leuchtende Farben sind im Webdesign 2019 zum Gestaltungsmittel geworden. Dynamische Bildüberlagerungen und farbige Animation erfreuen sich immer größerer Beliebtheit. Dieser Webdesign Trend wird  wohl so schnell nicht verschwinden.

Die Farbpalette sollte sich professionell mit den anderen Elementen der Website ergänzen um so die zielgerichtete Botschaft weiterzuleiten. Die am häufigsten verwendete Farben sind helles Blau und weiches Lila. Ein Beispiel für diese Farben gibt es hier. Damit nicht alle Websiten gleich aussehen, solltest du diese Farben auslassen.

Beispiel für die Farbpalette in den neuen Webdesign Trends
kräftige Farben mit Verlauf - ein weiteres Beispiel für ein Webdesign trend

 

Standard-Layouts / Design-Templates

Das Web wird immer komplexer und schnelllebiger. Gutes Webdesign muss sich an alle Gerätegrößen anpassen. Damit verbunden wäre ein sehr hoher technischer Aufwand wenn du bei jedem neuen Webdesign Projekt das Rad neu erfinden willst. Damit sich die Kunden mit kleinem Budget auch eine moderne Website leisten können gibt es Templates und Frameworks. Das sind – einfach gesagt – fertige Code-Bausteine, aus der dann die jeweilige Website zusammengesetzt wird. Die Folge daraus ist, dass viele Webseiten gleich aussehen.

Zum Anderen gibt es mittlerweile auch ein gerlerntes Nutzerverhalten. Die Navigation ist meist oben rechts. Das weiß der Nutzer und kann sich auf Webseiten, die ähnlich aufgebaut sind, schneller zurecht finden. Das erhöht die Nutzerführung. Der Nutzer muss wenig kognitive Kapazitäten für die Navigation aufbringen und kann sich so mehr auf die Inhalte konzentrieren. Wenn jede Website gleich aussieht ist auch die Bedienung der einzelnen Webseiten gleich. Du siehst also es hat nicht nur Nachteile, wenn es einen einheitlichen Look gibt.

Die etablierten Layouts haben sich durchgesetzt weil sie funktionieren. Das stimmt allerdings auch nur zum Teil. Immerhin ist der Slider im Header auch heute noch Standard obwohl es bereits Studien gibt, die beweisen, dass solche Slider vom Nutzer nicht beachtet werden.

Aus gestalterischer Sicht sind die Standard-Layouts natürlich ein Graus. Der heutige Webdesigner scheint außer das Headerbild und die Farbpalette nicht viel gestalterischen Freiraum zu haben. Das ist sehr schade aber die Wirtschaftlichkeit zwingt den konkurrenzbewussten Webdesigner dazu, auf vorgfertigte Themes und Frameworks zurückzugreifen.

Standard Layouts prägen die Webdesign Trends

 

Startseiten-Slider / Hero-Bilder

Man sieht es immer wieder: Slider im Header der Startseite. Leider ignoriert der Nutzer diese Slider konsequent. Eigentlich sollten diese Slider mehr Emotionalität aufbauen. Mittlerweile gehören die Headerslider in das Standard Repertoire einer Website. Und der User hat sich daran gewöhnt hier keine wirklichen Informationen vorzufinden. Dennoch ist es weiterhin Trend ein Headerslider in die Webseite zu integreiren. Kein WordPress Theme, welches nicht ohne so einen Headerslider auskommt.

Generell gilt: Bei Slidern wird kaum der zweite oder dritte Slide beachtet und wenn dein Slider oder Hero-Image zu sehr nach Werbung aussieht, bekommt dieses Element vom Nutzer keine Beachtung. Der Nutzer kann sich nicht alles auf einer Website anschauen. Was nun passiert ist die selektive Aufmerksamkeit. Der Nutzer konzentriert sich auf die Dinge, die ihm nützlich erscheinen. Ein Headerslider ohne echten Inhalt oder ein Marketing Herobild wird keine Beachtung vom Nutzer finden.

Was einst eine echte Neuerung war, ist mittlerweile kaum beachtet wie die rechte Sidebar. Weitere interessante Infos (auf englisch) in diesem Video:

Selbst große Firmen setzten auch heute noch auf die trendigen Heroimages
Ein Beispiel für Webdesign Trends: Heroslider
Ein Webdesign Trend nicht erst seit gestern: die Fullwidth Headerbilder
Heroheader mit knalligen Fotografien

 

Mobile First

Nutzer surfen mittlerweile mobil. Der herkömmliche Desktop PC wird immer mehr von mobilen Devices verdrängt. Einige Webdesigner erstellen Ihre Screendesigns aber immernoch für die FullHD Bildschirme, die vom Nutzer jedoch kaum noch genutzt werden. Selbst Google stellt sukzessiv seinen Search-Index auf mobil um. Deshalb gibt es mittlerweile auch den Mobile First Ansatz. Während das responsive Webdesign früher dafür sorgte, dass Desktop Webseiten auch ein bisschen mobil optimiert erscheinen, sollte es heute genau andersrum sein. Erst wird die Website für das Smartphone entwickelt und diese Website sollte sich dann auf größere Bildschirme anpassen.

Aber Mobile First bedeutet nicht nur, dass sich Grafiken und Div-Boxen anpassen. Der Pagespeed ist heute ein wichtiger Rankingfaktor geworden. Zudem haben mobile Nutzer auch ein anderes Informationsbedürfnis als Desktop-Surfer. So sollten Inhalte besser priorisiert werden und eventuell mobil wichtig werdende Inhalte stärker präsentiert werden (z.B.: Öffnungszeiten, Adresse oder auch Kontaktformulare).

Dabei ist der Mobile First Ansatz kein herkömmlicher Webdesign Trend. Das würde bedeuten, dass Mobile First bald wieder Geschichte ist. Aber dieses Konzept wird dich als Webdesigner noch lange begleiten.

 

Das Hamburger Menü als einzige Navigation

Wer kennt es nicht? Die drei Linien – meist in der rechten oberen Ecke des Smartphones. Mittlerweile dürfte sich auch der letzte daran gewöhnt haben – das Hamburger Menü. Damals wurde dieses Element erschaffen weil die Desktop Navigation auf kleinen Bildschirmen nicht darstellbar ist. Und weil’s so schön ist kommt das Hamburger Menü jetzt immer öfter auch auf dem Desktop zum Einsatz.

Das bedeutet für den Nutzer immer einen Klick mehr für die Navigation. Zudem sind die einzelnen Unterseiten nicht von der Startseite aus sichtbar. Die Vorteile liegen dabei auf der Hand: Der User kennt das Burgermenü mittlerweile und die Website ist in Sachen Navigation konsistent. Darüber hinaus können die Menüpunkte in der Mitte besser vom User erfasst werden.

Ist dieser Trend nun empfehlenswert für das nächste Website Projekt? Im Hinblick auf Mobile First macht es natürlich Sinn das mobile Menü auch für die Desktop Navigation zu benutzen. Ein wichtiger Nachteil ist jedoch, dass die Navigation immer einen Klick mehr erfordert und Nutzer werden (in Zeiten von long-Scrolling Websites) immer klickfauler. Benutzerzentriertes Webdesign sollte sich eben auch am Benutzer messen lassen können – deshalb würde ich in vielen Fällen vom Burger Menü auf dem Desktop abraten. Wenn du anders darüber denkst, bring doch deine Argumente in den Kommentaren zum Ausdruck.

Websiten die nicht genug vom Hamburgermenü bekommen können
Das Burgermenü selbst auf großen Bildschirmen ist ein Webdesign Trend
Das Burgermenü selbst auf dem Desktop
Ein weiteres Beispiel für das Burgermenü auf dem Desktop

 

Long-Pager Scrolling / Mass Content

Sicherlich sind dir schon Seiten aufgefallen, die endlos lang erscheinen. Galt früher noch das Credo „above the fold“ und der User ist scrollfaul – so gilt heute das Gegenteil. User sind klickfaul dafür aber scroll-afin. Das liegt daran, dass bei scrollen keine Entscheidung getroffen werden muss (Wo klicke ich? Was kommt dann?) und der User es mittlerweile gewöhnt ist, sich von der Webseite führen zu lassen.

Dieser Webdesign Trend führt dazu, dass Inhalte nicht auf mehrere Webseiten aufgeteilten werden (was auch aus SEO-Sicht suboptimal ist) sondern vieles auf einer Seite stattfindet.

https://www.nngroup.com/articles/scrolling-and-attention/

Damit hat der Webdesigner (durch das lineare durchdringen von Inhalten) mehr Möglichkeiten eine Geschichte zu erzählen und auch in der Gestaltung der Website hat er mehr Spielraum. Aber Vorsicht! Ein Long-Pager muss konsistent aufgebaut sein. Das Thema der einzelnen Unterseite muss erkennbar und logisch sein. Wenn der Nutzer den gesuchten Inhalt nicht unten auf der Seite vermutet wird er auch nicht weiterscrollen. Zusätzlich solltest du bei solchen langen Pages über eine „fixed Naviagtion“ nachdenken.

Long Pages sind ebenfalls ein Webdesign Trend
Ein Beispiel für Long Pager

 

Organische Formen

Das Webdesign aus den 90er und 00er Jahren wurde durch Tabellen-Layouts geprägt. Diese Rasterlayouts wirkten sehr starr. Aber auch heute arbeitet man mit Grids, die meist boxartige Webseiten hervorbringen. Um auch mit dieser (unfreiwilligen) Gestaltungsregel zu brechen, bedienen sich einige Webseiten nun natürlichen, organischen Formen. Organische Formen besitzen meist keine Symmetrie und können der Webseite eine Tiefe geben. Dadurch können Seitenelemente besser hervorgehoben werden und der Nutzer besser geführt werden. Zudem wirken Webseiten dadurch lebendiger und natürlicher.

Webdesign Trend #1: Organic Shapes
Organische Formen sind besonders beliebt in den neusten Webdesign Trends
Weg vom Raster hin zur Natur mit organischen Formen als Gestaltungselement
Ein Beispiel für organische Formen im Webdesign

 

Asymmetrische Layouts

Die Übersättigung des typischen Grid-Layouts von Websiten schuf ein Gegentrend: Asymmetrische Layouts. Sie schreien in die Welt: Ich benutze kein Grid und bin völlig rasterlos. Technisch gesehen liegt diesen Webseiten natürlich auch ein Raster zugrunde. Der Nutzer kann es nur auf den ersten Blick nicht erkennen. Dieser Webdesign Trend war früher State-of-the-Art und eigentlich auch nur puristischen Unternehmen bzw. Institutionen (Theater, Galerien, Museen) vorbehalten. Mittlerweile ist dieser Webdesign Trend im Mainstream angekommen und so gibt es auch WordPress Themes mit asymmetrischen Layouts. Weitere Beispiele findest du hier.

Für gesetzte und seriöse Unternehmen ist dieser Trend wahrscheinlich nicht interessant. Ich persönlich konnte mich noch nie für diesen Trend begeistern. Mit allen Mitteln sprichwörtlich aus dem Rahmen fallen – das ging meist auf Kosten der Benutzbarkeit. Und so werden Nutzer mit Inhalten allein gelassen und müssen sich nun durch ein wirres Layout kämpfen. Denn: Die Schwierigkeit bei solchen asymmterischen Layouts ist die Nutzerführung. Sicher gibt das Herauslösen aus dem Raster gewissen Webelementen mehr Aufmerksamkeit und macht das Layout interessant. Auf der anderen Seite kann man es mit dieser Rasterlosigkeit schnell übetreiben und Inhalte gehen unter.

Ein Beispiel für asymmetrische Layouts
Ein Beispiel für asymmetrische Layouts

 

Experimentelle Navigation

Mittlerweile hat sich die Navigation oben rechts durchgesetzt. Das bedeutet zwar für den Webdesigner weniger Spielraum im Layout aber der Nutzer kennt diesen herkömmlichen Aufbau der Website/Navigation. Damit wird der Nutzer optimal geführt und muss nicht bei jeder besuchten Webseite aufs neue schauen wie er sich navigieren kann. Einige Webdesigner versuchen jedoch das Navigationsrad neu zu erfinden. Mit experimentellen Navigationskonzept wird versucht besonders innovativ zu sein. Und manchmal klappt es auch – der Nutzer muss sich in die Webseite „reindenken“. Damit wird eine besondere Interaktivtät erzeugt. Mehr Beispiele findest du hier.

Allerdings ist diese experimentelle Navigation nicht für jedes Projekt geeignet. Geht es um eine herkömmliche Informationswebseite, die dem Nutzer möglichst einfach Informationen bereitstellen soll ist eine experimentelle Navigation evt. hinderlich. Hier möchte der Nutzer nichts neues entdecken sondern sich nur schnell Infos abholen. Bei innovativen Webseiten kann die besondere Form der Navigation den Nutzer auf eine besondere Art einbinden. Dann hat die experimentelle Navigation durchaus Vorteile.

Experimentelle Navigationskonzept gehören zu den Webdesign Trends
Ein Beispiel für eine experimentelle Naviagtion

 

Spilt-Screen Design

Ein sehr schöner Webdesign Trend ist das Split-Screen Design. Dabei wird die Webseite in zwei vertikale Bereiche geteilt. Das sieht manchmal wie ein Print-Magazin aus. Dabei ist die Gestaltung der beiden vertikalen Hälften oft unterschiedlich. Manchmal wird eine Seite für die Navigation verwendet und manchmal wird eine Seite für ein vollformatiges Bild verwendet. Das steigert die Emotionalität, kann jedoch nur bei Webseiten mit wenigen Inhalten eingesetzt werden.

Leider lässt sich dieses Design auf besonders kleinen Screens leider nicht konsequent durchziehen – meist wird dann auf das vollformatige Bildmaterial verzichtet. Besonders in Verbindung mit dem Scrollytelling bzw. Scrolleffekten ist das Split-Screen Webdesign sehr schön und bietet einzigartige Nutzererlebnisse.

Ein Beispiel für ein Split Screen Webdesign
Beispiel für Splitscreen Webdesign
Spli Screen Webdesigns bieten einige Vorteile
Beispiel für Splitscreen Webdesign

 

Fixed Navigation

Voll im Mainstream angekommen: Die fixed Navigation. Fixed Naviagtion bedeutet, dass die Navigation am oberen Bildschirm Rand stehen bleibt, auch wenn der Nutzer in die Website reinscrollt. Die fixed Navigation ist also immer sichtbar. Das hat fast nur Vorteile: Der Nutzer muss (besonders bei sehr langen Seiten) nicht wieder hochscrollen um sich auf der Webseite zu navigieren. Zudem hat er immer im Blick, welche Unterseiten es gibt und kann sich so besser orientieren.

Die Nachteile der Fixed Navigation sind überschaubar: Die Navigation gehört nun immer zum Screendesign. Außerdem gehen nun ein paar Pixel des eigentlichen Contents immer für die Navigation drauf. Da die Fixed Navigation aber meist nur bei größeren Screens zum Einsatz kommt ist dieser Nachteil zu vernachlässigen.

Ein Beispiel für die Fixed Navigation
Ein Beispiel für die Fixed Navigation

 

Parallax Scrolling

Das parallax Scrolling ist mittlerweile ein  alter Hut. Damals als Webdesign Trend geboren, ist das Parallax Scolling mittlerweile Bestandteil vieler Websites. Beim Paralx Scrolling werden Vordergrund und Hintergrund in verschiedenen Geschwindigkeiten gescrollt – so entsteht der Eindruck von Tiefe bzw. Dreidimensionalität. Auf modernen Websiten kommt dieser Effekt oft zum Einsatz – aber Achtung: Zu viel Paralax Scrolling kann auch vom Inhalt ablenken!

Es gilt wie bei allen Effekten: Weniger ist mehr. Deshalb solltest du den Paralx Effekt mit Vorsicht und Verstand einsetzen.

Ein Beispiel für Parallax Scrolling
Parallax Scrolling ist ein Webdesign Trend
Parallax Scrolling Beispiel
Parallax Scrolling Beispiel- das Parallax Scrolling eignet sich auch für das Storytelling
Parallax Scrolling Beispiel

 

Hover-Effekte / Mikrointeraktionen

Wenn du eine Interaktion auf einer Website ausführst und daraufhin etwas passiert, dann redet man von einer Mikrointeraktion. Das promintenteste Beispiel wären die Mous-Over Effekt und Animationen. Damit wird der Nutzer motiviert, die Website zu entdecken und möglichst tief einzutauchen. Manche Hover-Effekte bzw. Mikrointerkation dienen nur der Effekthascherei (was auch sehr unterhaltsam sein kann) andere Effekte dienen der besseren Benutzerführung. In jedem Fall werden die Animationen und Interkationen (meist mit CSS3) immer detailverliebter.

Ich persönlich finde diese Animation sehr schön, da sie dazu einladen, möglichst viel mit der Website zu interagieren und die Inhalte zu entdecken. Zudem wirtkt eine Website mit Mikrointeraktionen interaktiver und bindet den Nutzer besser.

 

Videos! Videos! Videos!

Videos im Web sind mittlerweile Standard. Hero Video Header, Youtube und andere Dienste sorgen dafür, den Nutzer mit Videos zu versorgen. Und die Nutzer nehmen diese Videos dankend an. Die Vorteile von Videomarketing habe ich bereits in einem anderen Artikel beleuchtet und sogar eine Infografik zum Videomarketing erstellt. Dennoch wurde dieser Webdesign Trend auch 2019 noch weiter ausgebaut!

Videos sorgen für Abwechslung auf deiner Website und mittlerweile schauen auch Entscheider mind. einmal die Woche ein Video. Explainer, Mitarbeiterportrait-Videos, gebrandete Storytelling Clips und Moodvideos sind nur ein kleiner Auszug aus den verschiedenen Videoarten im Web. Dabei richtet sich das Video an eine ganz bestimmte Zielgruppe. Diese hat keine Zeit für lange Texte und schaut sich eben lieber ein Video an um Inhalte zu konsumieren.

Auch Google bevorzugt audiovisuelle Inhalt immer mehr und so werden bei manchen Suchanfragen nun Videos in den Suchergebnisseiten bevorzugt angezeigt.

Videos im Webdesign - ein Beispiel
Videos erfreuen sich im Webdesign großer Beliebtheit
Ein Beispiel für Videos im Webdesign
Ein Beispiel für Videos im Webdesign

 

Emotionales Webdesign

Gutes Webdesign baut Eine Verbindung mit dem potenziellen Kunden auf. 2019 ist das erste Mittel dafür Emotionen. Die emotionale Anziehungskraft kann bei dem Benutzer entweder Freude, Trauer oder Angst auslösen. Damit schafft man Vertrauen oder eben auch Misstrauen. Wichtig ist, dass die Emotionen zur Zielgruppe bzw. zum Produkt passen. Emotionales Design kann ein Verkaufskatalysator im Web sein.

Gefühle bzw. Emotionen werden durch die Wahl der Farben aber auch das Bild und Textmaterial beeinflusst. Auf jeden Fall sollten Text, Farbe und Bild zusammen im Einklang stehen und sich gegenseitig unterstützten. So entsteht eine einheitlich Atmosphäre die Emotionen begünstigt.

Nutzer werden neugierig, wenn dein Webdesign emotional ist. Im nächsten Schritt kannst du das geweckte Interesse mit der Präsentation deines Angebotes nutzen.

Emotionales Webdesign Beispiel
Emotionales Webdesign Beispiel

 

Performance / Website Geschwindigkeit

Dieser Webdesign Trend ist gekommen um zu bleiben: Die Website Geschwindigkeit. Der Pagespeed ist mittlerweile ein wichtiger Rankingfaktor und wird im mobilen Internet zunehmend wichtiger. Aus eigener Erfahrung kann ich sagen, dass eine Website mit schlechter Performance wesentlich schlechter rankt. Deshalb solltest du darauf achten, dass deine Pagespeed Score möglichst gut ist. In meinem Artikel Pagespeed Optimierung für WordPress zeige ich dir, wie du deine WordPress Website schneller machen kannst.

 

Stockfotos

Eigentlich kein Webdesign Trend als solches aber trotzdem in dieser Liste, weil die Stockfotos immer wieder auftauchen. Manche Unternhemen und Firmen haben kein eigenes Bildmaterial und greifen auf sogenannte Stockfoto-Agenturen wie Adobe Stock zurück. Leider sehen Stockfotos eben auch immer aus wie Stockfotos. Und was eigentlich Emotionalität erzeugen soll, bedient bei manchen Webseiten nur ein Klischee und wirkt unpersönlich. Da weiß man nicht ob es sich um ein Unternehmen in China handelt oder um die regionale Firma um die Ecke.

Zudem tauchen viele Stockfotos auf den unterschiedlichen Websiten auf. Der Schauspieler Vince Vaughn macht sich als Promo-Aktion genau über solche austauschbaren Stockfotos lustig. Wenn man jedoch etwas tiefer bei solchen Stockfoto-Agenturen gräbt, findet man hier und da auch natürliche Fotos die nicht schreien „ich bin ein Stockfoto“.

Klischeehafte Stockfotos schaden mehr als sie nützen

 

 

Web Brutalism

Diesen Trend gibt es bereits seit einiger Zeit. Ähnlich dem Architekturstil Brutalimus, zeichnet sich der Web Brutalismus nicht durch eine feine Gestaltung aus sondern gerade mit dem Bruch dieser. Unharmonische Farbkombination, System Schirftarten und andere (scheinbar) ungestaltete Elemente wirken sehr „brutal“. Dieser Webdesign Trend ist das Gegenteil von den filigranen Weblayouts, die derzeit das moderne Webdesign prägen.

Meist wird der Web Brutalismus von Webdesigner gesetzt, die vom derzeitigen Standard Layout übersättigt sind und aus Protest eben gegen alle Gestaltungsregeln verstoßen wollen. Als ausgebildter Designer (Master of Arts) finde ich diesen Webdesign Stil zwar interessant aber deshalb noch lange nicht ästhetisch. Etwas neues zu gestalten indem man einfach das Gegenteil vom alten Design macht ist in meinen Augen nicht innovativ. Mehr Beispiele zur Inspiration findest du hier.

Web Brutalismus Beispiel
Web Brutalismus Beispiel

 

Minimalismus

Was als Flat Design begann sollte bald noch weiter getrieben werden und endete im Minimalismus. Apple machte es vor: Das Weglassen unnötiger Gestaltungselemnte und die Nutzung von Weißraum als Gestaltungselement. Einige Webdesigner trieben diesen Stil auf die Spitze und haben sich komplett von Farben und anderen Gestaltungselementen verabschiedet. Was übrig blieb war etwas Schrift und viel Weiß.

Der Fokus sollte auf dem Inhalt liegen und die Gestaltung sollte eben nicht von diesem ablenken. Das klingt in der Theorie erst mal gut, allerdings sollte man aufpassen da der Benutzer durch Farbe und Gestaltung gelenkt werden kann. Ist alles gleich minimalistisch ist es auch schwer den Nutzer zu führen. Deshalb gilt (wie bei allen Webdesign Trends) Minimalismus ist gut, sollte jedoch mit Sinn und Verstand eingesetzt werden.

Ein Beispiel für Minimalismus im Webdesign
Ein Beispiel für Minimalismus im Webdesign
Ein Beispiel für Minimalismus im Webdesign
Ein Beispiel für Minimalismus im Webdesign

 

Animierte GIF-Bilder

Totgeglaubte leben länger: Die GIF-Bilder. Animierte GIFs erhielten Ihre Renesaince in den sozialen Medien. Kurze Animationsloops wurden gern mit Freunden geteilt. Heute werden animierte GIFs auch auf modernen Websiten eingesetzt um Aufmerksamkeit zu erzeugen oder Sachverhalte mit einer kleinen Animation darzustellen, ohne dabei gleich ein Video zu verwenden.

Insofern ist der Einsatz von GIFs eine Alternative zu Videos und die Animation vermittelt dem Website Besucher den Eindruck einer dynmaischen Website.

via GIPHY

Intelligente Chatbots

Ein Webdesign Trend der auch durch die technische Weiterentwicklung der computergestützen KI entstanden ist: Die Chatbots. Schon seit einigen Jahren verbreitet, erfreuen sich diese Chatbots mittlerweile auch auf kleinen Websites großer Beliebtheit.

Dabei wird das Design dieser Chatbots ausgewogener und auch die Interaktion mit den Chatbots gestaltet sich als nutzerorientierter. Schon jetzt sind diese Chatbots indvidualiserbar und mit der Effizienz aus früheren Tagen nicht mehr zu vergleichen.

Chatbots werden immer intelligenter und ästhetischer
Ein Beispiel für intelligente Chatbots

 

Isometrische Grafiken

In Zeiten von klischeebehafteten Stockfotos suchen viele Unternehmen nach einer Möglichkeit mit individualisierten Grafiken einzigartiges Webdesign zu schaffen. Isometrische Illustration sind dabei ein gern gegangener Weg. Sie vermitteln eine gewisse Genauigkeit, wirken aber dennoch illustrativ. Besonders im Tech-Sektor sind diese isometrischen Grafiken sehr beliebt.

Durch die Abstraktheit der isometrischen Darstellung eignen sie sich für viele Einsatzgebiete und können auch im Sotrytelling eingesetzt werden um Emotionalität und Sachlichkeit gleichermaßen zu vermitteln.

Isometrische Illustration erfreuen sich immer größer Beliebtheit bei Webdesignern
Ein Beispiel für isometrische Grafiken im Webdesign
Ein Beispiel für isometrische Illustrationen im Webdesign
Webdesign mit isometrischen Darstellungen

 

Scrollposition – Positionsanzeige

Ein ganz neuer Webdesign Trend sind die Positionsanzeigen bzw. die prozentuale Angabe, wieviel der Nutzer schon erscrollt hat. Beispielhaft kann man diesen Trend hier und hier anschauen. Dieses kleine Gimmick verbessert meiner Meinung nach die Benutzerführung und zeigt dem Benutzer genau wie viel Inhalt er bereits erscrollt hat und wie viel noch übrig ist. Dieser Trend ist sehr gut für Blogs und vor allem Long Scrolling Pages geeignet.

Die Scrollposition anzeigen ist sehr trendy
Die Scrollposition anzeigen ist sehr trendy

 

Modulares Webdesign: Atomic Design

Die moderne Website setzt sich aus vielen einzelnen Content-Modulen zusammen. Diese können auf der Webseite beliebig wiederholt werden und schaffen so den Eindruck einer großen Website, obwohl diese eben nur aus Wiederholungen von Modulen besteht. So werden keine fertigen Unterseiten gestaltet sondern nur die einzelnen Elemente aus denen sich dann die jeweilige Unterseite zusammensetzt.

Besonders bei größeren Inhalts-Seiten macht diese Vorgehensweise Sinn und sorgt dafür, dass die Komplexität bei der Entwicklung einer Website im Rahmen bleibt. Sogenannte Styleguides beschreiben dann für den Administrator der Website den Einsatz dieser einzelnen Content-Elemente. Bereits 2013 wurde dieses Modell von Brad Frost als Atomic Design bezeichnet. Dabei bezieht sich Atomic Design nicht nur auf das Webdesign sondern auch auf die technische Umsetzung. Auch der Webcode sollte modular sein.

Wie hat dir dieser Artikel gefallen?
[Gesamt:1    Durchschnitt: 5/5]
0 Kommentare

Dein Kommentar

An Diskussion beteiligen?
Hinterlasse uns Deinen Kommentar!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.