veröffentlicht am 31. Dezember 2018 / ca. 7 Minuten Lesezeit

10 WEBDESIGN TRENDS 2019

Feuerwerk Webdesign Trends E-commerce Corporatedesign

Auch für das Thema Webdesign hält das neue Jahr einige Änderung bereit.

In diesem Artikel liefern wir Ihnen eine „Checkliste“ mit unseren 10 Faktoren und Trends, die sich im Jahr 2019 (weiter) durchsetzen werden.

Finden Sie heraus wie gut Sie vorbereitet sind!

1) Mobile First

Es ist nichts neues, dass die Zahl der Seitenaufrufe und Suchaufträge über mobile Endgeräte wie Tablets oder Smartphones die der normalen Desktop-Geräte weit überholt hat.Das bloße ergänzen einer Mobilversion der Website reicht im Jahr 2019 nicht mehr aus, das neue Motto lautet Mobile First.

Bei der Entwicklung einer neuen Website, steht die Nutzererfahrung von Besuchern mit mobilen Geräten nun klar im Vordergrund. Die Navigation ist auf Touch ausgerichtet, die Bedienung der Seite muss daumenfreundlich sein, es geht hier nun um mehr als nur „responsive Design“.

Bewegen Sie Ihre Maus über das Bild des Desktop um eine Beispiel Mobilversion zu sehen.

2) Chat-Bots & Live-Chat

Grade hinsichtlich des Kunden-Service bieten Chat-Bots und Live-Chat-Funktionen tolle Möglichkeiten. Bots ermöglichen es Ihren Kunden, auch außerhalb Ihrer Geschäfts- oder Supportzeiten Antworten auf bestimmte Fragen zu bekommen und Sie können sich 24 Stunden am Tag sicher sein, dass Ihre Kunden einen Ansprechpartner haben.

Der Live-Chat bietet vor allem eine weitere, schnelle Möglichkeit, um mit Ihren Kunden in Kontakt zu treten. Hat ein Besucher eine Frage, kann er sofort eine persönliche Antwort bekommen und Sie sparen viel Zeit bei der Bearbeitung von (Support-) Anfragen.

Bewegen Sie Ihre Maus über den Chat-Button um ein Beispiel Live-Chat-Fenster zu sehen.

3) Slider

Slider werden besonders auf der Startseite gerne eingesetzt, mit schönen Fotos und großem Text bieten Sie eine tolle Möglichkeit, dem Besucher schon beim ersten Ansehen der Seite die wichtigsten Informationen über Ihr Unternehmen mitzuteilen. Das Problem ist, dass sich kaum jemand die Zeit nimmt, sich durch Ihre Bilderreihe zu klicken, meist sehen sie also nur die erste Folie des Sliders. 

In anderen Bereichen bieten diese trotzdem noch eine tolle Möglichkeit um Informationen darzustellen, weiter unten auf Ihrer Website können Sie mit Hilfe von Slidern Ihre Referenzen präsentieren oder Ihr Team vorstellen. So können Sie sich sicher sein, dass ein Besucher der sich z.B. über Ihre Referenzen Informieren möchte, den Slider auch nutzt.

Slide 1 Heading
Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Click Here
Slide 2 Heading
Click edit button to change this text. Lorem ipsum dolor sit amet consectetur adipiscing elit dolor
Slide 3 Heading
Voriger
Nächster

So könnte ein Slider effektiv eingesetzt werden: Bilderreihe mit Referenzprojekten

4) Broken Grid / Asymmetrie

Das Grid System wird seit Jahrzehnten von Designern aus allen Bereichen eingesetzt um klar gegliederte und strukturierte Layouts zu schaffen. So wird dem Kunden eine klare Struktur gegeben und dem Designer das Einbinden neuer Inhalte vereinfacht. Indem die Symmetrie auf der Seite erhalten wird, erleichtert man darüber hinaus das Anpassen der Website an kleinere Bildschirme, zum Beispiel bei der Darstellung auf Mobilgeräten.

Das Broken-Grid-Design bricht aus diesen Regeln heraus, um sich mit unkonventionellen Layouts ein Alleinstellungsmerkmal zu verschaffen und sich aus der Masse der klassischen Webdesigns hervorzuheben.

