9 Webdesign-Trends für das Jahr 2020

Die Entwicklung des Internets hin zum übergroßen Informationsapparat lässt sich an den Design-Innovationen ablesen, die das Erscheinungsbild des World Wide Web über Jahre verändert haben. Vor allem die mobile Revolution zwang Webdesigner dazu, radikal umzudenken. Sie sollen heute ein Internet präsentieren, das auf die kleinsten Bildschirme passt, ohne dabei wertvolle Information vorzuenthalten. Doch auch auf spezifischerer Webdesign-Ebene lassen sich immer wieder neue Trends beobachten, die heute schon das Internet von morgen bestimmen. Wir stellen Ihnen 9 dieser Trends vor, damit Sie für das moderne Webdesign im Jahr 2020 bestens gerüstet sind.

Was bedeutet Webdesign im Jahr 2020?

Zunächst einmal lassen sich Entwicklungen beobachten, die auf der mobilen Anpassung der letzten Jahre fußen. Webseiten sollen so noch effizienter und nutzerfreundlicher werden, um auf dem umkämpften Onlinemarkt mithalten zu können – ob auf dem PC, dem Tablet oder dem Smartphone. Die sperrigen und leicht überladenen Designs der 2000er sind längst Geschichte; das menschliche Auge hat sich daran sattgesehen. Die neue Maxime ist die Konzentration auf das Wesentliche.

Das neue Bedürfnis heißt Nutzerfreundlichkeit, also ‚Usability‘ der Webangebote. Maßgeblich für diesen Trend ist das für den mobilen Markt so bedeutsame responsive Webdesign, das die technische Flexibilität unter Berücksichtigung des Nutzer-Endgeräts hervorhebt. Modernes Webdesign bedeutet somit, dass eine Internetseite effizient auf das Gerät des Nutzers ‚reagiert‘ und sich entsprechend präsentiert. Responsives Webdesign ist dabei bewusst vorausschauend angelegt, damit Webseiten auf neue oder bisher ungewohnte Systeme souverän reagieren können. Darüber hinaus entwickeln Webdesigner nicht mehr nur für Browser – viele der bekanntesten Webseitenanbieter ermöglichen eine leichtere mobile Nutzung über eigene Apps.

Einige Buzzwords im Webdesign werden uns auch 2020 nicht loslassen. Da wäre zum einen das Internet of Things, das eine zunehmende Digitalisierung des Alltags erkennt und Nutzern noch mehr Interaktionsmöglichkeiten bieten will. Zum anderen bringen es wesentliche Fortschritte in der KI-Forschung mit sich, dass automatisierte Webservices immer besser werden; Webdesigner dürften versuchen, auch diesen Bereich voll auszuschöpfen. Nicht zuletzt bedeutet auch der zunehmende Fokus auf Snackable Content, dass sich Webangebote möglichst eingängig präsentieren und die Nutzerfreundlichkeit an oberste Stelle setzen. Gleichzeitig zeigen diese digitalen ‚Häppchen‘ durchaus einen Trend zurück zur grellen und aufmerksamkeitsbuhlenden Vision der 2000er Jahre. Wenn diese zwei Trends – Fokus auf Usability und Snackable Content – tatsächlich zusammenwirken und andere, innovative und mutige Ideen sich durchsetzen, dürfte das Jahr 2020 ein spannendes Jahr für Webdesigner werden.

Trends und Gegentrends im Webdesign

Trends im Webdesign existieren fast nie in einem Vakuum, sondern haben neben benachbarten Trends auch Gegenspieler, die ein bestimmtes Designelement in eine andere oder sogar entgegengesetzte Richtung führen. Manchmal entwickeln sich Gegentrends aus einer Reaktion auf bestimmte Trends, wenn diese immer deutlicher zum Vorschein kommen. Oft setzen Webdesigner auf einen Gegentrend, um schon heute in der Internetlandschaft von morgen herauszustechen. Hier einige Beispiele für Trends und korrespondierende Gegentrends, die uns auch 2020 in spannender Wechselwirkung begegnen werden.

MyWebsite - Setzen Sie neue Maßstäbe

Erstellen Sie stilvolle Websites mit vorgefertigten Bereichen, modernen Schriften und schönen Farben - von Profi-Designern ausgewählt.

