25 Webdesign Trends für 2025 und danach
1. October 2024
Webdesign ist Geschmacksache sagst du? Wir sagen es ist eine Sache der Nutzerfreundlichkeit oder positiven User Experience (UX). Welche der 25 Trends im Homepagedesign wirklich deine Websitebesucher/-innen effektiv zum Ziel führen und welche nur effektvoll beeindrucken erfährst du in diesem neuen Blogbeitrag.
Index
Was ist Webdesign?
Webdesign bedeutet Webinhalte so zu gestalten, dass diese optisch ansprechend und unterhaltend sind. Nutzer sollen sich beim Besuch der Website oder Verwendung des Apps wohl fühlen und diese spielerisch bedienen können.
Hierzu gehören die Gestaltung des Layouts, die Menüführung, die Struktur und gezielte Anordnung der Inhalte durch User Interface (UI) und User Experience Design (UX). Details wie Hintergründe, Fonts, und Illustrationen durch Grafik Design abgedeckt.
Wie der/die Besucher/-in auf eine Website, Blog oder E-Shop reagiert und damit umgeht hängt von visuellen als auch funktionellen Faktoren ab. Dieser Beitrag beschäftigt sich mit ersteren und wie Trends im Design sich gerade entwickeln.
Geschichte des Webdesigns
Hinter den Kulissen des Forschungszentrums CERN, wurde 1991 die allererste Homepage geboren. Ganz unscheinbar war sie, mit Text auf weißem Hintergrund. Erinnerst du dich an die Websites der späten 90ger und frühen 2000der? Die kunterbunten Fotocollagen mit schlecht positionierten Texten und lauten Farben? Alles wirkte irgendwie eckig.
Frühes Homepagedesign
Frühes Web-Design basierte auf Tabellen und Text. Es war somit wenig visuell und mehr funktionell. Es wird deshalb auch als “read only web”, also das nur lesbare Web beschrieben, kurz Web 1.0.
Schematische Entwicklung des World Wide Webs
In den darauffolgenden Dekaden wurde Homepage Design interaktiv; erst mit Plattformen wie MySpace und Wikipedia und dann mit Applikationen und Widgets, um Inhalte individuell auf den User anzupassen.
Momentan erobert künstliche Intelligenz die Erstellung und das Design von Websites und unkonventionelle Layouts mit dem Hang zum One-Pager. Doch dazu gleich mehr.
Standardwebdesign
Für moderne Webseiten werden heutzutage gewisse Standards erwartet, die jeder modere Website Builder, wie Webnode, mit sich bringt:
Responsives Webdesign
Wenn eine Website sich automatisch an alle Geräte und somit Formen von Bildschirmen anpasst, ist diese Website responsive. Dies erlaubt es den Schriftsatz so einzurichten, dass es von einem Text mit wenig Zeilenumbrüchen auf einem großen Bildschirm zu einem Text mit vielen Zeilenumbrüchen auf einem kleinen Bildschirm wechselt und Bilder hierbei an Qualität nicht verlieren.
Mobile First Design
Hierbei werden Web-Inhalte so entworfen werden, dass diese für mobile Geräte zuerst geschaffen werden, nicht für den Desktop Computer. Heutzutage sehen sich fast 96% aller Menschen weltweit das Internet vom Handy aus an.
Google hat seinen Algorithmus auf mobil-freundliches Webdesign optimiert. Websites im Mobile First Design werden automatisch besser gerankt. Das Design ist nicht nur responsive, es beinhaltet auch eine einfache Struktur und Navigation kombiniert mit einer schnellen Ladegeschwindigkeit.
Schneller ist besser
Ladegeschwindigkeit und Performance entscheiden, ob jemand auf der Website bleibt oder gleich wieder geht. Was ist eine hübsch kreierte Website, wenn diese sich zu langsam öffnet? Dies muss in heute unter 2 Sekunden geschehen, oder wir sind genervt und schließen diese.
Ein schnelles Laden macht die Homepage nutzerfreundlich!
Gute Struktur und Menüführung
Die Websitenavigation und die Anordnung des Menüs geben der Website nicht nur optisch einen Ramen, sie sind der Wegweiser durch dein Web.
Wichtige Elemente jeder Website sind:
- Navigationsleiste
- Kopfzeile
- Fußzeile
Sie sind alle relativ zur Navigationsleiste angeordnet.
Von links nach rechts: Hamburger Button, obere, untere und seitliche Navigationsleiste.
Auch wenn mehr als 80% aller heutigen Websites die Navigationslinie oben angeordnet haben, wächst die Flexibilität zu anderen Varianten. Die klare Positionierung des Hamburger Buttons (drei Linien) oben rechts, welcher alle weiteren Seiten im Drop-Down Menü öffnet, lenkt den Fokus auf den Inhalt.
Kontinuität
Alles, was auf deiner Website veröffentlicht ist, muss zusammen passen. Deine Farben, Schriftarten, Hintergründe, die Wahl deiner Überschriften und vieles mehr. Du entscheidest, was du darstellen willst und wieviel davon. Mache es deinen Lesern/Leserinnen leicht und konzentriere dich auf ein Thema pro Seite. Nicht mehr.
Eine Tischlerei würde zum Beispiel Stories erzählen, die mit dieser Tätigkeit zu tun haben. Tipps zur Pflege von Holz sind hier besser aufgehoben als die Bilder des feucht-fröhlichen Betriebsausfluges. Du kannst Videos und Kundenrezessionen einbringen, Sei kreativ, aber auch konsequent.
Roboter & KI
Die kleinen Helfer wie Chats sind in Echtzeit immer für dich da. Chatten ist nicht unpersönlich. Hinter ihnen verstecken sich echte Menschen. Sie sind von Menschen für Menschen programmiert und berücksichtigen dein Anliegen.
Künstliche Intelligenz ist bei der Websitegestaltung nicht mehr wegzudenken. Sie hilft bei der Gestaltung der Seiten passende Bilder für Texte zu finden oder verfasst ganze Abschnitte von Geschichten.
Moderne Website-Baukästen verfügen über einen KI-Helfer, der deine Website in Sekunden fertig stellt. Alles, was dieser dazu braucht, sind ein paar Infos zu deinem Projekt oder Firma, und die KI schreibt den passenden Text dazu.
Nutzerfreundlichkeit
Sie ist durch, dass sich einwandfrei Zurechtfinden und Navigieren der Seiten und auch der Inhalte auf einer einzelnen Seite selbst gegeben. Inhalte, wie geschriebene Texte, Bilder und Videos sollten zusammenpassen und im Zusammenhang stehen, damit sie eindeutig verstanden werden.
Wir haben die neuen Trends auf Nutzerfreundlichkeit geprüft, damit du besser abwägen kannst, welchem du für deine Website folgen willst.
Webdesign Trends
Was ist in Sachen Homepage Design gerade Inn? Welche Vorteile haben die jeweiligen Trends für die Userexperience? Wir verfolgen alle das gleiche Ziel, unsere Website für den/ die Websitebesucher/-in benutzerfreundlicher zu machen, so dass diese glücklich sind und wieder kommen, oder uns zumindest weiterempfehlen.😍
Wir haben die Webdesign Trends in 3 Kategorien gegliedert: Website Layout, Navigation und Bilder, Illustrationen und andere Struktureffekte.
Website Layout
Layout, Menüführung und Seitenaufbau arbeiten eng miteinander zusammen. Wenn wir von Trends fürs Website Layout sprechen, konzentrieren wir uns wie eine einzelne Seite aufgebaut ist und Inhalte (Texte, Bilder und Hintergründe) zueinander angeordnet sind.
1) Überlappende Elemente (Bild & Text)
Dies sind Designelemente, wie Bilder, Text oder Icons, die teilweise oder vollständig aufeinander liegen. Gezielt eingesetzt mit dem richtigen Kontrast, wie bei dem Herobild unten, macht die Überlappung die Seite dynamischer und interessanter.
Beispiel von überlappendem Bild und Text-Elementen des Herobildes einer Webnode Vorlage.
Nutzerfreundlichkeit?
Eingeschränkt. Sofern überlappende Elemente nicht exzessiv verwendet werden und chaotisch wirken (z.B. durch verschiedene Schrifttypen, die sich überdecken) und die Nachricht auf der Seite weiterhin auf Anhieb klar lesbar ist, eignet sich es sehr gut um Überschriften wie Mottos und deine Vision zu positionieren.
2) Organische und Geometrische Formen
Die Programmiersprache ordnet Elemente weiterhin in Grids und Boxen an. Um dieser rechteckigen Steifheit zu entkommen und den Inhalten einen natürlichen Fluss zu geben, der die Nutzer gezielt zu bestimmten Abschnitten hin schweifen lässt, werden organische Formen und abstrakte Geometrien integriert. Die Nichtsymmetrie macht das Ganze aufregender und lebendiger.
Organische Formen im Webdesign (Webode Vorlage für E-Shops).
Nutzerfreundlichkeit?
Absolut. Harmonische sanfte Formen und Streamline Design sind Balsam für alle Augen. Besonders für Hintergründe sind diese ideal.
3) Asymmetrische Layouts
Bisher folgte man der Lehre der schönen Künste mit der sogenannten Zweidrittelregel. Diese teilt Inhalte in gleichen Drittel. Die sich hierbei kreuzenden Linien bilden Ankerpunkte, entlang denen das Auge wandern kann. In diesen Bereichen des Bildes werden strategisch Objekte angeordnet.
Beispiel der Zweidrittel Regel im Webnode Editor. Das Raster bietet 9 verschiedene Platzierungen.
Die permanenten Eindrücke, die online durch die tägliche Portion an Social-Media-Aktivität und frequentierten Werbespots erzeugt werden, erfrischt Webdesign, das mit asymmetrischen Layouts. Überlappungen gehören ebenfalls dazu.
Asymmetrisches Layout von Blogbeiträgen (Webnode Vorlage)
Nutzerfreundlichkeit?
Bedingt. Als einzelne Strategie eingesetzt und nicht mit knalligen Farben oder verückten Fonts vermischt, kann es Inhalte effektvoll hervorheben.
4) Sichtbares Raster- Rahmenlinien
Raster helfen bei der Platzierung und Ausrichtung der einzelnen Inhalte (Text-Boxen, Fotogalerien) einer Seite. Sie folgen den Boxen, die bei der Programmierung geschaffen werden. Ja, das steht im Kontrast zu den organischen natürlichen Formen. Trends im Homepagedesign müssen nicht immer an einem Strang ziehen.
Rahmen im Stil der 90ger von Gumroad.
Nutzerfreundlichkeit?
Warum nicht. Abschnitte, Texte und Bilder mit fetten Ramen Linien hervorzuheben gibt der Website eine klare strenge Optik mit der Themen einfach zu erfassen sind.
5) Card-Grid Design
Diesen Typ von Design entdeckst du auf den Seiten von Pinterest, Facebook oder Twitter. Er gleicht auf dem Tisch ausgelegte Karten. Diese entsprechen Bildern oder Symbolen in Form von Icons auf der Website, die die Websitebesucher/-innen auf weitere detailreichere Unterseiten schickt. Idealerweise macht die Abbildung auf den kommenden Inhalt neugierig.
Card-Grid Design
Nutzerfreundlichkeit?
Oh ja! Das Browsen durch die Seiten einer Website wird somit intuitiver, angenehmer und viel unterhaltsamer.
6) Geteilter Bildschirm
Websites, die Nachrichten und Artikel veröffentlichen Inhalte in zwei Spalten mit Text und Bild aufgeteilt.
Beispiel eines geteillten Bildschirms.
Variationen dieses Typs werden durch unterschiedliche Verhältnisse der Aufteilung erzielt, wie 50:50 und so weiter. In Online-Shops werden zum Beispiel auf den Seiten der Produkte das Produkt als Bild links und die Information als Text rechts gezeigt.
Nutzerfreundlichkeit?
Macht Sinn. Wenn du mehr als eine wichtige Information auf einer Seite präsentieren willst, ist es notwendig diese in zwei oder mehr Spalten unterzubringen.
Navigation
Von den Elementen und ihren Effekten, die sich auf einer Seite befinden, nun zu dem, was Websitebesucher/-innen durch die Seiten eines Blogs, Produktkategorien eines E-Shops oder einer Firmenwebsite führt, die Seitennavigation:
7) Loop Scrolling
Eine Navigationsleiste gibt weiterhin eine aufschlussreiche Übersicht von dem, was auf den einzelnen Seiten zu erwarten ist. Doch soll dort nur das Allerwichtigste erscheinen. Je mehr auf eine einzelne Seite gepackt und durch Herunterscrollen erreicht werden kann, desto einfacher ist dies für die Nutzer. Es geht hierbei so weit, dass die Website keinen Footer mehr braucht und Scrollen unendlich wird.
Selbst wenn Tabs im Navigationsmenü zu Unterseiten führen, sollten diese mit maximal 3 Klicks erreicht werden. Buttons anzuklicken, bedeutet mehr Anstrengung für die Finger.
2:1 fürs Scrollen! 🖐
Das “Above the fold” und”below the fold” bleibt dennoch erhalten. Platziere, dass was du deine Besucher/-innen als erstes sehen lassen willst “above the fold” und alles minder Wichtige bzw. Details “below the fold”.
Über und unter der Falte
Nutzerfreundlichkeit?
Eindeutig. Die fließenden Übergänge von Information zu Information werden durch das Scrollen erst ermöglicht. Somit kann mehr aufgenommen werden. Die Nutzer müssen, dabei nicht mal einen weiteren Browser Tab öffnen und bleiben bequem auf einer Seite.
8) Startseiten Slider fürs Hero Image
Mit Slide Shows auf der Startseite werden wichtige Infos kompakt präsentiert. Du kannst mit ihnen die Geschichte deines Unternehmens erzählen, Menschen von deiner Mission überzeugen. Dazu machen Slider das Weberlebnis interaktiver.
Nutzerfreundlichkeit?
Schwierig, denn wenige Menschen gehen durch die gesamte Slide Show. Es ist ein wenig so wie mit YouTube Videos die länger als 5 Minuten dauern. Wenige haben die Geduld sich diese vollständig anzusehen. Kurze Videos zwischen 30-60 Sekunden versprechen mehr Erfolg. Das ist bei Slideshows nicht anders. Hier gilt kurz und knapp und dann nur kurz und nur fürs Hero Image!
9) Ghost Button
Neben megagroßen Buttons sind minimalistisch, dezente Schaltflächen gefragt. Aufforderungen zum Kauf oder das Einschreiben in eine Warteliste oder den Newsletter dürfen auch im Hintergrund stehen.
Ghost Button Beispiel (Webnode Vorlage)
Nutzerfreundlichkeit?
Verringert. Buttons, die im Hintergrund verschwinden sind einfach unpraktisch und gegen das Prinzip der Zugänglichkeit. Auch Menschen, die weniger gut sehen, weil sie Farbenblind sind oder die Altersweitsichtigkeit ihren Blick müde macht, brauchen gerade kontrastreiche Buttons.
10) Individueller Cursor
Cursor-Effekte sind die wohl vernachlässigten Elemente des Webdesigns. Bekannt sind farbliche Punkte anstelle des Pfeils oder Hover-Effekte, die Texte oder Bilder vergrößern, wenn die Maus über diese fährt. Neuer sind Lichtkegel wie bei einer Taschenlampe, konfettiartige Effekte oder ganze Texte die erscheinen.
Beispiel einer Websitenavigation die nur vom Cursor geführt wird und jeweilige Kapitel bzw. Unterseiten öffnet.
Nutzerfreundlichkeit?
Also, ja irgendwie schon. Denn diese Effekte erheitern uns und lassen die uns die Website auf spielerische Weise erfahren. Sicher, Vorsicht ist geboten bei Texten oder Blurr-Effekten, die andere Inhalte ausblenden.
11) Hamburger Menü die klarste Navigation
Heutzutage erscheinen die meisten Websites auf den Smartphones mit einem Hamburger Button Menü. Dies spart nicht nur Platz, sondern lenkt die Aufmerksamkeit auf das wesentliche, wie die Message der Startseite durch ein passendes Hero Image.
Der Hamburger ist anpassungsfähig und existiert in Form von verschiedenen Icons: Strawberry, Kebab Menu usw. Wer weiß vielleicht wird dieser irgendwann zum zweiten Logo, passend zum Branding der Firma oder eines Produktes?
Menü Icons oder Versionen des Hambuger Buttons
Nutzerfreundlichkeit?
Jein. Ja, es macht die Homepage übersichtlicher. Nein, denn die einzelnen Seiten werden versteckt. Gerade in der Desktop Ansicht, wo der Platz für Menü-Tabs zur Verfügung steht, macht ein Hamburger Menü wenig Sinn.
12) Experimentelle Navigation
Das Webseiten Design wie wir es von klassischen Websites kennen, zeigt die Inhalte auf einer Seite, die in ihren Dimensionen begrenzt ist. Beim Portfolio von David Lubofsky geschieht das Scrollen in alle Richtungen und die Unterseiten öffnen sich durchs Hovern über die Illustrationen.
Die Website von C2 Montréal bedient sich einem horizontalen und vertikalen Menü, das Unterseiten einblenden lässt.
Menü mit vertikaler Schriftanordnung von C2 Montréal.
Nutzerfreundlichkeit?
Gewöhnungsbedürftig, denn das klassische Weblayout mit dem horizontalen Navigationsmenü ist einfach das, dass allen vertraut ist.
Bilder & Illustrationen und andere Struktureffekte
Nun gehts ins Detail: was die Websitegestaltung neben der Navigation und dem Layout noch auschlaggebend beeinflusst. Bei folgenden Webdesign Inspriationen geht es darum durch (bewegte) Bilder und Effekte die Aufmerksamkeit der User zu bekommen und die eigene Message am Besten rüberkommen lässt.
13) Geschichtenerzählendes Webdesign
Es ist nicht nur das Äußerliche, das eine Website attraktiv macht, sondern auch die Geschichte dahinter. Der Inhalt und Zusammenhang spiel eine maßgebende Rolle. Bilder erzählen viel. Illustrationen, Comics, und Memes übermitteln Emotionen und Gefühle besser. Sie bringen die Dinge auf den Punkt.
Nutzerfreundlichkeit?
Ja. Geschichten sind immer interessant und kommen gut an, wenn diese kurz und bebildert sind. 87% der Verbraucher/-innen vertrauen einer Marke mehr, wenn sie ein Video hierzu sehen. Sofern das Video zeigt, was das Besondere an einem Produkt oder Service ist, wird es Websitebesucher/-innen überzeugen. Videos sind gegenüber Text hierbei ebenso wichtig.
14) Interaktives Web-Design
Jede Website, die das Agieren mit dem Besucher/-innen, durch ein Quiz, ein Formular oder ein Chat-Bot ermöglicht, verkörpert interaktives Web-Design. Es gibt dem Nutzer das Gefühl über das, was er oder sie auf der Website sieht und tut die volle Kontrolle hat. Das Ziel ist die Interaktion immer mehr zu vereinfachen und flüssiger ablaufen zu lassen.
Aus Sicht des Marketings hat Web-Design die alleinige Funktion sogenannte Calls-to-Action zu schaffen. Dies sind die Reaktionen der Besucher/-innen, die die Conversions steigern. Eine Conversion kann ein Klick auf einen bestimmten Button sein, das sich registrieren für einen Newsletter zum Beispiel, oder der Kauf eines Produktes.
Nutzerfreundlichkeit?
Klar doch, ohne Interaktion keine Userexperience, oder? Worauf zu achten ist, die User nicht mit Call-to-Actions zu überfordern. Die Reise durch die Website sollte mit kontinuierlicher Geschwindigkeit geschehen. Also, nicht gleich am Anfang mit Fragen überhäufen sondern erst am Ende, beim Check-out oder Ausfüllen des Formulars.
15) Mircointeraktionen und bewegte Bilder
Unter Mircointgeraktionen versteht man kleine Animationen, die einen Call -to-Action initiieren. Diese können zum Beispiel ein Hover Effekt des Cursors sein, bewegte Bilder in Form eines GIF, dass Ein- und Ausblenden von Inhalten, oder programmierte Bewegungen auf dem Bildschirm sein. Die wohl bekannteste ist ein Countdown Zähler.
Apropos, die weiter unten gezeigte Vorlage ist ebenfalls ein bewegtes Bild. In der Kopfzeile eingefügt kann somit eine kurze Geschichte erzählt oder sich vorgestellt werden.
Microanimation von Threadless E-Commerce, welche den Einkaufswagen zufrieden ausrufen lässt, das sein Bauch das leckere Produkt genießt.
Userfreundlichkeit?
Wie bei Bildern, lässt sich mit kurzen Animationen manchmal mehr erreichen als mit langem Text. Dort eingesetzt, wo etwas vom Nutzer erwartet wird, wie das Ausfüllen eines Formulars oder Buttonklick, erhöhen Microinteractions Benutzerfreundlichkeit.
16) Authentische Fotografie
Menschen in echten, alltäglichen oder besonderen Situationen zeigen, ohne zu übertreiben. Vor nicht langer Zeit haben wir Fotos, die uns ungeschminkt zeigen auf Social Media gezeigt. In die Richtung geht dieser Trend.
Authentische Fotografie (Webnode Website Vorlage)
Userfreundlichkeit?
Absolut. Je realitätsnaher die Aufnahme ist, desto mehr identifizieren sich die Menschen damit, fühlen sich angesprochen. Dies verbindet, und schon wird der/ die Besucher/-in zur/zum Kunden/Kundin.
17) Collagen
Collagenartigen Kompositionen erzeugen eine große Wiedererkennung, da die Schnipsel einprägsam sind, und man zusätzlich mit ihnen was berichten und aussagen kann. Sie hebt sich von unendlich austauschbaren Fotos der Bilddatenbanken ab.
Collage von American Apparel
Nutzerfreundlichkeit?
Möglich. Sofern man es mit dem zusammenstecken von Fotoschnipseln und Zeichnungen nicht übertreibt. Die Collage sollte allerdings nur als Akzent gesetzt werden.
18) Glitch Art
Sie geht noch etwas weiter als nur überlappende Inhalte. Es soll gekonnt nicht perfekt aussehen. Dieses Design lehnt an den aus der Psychologie bekannten Prattfall-Effekt an. Dieser belegt wissenschaftlich, dass Menschen jemanden sympathischer finden, wenn diese Fehler machen. Glitch ist eine Kunst, die nun auch in den Bildern des Homepage Designs verwendet wird. Diese sind verzogen, verpixelt, abgeschnitten oder werden durch Überlappungen zerstört.
Userfreundlichkeit?
Anders ist immer interessant. Doch verliert das Glitch Art Design an Benutzerfreundlichkeit, wenn das eigentliche Bild nicht mehr als ganze zu erkennen ist. Es kommt immer auf die Nachricht an, die der/die Kreator/-in übermitteln will.
19) Neumorphismus
Neumorphismus ist eine Form von Design, welche Buttons und Icons topographisch durch Schatteneffekte hervorhebt oder umgekehrt in den Hintergrund schnitzt. Das kreierte positive oder negative Relief lässt die Schaltfläche plastischer wirken.
Neumorphismus, Beispiel des positiven Reliefs
Webnode integriert diese Nuancen durch dekorative Ramen und Schatteneffekte von Abschnitten oder Buttons.
Dekorative Ramen und Schatteneffekte
Nutzerfreundlichkeit?
Sicher. Da dieser 3D Effekt sich gezielt auf Schaltflächen bezieht und nicht auf weitere Elemente, wie Textboxen, Ramen von Fotos, ist Neumorphismus auserordentlich sinnvoll, um die Website zugänglicher zu machen.
20) Glassmorphismus- transparentes Design
Angelehnt an 3D Effekte wie den Neumorphismus, lassen beim Glassmorphismus halbtransparente Flächen Dahinterliegendes durchscheinen und hebt durch den entstehenden Lichteffekt die Dinge hervor. Der Eindruck, der hier entsteht, ist wie beim gefrostetem Glas.
Beispiel von Glassmorphismus
Nutzerfreundlichkeit?
Bedingt. Je nachdem wie stark die Transparenz ist, wird der sogenannte Blurr Effekt verstärkt und kann Informationen (die eventuell interessant sein könnten) ausblenden.
21) Minimalismus & White Space
Einfachheit ist die Königin des Webdesigns. Weniger ist mehr. Minimalismus dominiert weiterhin in Form von:
- Textminimalismus wo kurze Texte und riesige Überschriften erweitere Textpassagen überflüssig machen.
- White Space, oder die unausgefüllten Bereiche der Website, die Lesern/Leserinnen ein Verschnaufspäuschen von all den Inhalten geben.
- Einem Thema pro Seite bzw. Abschnitt (für Landing Pages).
Userfreundlichkeit?
100% ! Alle Inhalte von Websites, Blogs oder E-Shop sollten bedacht und häppchenweise eingesetzt werden, so dass diese auf einem Blick (ohne viel zu lesen) erfasst werden. Minimalismus macht dies möglich.
22) Strukturierte Typographie
Schriftarten sind Teil des Branding. Kreativ eingesetzt werden sie einprägsamer. Eine Website sollte maximal 3 verschiedene Fonts untergebracht haben. Mehr lenken ab, verwirren oder geben den Seiten ein unharmonisches Bild. Mit ihnen lassen sich wichtigere Inhalte gut hervorheben.
Userfreundlichkeit?
Sofern die Schriftart nicht kleiner als 16pt ist, und für jeden lesbar ist, steht der Userfreundlichkeit nichts im Wege.
23) Duotone-Effekt
Duotone würde sich gut in den Minimalismus einfügen. Es geht hierbei darum kontinuierlich gedämpfte Hinter-und Vordergründe mit Farbe Akzenten gezielt hervorzuheben. Etwa schwarz-weiße Inhalte mit Knall oder Neon-Farben aufzuhellen, wie im Beispiel unten.
Duotone Effekt einer Webnode Vorlage
Userfreundlichkeit?
Es dirigiert die Augen der Websitebesucher/-innen dorthin wo sie klicken oder lesen sollen. Da der Kontrast recht krass ist, sollte dieser Effekt, ähnlich wie bei der Collage, nur gezielt genutzt werden und nicht als stilistisches Mittel.
24) Darkmode
Das dunkle Design zeigt sich in changierende Farben von dunkel zu hell oder warmen zu kalten Tönen. Hierbei sind entweder weiche Töne oder Kontrastfarben vorwiegend.
Darkmode Beispiel (Webnode Vorlage)
Userfreundlichkeit?
Weiße Hintergründe sind auf Dauer für die Augen unangenehm. Darüberhinaus lassen sich helle Texte auf dunklem Hintergrund unter Sonnenlicht viel besser entziffern. Nutzerfreundlichkeit ist garantiert beim Dark Mode.
25) Farbverläufe, Pastel oder auch mehr Farbe
Häufig werden hierbei kontrastreiche satte Farben eingesetzt, die sich im Farbkreis gegenüber liegen (blau -orange) oder einen kalt-warm Kontrast bilden (rot-blau). Aber auch die ruhigeren gedämpften Pastelltöne werden hierfür verwendet, und dass auf jedem Element, egal ob Hintergrund, Buttons oder innerhalb einer Abbildung oder im Text.
Farbverläufe und Card-Grid Box Design eingesetzt bei ChatGPT.
Userfreundlichkeit?
Bedingt. Mit Pastellfarben lassen sich Bildschirmbereiche gut unterteilen und machen es dem Nutzer sich leichter zurecht zu finden, wohingegen knallige Farben irritierend sein können und somit die Nutzerfreundlichkeit erschweren.
Webdesign ist nicht nur Geschmackssache, sondern vor allem funktionsgebunden. Verhilft es Websitebesucher/-innen ihr Anliegen (Frage, Problemlösung, Produktkauf) nicht zufriedenstellend schnell durchzuführen, ist es nutzlos.
Mit Trends ist es wie mit dem Salz in der Suppe, zu viel davon und es wird ungenießbar!
Einige der hier erwähnten neuen Trends gehen gegen klassische Konventionen, um es Websitebesitzer/-innen zu ermöglichen sich von den Massen abzuheben. Unbekanntes macht bekanntlich neugierig. Es ist wichtig die Balance zwischen “crazy” und “klassisch” zu finden und hierbei immer nach der Nutzerfreundlichkeit zu fragen. Ist ein Trend nutzerfreundlich wird er sich im modernen Webdesign etablieren.
Webnodes Website Builder verfügt über eine themenreiche Auswahl an Websitevorlagen. Diese wurden von UX-Designern professionell erstellt.
Probier doch einfach die ein oder andere Vorlage gratis aus!