Das Geheimnis liegt dabei in der „geplanten Asymmetrie“ und dem gezielten Einsatz von irregulär platzierten Elementen , Farben, sowie ungewöhnlichen Mustern und Typografien. 

Richtig eingesetzt kann so die Aufmerksamkeit des Besuchers gelenkt und sichergestellt werden, dass bei den richtigen Elementen zweimal hingeschaut wird.

5) Long Pager / Scrolling Seiten

Das Prinzip einer Scrolling-Seite ist recht einfach erklärt: man gestaltet eine Website mit einer einzigen, langen Seite auf der alle Inhalte dargestellt sind, statt sie mit mehreren, inhaltlich kürzeren Seiten zu versehen.

Die Folge ist, dass sich der User nicht mehr umständlich durch das Website-Menü klicken muss, sondern ohne große Anstrengung scrollend durch die gesamte navigieren Website kann. Damit folgt die Scrolling-Seite klar dem Mobile-First-Ansatz (siehe oben), da sie sich hervorragend für die Darstellung auf mobilen Geräten eignet und auf die Bedienung mit dem Daumen ausgerichtet ist.

Die Entwicklung hin zum Minimalismus ist im Webdesign ebenfalls schon lange zu beobachten und ein „One-Pager“ folgt diesem Trend, bietet dem Designer aber trotzdem einen größeren Gestaltungsspielraum beim Storytelling um die Aufmerksamkeit des Users beim Scrollen durch die Seite geschickt von einem Element zum nächsten zu leiten.

Der einzige mögliche Nachteil ist, dass klassische SEO-Taktiken deutlich schwieriger umzusetzen sind.

Bei einer einzelnen Seite die mit allem Inhalt gefüllt ist, statt der klassischen Aufteilung in mehrere Seiten, ist es einfach schwieriger für einzelne Keywords zu ranken. Auf der anderen Seite werden diese Seiten von Suchmaschinen in der Regel bevorzugt, da sie mit ihrem einfacheren Aufbau und der geringeren Anzahl an Daten oft schneller und problemloser laden.

6) Custom Illustrationen

In Zeiten, in denen Stock-Fotodatenbanken und Einheits-Templates das Internet beherrschen, kommen eigene, individuelle Illustrationen genau richtig. Sie eignen sich perfekt, um die eigene Website von den anderen ab- und die eigene Individualität hervorzuheben. 

Eigene Illustrationen haben einen sehr hohen Wiedererkennungswert, stärken Ihre Markenidentität und sorgen dafür, dass Ihre Website dem Besucher länger im Kopf bleibt als die der Konkurrenz. Sie bieten einen immens großen Spielraum für den Gestalter und sind daher auch von den Einsatzmöglichkeiten her sehr vielseitig. Auf einer aufgeräumten, minimalistischen Seite bieten Sie tolle Storytelling-Möglichkeiten und können oft viele Worte ersetzen, haben Sie hingegen viele Informationen mitzuteilen und daher eher viel Text, können Sie Illustrationen einsetzen um lange Textpassagen aufzulockern und wichtige Punkte grafisch zu untermauern.

Einen Nachteil gibt es: schöne und professionelle Illustrationen lassen sich meist nicht so leicht selber gestalten, diese Aufgabe muss (oder sollte) in den meisten Fällen einem Profi überlassen werden.

7) Stock Fotos

Ein Trend, der vermutlich auch im Jahr 2019 nicht zurückgehen wird ist der Einsatz von Stock Fotos.

Jeder hat sie schon gesehen und die meisten erkennen sie sofort.

Der Grund für ihre Verbreitung ist klar: jeder möchte schöne, hochqualitative Fotos auf seiner Website haben und das im besten Fall auch noch umsonst. 

Das Problem mit den Stock Fotos ist jedoch eben, dass sie fast jeder Besucher sofort als solche erkennt, was in vielen Fällen unprofessionell wirken kann. Besonders Fotos auf denen Menschen gezeigt werden (die im Falle eines Stock Fotos gar nichts mit der Firma oder der Seite zu tun haben) wirken meistens unseriös und unpersönlich. Bei vielen Websites sollte auf der Startseite grundsätzlich lieber ganz auf Stock Fotos verzichtet werden und stattdessen sollten eigene Bilder verwendet werden, die (wenn gewünscht) auch das echte Team zeigen.

