Webdesign Trends 2024
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 2024 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 2022:
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.
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.
Farben! Farben! Farben!
Wie auch das damalige Metro Design bedienen sich die Webdesign Trends 2022 einer teilweise eigenen Farbpalette. Diese Farbpalette ist nicht unbedingt durch konkrete Farben charakterisiert. Aber gedeckte wie auch leuchtende Farben sind im Webdesign 2022 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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
Parallax Scrolling
Das parallax Scrolling ist mittlerweile ein alter Hut. Damals als Webdesign Trend geboren, ist das Parallax Scolling mittlerweile Bestandteil vieler Websites. Beim Parallax 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 Parallax Scrolling kann auch vom Inhalt ablenken!
Es gilt wie bei allen Effekten: Weniger ist mehr. Deshalb solltest du den Parallax Effekt mit Vorsicht und Verstand einsetzen.
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 2022 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.
Emotionales Webdesign
Gutes Webdesign baut Eine Verbindung mit dem potenziellen Kunden auf. 2022 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.
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”.
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.
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.
Animierte GIF-Bilder
Totgeglaubte leben länger: Die GIF-Bilder. Animierte GIFs erhielten Ihre Renaissance 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 dynamischen Website.
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.
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.
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.
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.
Memphis Design
Im Zuge der Antidesignbewegung wurde auch die Gruppe Memphis von Ettore Sottsass, eine Schlüsselfigur der Antidesignbewegung, im Jahre 1981 gegründet. Memphis-Design ist bunt, kindlich, unbeschwert und absichtsvoll naiv. Es spielt mit Motiven aus verschiedenen Alltagsmedien (Pop, Funk, Film, Comics) – benutzte bewusst Formen und auch Materialien, die noch kurz zuvor als Inbegriff des schlechten Geschmacks standen. Dabei ist die Gestaltung antifunktionalistisch – eine Gegenbewegung zum Funktionalismus und Minimalismus im Webdesign.
Mit Memphis Design im Webdesign beginnt wieder das Heranrücken der Designdisziplin an die Kunst, ob nun gewollt oder nicht, Design wird wieder zum Statussymbol.
Aber der Ansatz, dass der Mensch Alternativen braucht, bzw. als direkter Rückschluss auf diese Aussage, dass nicht alle Menschen gleich sind und so einen anderen Geschmack haben und um diesen Geschmack zu befriedigen auch verschiedene Stile brauchen, ist sicherlich interessant und in unserer heutigen individualisierten Welt von höchster Brisanz.
Leider ist Webdesign kein Statussymbol sondern sollte vorrangig dazu dienen Inhalte zu vermitteln.
Das könnte dich auch interessieren…
Hat dir mein Beitrag geholfen?
Als Webdesigner halte ich es für wichtig, über die neuesten Webdesign-Trends auf dem Laufenden zu bleiben. Ich glaube jedoch nicht, dass es notwendig ist, jedem Trend zu folgen. Einige Trends sind für bestimmte Branchen oder Unternehmen relevanter als andere. Es ist wichtig, die Trends zu wählen, die für Ihre Zielgruppe und Ihre Marke geeignet sind.
So viele Dinge, die man beachten muss! Hab mir diesen Artikel gespeichert, um wieder darauf zurückgreifen zu können. Danke für die tolle Übersicht!
Die Isometrischen Grafiken sehe ich immer häufiger. Nicht unbedingt mein Geschmack, aber ich kann verstehen, warum es gut ankommt.
Danke für den coolen Beitrag.
Beste Grüsse
“Web goes Video” merken wir als Videoproduktionsfirma schon auch stark. Wobei das auch den Pagespeed negativ beeinflussen kann. Danke für den tollen Artikel.
Ein sehr sehr gut geschriebener und Blogartikel. Viele Grüße aus Frankfurt
P.S. das mit den Stockfotos ist immer so ne Sache! Natürlich wirken eigene Bilder immer vertrauensvoller aber diese müssen dann auch gut gemacht sein.
Danke für den tollen Überblick! Da ist einiges dabei, was ich bisher noch nicht auf dem Schirm hatte.
Beispielsweise war mir nicht bewusst, dass alternative Menüs aktuell wirklich im Trend sind, das ist mir bisher noch nicht untergekommen. Auf den ersten Blick tendiere ich da allerdings zum klassischen Hamburger Menü, ich mag es auch bei Seiten, die ich das erste Mal benutze, direkt zu wissen wo ich hinklicken muss.
Auch was GIFs angeht gehöre ich eher zum klassischen Stil. So animierte Bilder sind ja ganz nett – passen meiner Meinung nach aber zu kaum Webseiten. Für kreative und Agenturen kann ich es mir durchaus vorstellen, ansonsten fallen mir ad hoc nicht viele passende Webseiten ein. Gerade bei seriöseren Themen wie Versicherungen etc. muss man auch heutzutage noch zwischen coolem Design und Wirkung auf die Zielgruppe abwägen…
Es gibt wirklich sehr viele Blogartikel namens “Die X wichtigsten Webdesign-Trends für das Jahr Y”. Ich finde deine Zusammenstellung sehr gut, aber vor allem deine kritische, mal positive, mal eher ablehnende Meinung macht dies zu einem ehrlichen Artikel. Gratuliere.
Sehr interessant, nur bitte ein Lektorat über die Seite drüber gehen lassen.
ps. wie schön, ein Stück Albumcover von einem wahrlichgenialen Fleetwood Mac-Album als Bild auf dieser Seite zu sehen (Rumors)!
Hmm ich sehe das Cover des Albums nicht (mehr). Wurde es entfernt? Ich hab das zufällig gelesen und dacht nur, dass solche Cover ja rechtlich geschützt sind und Ärger machen könnten. Sehe ich doch richtig, oder?
Hallo Rafael, deine Beträge zum Thema Webseite stimmen bis auf zwei Punkte mit meinen Erfahrungen überein. Punkt 1 – ich empfinde “langes scrollen” in einer Webseite sehr störend.
Meist weiß der Kunde gar nicht, wo sich befindet und welcher Text zum Inhalt gehört.
Punkt 2 – Stockbilder machen eine gute Webseite nicht schlechter, wenn sie verwendet werden.
Vielen Dank für Deine Beiträge.
Technik und Webdesign werden zunehmend wichtiger. Ich selbst habe derzeit keine Seite gesehen, die webdesigntechnisch ein absoluter Horror ist, aber trotzdem auf Platz 1 rankt. Man sollte trotz aller Liebe für das Optische aber die anderen technischen Faktoren nicht vernachlässigen. Viele Seiten sehen gut aus, hinken aber in der Ladezeit hinterher, weil man möglichst viele Features, Plugins, Erweiterungen einbaut.
Auf der Desktop-Navigation finde ich das Hamburger Menü nur in wenigen Fällen wirklich sinnvoll und angebracht. Auch wenn die mobile Nutzung immer mehr in den Vordergrund rückt, gibt es dennoch erhebliche Anteile – auch stark Branchenspezifisch – am klassischen Laptop- oder Desktop-Monitor. Und da ist der zusätzliche Klick unnötig und das fehlende klassische Menü macht das schnelle Erfassen der Inhalte/Rubriken schwerer. Mobil ist eben nicht Desktop meiner Meinung nach. Vielen Dank für den informativen Artikel!
schon die Bezeichnung “Hamburger” dafür, die sich hierfür eingebürgert hat, empfinde ich als Graus.
Spannend, welche Trends es gibt.
Mir ist ja am Liebsten, wenn ich schön übersichtlich einen guten Einstieg in die Seite finde. Usability ist finde ich manchmal wichtiger, wie das ausgefeilteste Webdesign.
Hallo Rafael Luge,
darf meinen deinen Blogartikel für deinen eigenen verwenden? Natürlich mit Namensnennung und Quellenangabe :)
Na klar :) – bitte mit Link zu meiner Website.
VG
Ein sehr gut geschriebener und informativer Blogartikel. Weiter so! Viele Grüße aus Köln
Zu den Farbbild würd ich noch ergänzen, dass es inzwischen auch Farbgeneratoren gibt die ein Harmonisches Farbbild mit eine vorgegebenen Anzahl von Farben und auch in Abhängigkeit von bereits vorgegebenen Farben generieren.
Mir persönlich gefallen die Trends der Knallfarben und Asymmetrie sehr gut. Ich mochte es schon immer und es ist schön zu lesen, dass es diese Punkte jetzt tatsächlich in die Trendliste geschafft haben :)
Liebe Grüße
Toller und informativer Artikel! Durch diesen Beitrag habe ich vor allem festgestellt, dass mir Minimalismus beim Webdesign gefällt. Um weitere Informationen diesbezüglich zu erhalten, werde ich mich noch an eine Online Marketing Agentur wenden. Danke für den Tipp! ;)
Danke für den Artikel!
Bei Mobile First bin ich allerdings skeptisch: Klar gibt es viiiele mobile Nutzer – aber es ist eben ein riesiger Unterschied, ob eine Website mal eben unterwegs per Touch bedient wird, oder ob man sich zu Hause/stationär in Ruhe hinsetzt und planvoll und präzise mit der Maus agiert.
Insofern hat stationäres Design weiterhin eine elementare Berechtigung, wie ich finde. Daher sollte man beide Kontexte, die eben sehr unterschiedlich sind, berücksichtigen – sei es durch fluides Design, oder sogar durch Erkennung und dann mobile/stationäre Variante ausliefern.
Wenn eine Website auf dem Desktop erkennbar ein reduziert wirkendes, hochskaliertes Mobilding ist, bin ich als Nutzer auch unzufrieden.
VG
Julian
Wow,
da hast du mal richtig viel Arbeit reingesteckt. Klasse.
Grüße Mika
Danke für den tollen und informativen Artikel über das Thema Webdesign – Liebe Grüsse aus Zug ;)
Hi Rafael,
super Artikel danke dafür! Was Serifen angeht, haben wir den gleichen Geschmack. Mir sind Serifenlose Schriften im Web auch lieber. :)
Viele Grüße,
Sören
Hey,
Ihr habt ‘nen interessanten Trend vergessen: Nämlich Neumorphismus bzw. Soft-UI.
In diesem Artikel wird’s super erklärt: https://www.simpleguides.de/soft-ui-neumorphism/ ????????????
Hi Hubert,
danke für deine Ergänzung. Dieser Neumorphismus sieht sehr interessant aus. Ich werde mir das bei Gelegenheit mal anschauen und im Artikel ergänzen.
Cheers!
Danke für den spannenden Artikel zu den Trends 2020.
Ich lese auch auf anderen Portal, dass der Trend in Richtung minimalistischer Navigation im gesamten responsiven Design geht. Ich persönlich sehe das etwas kritisch. Natürlich ist ein Hamburger Icon weniger platznehmend wie eine aufgegliederte Navigation, aber irgendwie werde ich damit nicht glücklich. Zumindest bei Desktop-Geräten, die ja Platz in der Breite haben. Hier wünsche ich mir sichtbare und sofort anklickbare Menüelemente. Bei Smartphones und Tablets dagegen ist es in Ordnung einen Hamburger zu setzen.
Seid ihr ähnlicher Meinung?
Schöne Grüße aus Rosenheim
Lukas Kroiher
Hi Lukas,
ja auf der Desktop Website sollte der Webdesigner vom Hamburger-Menü absehen. Wie bereits oben schon geschrieben ist es ein Klick mehr für die Navigation. Zudem kann der Nutzer die Navigationspunkte nicht mit einem Blick erkennen.
Beste Grüße
Rafael
Bin einverstanden)) Habe bis jetzt nur eine Website mit Hamburger-Menu gesehen, wo es organisch und passend war.
Großartiger Artikel, vielen Dank für die tolle Recherche!
Ich muss ja sagen dass ich die asymmetrische Layouts richtig toll finde. Auch wenn manche hier am Ziel vorbeischießen gibt es auch viele Seiten die das toll umgesetzt haben.
Habt Ihr Tipps um hier an Designs zu kommen?
lg
Hallo Rafael,
toller Artikel! Danke für die tolle Zusammenfassung!
Liebe Grüße