Dieter Petereit 12. MĂ€rz 2018

2018: Das sind die Trends in Webdesign und Webentwicklung

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

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.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

9 Kommentare

  1. Ein feiner Beitrag, allerdings geht mir (gestandener Webentwickler seit 20 Jahren – Dr.Web Leser der ersten Stunde) diese Uniformiertheit der liquiden Layouts langsam richtig auf den Senkel. Die hier aufgelisteten Trends sind fĂŒr mich nur verzweifelte Versuche aus dem seit Jahren gehypten Einheitsbrei wenigstens etwas herauszukommen. Das Web auf allen Devices funktionieren soll ist ja allen langr klar aber warum so dermaßen langweilig und bechnitten? Warum ohne fette Gestaltung wenn es zum Thema passt? Warum z.B. ohne Grunge und Glimmer wenn das Produkt das hergibt? Stört doch das Device nicht! Ladezeit? Jep, auch hier geht es voran und man könnte etwas wagen. FĂŒr mich gibt es nur zwei GrĂŒnde: Das Diktat von Google (wuuuaaah, der Google Score wird schlecht bei zu hoher Ladezeit) und die vielen, vielen Coder die sich wie irre freuen, dass sie nun nicht mehr gestalten mĂŒssen. Oh, Google sagt keine Schatten, oh Goggle sagt nun doch Schatten aber als FlĂ€che – das ist doch echt krass! Hier hat sich eine ganze Branche selbst demontiert, weil sie einen Hype zum Kunden getragen hat, aus dem sie nun nicht mehr rauskommt. So, habe fertig :) Eventuell ist es ja Zeit mal etwas umzudenken? Was meint Ihr?

  2. TatsÀchlich habe ich öfter die im Text erwÀhnte Design gesehen. auch viele Webseiten verwenden Sprachsteuerung. Ich finde es cool, eine Zusammenfassung zu schreiben.

  3. 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.

  4. Danke fĂŒr die gelungene Zusammenfassung und die weiterfĂŒhrenden Links zu den Themen!

Schreibe einen Kommentar

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