Kein Code
Smarte Bereiche
Moderne Schrift

Trend

Gegentrend

Stock-Images, also professionelle Bilder von Stock-Agenturen, die sich in vielerlei verschiedene Webseiten integrieren lassen; eine sichere Möglichkeit, seine Website auszuschmücken

Individuelle bzw. authentischeBilder, die Nähe ausstrahlen und Menschen bzw. Unternehmen so zeigen, wie sie wirklich sind, um Besucher so persönlich wie möglich anzusprechen

Symmetrische Formen, Kastenformen, ‚Flat Grid‘, z. B. strikt horizontal-vertikal designte Webseiten, die sehr einfach zu navigieren und effizient zu benutzen sind; diese Seiten richten sich nach der bewährten und vertrauten ‚rechteckigen‘ Natur von HTML und CSS.

Asymmetrische Formen, experimentelle Designs, ‚Broken Grid‘, eben innovativ gestaltete Weboberflächen, die mit gängigen Konventionen brechen und so durch Individualismus und Verspieltheit hervorstechen wollen

One-Page-Designs, damit alle wichtigen Informationen gebündelt auf einer Seite präsentiert werden und dem Nutzer so möglichst viele Klicks erspart bleiben; man lässt den (immer öfter mobilen) Nutzer lieber scrollen als klicken. Hierbei setzen sich vor allem für digital agierende Unternehmen bestimmte Standard-Layouts durch.

Webnostalgische Designtrends, die zurück zu Prinzipien der Internetoberflächen der 2000er Jahre wollen („Web-Brutalismus“, Minimalismus, textbasiert) oder technisch innovative Menüleisten und Buttons, die zur Navigation der Website weiterhin notwendig, aber auch bei mobiler Nutzung nicht sperrig sind (Hamburger-Menüs, Mikro-Interaktionen).

Bunte Farbgestaltung, kräftige Komplementärfarben und Farbverläufe, die einer Webseite ein bestimmtes Flair verleihen; hinzu kommt eine bewusst eingesetzte Farbsymbolik bzw. Farbassoziation (Blau für digitale Produkte, Grün für wohltätige Unternehmen, Rosa für Kosmetik usw.), um die Seite für den Nutzer unterbewusst ‚vorzufärben‘.

Farbminimalismus und viel weißer Raum, um möglichst wenig von den kommunizierten Informationen abzulenken. Strikt zweifarbige Websites („Duotone“) setzen auf Nutzerfreundlichkeit und verzichten dabei auf farblich komplexe Ausgestaltung. Oftmals wird im Gegensatz dazu vermehrt Aufmerksamkeit auf Marken und Symbole gelenkt.

9 Trends, die Webdesign im Jahr 2020 mitbestimmen werden

Insgesamt entwickelt sich das Webdesign weiterhin in dieselbe Richtung, die seit Jahren vorgegeben wird: zunehmendes Augenmerk auf mobile Geräte (responsives Webdesign), leicht konsumierbaren Content, zweckorientierte Interfaces und reaktive bzw. interaktive Nutzeroberflächen. Gleichzeitig haben Entwicklungen im Bereich künstliche Intelligenz immer mehr Einfluss auf Webdesigner, je zugänglicher die neuen Technologien werden. Ganz klar: 2020 setzt diverse Trends im Webdesign der Vorjahre fort und wird die Internetlandschaft nicht grundlegend verändern. Allerdings deuten einige Trends auf eine weitere Verbesserung des Nutzererlebnisses auf Plattformen hin, die schon heute das Internet von morgen mitgestalten möchten.

Trend 1: Geschwindigkeit/Performance wird noch wichtiger

Eigentlich weniger ein Trend als vielmehr ein Grundprinzipgut designter Webseiten: Geschwindigkeit wird immer wichtiger. Das ist zum Teil der mobilen Revolution zu verdanken; schließlich wollen Webseitenbetreiber, dass ihre Seiten auch mobil leicht und volumensparend erreichbar sind. Je schneller Internetseiten laden, umso besser ist das Nutzererlebnis – das war schon vor zehn Jahren der Fall. Dennoch ist ein Trend zu beobachten, dass Webdesigner immer häufiger auf zeit- und speicherintensive Elemente verzichten, um eine schnellere Nutzung der Website zu ermöglichen.

