Dieter Petereit 12. März 2018

2018: Das sind die Trends in Webdesign und Webentwicklung

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Das Web wird immer komplexer. Design als rein optische Anmutung spielt kaum eine Rolle mehr. Es sind ganz andere Themen, die die Trends 2018 setzen werden.

Konventionelles Webdesign früherer Prägung gibt es schon heute eigentlich nur noch in E-Mail-Newslettern. Als wären die Neunziger noch nicht vergangen, wird in diesem Bereich mit fixen Definitionen und sogar Tabellen als Layout-Gerüst gearbeitet. Da kann man als Veteran schon mal wehmütig werden. Denn heutzutage ist Design im Grunde mehr Entwicklung als Gestaltung und die Funktionalität weitaus wichtiger als der reine Look.

So sehe ich für die gestalterische Fortentwicklung unserer Designs in 2018 kaum ein Fortkommen, denn der Minimalismus setzt sich seit einigen Jahren fest und wird angesichts der stetig wachsenden Mobilnutzung des Web auch nicht mehr verschwinden. Neue Trends sehe ich daher nicht, eher das Erstarken bereits zu erkennender Entwicklungen, wie:

Kräftige, flächige Farben

Irgendwie musst du dein Design von anderen absetzen. Die Amerikaner nennen es den Trend zu Bold Colors, was wörtlich übersetzt eigentlich „Fette Farben“ bedeutet. Der Begriff beschreibt auch viel besser, worum es geht. Farben werden möglichst kontrastig eingesetzt, so, dass der Einsatz schon fast Mut erfordert.

Dabei darf ruhig auch kräftig gemischt werden, solange das Gesamtbild harmonisvch bleibt. Der zuletzt hier gezeigte Mondrianismus eignet sich da beispielsweise sehr gut.

Weiche und komplexe Mikrointeraktionen

Regelmäßige Leser(innen) könnten auf die Idee kommen, dass Mikrointeraktionen eines meiner Lieblingsthemen sind. In der Tat gibt es hier und anderswo etliche Veröffentlichungen dazu.


Fluid Switch | Leo Zakour

Kurz resümiert sieht es so aus, dass Mikrointeraktionen die wichtigsten Interface-Elemente sind, die zwischen deinen Besuchern und deinen Zielen stehen. Nachdem sich Websites optisch immer stärker ähneln, sind es die Mikrointeraktionen, mit denen du für Differenzierung sorgen kannst. Lies die verlinkten Artikel, um genaueres zu erfahren.

Für 2018 erwarte ich, dass Mikroninteraktionen komplexer in der Darstellung werden, sich noch nahtloser anfühlen als bisher schon. Dazu bedarf es einerseits geschickter Animation und andererseits eines technisch versierten Umgangs mit den dahinterliegenden Datentransfer.

Individuelle Illustrationen und SVG

SVG als Vektorformat eignet sich hervorragend für den Einsatz auf responsiven Websites, also allen, die jetzt und künftig noch entwickelt werden. Dadurch, dass die Darstellung nicht pixelbasiert rauf- oder runtergerechnet werden muss, ist das SVG bei allen Auflösungen gleich scharf und knackig in der Abbildung. Zudem ist die SVG-Unterstützung in den Browsern kein Hemmschuh mehr.

Während sich die ästhetische und technische Qualität der in Webdesigns eingesetzten Bilder in den letzten Jahren, nicht zuletzt auch durch die wachsende Vielzahl professioneller, aber dennoch kostenloser Foto-Anbieter, deutlich erhöht hat, verstärkt eben dieser Umstand den Effekt der Gleichförmigkeit eher, als dass er ihn mildert.

Deshalb und wegen der eben genannten Vorteile des SVG erleben Illustrationen einen Aufstieg in der Gunst der Designer, aber auch deren Kunden. Eine individuell erstellte Illustration passt besser zu minimalistischen Entwürfen und sieht dennoch nicht aus wie die vom Wettbewerber nebenan. Mit Fotos lässt sich das kaum vermeiden.

