Sieben Trends im Webdesign für 2018

Es gibt immer einen Grund, die Marken-Website mal wieder zu entstauben. Denn während man sich bei Transaktions-orientierten Internetseiten wie Onlineshops inzwischen von Relaunch-Gedanken verabschiedet hat, ist es bei Markenseiten Pflicht, ihnen regelmäßig einen Neuanstrich zu geben. So wird für Antonia Zimmerlich von 99designs  , Online-Marktplatz für Grafikdesign, das Webdesign in diesem Jahr erwachsen: 2018 gehe es nicht mehr nur darum, Nutzer schnellstmöglich in Kunden zu verwandeln. "Was jetzt zählt, sind ungewöhnliche Ideen, eine positive Kundenerfahrung und Designs, die die Geschichte hinter dem Bildschirm erzählen können. Nur so lassen sich User langfristig von einer Marke überzeugen", fasst sie zusammen.

Sieben Webdesign-Trends zeigen, welche Gestaltungsoptionen Designexperten auf dem Plan haben und 2018 das Netz bestimmen werden. Unter den Webdesign-Trends für 2018, die Interaktivagenturen, Webprogrammierer und Designer ab sofort ins Portfolio integrieren sollten, kristallisiert sich ein übergeordneter Trend heraus, der künftig immer beachtet werden muss:

1. UX Design stark gefragt

Trends im Webdesign sind immer eine Mischung aus Trends der Bereiche Design, Technologie und Workflow bzw. Marketing. So hängt der Erfolg einer App oder Website nicht nur von der Optik ab. Erfolg steht und fällt mit dem Nutzererlebnis. Beim Webdesign geht es also vor allem darum, eine App/ Website praktisch und intuitiv zu gestalten. Ist sie nicht praktisch, hat sie für Anwender keinen Wert. Aber auch eine praktische App findet wenig Anklang, wenn sie umständlich zu bedienen ist. Ein gutes Design erfüllt beide Kriterien: Es ist auf die Ziele der Anwender ausgerichtet und ermöglicht es ihm, diese Ziele über eine klar strukturierte Benutzeroberfläche zu erreichen. Über allem sollte also immer das perfekte UX/UI-Design stehen, denn ohne eine optimale User-Führung beziehungsweise die entsprechende Gestaltung auf allen Devices geht nichts.

"Ein Paradigmenwechsel von UX-/UI-Design hin zum UX Engineering", sieht Ralph Hinderberger , Online Shop Manager UX/Usability der Medion AG   als einen großen Trend im Webdesign. So geht es immer öfter bei Projekten nicht nur darum, Grafiken zu gestalten, sondern die Ziele des Nutzers in eine produktbasierte Lösung zu übersetzen. Genau das leistet User Experience Design, kurz UX Design. Der Unterschied zeigt sich auch im Ergebnis: Grafikdesign erzeugt in erster Linie visuellen Appeal, während UX Designer für Ergebnisse sorgen, zum Beispiel Apps, die viele Produkte verkaufen oder dafür sorgen, dass die Nutzer damit ihre Ziele umsetzen können. Da heute oft User Interfaces gestaltet werden, ist UX Design immer stärker gefragt, und darum lohnt es sich, für jeden Designer diese Disziplin zu lernen. UX Design erfordert auch bei den Tools Umdenken.

Das sieht Manuel Strobel , Experience Consultant bei Namics   ähnlich: "Je neuer die Technologie, desto essenzieller ist Usability". Egal ob Virtual Reality, Voice oder Gestensteuerung - es gibt unzählige neue Interaktionsformen, auf die Kunden zurückgreifen können. Viele Unternehmen experimentieren bereits mit diesen Möglichkeiten, "verlieren aber die grundlegenden Prinzipien der Usability und Accessibility aus dem Blick". Diese müsse aber zwingend übertragen und der Interaktionsform entsprechend angepasst werden. Ansonsten bleibt die Akzeptanz der Masse aus und nur wenige Spezialisten nutzen die Tools. Zudem ist noch ein weiterer Aspekt wichtig: "Unternehmen sollten diese neuen Kommunikationskanäle nicht zum Selbstzweck einführen. Das Produkt muss unabhängig von der Interaktionsform einfach zu bedienen, sinnstiftend und zufriedenstellend für die Nutzer sein. Nur so entstehen Produkte mit einem Mehrwert für Unternehmen und Kunde."

2. Flat Design