Viele andere Trends im Webdesign setzen hier an. So bedeutet der zunehmende Minimalismus bei der Ausgestaltung von Websites, dass weitgehend auf speicherintensive Medien verzichtet wird und lieber Formate gewählt werden, die den Speicheraufwand gering halten. „Long scrolling“-Webseiten, die alle notwendigen Informationen auf einer einzigen scrollbaren Seite platzieren, punkten mit der Tatsache, dass der Nutzer nur diese eine laden muss – und nicht anschließend mehrere Unterseiten. Auch der immer beliebter werdende ‚White Space‘ bedeutet die Abwesenheit von Elementen, die die Ladegeschwindigkeit einer Webseite drosseln könnten.

Das Internet ist in seiner relativ kurzen Entwicklungszeit immer schneller geworden. Es gibt aber Stimmen, die sagen, es sei noch längst nicht schnell genug. Vor allem mobile Datennetze seien in vielen Regionen noch nicht leistungsfähig genug. Webdesigner können aber schon heute solchen Mängeln entgegenwirken, indem sie Ihre Webseiten so wenig aufwendig wie möglich gestalten.

Weitere aktuelle Gestaltungstrends des modernen Webdesigns wie interaktive Animationen, Parallax-Effekte oder ein dynamischer Hintergrund sorgen für Aufsehen und verbessern (effektiv eingesetzt) die Informationsaufnahme. Oft wirkt sich eine aufwendige Website-Gestaltung jedoch negativ auf die Performance aus. Webdesigner müssen daher genau abwägen, welche multimedialen und interaktiven Inhalte für den Nutzer einen Mehrwert bieten und welche die Website nur unnötig ausbremsen. Generell gilt: Weniger ist mehr – womit nicht zwangsläufig die Rückkehr zum Flat Design gemeint ist.

Beachten Sie: Die Performance einer Website wirkt sich direkt auf die User-Experience aus. Dabei ist zwischen tatsächlicher und gefühlter Ladezeit zu unterscheiden. Problematisch sind Verzögerungen nur dann, wenn sie vom Nutzer als solche wahrgenommen werden. Webdesigner setzen daher u. a. auf folgende Maßnahmen, um höhere Ladezeiten aufzufangen:

Fortschrittsanzeige

Wenn der Besucher schon warten muss, sollte er wenigstens wissen, wie lange. Der Fortschrittsbalken verkürzt die Ladezeit zwar nicht, kann diese jedoch zumindest kurzweiliger gestalten, wenn er interessant designt ist. Der Nutzer soll zumindest nicht dazu verleitet sein, die Seite wieder zu verlassen, wenn er zum Warten gezwungen wird. Schließlich ist die Toleranzspanne des modernen Internetnutzers immer geringer geworden, je schneller die Leitungen wurden.

Schlüsselelemente zuerst laden

Webseiten sollten so programmiert werden, dass die „Above the fold“-Inhalte zuerst abgerufen und im Browser dargestellt werden. Es handelt sich dabei um die Teile der Seite, die für den Betrachter ohne Scrolling sichtbar sind. Sind diese Inhalte verfügbar, ist es für den Nutzer zunächst unerheblich, ob weitere Inhalte („below the fold“) erst später nachgeladen werden.

Progressive JPEG

Bilder, die als Progressive JPEG eingebunden werden, bauen sich beim Laden nicht von oben nach unten in der endgültigen Auflösung auf. Stattdessen kommt das Zeilensprungverfahren zum Einsatz: Dem Betrachter wird zunächst ein Vorschaubild in geringer Qualität präsentiert, das sich nach und nach verfeinert, bis die Daten für die gewünschte Bildqualität komplett geladen wurden.

Tipp

Weitere Tricks, mit denen sich die Website-Performance verbessern lässt, zeigt Ihnen unser Artikel zur Website-Optimierung.

Zusammengefasst gilt für Videos, Fotos und Gimmicks aller Art dasselbe wie für den Inhalt: Sie sollten hochwertig, einzigartig und für den Nutzer relevant sein. Außerdem ist es sinnvoll, dass solche Inhalte erst dann geladen werden, wenn der Besucher sie aufruft. Gerade Nutzer mobiler Endgeräte oder schwächerer Internetverbindungen profitieren von gut strukturierten Websites, die frei von unnötigem Datenballast sind.

