Wie gefällt Ihnen der Artikel?
4
Wie gefällt Ihnen der Artikel?
4

Diese 8 Webdesign-Trends sind 2018 wichtig

Welchen Trends im Webdesign sollte man 2018 besonders Beachtung schenken? Im Laufe der letzten 20 Jahre hat das Webdesign eine rasante Entwicklung durchlaufen, die durch technologische Fortschritte und unzählige neue Gestaltungsmöglichkeiten gekennzeichnet ist. Während die Webdesign-Trends anfangs noch längere Zeit anhielten, lässt die heutige Zeit des modernen Webdesigns neuen Entwicklungen kaum Zeit zur Entfaltung. Dauerhaft Bedeutung haben jedoch weiterhin Benutzerfreundlichkeit und ein hoher Informationsgehalt des Webangebots – und das nicht erst, seit immer mehr Menschen online unterwegs sind.

Modernes Webdesign: (Mobile) Anpassung mit technischen Neuerungen

Die Webdesign-Trends 2018 folgen noch immer einer klaren Marschroute: Während die optische Gestaltung der Website etwas in den Hintergrund rückt, liegt der Fokus auf einer optimierten Usability für den Besucher. Der Inhalt soll ansprechend präsentiert werden und Mehrwert bieten – unabhängig vom verwendeten Gerät. Responsive Webdesign wird daher auch 2018 ein wichtiges Stichwort für Webdesigner bleiben. Denn nur, wenn die Website oder Web-App auf die Eigenschaften des jeweiligen Endgeräts reagieren kann und auch auf jedem Gerät übersichtlich dargestellt wird, kann sie auf lange Sicht erfolgreich bleiben.

Es gilt also, die modernen Webstandards wie HTML5, JavaScript und CSS3 optimal einzusetzen, um flexible Websites zu designen. Der bereitgestellte Inhalt sowie die grafischen Elemente sollten unabhängig von der Auflösung des verwendeten Geräts sowie der Eingabemethode (z.B. Touchscreen oder Maus) möglichst unverändert angeboten werden. Die Vorteile des responsiven Designs liegen auf der Hand: Die flexible und automatische Anpassung erleichtert nicht nur die Nutzung über die aktuellen mobilen Endgeräte, sondern ermöglicht auch die schnelle Anpassung an zukünftige Ausgabemedien.

Im Gegensatz zur mobilen Website, die separat zur klassischen Website durch ein eigenes Template angelegt und verwaltet wird, muss neuer oder veränderter Content einer responsiven Website außerdem nur ein einziges Mal eingespeist werden.

8 Trends, die das Webdesign im Jahr 2018 dominieren

Wichtige Webdesign-Trends der vergangenen Jahre setzen sich auch 2018 fort und zielen vor allem auf hochwertige und personalisierte Inhalte ab. Neue Einflüsse sind von Fortschritten in der KI-Forschung und der zunehmenden Digitalisierung des Alltags im Rahmen des Internets of Things (IoT) geprägt. Beide Trends bieten Web-Designern die Chance, die User-Experience zu verbessern und Webseitenbesuchern nie dagewesene Interaktionsmöglichkeiten zu präsentieren.

Trend 1: Aufgeräumtes UI

Dass ein gutes und intelligentes Layout schnell 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 2018 auf vielen grafischen Benutzeroberflächen finden lassen.

Das erste 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 Hamburger und wird häufig auch durch das mathematische Zeichen „≡“ abgebildet, das eigentlich „identisch“ bedeutet.

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 2: Nahtlose Interaktion

Gute Websites überzeugen nicht allein durch Inhalte. Ebenso wichtig sind die Präsentation des Contents und die Nutzererfahrung (User-Experience, UX) beim Besuch der Website. Dabei steht die Interaktion mit dem Besucher im Fokus des UX-Designs. Ziel ist es, Inhalte visuell ansprechend aufzubereiten und die Informationsaufnahme zu erleichtern. Ein Webdesign-Trend, der sich auch 2018 vorsetzt, ist das Interactive Storytelling – das Erzählen von Geschichten mithilfe interaktiver Multimedia-Elemente.

Wie sich selbst trockene Themen durch Interactive Storytelling spannend präsentieren lassen, zeigt das Webprojekt „Snow Fall“ der New York Times. Die Dokumentation beleuchtet die Erlebnisse einer verschütteten Skifahrergruppe in mehr als 10.000 Wörtern. Dank der multimedialen Aufbereitung mit Interviews, Videos, Bildern und Animationen wirkt der lange Text stets fesselnd und lebendig.

Für den Nutzer wird der Trend zur Interaktion durch grundlegende Veränderungen an der Benutzeroberfläche sichtbar. Zu den interaktiven Trendelementen, die 2018 noch stärker zum Einsatz kommen werden, zählen Micro-Interactions, 360°-Videos, Chat-Bots und das Voice-User-Interface (VUI).

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 eben diese Details, die die Nutzererfahrung ausmachen. Beispiele für gelungene Animationen, mit denen sich Micro-Interactions realisieren lassen, finden Webseitenbereiter auf Awwwards.com oder Dribbble.