Auch in 2018 werden daher viele Designer auf die Verwendung von Illustrationen setzen. Je nach Anspruch ist das sogar günstiger als eigens Fotosessions zu veranstalten. Und schlussendlich haben wir ja alle das Zeichnen ohnehin lernen müssen. Wer nicht, arbeitet mit einem oder einer Illustrator(in) zusammen.

Authentischere Fotos

Nachdem es an Fotos keinerlei Mangel mehr gibt, wird es schwer, sich hier vom Wettbewerb abzusetzen. Überdies stellt sich natürlich die Frage, ob eben das überhaupt immer erforderlich ist. Kommst du zu dem Ergebnis, dass eine Differenzierung über den Bildeinsatz erfolgen muss, kommst du nicht umhin, einen anderen Ansatz zu wählen.

Authentischere Fotos zu machen, klingt als Ratschlag erstmal ganz plausibel. Nur, wie soll das zu verstehen sein. Mein Rat ist hier, Fotos als Stories zu betrachten. Du betreibst also Storytelling mit Bildmaterial. Deine Fotos zeigen nicht mehr nur das Produkt in professioneller Darstellung, sondern sie erzählen eine Geschichte, die mit dem Produkt zu tun hat oder auch nicht.

Authentizität erfordert im besten Falle keine hochprofessionellen (und teuren) Settings, sondern kann sogar mit der Smartphone-Kamera erzielt werden. Es kommt halt darauf an, was du warum wie darstellen willst.

Interessantere Typografie

Die Zukunft der Typografie ist farbig. Dafür sorgen die sogenannten Colorfonts, über die wir an dieser Stelle ausführlich berichteten. Manch einer behauptet sogar, dass farbige Schriften das Design deutlicher dominieren werden als Bilder es je taten. Neben den Colorfonts dürfen wir uns auf Verbesserungen durch den Einsatz der sogenannten Variablen Fonts freuen.

Es wird bunt, Baby. (Foto: Pixabay.com)

Variable Fonts lassen sich in Echtzeit manipulieren. Statt mehrere Schnitte, etwa für „thin“ oder „bold“, und damit mehrere Dateien für eigentlich marginale Änderungen einsetzen zu müssen, bieten variable Schriften alles aus einer Hand. Wenn du es genauer wissen willst, empfehle ich dir die Lektüre dieses Beitrags.

Virtual und Augmented Reality

Sowohl VR, wie auch AR sind keine neuen Themen. Hier bei Dr. Web haben wir uns schon vor zehn Jahren damit befasst. Dass hierin dennoch erst jetzt wirklich die nähere Zukunft liegt, ist auf den rasanten technischen Fortschritt zurück zu führen. Aktuelle Smartphones bieten die ideale Plattform für Experimente mit der augmentierten, also der erweiterten Realität. Gerade erst begeistern die Star Wars AR-Sticker in der Google Camera auf den Pixel-Phones wieder die Massen. Und auch Pokemon Go ist weiterhin profitabel.

Google Poly: 3D-Objekte aus dem Setzkasten

Google unterstützt Designer beim Einstieg in VR/AR nicht zuletzt mit seiner Poly-Plattform, die wir dir hier vorstellten. Wenn du mich fragst, dann rechne ich AR das größere Potenzial zu und erwarte auch den schnelleren und relevanteren Auftritt im Massenmarkt. VR wird noch eine ganze Weile ein Nischenthema bleiben.

Progressive Web Apps statt nativer Apps

Fortsetzen dürfte sich ebenso der Trend weg von der nativen App, hin zur progressiven Web App (PWA). Ungefähr zur gleichen Zeit letzten Jahres schrieb ich an anderer Stelle ausführlicher zu diesem Thema. Dieser Beitrag hat nichts an Aktualität verloren.

Progressive Web Apps sind mobil nutzbare Webangebote, die sich progressiv an die Fähigkeiten des sie nutzenden Gerätes und Browsers anpassen. Je leistungsfähiger das Gerät und der Browser, desto leistungsfähiger die App. Zur Erstellung werden ausschließlich offene Webstandards verwendet. Progressive Web Apps können aber derzeit noch nicht auf alle Gerätefunktionen zugreifen, weshalb sie für manche Anwendungsfälle ungeeignet sind.