WebAssembly

Webanwendungen sind ein essenzieller Bestandteil des Surferlebnisses geworden – und zwar zurecht. Per JavaScript können Besucher mit der Website interagieren, was wiederum zu einer besseren Erfahrung führt. Doch viele Webanwendungen ziehen die Performance runter. Mit WebAssembly (Wasm) ist vor nicht allzu langer Zeit eine Sprache entstanden, die dank Vorkompilierung sehr schnell im Browser ausgeführt werden kann. Zwar ist der Standard noch nicht so weit verbreitet, aber alle modernen Browser können bereits mit der Technik umgehen.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Trend 2: CSS-Tricks

Eine Selbstverständlichkeit bei der Erstellung von Websites: CSS. Fast jede Website wird mit der Stylesheet-Sprache in ein ansprechendes Design gebracht. Glücklicherweise wird CSS regelmäßig weiterentwickelt, was Webdesignern neue, interessante Möglichkeiten bei der Gestaltung von beeindruckenden Websites liefert. Die neuesten Entwicklungen gehen vor allem auf die Flexibilität einer Website ein. Dies ist besonders wichtig im Hinblick auf mobile Websites. Bilder und andere Elemente sollen auf jedem Display eine vernünftige Größe und Form haben.

CSS Grid & CSS Flexbox

Seit CSS3 hat die Stylesheet-Sprache die beiden Techniken Grid und Flexbox. Beide Methoden erlauben es relativ einfach, Designs zu erstellen, die sich an die Bildschirmgröße anpassen. Dabei überlässt man einem intelligenten System die Verteilung und Skalierung von Elementen, ohne dabei die Kontrolle komplett abzugeben. Webdesigner haben beispielsweise die Möglichkeit, Minimal- und Maximalgrößen festzulegen.

SVG

Das Bildformat SVG ist nicht wirklich neu, hat aber Vorteile, die immer wichtiger werden: Es sorgt für eine geringe Dateigröße, ist flexibel skalierbar und – das macht das Format zu einem Webdesign-Trend 2020 – mit CSS formatierbar. Da es sich bei SVG prinzipiell um ein XML-Dateiformat handelt, kann der Quelltext (und damit eben auch die Grafik an sich) direkt mit der Stylesheet-Sprache verändert werden. Durch die Kombination können Webdesigner Grafiken in den Webauftritt einbauen, die sich flexibel an das verwendete Display anpassen oder sogar direkt durch Nutzer verändert werden können.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Trend 3: Micro-Interactions

Bei Micro-Interactions handelt es sich um einen Trend im UX-Design, bei dem ausgewählte Nutzer-Interaktionen von kleinen Animationseffekten begleitet werden. Das kann beispielsweise ein Like-Button sein, der den Klick des Nutzers mit einem Bewegungseffekt oder dem Vibrieren des Smartphones belohnt. Für UX-Experten wie Dan Saffer sind es ebendiese Details, die die Nutzererfahrung ausmachen.

Tipp

Beispiele für gelungene Animationen, mit denen sich Micro-Interactions realisieren lassen, finden Webseitenbetreiber auf Awwwards.com oder Dribbble.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Trend 4: Long/Infinite Scrolling

Die Devise „Mobile First“ gilt nicht nur im Hinblick auf Viewports und die verlustfreie Darstellung von Webinhalten über verschiedene Endgeräte hinweg. Der Trend zum Mobilgerät wird künftig einen immer größeren Einfluss auf Webinhalte haben. Eine der wichtigsten Entwicklungen in diesem Zusammenhang: der Übergang vom Klick zum Scrolling. Prinzipiell ist die Scrolling-Website ein alter Bekannter. Doch Design-Konzepte wie Infinite Scrolling oder der Parallax-Effekt erfreuen sich nach wie vor großer Beliebtheit und bleiben somit auch 2020 im Trend.

Infinite Scrolling

Infinite Scrolling ermöglicht es dem Website-Besucher, neue Inhalte zu erschließen, indem er scrollt, statt zu klicken. Ist das Ende eines Informationsabschnitts erreicht, schließt sich der nächste umgehend an. Soziale Netzwerke wie Facebook, Instagram, Reddit und Quora greifen schon lange auf diese Methode zurück, um Usern Inhalt in einem kontinuierlichen News-Feed zu präsentieren. Auch in Blogs begegnet einem das „unendliche Scrollen“ schon seit längerer Zeit, und es wird auch in Zukunft eine Rolle spielen.