Aufgeräumtes Layout, schlichtes Design, Gestaltung auf das Wesentliche reduziert: Angesichts der stetig wachsenden Mobilnutzung setzt sich der Trend zum Minimalismus bei der UI-Gestaltung fort. "Das Flat Design, wie es Microsoft mit Kacheln und Google mit Material Design etabliert hatten, entwickelt sich weiter", berichtet Jörg Heidrich , Executive Director UX , UDG United Digital Group  : So halten beispielsweise Schatten wieder Einzug und verdeutlichen als Ergänzung der geometrischen Formen die Ebene von Elementen. Zudem werden Kontraste und Farben stärker als Gestaltungsmittel eingesetzt und reine Textlinks als Buttons ausgestaltet. "Ziel dieser stärkeren Akzente ist eine bessere Bedienbarkeit der flachen Interfaces, die immer wieder wegen Usability-Problemen in der Kritik standen", erläutert er.

Auch laut aktuellem Shutterstock Creative Report   geht "der neue Minimalismus weit über klare, scharf gezogene Linien hinaus und zeichnet sich durch fließende Styles und mutige, lebendige Farben aus. Die nach wie vor populäre Kunstform erfindet sich ständig neu". Mit Flat Design rücken auffallende Farben und vor allem die Typografie als gestalterisches Mittel verstärkt in den Fokus. Es geht um schlichte Muster, Linien, geometrische Formen und kontrastreich eingesetzte hippe, knallige Farben, reduziert auf die Typologie. Typografie war schon immer ein mächtiges, visuelles Werkzeug. Sie kann wichtige Informationen vermitteln und die richtigen Emotionen wecken. Die Zukunft der Typografie ist farbig. Starke, einprägsame Typografie kann genauso auffallend wie ein Bild gestaltet sein, braucht aber kaum Ladezeit. Genau das macht gerade im Mobile-Bereich viel Sinn. Im Gegensatz zu Bildern wirkt sich die Skalierung der Schriftgröße weniger auf die Leistung der Geräte aus. Da die Auflösung vieler Geräte immer schärfer wird, können Browser nun auch handgemachte Schriftarten unterstützen, die ganz leicht via CSS aktiviert werden. In Verbindung mit der passenden Farbpalette schärfen sie den individuellen Charakter und die Glaubwürdigkeit einer Website.

Der gekonnte Einsatz von einprägsamer, funktionaler Typografie trägt also stark zu einem optimalen UX/UI-Design bei. Flat Design verschafft Websites und Apps also einige Vorteile: "Sie profitieren vom reduzierten Design und legen den Fokus auf das Wesentliche: die Inhalte der Website, einer gute Nutzerführung und eine schnelle Performance. Apps, die voller Designelemente stecken und mit langatmigen Animationen vollgestopft werden, überzeugen den Nutzer weder mit Übersicht noch mit Schnelligkeit", argumentiert die Agentur Creative360  .

3. Skalierbare Vektorgrafiken

Schöne auffällige Bilder machen auch in 2018 eine gute Website aus. Geht es nach der United Digital Group (UDG)   werden künftig allerdings skalierbare Vektorgrafiken (SVG) die bisherigen Dateiformat-Standards zum Teil ersetzen. "Scalable Vector Graphics basieren auf mathematischen Vektoren und sind Bildformaten wie JPG, PNG oder GIF wegen ihrer geringen Dateigröße im Web klar überlegen", bringt Heidrich an. Besonders eignen sie sich für Icons oder Illustrationen. Zudem lassen sich die einzelnen Pfade einer SVG durch CSS-Ansprache animieren. Der Designer kann also zum Beispiel festlegen, in welcher Reihenfolge sich die einzelnen Elemente einer Grafik aufbauen. "In einigen Bereichen schon Standard, werden sich SVG insbesondere im Mobil- und Responsive Webdesign schnell verbreiten", prognostiziert Heidrich.

Das XML-basierte Format stellt sicher, dass Elemente und Grafiken auf jedem Endgerät mit der bestmöglichen Qualität dargestellt werden. Vektorgrafiken bleiben bei jeder Auflösung scharf und eignen sich deshalb bei hochauflösenden Displays und hervorragend für responsive Designs; und das auch noch ladefreundlich. Die Unterstützung ist inzwischen nahezu vollständig in den aktuellen Desktop-Browsern und den mobilen Geräten. Ob animierte Hintergründe, Interaktionen bei Icons, Infografiken oder illustratives Schmuckelement. Animierte Illustrationen werden in qualitativ hochwertigen Projekten stark zunehmen.

4. Mobile First

