Die 7 wichtigsten Webdesign-Trends für 2017

Chris
Chris
Teilen:
  • facebook share icon
  • twitter share icon
  • linkedin share icon

Wer nicht mit der Zeit geht, geht mit der Zeit. In kaum einer anderen Disziplin gilt das so wie im Webdesign. Deshalb ist es immer gut zu wissen, welche Webdesign-Trends sich grade abzeichnen und wie sie in der Praxis eingesetzt werden können. Wir haben die wichtigsten Trends für Sie vorsortiert und mit Beispielen demonstriert.

Zuerst eine kurze Rückschau auf 2016. Hat dein Grafiker was drauf, greift er zum Verlauf! :) Verläufe sind wieder da. Außerdem: Hamburger auf breiter Front! Und damit ist nicht der zu-jeder-tageszeit-moin-sagende Hanseat gemeint, sondern das Webseitenmenü das mit einem Burger-Icon visualisiert wird. Beides zusammen setzt Spotify im neuesten Relaunch gekonnt ein:

Beispiel: Spotify

Layers bzw. Ebenen waren die Sensation des Jahres 2016, zusammen mit Parallax-Scrolling lassen sich wunderbare dreidimensionale Effekte erzielen:

Beispiel: Lois Jeans

Was uns 2017 erwarten wird

Jetzt Butter bei die Fische! Welche Trends erwarten uns nun dieses Jahr? Webdesign wird sich definitiv nochmal deutlich weiterentwickeln und auch komplexer werden. Der erste Trend ist deshalb ein Versuch, der größer werdenden Komplexität etwas entgegenzusetzen:

User Interface Design Patterns

Um User Interface Design Patterns (abgekürzt UI-Patterns) werden wir nicht herumkommen. Streng genommen sind UI-Patterns kein Designtrend, sondern eher eine Designmethode. UI-Patterns sind Sets von Bedienelementen die wiederholt vorkommen. Dazu zählt beispielsweise ein Karussell, ein Suchfeld, ein Kalender-Picker oder ein Off-Canvas-Menü. Sauber definiert und durch den User gelernt, erleichtern Sie die Interaktion mit Interfaces deutlich. Hier ein Beispiel anhand des UI-Kits von Google Now:

Cards

Ein UI-Pattern, dass sich dieses Jahr mit hoher Wahrscheinlichkeit weiter ausbreiten wird, sind Cards. Cards sind bekannt geworden durch Pinterest. Doch auch Google, Facebook und Twitter machen bereits intensiven Gebrauch davon. Cards sind kleine Content-Sets aus Text, Bildern oder Videos. Damit lassen sich viele Informationen übersichtlich organisieren und umfangreiche Inhalte werden schneller erfassbar. Darüber hinaus fügen sie sich auch noch wunderbar in den Mobile First Ansatz ein, denn sie funktionieren super innerhalb von Rastersystemen im Responsive Design.

SVG-Animationen

Dank HTML5, CSS und Javascript-Frameworks wie jQuery ist es nun einfacher geworden, schöne flowige Animationen umzusetzen und damit den Nutzer auf sich aufmerksam zu machen. Animationen können auf ganz verschiedene Art und Weise eingesetzt werden. Mit kleinen Ladeanimationen kann dem Nutzer die Wartezeit verkürzt und Feedbacks visualisiert werden. Große Full-Screen-Animationen können zusammen mit Parallax-Scrolling Storytelling unterstützen. Manche Animationen machen auch einfach nur gute Laune :) Gezielt eingesetzt kann die gesamte User Experience deutlich dazu gewinnen.

Beispiel: Melanie Da Veid

Mobile First

Mobil First bezeichnet den Designansatz, Websitelayouts und Contents zuerst für mobile Devices zu gestalten und sich erst dann auf größere Screens zu konzentrieren. Der ein oder andere eingefleischte UI-Designer wird jetzt “Alter Hut!” rufen. Aber jetzt mal ernsthaft: in wie vielen Unternehmen wurde das bisher praktiziert? Ehrlich gesagt in den allerwenigsten. Eigentlich unverständlich, wo doch Smartphones und Tablets in der Nutzung des Internets mittlerweile an erster Stelle stehen. In 2016 hat man gemerkt, dass der Mobile First Ansatz (auch dank Google) in vielen Marketingabteilungen diskutiert wird. Es ist damit zu rechnen, dass sich dieser Trend in diesem Jahr weiter fortsetzen wird.

Typografie

Typografie ist ein mächtiges visuelles Medium. Sie kann Persönlichkeit ausstrahlen, Emotionen wecken und dem Look & Feel die richtige Würze geben. Die mittlerweile sehr hohen Bildschirmauflösungen lassen Webfonts noch dazu so richtig crispy aussehen. Zusammen mit Formen und Bildern lassen sich wunderbar Ebeneneffekte realisieren. Besonders fein ist Handlettering wie in diesem Beispiel:

Beispiel: Draft Japan

Es müssen übrigens nicht mal die teuren Schriftensets à la Linotype & Co sein. Auch Google bietet beispielsweise mit Google Fonts die ein oder andere feine Schrift zur kostenlosen Nutzung an. Wir bei der Digitalen Offensive nutzen zum Beispiel die Schrift Roboto Condensed mit dem wir bis jetzt sehr glücklich sind.

Fotografie

Die Königsdisziplin. Fotografie wird immer ihren Platz im Design haben. Zu Recht! Die Nutzer wollen Authentiziät. Sie erkennen Stockphotos wenn sie sie sehen. Designer, die seriösen Markenaufbau betreiben, werden in Zukunft verstärkt Wert auf authentische Bildsprache legen. Stockphotos haben ihre Berechtigung, sie sind günstig und schnell einsetzbar. Aber wenn es um Unternehmensvorstellungen und eine persönliche authentische Ansprache geht, wird eine gut gemachte individuelle Fotografie vom Fotografen immer den besseren Impact erzielen.

 

Beispiel: Le Labo Fragrances

Mutige und kräftige Farben

Keine Frage: in diesem Jahr wird sich der Trend zu mutigen und unkonventionellen Farben und Farbkombinationen weiter fortsetzen. In der Vergangenheit mussten Webdesigner oft noch mit den eingeschränkten „websicheren Farben“ arbeiten. Mittlerweile können alle zur Verfügung stehenden Farben verwendet werden. Davon machte im vergangenem Jahr bereits die ein oder andere Marke Gebrauch. In 2017 wird dieser Trend weiter vorankommen. Zu erkennen ist der Trend zum Beispiel an übersättigten Farben, lebendigeren Farbtönen und Verläufen (Gradients). Mit kräftigeren Farbpaletten lässt sich die Aufmerksamkeit der Nutzer prima auf sich lenken.

Beispiel: HP

Beispiel: Teletype

Nun haben Sie die wichtigsten Trends kennen gelernt. Es gibt natürlich noch ein paar mehr, aber es soll hier darum gehen, die wichtigsten Webdesign-Trends zu beleuchten. Ich hoffe, dass ist gelungen. Abschließend bleibt vielleicht noch zu sagen, dass es nicht darum geht auf Biegen und Brechen einem Trend zu folgen. Es geht darum Trends im Blick zu haben und die richtigen für sich auszuwählen. Vielen Dank fürs Lesen!

Chris
Chris
Teilen:
  • facebook share icon
  • twitter share icon
  • linkedin share icon

Kommentare

08.03.2019 | Becirovic

Ein sehr Info-reicher Text, war interessant zu lesen! Danke weiter so!

23.02.2019 | Webdesign Karlsruhe

Wer nicht mit der Zeit geht, geht mit der Zeit. Toller Artikel! Leider wird das Mobile First Prinzip von den wenigsten Entwicklern richtig umgesetzt…

29.07.2018 | Sascha Schludecker Webdesign Karlsruhe

Fotographie – in der Tat. Ist leider oft schwer umzusetzen aufgrund des nichtvorhandenen Budgets. Authentische Bilder im Webdesign sind kaum wegzudenken bei einer wahrhaft individuellen Website.
Vielen Dank für den Beitrag!

19.02.2018 | Bryn van Nuissenburg

Thank you for this great article! The information is very helpful ????

21.01.2018 | Hasystec

Ich danke Ihnen für den interessanten Artikel. Responsive Webdesign ist heutzutage nicht mehr wegzudenken. Man sollte da auf jeden Fall mit der Zeit gehen.
Beste Grüße

16.09.2017 | Julian

Schön zusammengefasst, Cinemagraphs und animierte Logos sieht man auch öfter bei aktuellen Webdesigns.

12.09.2017 | Lars

Vielen Dank für den tollen Artikel. Es ist wirklich wichtig zeitgemäße Webseiten zu entwerfen und zu gestalten. Heute kommt man auch nicht mehr um das Responsive Design herum.
Mit besten Grüßen,
Lars von http://www.jakoberhard.com

15.07.2017 | IT Masters

Inhaltlich super erklärt! Vielen Dank.

14.05.2017 | MEK Webdesign Karlsruhe

Sehr gelungener Beitrag!

Ich kann dem Inhalt nur zustimmen und vor allem die UI-Patterns wurden hier gut und verständlich beschrieben.

Liebe Grüße und weiter so!

Kommentar schreiben

* Diese Felder sind erforderlich