Infinite Scrolling bietet sich für Websites mit umfangreichem Informationsangebot an. Während sich ein Blog mit 100 bis 200 Einträgen noch problemlos paginieren lässt, nimmt der Nutzen einer Seitenaufteilung bei großen Webprojekten mit steigendem Informationsumfang ab. Dass ein Nutzer gezielt Seite 812 von insgesamt 5.782 Unterseiten aufruft, ist eher unwahrscheinlich. Infinite Scrolling hingegen wird in der Regel mit ausgefeilten Algorithmen eingesetzt, die das Informationsangebot vorfiltern und Nutzern die relevantesten Einträge zuerst präsentieren.

Webseitenbetreiber, die 2020 auf den Infinite-Scrolling-Trend aufspringen wollen, sollten allerdings auf eine suchmaschinenfreundliche Umsetzung achten. Hat sich Google mit dem Crawling von Scroller-Websites anfangs schwergetan, lässt sich Infinite Scrolling heute dank detaillierter Gestaltungsvorgaben des Suchmaschinenmarktführers gefahrlos umsetzen. Beachten Sie in jedem Fall die folgenden Aspekte:

  • Individuelle URLs für jede Unterseite
  • Keine überlappenden Inhalte
  • Besucher muss gesuchte Elemente leicht finden können
  • Angemessene Ladezeit
Tipp

Als Beispiel für eine suchmaschinenfreundliche Umsetzung von Infinite Scrolling verweist Google auf die Demo-Website des Webmaster-Trends-Analysten John Mueller.

Parallax-Effekt

Auch Parallax Scrolling gehört nicht zu den neuesten Webdesign-Trends, wird aber weiterhin von Bedeutung sein. Der Effekt der Bewegungsparallaxe wird schon seit einigen Jahren als Baustein moderner Websites verwendet. Dadurch, dass sich die einzelnen Ebenen der Website unterschiedlich schnell bewegen, entsteht ein Effekt der Tiefenwahrnehmung. Idealerweise bietet die Website neben dem Bewegungseffekt auch Elemente, die den Besucher zu einer Handlung auffordern. Das Parallax Scrolling lässt sich dadurch hervorragend mit dem Interactive Storytelling kombinieren. Sehr anschaulich verdeutlicht das beispielsweise die Seite „Every Last Drop“.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Trend 5: Personalisierte User-Experience

Die zielgruppengerechte Darstellung von Webinhalten gehört zu den Grundprinzipien des modernen Webdesigns. Vor allem im E-Commerce sollten sich die Auswahl der Inhalte und deren Präsentation an den Ansprüchen potenzieller Kunden orientieren. Standen dabei bisher abstrakte Personengruppen im Vordergrund, rückt 2020 die User-Experience des Einzelnen weiter in den Fokus.

Während Funktionen wie „Das könnte Ihnen auch gefallen“ schon heute in keinem Onlineshop fehlen dürfen, gehen Anbieter wie der Otto-Ableger ABOUT YOU, der Musik-Streaming-Dienst Spotify oder das Video-on-Demand-Portal Netflix einen Schritt weiter und schneiden das Informationsangebot, Produkte und Darstellungsformen direkt auf das Individuum zu. So sehen zwei Nutzer fast nie dieselbe Auswahl an individualisierten Produkten, und das meist bereits auf der Startseite des jeweiligen Portals.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Ein Webdesign-Trend 2020 wird die personalisierte Website sein, auf der Besucher Inhalte so angezeigt bekommen, wie es ihren Nutzungsgewohnheiten entspricht. Die Datengrundlage für eine personalisierte UI stellen Webanalyse-Tools wie Google-Analytics oder Matomo zur Verfügung, die Content-Anbietern ein umfassendes Bild davon zeichnen, wie Internetnutzer mit Webinhalten interagieren.

Trend 6: WebXR