Bei der Website-Gestaltung lag der Design-Fokus lange Zeit auf großen Bildschirmen. Mit steigenden Mobil-Nutzerzahlen rückte in den vergangenen vier Jahren Responsive Design für mehrere Bildschirmgrößen in den Mittelpunkt - und ist Pflicht im Webdesign. "Responsive Seiten sind Standard. Ob Smartphone, Tablet oder Desktop, der User erwartetet eine intuitive und device-übergreifende Bedienung", bestätigt Matthias Weber , Geschäftsführer der mwbsc GmbH  . Was sich nun ändert, ist, dass das Smartphone künftig die primäre und wichtigste Plattform sein wird, auf der Nutzer das Web besuchen. Damit wird Mobile First der zentrale Dreh- und Angelpunkt im Webdesign der kommenden Jahre. Es gilt also künftig, den Fokus eines Screendesigns zuerst auf das Smartphone zu richten und erst dann an Tablet und den großen PC-Bildschirm zu denken. Das heißt, 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.

Im Kontext Mobile First kommt allerdings "nun die Forderung nach schnellen Internetseiten", gibt Weber zu bedenken. Denn lange Ladezeiten werden sofort mit dem Schließen der Seite bestraft. Seiner Einschätzung nach "braucht es die Unterstützung von Accelerated Mobile Pages und Content Delivery Networks". Beide laden Seiten mit vielseitigem und umfassendem Content wesentlich schneller und zuverlässiger. Gerade Markenartikler, die Kunden begeistern wollen, "müssen sich mit dem "Fast as you can"-Ansatz befassen", argumentiert er.

5. Mikrointeraktionen

Mit Flat Design halten Mikrointeraktionen Einzug in Webseiten. Diese sollen 2018 noch stärker zum Einsatz kommen und komplexer in der Darstellung werden. Mikrointeraktionen sind ein Trend aus dem UX-Design, bei dem ausgewählte Nutzer-Interaktionen von kleinen Animationseffekten begleitet werden. Bekanntes Beispiel ist der Like-Button mit animierten Emojis von Facebook. Drückt ihn der Nutzer, macht sich dies mit einem Bewegungseffekt oder dem Vibrieren des Smartphones bemerkbar. Mikrointeraktionen verbessern die User Experience, da sie wie Feedback funktionieren und den Benutzer informieren, was gerade passiert, wenn er die Website oder App benutzt. Laut der Agentur Creative360 fühlt sich der Nutzer wohler, wenn er mit der Seite interagiert und Teil des Prozesses wird. Er bekommt direkte Rückmeldung der Website, ob seine Interaktion funktioniert hat oder nicht, was ein Sicherheitsgefühl erzeugt. Außerdem können Mikrointeraktionen Nutzer zu einer Handlung verleiten und somit die Conversion Rate steigern. Das gilt nicht nur für den B2C-Bereich: "Mikrointeraktionen lassen sich mit überschaubarem Aufwand auf B2B-Websites integrieren", so Creative360. Demnach eignen sich "Interaktionen wie die Änderung der Lautstärke gut für B2B-Websites und sorgen für eine bessere Kundenbindung". Was das Thema B2B und Webdesign im Allgemeinen betrifft, ist Alexander Hachmann, Geschäftsführer Widjet GmbH   der Ansicht, dass "B2B in 2018 keine Ausrede mehr für Design ist, das nur als grotesk bezeichnet werden kann. Unsere Systeme müssen sich dem Menschen anpassen, denn sie haben reale Konsequenzen." Ziel solle sein, Design unsichtbar werden zu lassen. "In diesem Geiste wird gerade Machine Learning helfen, menschlichere Systeme zu schaffen", so Hachmann.

6. Conversational User Interfaces

Großes Thema sind Benutzer-Interfaces, die der direkten Konversation dienen. Conversational User Interfaces gehört die Zukunft. Dass diese bisher nicht längst Standard sind, lag schlicht an limitierten technische Optionen. Mit den erheblichen Fortschritten in der künstlichen Intelligenz und dem Machine Learning sind nun weitere Benutzerschnittstellen auf dem Vormarsch. Zu den Conversational User Interfaces zählen zum einen grafische (CUI) oder textbasierte Nutzerschnittstellen (GUI) wie Chatbots; zum anderen etablieren sich Sprach-gesteuerte Schnittstellen (Sprachassisenten) als Kommunikationsmittel. Conversational User Interfaces sind plattformunabhängig nutzbar und finden auch auf Geräten Anwendung, die kein Display besitzen.

Voice-User-Interface (VUI)