360°-Videos: In der Vergangenheit gaben Videos den Blickpunkt des Betrachters durch den Kamerawinkel vor. 360°-Videos brechen mit dieser Tradition. Hier entscheidet der Zuschauer, in welche Richtung er schauen möchte. Video-Plattformen wie YouTube haben die technischen Voraussetzungen für die Rundumsicht bereits implementiert. 2018 wird dieser Trend auch im Webdesign stärker in Erscheinung. Internetnutzer können sich auf Multimediainhalte freuen, die immersive virtuelle Umgebungen präsentieren. Einen kleinen Vorgeschmack bietet das folgende Video, das es dem Zuschauer ermöglicht, mit einer Elefantenherde auf Tuchfühlung zu gehen.

Chat-Bots: Programme für Kommunikationsaufgaben sind nicht neu. Chat-Bots entspringen dem Forschungsgebiet der Künstlichen Intelligenz (KI) und kommen schon heute auf Unternehmenswebsites oder in Online-Shops 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 Chat-Bots als virtuelle Shopping-Assistenten oder als Alternative zum klassischen FAQ-Bereich.

Voice-User-Interface (VUI): Sprachassistenten wie Apple Siri, Alexa von Amazon, Google Assistent oder Microsoft Cortana sind auf dem Vormaschen. Das Voice-User-Interface, eine sprachgesteuerte Benutzerschnittelle, bietet Nutzern eine alternative Interaktionsmöglichkeit zu grafischen Steuerelementen und könnte 2018 auch im Webdesign zum Trend werden. Vorteil des VUI: Der Nutzer hat die Hände frei und muss nicht zwangsläufig den Bildschirm beobachten. Zudem können Sprachassistenten Schwierigkeiten kompensieren, die auftreten, wenn Nutzer Websites mit Endgeräten aufrufen, die lediglich einen kleinen Bildschirm oder eine unkomfortable Tastatur zur Verfügung stellen. Bereits in den 1950er-Jahren stellten Forscher der Laboratories mit dem „Audrey“-System das erste sprachgesteuerte User-Interface vor. Moderne Adaptionen dieses Systems greifen auf Erkenntnisse der KI-Forschung zurück und ermöglichen eine dialogorientierte Navigation mithilfe von Sprachbefehlen.

Internet of Things (IoT): Unter dem Schlagwort Internet of Things werden verschiedene Technologien zusammengefallt, die der Vernetzung von Haushaltgeräten über das Internet dienen. 2018 könnte IoT auch im Webdesign zum Trend werden. Denkbar sind IoT-Schnittstellen auf Websites, die eine Interaktion mit intelligenten Geräten wie internetfähigen Personenwaagen oder Kühlschränken ermöglichen.

Tipp

Informativ und „catchy“ zugleich bindet eine interaktive Präsentationsform den Besucher an die Seite und steigert die Chancen auf eine positive Reaktion. Allerdings sollte man zugunsten einer stabilen Performance nicht zu viele aufwendige Animationen einbauen.

Trend 3: Personalisierte User-Experience

Die zielgruppengerechte Darstellung von Webinhalten gehört zu den Grundprinzipien des 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 2018 die User-Experience des Einzelnen in den Fokus. Während Funktionen wie „… das könnte Ihnen auch gefallen“ schon heute in keinem Onlineshop fehlen, 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.

Ein Webdesign-Trend 2018 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 Piwik zur Verfügung, die Content-Anbietern ein umfassendes Bild davon zeichnen, wie Internetnutzer mit Webinhalten interagieren.

Trend 4: Scrolling-Websites: Klicken war gestern

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-Effekte erfreuen sich nach wie vor großer Beliebtheit und bleiben somit auch 2018 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 oder Instagram 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 umfangsreichem 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 5782 Unterseiten aufruft, ist eher unwahrscheinlich. Infinite Scrolling hingegen wird in Regel mit ausgefeilten Algorithmen eingesetzt, die das Informationsangebot vorfiltern und Nutzern die relevantesten Einträge zuerst präsentieren.

Webseitenbetreiber, die 2018 auf den Infinite-Scrolling-Trend aufspringen möchte, 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 die in jedem Fall folgende Aspekte.

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

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

Der 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“.

Trend 5: Stärkere Einbindung von Typografie

Galten große Schriften und das Vermischen mehrerer Schriftarten bisher als No-Go, gehört Varianz in der Schriftgestaltung inzwischen zu den Trends des Webdesigns. Miteinander harmonierende Schriftarten erzeugen beim Leser richtig eingesetzt eine positive Wirkung. Unterschiedliche Schriftgrößen helfen dem User außerdem bei der optischen Gliederung des Textes. So werden größere Elemente beispielsweise zuerst wahrgenommen.

Generell sollten Sie die Schriftarten mit Bedacht wählen und zum Produkt, Unternehmen, zur Thematik oder zur Zielgruppe passen. Bei all den Freiheiten, die Webdesigner hinsichtlich der verfügbaren Schriftarten und -größen inzwischen genießen, darf man einen Aspekt aber niemals vergessen: Die ausgewählte Schrift muss für den Benutzer gut lesbar sein.