Virtuelle Realitäten (VR) kennen die meisten Nutzer bisher vor allem aus dem Entertainment-Bereich: Besonders die Computerspielbranche investiert viel in die Entwicklung von Virtual-Reality-Brillen und entsprechende Games. Im Smartphone-Bereich kommen auf der anderen Seite immer mehr Apps auf den Markt, die Augmented Reality (AR) ermöglichen – die Verschmelzung der tatsächlichen Umgebung mit den digitalen Informationen auf dem Gerät. Nun macht auch das World Wide Web diesen Schritt. Mit WebXR hat das W3C eine Schnittstelle geschaffen, die die bestehende, allerdings fehlerbehaftete WebVR-Technik ersetzt und es Browsern ermöglicht, VR- und AR-Inhalte anzuzeigen.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Hat man eine VR-Brille, kann eine Website, die entsprechend programmiert ist, in drei Dimensionen besucht werden. Wie in einem Raum bewegt man sich zwischen den Menüpunkten und Inhalten hin und her. Das könnte zukünftig vor allem für den E-Commerce-Sektor interessant sein. Onlineshops können so noch ein bisschen näher an das Erlebnis in einem Ladenlokal heranrücken. Wer eine entsprechende Brille hat, kann WebXR schon jetzt auf einer Testseite von Mozilla ausprobieren.

Trend 7: Chatbots

Programme für Kommunikationsaufgaben sind nicht neu. Chatbots entspringen dem Forschungsgebiet der Künstlichen Intelligenz (KI) und kommen schon heute auf Unternehmenswebsites oder in Onlineshops zum Einsatz. In der Regel handelt es sich um kleine Dialogfenster, die Nutzerfragen entgegennehmen und automatisch generierte Antworten ausspielen. Diese lassen sich dank Machine-Learning-Algorithmen personalisieren. Für den Nutzer entsteht der Eindruck, es handle sich um einen menschlichen Mitarbeiter, der Rede und Antwort steht. Zum Einsatz kommen Chatbots als virtuelle Shopping-Assistenten oder als Alternative zum klassischen FAQ-Bereich.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Chatbots sind dabei selten aufdringlich, sondern werden meist über kleine interaktive Elemente geschaltet. Der Nutzer bekommt so den Eindruck, er werde in Echtzeit von einem Mitarbeiter des Webdienstes angeschrieben. Meist hat er die Möglichkeit, auf die Anfrage zu antworten, ohne die aufgerufene Website zu verlassen. Das Misstrauen gegenüber den KI-gesteuerten Gesprächspartnern dürfte seit den Erfolgen von Siri, Alexa, Cortana und Co. etwas abgeklungen sein. In den meisten Fällen sind Chatbots aber (noch) nicht mehr als Suchleisten, die etwas dynamischer auf Suchanfragen reagieren. Man darf gespannt sein, inwieweit sich Chatbots im Jahr 2020 weiterentwickeln werden.

Trend 8: Aufgeräumtes Interface

Dass ein gutes und intelligentes Layoutschnell und häufig nachgeahmt wird, lässt sich auch bei den Trends im Webdesign immer wieder beobachten. Die Benutzeroberflächen vieler Websites und Web-Apps orientieren sich bei der Gestaltung und Anordnung von Inhalten mehr und mehr an bewährten Praktiken. Hierbei beeinflusst das Layout stets die Benutzerfreundlichkeit eines Webauftritts.

Grundsätzlich macht man mit einem aufgeräumten User-Interface (UI) nie etwas falsch. Ebenfalls kann man guten Gewissens an der längst etablierten Portal-Aufmachung bei umfangreichen Websites bzw. am Blog-Design bei kleineren Internetauftritten festhalten. Jünger sind hingegen zwei Layout-Trends im Webdesign, die sich auch 2020 auf vielen grafischen Benutzeroberflächen finden lassen.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Hamburger-Button

Dieses Phänomen hat sich derart schnell etabliert, dass es für viele Nutzer bereits eine Selbstverständlichkeit in der Menüaufmachung darstellt: der kleine Menü-Button, der auch als „Hamburger-Menü-Icon“ (engl. „hamburger button“) bezeichnet wird. Anfänglich wurde er vor allem für Drop-down-Menüs von mobilen Webseiten und Apps genutzt. Inzwischen markiert das Zeichen aber auch auf vielen Desktop-Versionen den Menü-Button. Das Symbol erinnert an einen geschichteten Burger und wird häufig durch das mathematische Zeichen „≡“ dargestellt, das eigentlich „identisch“ bedeutet.