Das Voice-User-Interface, eine sprachgesteuerte Benutzerschnittstelle, bietet Nutzern eine alternative Interaktionsmöglichkeit zu grafischen Steuerelementen und wird im Webdesign zum Trend werden. "Der exponentielle Anstieg der Sprachsuchen im Web hat den Weg zu Sprach-Benutzeroberflächen geebnet", meint die Agentur Hirsch Medien  , die in der Sprachsteuerung einen großen Trend sehen  . Vorteil der Sprach-Interfaces: Der Nutzer hat die Hände frei und muss nicht zwangsläufig den Bildschirm beobachten. Außerdem 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. Die aktuellen Systeme wie Siri, Alexa oder Googles Assistant sind dialogorientiert und erkennen Sprachbefehle beziehungsweise beantworten Fragen. Thorsten Wilhelm , Gründer & Geschäftsführender der Eresult GmbH    ist überzeugt, dass 2018 "die ersten Shops, Banking/Brokerage-Anwendungen und Reiseportale kommen, die den Nutzern eine (Teil-)Nutzung über Sprache ermöglichen." Das visuelle Interface werde dennoch bestehen bleiben, "denn der Endpunkt einer Suche, z.B. Produktdetailseiten in Shops, Chart- und Newsdarstellungen für Aktien oder Detailseiten eines Hotels lassen sich nun einmal am besten visuell darstellen", erklärt Wilhelm.

"Sprachinterfaces werden 2018 besonders an Bedeutung gewinnen - und zwar vor allem im privaten Raum", prognostiziert Jörg Heidrich. Er ist überzeugt, dass die "händische Eingabe von Befehlen an grafischen Interfaces in Haushalten mit Sprachassistenten wie Alexa oder Google Assistant durch gesprochene Sprache ersetzt wird". Vor allem Standard-Anfragen wie zum Beispiel "Termin mit Claudia um 14 Uhr einstellen" lassen sich dadurch perfekt erledigen, während Hände und Augen mit anderem beschäftigt sind. Dies ist zum Beispiel beim Autofahren der Fall. Ein zweiter Treiber neben den freien Händen ist für Heidrich der Komfortgewinn: "Statt sich beim Fernsehen durch tiefe und verschachtelte Kategorien und Menüs zu arbeiten, reicht ein 'Alexa, zeige mir …' - und schon wird jeder mediale Wunsch erfüllt." Da die Technologie immer komplexer wird, bietet sie für die Agentur Creative360 durchaus größeres Potenzial als im privaten Raum. "B2Bs müssen hier umdenken", fordert die Agentur. Das bedeutet natürlich eine Herausforderung, aber zugleich bergen diese Assistenten auch eine große Chance. "Besonders im E-Commerce und im Kundenservice profitieren B2Bs in Zukunft vom Können der Sprachsysteme", so die Einschätzung der Stuttgarter.

Chatbots
Für Hirsch Medien wird "UX Writing" in den kommenden Monaten an Zugkraft gewinnen. Die Erstellung von Textelementen für Benutzerschnittstellen werde in 2018 sehr gefragt sein. "UX Writing ist die digitale Stimme Ihres Unternehmens und hilft Ihnen dabei, effektiv mit Ihren Nutzern zu kommunizieren", so die Agentur. Neben der Sprachsteuerung werden Hirsch Medien zufolge auch Chatbots ihre Spuren im Web hinterlassen. So nutzen zwar bereits viele Websites Chatbots, um mit ihren Kunden zu kommunizieren. Viele weitere Unternehmen werden auch bald auf den Chatbot-Zug aufspringen. Mit Milliarden von Geräten werde zudem 2018 die Barrierefreiheit im Web einen Paradigmenwechsel durchlaufen. Auch bei Creative360 ist man überzeugt, dass 2018 mittels künstlicher Intelligenz diese Technologie weitergeführt und perfektioniert wird: "Diese Funktion wird auch auf Unternehmensseite angewendet werden, um dem User das bestmögliche Nutzererlebnis zu bieten. Im B2B spielt der Service eine immer wichtigere Rolle. B2Bs profitieren deshalb zum Beispiel im Kundenservice von Chatbots."

7. Progressive Web-Apps

Fortsetzen wird sich der Trend weg von der nativen App, hin zur progressiven Web-App. Hirsch Medien etwa erwartet 2018 "mehr Integrationen und Schnittstellen von Mobile- und Web-Apps". Progressive Web Apps sind mobil nutzbare Webangebote, die sich progressiv an die Fähigkeiten des genutzten Gerätes und Browsers anpassen. Ergo passen sie sich zudem genau an den App-Nutzer und dessen Endgerät an. Je leistungsfähiger das Gerät und der Browser, desto leistungsfähiger die App. Zur Erstellung werden ausschließlich offene Webstandards verwendet. Entsprechend sollen animierte Medienübergänge, Push-Benachrichtigungen von Mobile auf Desktop PC oder Begrüßungsbildschirme ihren Sprung auf die Websites schaffen. "Progressive Apps sind durch ihre Geschwindigkeit und Komfort ein Hit und verursachen dazu auch noch keinen Installationsaufwand", so der Vorteil laut Hirsch Medien.