Wesentlich detaillierter erklärte ich das Konzept in diesem Beitrag. Da PWA mit der Browserunterstützung stehen und fallen, ist jedes neue Jahr eine neue Chance.

Sprache als Suchwerkzeug

Fassen wir Design etwas weiter, kommt auch SEO in den Fokus. Und hier erleben wir tatsächlich einen veritablen Trend, nämlich den Trend zur Sprachsuche. Immer mehr Nutzer suchen nicht mehr mit einzelnen Schlüsselwörtern über die konventionelle Google-Suche, sondern in ganzen Sätzen über die diversen Sprachassistenten.

Schicke Dose, vornehmlich als Lautsprecher geeignet. (Foto: Amazon)

Deswegen kommen wir nicht drum herum, unsere Inhalte auf diese neue Form der Inhaltsfindung vorzubereiten. Was du dazu wissen musst, habe ich in diesem Beitrag geschrieben.

Conversational Interfaces

Konversation ist das Synonym zur Kommunikation. Jedenfalls ist es ihre ursprüngliche Form. Entsprechend geübt sind wir im Umgang damit und entsprechend natürlich gehen wir damit um. Wenn wir etwas im Wege einer Konversation tun können, dann werden wir diese Form automatisch jeder anderen Möglichkeit vorziehen.

Von daher ist es nur logisch, dass Benutzer-Interfaces die „conversational“ sind, die Zukunft gehört. Dass „Conversational Interfaces“ nicht schon längst Standard sind, zeigt nicht, dass wir etwa doch Vorbehalte dagegen haben. Es lag in der Vergangenheit schlicht an den nicht hinreichenden technischen Möglichkeiten, solche sauber und funktional zu realisieren. Auch hier kommt uns der Fortschritt gelegen.

Mehr zu Conversational Interfaces, zu denen neben Alexa und Co. natürlich auch die populärer werdenden Chatbots gehören, habe ich an dieser Stelle geschrieben.

Künstliche Intelligenz

Der Vollständigkeit halber darf das Buzz-Thema des Jahres nicht fehlen. Ich glaube nicht, dass Elemente der AI sich im Alltags-Design, der Alltags-Entwicklung niederschlagen werden. Dennoch sollten wir den Fortschritt nicht aus den Augen verlieren. Projekte wie Googles Deeplearn.js senken die Einstiegsschwelle. Lass uns Ende 2018 nochmal drüber reden…

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

7 Kommentare

  1. CMS onweb – online Webseiten im Browser selbst bearbeiten

    Unser CMS onweb ist Online-Editor für Textformatierungen und Webseitenbausteine zugleich. Ohne Datenbank kann im Inhalt der Webseiten WYSIWYG online gearbeitet werden. Ausprobieren können Sie dies auf der Demoseite von http://www.cms-onweb.de.

    Der einfache Weg zu einer modernen editierbaren Webseite

    Die fertigen Vorlagen / Templates beinhalten das CMS onweb und können sofort für jedes beliebige Thema genutzt werden. Selbstverständlich sind alle Vorlagen responsive, d.h. für Handy und Tablet angepasst. Jede Vorlage kann auf unserer Webseite getestet werden. Erhältlich sind sie über unseren Shop per Sofortdownload.

    Einbau in bestehende Webseiten

    In vorhandene Internetseiten bauen wir das CMS gern ein, passen von Hand den Code der Seiten auch responsive an. Kosten entstehen ja nach Umfang und Arbeitsaufwand. Sprechen Sie uns an.

    http://www.cms-onweb.de

    Für Rückfragen und Anfragen für Webdesigner stehen wir gern zur Verfügung.

      1. Das hat nichts mit Größe zu tun, mir drängt sich da eher der Verdacht auf es gibt da engere Verbindungen.
        Sonst dürfte so etwas garnicht gehen.
        Dr.Web als als Merketingplattform und Steigbügelhalter für Möchtegernentwickler.
        Muss ich nicht haben.

      2. Mir scheint, du hast das was missverstanden. Michaels Hinweis bezog sich auf den abgegebenen Kommentar, nicht auf den Beitag als solchen. Der ist natürlich nicht werblich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.