Doch es gibt auch Bereiche, in denen sich Stock Bilder gut machen können: in redaktionellen Artikeln kann man sie meist in einem guten Rahmen einsetzen und als Betreiber eines Online-Shops lassen sich zum Beispiel schöne Titelbilder für viele Produktkategorien oder große Hero-Banner finden.

Doch trotz aller Vorteile die Stock Fotos mit sich bringen gilt in den meisten Fällen trotzdem: wenn das Budget oder das eigene fotografische Können vorhanden ist, sollten Sie lieber eigene, authentische Fotos erstellen und verwenden.

8) Videohintergründe & Animierte Hintergründe

Zum Aufbau einer modernen Website gehört ein großes Bild auf der Startseite heute fast schon standardmäßig dazu. Eine Möglichkeit, um dem ganzen noch eine ganze Menge Dynamik und Atmosphäre hinzuzufügen: ein großes bewegtes Bild auf der Startseite. Video- und animierte Hintergründe bilden den Gegentrend zum sonst eher verbreiteten minimalistischen Webdesign und werden immer beliebter. 

Klar, ein großer Videohintergrund macht eine Website eindrucksvoller und einprägsamer als ein einfaches Foto, doch er bringt auch ein paar Nachteile mit sich: unter Umständen wirkt das größere Datenvolumen negativ auf die Ladezeit der Seite aus, wenn das Video aufgrund einer langsamen Internetverbindung nicht flüssig läuft kann das ebenfalls einen schlechten Eindruck auf den User machen. Passiert in Hintergrund zu viel besteht auch die Gefahr, das der Besucher dies als störend empfindet oder vom eigentlichen Inhalt abgelenkt wird.

Man sollte bewegte Hintergründe also wohlüberlegt einsetzen, wenn man die hier beschriebenen Fehler vermeidet bieten sie jedoch tolle Möglichkeiten und sollen nachweislich die Conversion-Rate steigern.

9) Microinteractions

Mikrointeractions sind im Internet schon lange allgegenwärtig, doch trotzdem können die meisten Menschen mit dem Begriff noch nicht viel anfangen. Alltägliche Beispiele für Microinteractions sind kleine Zahlen-Kennzeichen an einem App-Icon, die auftauchen wenn wir eine neue Benachrichtigung bekommen oder der klassische Like-Button.

Im Trend sind jetzt allerdings komplexere Mikrointeraktionen, beispielsweise kleine Animationen als Mouseover- oder Scrolling-Effekte, denn diese beziehen den Nutzer weiter ein und können ihm weitere Informationen vermitteln. Ein Vorteil kann der Überraschungseffekt sein, da der Nutzer oft gar nicht mit einer Reaktion rechnet, wenn er den Mauszeiger über ein bestimmtes Element bewegt. So steigern sie auch die Nutzerunterhaltung und geben das Gefühl einer Rückmeldung.

Doch auch bei Mikrointeraktionen (besonders bei denen, die komplexe Animationen enthalten) müssen Sie etwas vorsichtig in Bezug auf eine mögliche Erhöhung der Ladezeit sein. Auf der anderen Seite sollen sich Interaktionen wie das betätigen eines Like-Buttons positiv auf ihre Suchmaschinenoptimierung auswirken.

Kontaktieren Sie uns

Jetzt
info@p1commerce.de
02307 96 74 260
0176 36 33 8034

Eine Mouseover-Box als Beispiel für eine Microinteraction

10) Pop-Ups

Ein weiterer Trend der voraussichtlich auch im Jahr 2019 nicht verschwinden wird, sind Pop-Up-Fenster. Sie tauchen auf immer mehr Websites auf und wollen Sie mit tollen Angeboten dazu locken, sich in eine E-Mail-Liste einzutragen, sich eine neue Kollektion oder die kürzlich reduzierten Artikel anzusehen. 

Der Grund für die immer noch starke Verbreitung ist ihre Effektivität. Obwohl der Großteil der Besucher von Pop-Ups genervt ist, sprechen die Statistiken trotzdem für sie, deswegen will einfach kein Websitebetreiber auf sie verzichten. Man sollte beim Einsatz von Pop-Ups allerdings trotzdem darauf achten, dass sie einfach zu schließen sind und nicht zu häufig erscheinen, denn sonst könnte ihr negativer Effekt trotz allem überwiegen.