Karten-Layouts

Der zweite neuere Webdesign-Trend betrifft die Aufmachung der Inhalte. Card-Layouts (auch als „card-based design“ bezeichnet) finden mehr und mehr Verwendung. Hierbei werden text- und/oder bildbasierte Inhalte oder „Call to Action“-Buttons in mehreren Kästen präsentiert, die über die Benutzeroberfläche verteilt sind. Das bietet mehrere Vorteile. Neben den vielen Möglichkeiten, eine Website dadurch übersichtlich und optisch ansprechend zu gestalten, hat das Card-Layout im Webdesign auch aus pragmatischer Sicht seine Vorzüge: Da die einzelnen Kästen bzw. Karten als Container für Webinhalte fungieren, lassen sie sich unkompliziert innerhalb des Website-Gestaltungsrasters verschieben. Insbesondere bei einem responsiven Weblayout gelingt so die Umverteilung der Seiteninhalte ausgesprochen leicht. Populär wurde das Card-Layout vor allem durch Bilder-Webdienste wie Pinterest oder Webdesign-Plattformen wie Dribbble.

Trend 9: Dark Mode

Ein Trend, der sich nicht nur durchs Web, sondern durch den kompletten Software-Sektor zieht: der Dark Mode. Immer mehr Nutzer legen Wert darauf, eine Alternative zur grellen Anzeige zu haben. Besonders bei schlechtem Umgebungslicht sind helle Interfaces störend. Während man viele Programme und Apps inzwischen ohne Probleme umschalten kann, springen einem die meisten Websites noch mit viel Weiß entgegen. Doch das ist gar nicht nötig.

Mit dem weiteren Klick laden Sie das Video von YouTube. In diesem Fall kann YouTube Cookies setzen, auf welche wir keinen Einfluss haben.

Mit CSS und JavaScript kann man Nutzern die Option in die Hand geben: Abhängig von der Präferenz kann jeder Besucher selbst entscheiden, ob die Webpages hell oder dunkel erscheinen sollen. Eine etablierte Methode hierfür ist ein gut sichtbarer Schalter direkt auf der Startseite. Doch es geht sogar noch eleganter: Mit der CSS-Anweisung „prefers-color-scheme“ reagiert die Website auf Einstellungen im Browser. Hat der Nutzer in Firefox, Safari, Chrome oder Edge den Dark Mode aktiviert, wird auch die Website automatisch in dunklen Farbtönen wiedergegeben. Dafür muss verständlicherweise ein zweites Farbschema im Quelltext hinterlegt sein – zusätzlicher Aufwand, der sich durch die gesteigerte Nutzerzufriedenheit auf jeden Fall auszahlt.

Mit Webdesign Trends zum Erfolg

Die Webdesign-Trends 2020 stehen unter dem Schlagwort Usability. Zudem sollten Websites in Zukunft noch interaktiver gestaltet sein, gleichzeitig aber einen schnellen Zugriff ermöglichen. Dabei werden Webinhalte nicht separat auf verschiedene Endgeräte zugeschnitten, sondern im Rahmen des responsiven Designs für eine geräteübergreifende Darstellung optimiert.

Moderne Webtechniken geben Webdesignern neue Möglichkeiten, Websites zu schaffen, die zum Verweilen einladen – ohne dabei überladen zu sein. Dabei darf man niemals vergessen: Trends wandeln sich, neue Techniken kommen auf, doch der Nutzer steht auch in Zukunft immer im Vordergrund. Die Darstellung sollte deshalb immer zur Zielgruppe und den angebotenen Inhalten passen.

Wer gerade eine eigene Website aufbaut oder seine vorhandene einem Update unterziehen möchte, der sollte sich von einigen der Trends fürs Webdesign 2020 inspirieren lassen. So macht man seine Website heute schon fit für die Anforderungen und Erwartungen von morgen.

Eine Homepage erstellen mit IONOS

MyWebsite ist die schlüsselfertige Lösung für Ihre professionelle Präsenz im Internet inklusive persönlichem Berater!

SSL-Zertifikat
Domain
E-Mail-Postfach

Auf dem Laufenden bleiben?

Jetzt für unseren Newsletter anmelden und gratis Online-Marketing Whitepaper für lokale Anbieter sichern!