Trend 6: Dynamische Hintergrundelemente

Der Blick ins Internet zeigt: Stockfotos soweit das Auge reicht. Webseitenbetreiber haben es sich in den vergangenen Jahren leicht gemacht. Statt der Erstellung eigener Bilder, gehört heute der vergleichsweise kostengünstige Erwerb von Stockfotos zum Standardvorgehen. Doch das ist wenig originell. Und der Mehrwert für den Nutzer beschränkt sich auf einen Ruhepunkt für das Auge, wenn mehr oder weniger beliebige Motive Textwüsten auflockern.

Doch der größte Nachteil von Stockfotos ist ihre Massentauglichkeit. Mit großer Wahrscheinlichkeit finden Nutzer dieselben Fotos auf einer Vielzahl von Seiten im Netz. Aus der grauen Masse heraus stechen hingegen Websites mit hochwertigen, einzigartigen Bild- und Video-Inhalten. Ein wesentlicher Trend für das Webdesign im Jahr 2018 ist dabei die Verwendung dynamischer Hintergrundbilder, -grafiken und videos.

Dynamische Hintergrundelemente bieten Webseitenbreibern die Möglichkeit, Informationen schneller und direkter zu vermitteln als mit Textelementen. Zudem lassen sich Besucher mithilfe von Fotos, Grafiken oder Videos auf einer emotionalen Ebene ansprechen. Eine dynamische Hintergrundgestaltung wird daher oft mit dem Ziel genutzt, Gefühle zu erzeugen und den Besucher in die gewünschte Stimmung zu versetzen.

Trend 7: Hochwertige Illustrationen

Ein weiterer Webdesign-Trend, der die eigene Website von anderen abgrenzt und für mehr Aufmerksamkeit sorgt, ist das Einbinden hochwertiger Illustrationen. Diese bieten den Vorteil, sprachliche Erläuterungen auf einfache Weise zu veranschaulichen bzw. zu konkretisieren und unterstützen somit die Aussagekraft des Textes. Gerade im Kontext der multimedialen Inhalte einer Website bieten Illustrationen eine gelungene Abwechslung, die schnell ins Auge fällt. Illustrierte Werke können außerdem von Wettbewerbern nur schwer kopiert werden und sind daher der perfekte Weg, aus der Masse herauszuragen. Wem die nötigen Fähigkeiten fehlen, solche Illustrationen selbst anzufertigen, der sollte sie von einem professionellen Grafikdesigner anfertigen lassen. Ein bekanntes Beispiel einer Website, die auf Illustrationen zurückgreift, ist die Homepage des Onlinespeicher-Dienstes Dropbox.

Trend 8: Website-Performance: Gefühlte vs. tatsächliche Ladezeit

Gestaltungstrends des modernen Webdesigns wie interaktive Animationen, Parallax-Effekte oder ein dynamischer Hintergrund sorgen für Aufsehen und verbessern (effektiv eingesetzt) die Informationsausnahme. Oft geht eine aufwändige Gestaltung der Website jedoch mit negativen Auswirkungen auf die Performance einher. 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. Hier gilt generell: „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 unter anderem auf folgende Tricks, um Ladezeiten zu kaschieren:

  • 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.
  • Schlüsselelemente zuerst laden: Webseiten sollten so programmiert werden, dass die sogenannten „above the fold“-Inhalte zuerst abgerufen und im Browser dargestellt werden. Es handelt sich dabei um die Teile der Website, 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, dass sich nach und nach verfeinert, bis die Daten für die gewünschte Bildqualität komplett geladen wurden.

Weitere Tricks wie sich die Website-Performance verbessern lässt, bietet der Artikel zur Website-Optimierung.

Tipp

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 Daten-Ballast sind.

Mit Webdesign Trends zum Erfolg

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

Parallax und Infinite Scrolling sind beliebte Stilmittel, die den Besucher auf seiner Reise durch die Website begleiten sollen. Das ist quasi auch das Stichwort für den Trend des Interactive Storytellings. Der Kunde bekommt die gewünschte Information nicht lieblos vorgesetzt, sondern innerhalb einer kleinen Geschichte präsentiert. Handgezeichnete Illustrationen, hochwertige Hintergrundelemente und individuelle Schriftarten geben der Website zusätzlich einen persönlichen Touch. Es gilt mehr denn je, die Website-Besucher persönlich anzusprechen und emotional abzuholen. Nach wie vor lautet dabei der Grundsatz: Eine auf den Nutzer ausgerichtete Website, die hochwertige Inhalte ansprechend verpackt, bildet den ersten Schritt auf einem erfolgreichen Weg im World Wide Web.

Wer gerade eine eigene Website aufbaut oder seine vorhandene einem Update unterziehen möchte, der sollte sich von einigen der Trends fürs Webdesign 2018 inspirieren lassen.

Themes Bilder Responsive