Blick in die Glaskugel: die ultimativen Webdesign-Trends 2015

Jeden Webworker beschäftigt die Frage, in welche Richtung sich das Webdesign des Jahres 2015 bewegen wird. Denn auch das Design von Webseiten unterliegt einer Mode – und das ist auch gut so. Sonst würde das Internet noch wie in seinen Anfängen in den 1990er Jahren aussehen. Und dieses Design von damals möchte sicher niemand zurückhaben. Wohin wird nun also der Trend im Jahre 2015 gehen? Lassen Sie uns also gemeinsam die Glaskugel anwerfen und einen Blick in Richtung Zukunft wagen.

Die ultimativen Webdesign-Trends für 2015

Webdesign-Trends für 2015 – was wird kommen?

Auf jeden Fall wird Flat-Design auch 2015 nicht zu bremsen sein. Dabei geht es allerdings mehr in Richtung Material-Design, inspiriert vom neuen Android 5.0 „Lollipop“-Design und niedergelegt in den entsprechenden Design-Guidelines aus dem hause Google. Background und Full Screen Videos sind weiterhin interessant und werden vermehrt eingesetzt werden. An Bildformaten könnten sich entweder SVG oder aber das verlustfrei zu komprimierende WebP durchsetzen. Der mobile Trend im Webdesign wird überwiegend in Richtung Wearable und Health (Fitness/Body-Tracking etc.) gehen. Dabei ist von einer Android-First Strategie auszugehen, da Android weltweit circa 80% Marktanteil stellt. Das mobile, responsive Webdesign ist in 2015 immer noch ein Must-Have. Inwieweit es Apps verdrängen wird, oder ob es am Ende selbst durch Apps abgelöst werden wird, ist Spekulationen zugänglich. Apps sind jedenfalls nicht nur ein willkommener Service, sondern pure Benutzerfreundlichkeit, wenn sie gut gemacht sind.

Der Aufstieg von Flat- und Material-Design

Einer der größten Trends in 2014 war zweifellos das Flat-Design. Aufgrund seines einfachen, sauberen und klaren Stils wird es auch in 2015 weiterhin die große Rolle spielen und populär sein. Großen Einfluss auf Flat Design nimmt erkennbar bereits jetzt Googles Vorstellung eines „Material Design“. Dabei handelt es sich um ein Design, welches Google für sein Mobil-Betriebssystem Android implementiert wissen möchte. Das funktioniert ganz erfolgreich, denn nicht nur Android 5.0 „Lollipop“, sondern auch viele Apps erstrahlen bereits im neuen Material Design.

Probieren Sie doch einfach das Material Design-Theme für Bootstrap 3 aus, welches Designern und Entwicklern erlaubt, das Material Design mit jedem Front-End-Framework Ihrer Wahl zu nutzen.

Das Google Material Design für Bootstrap 3

Wichtige Links

Background- und Fullscreen Videos

HTML5-Background-Videos, die im Hintergrund einer Webseite ablaufen, waren bereits in 2014 populär und werden es auch in 2015 sein. Der Grund dafür ist recht simpel: Die Menschen mögen lieber ein Video anschauen, als Text-Artikel zu lesen. Auch ist es wesentlich einfacher, die Geschichte eines Unternehmens in bewegten Bildern zu erzählen und so Emotionen zum Besucher zu transportieren, als über rein statische Text- und Bildelemente. Zwei gute Beispiele für vollflächige Hintergrundvideos sind Spotify und die mediaBOOM Agentur. Weitere Beispiele stellt dieser diesem Artikel zusammen.

Spotify mit Hintergrundvideo

Die mediaBOOM Agentur mit Hintergrundvideo

Wichtige Links

Mobile Apps von Websites und Soziale Netzwerke werden 2015 dominieren

Die klassische Webseite (auch responsiv) wird es in 2015 insgesamt zugunsten der mobilen Apps schwerer haben. Verschiedenen Studien zufolge nutzen immer weniger Menschen zu ihrer Information den Browser, sondern präferieren die mobilen Apps. Websites, die bereits heute Ihre Apps im Google Play Store und im Apple-Store anbieten, können daher in 2015 im Vorteil gegenüber ihren Konkurrenten sein, die nur eine statische Website oder eine responsive Ansicht ihrer Webseite anbieten. Eine App ist im Gegensatz zu einer responsiven Website im ganzen Handling komfortabler. Es wird spannend, zu sehen, inwieweit sich der Trend fortsetzt. Der Zuwachs wurde bereits im Vergleich zwischen 2013 und 2014 ziemlich deutlich.

Apps versus Web

apps-vs-web

Die Beschäftigung mit und das Posten auf Sozialen Netzwerken wie Facebook und Twitter wird weiterhin zunehmen, so dass diese eher zur ultimativen Nachrichten- und Informationsquelle werden.

app-time-spent

Wichtige Links

The rise of mobile apps and the decline of the open web — a threat or an over-reaction?

Infografiken werden durch interaktive Webgrafiken ersetzt werden

Die Zeit der „normalen“ Infografiken wird sich dem Ende zuneigen. Im Vormarsch sind eindeutig die interaktiven Webgrafiken, die optisch und erzählerisch ansprechender sind. Sie ermöglichen es den Benutzern, mit der zur Verfügung gestellten Information physisch zu interagieren, dies schafft ein einprägsameres Ergebnis. Die Zukunft des Car-Sharing verfügt über eine wunderschön aufbereitete interaktive Webgrafik, mit der ein Besucher interagieren und davon lernen kann.

future-of-car-sharing

Wichtige Links

The Bright Future of Car Sharing

Mikro-Interaktionen

Mikro-Interaktionen (zu gut Englisch: micro interactions) werden ein weiterer, beliebter und großer Trend in 2015 sein. Micro-Interactions sind etwa Buttons, die kleine Aufgaben erfüllen, wie zum Beispiel das Raten eines Songs, das Ändern einer Einstellung oder das Liken eines Artikels. Sie fördern das Engagement der Besucher und werden verwendet, um eine Website noch einnehmender zu gestalten.

Infografik Micro-interactions

Ein Beispiel von gut umgesetzten Mikro-Interaktionen:

Ein Beispiel gut umgesetzter Mikro-Interaktionen

Wichtige Links

Improve your websites with microinteractions

Mehr Webseiten – weniger Coden

Das manuelle Coden (oder Entwickeln) von Webseiten mittels Auszeichnungs- und Programmiersprachen nimmt ab, da immer mehr visuelle WYSIWYG (What you see is what you get) Editoren (mal wieder) auf den Markt drängen. Somit wird es auch Menschen ohne HTML- und CSS-Kenntnisse möglich, ansprechende Websites zu erstellen. Selbstverständlich kann darüber debattiert werden, ob dies die richtige Richtung ist. Denn schliesslich hat das Web davon mehr als profitiert, dass visuelle Editoren im letzten Jahrzehnt kaum genutzt wurden.

Ein brauchbarer visueller Editor wären zum Beispiel Macaw. Jedoch gibt es noch einige mehr, hier eine Liste von 13 visuellen Editoren. Bei Dr. Web haben wir Webydo und Wix  schon desöfteren näher betrachtet.

macaw-editor

Wichtige Links

Große Bilder und Videos werden die Slider ablösen

Große sogenannte „Hero„-Bereiche mit großen (zum Teil unscharfen) Bildern oder Videos werden immer mehr Karussels und Slider ablösen. Ghost-Buttons sind ebenfalls ein Riesen-Trend, der eng mit großen Bildern und Background-Videos verzahnt ist.

Exposure

Wichtige Links

Responsive Design mit besserer Performance

Auch wenn Responsive Design schon bald von mobilen Apps überholt sein könnte, so ist es doch ein Must-Have in 2015 und darüber hinaus. Jedoch sollte man in diesem Jahr viel mehr Wert auf die Performance einer responsiven Website legen. Grundsätzlich sollten nur die wirklich notwendigen Elemente in die mobile Ansicht übernommen und diese dann auch auf Leistung optimiert werden. Ein hervorragendes Beispiel ist die mobile Ansicht des Smashing Magazine. Nur die essentiellen Bereiche wurden übernommen und dann auf Ladegeschwindigkeit optimiert.

smashingmagazine

Mobile portrait (320×480)

smashingmagazine-mobile

Wichtige Links

Funktionelle Webdesign-Typographie

Unterschiedliche Bildschirmauflösungen und Medien, mit denen Webseiten konsumiert werden, erfordern eine bessere, vielseitigere und ansprechendere Typographie. Designer nutzen bereits seit längerem Webfonts wie die umfassenden Google Fonts. In 2015 werden wir noch mehr und größere Fonts, insgesamt mehr Vielfalt zu sehen bekommen. Entdecken Sie in der folgenden Liste die perfekte Verwendung der beliebten Google-Web-Fonts.

Perfekte Verwendung von Google-Web-Fonts

Wichtige Links

„Karten“-Designs werden immer wichtiger

Ein weiterer, durch den Anstieg der mobilen Nutzung des Internets beeinflusster Trend, ist die zunehmende Popularität des sogenannten Card-Designs. Card-Design ist die Unterteilung einer Webseite in „mundgerechte“ Karten. Diese Karten enthalten im Wesentlichen kurze Texte, Benutzernamen, ein Bild und/oder einige Share-Buttons. Dieses Design-Format hat die Social-Media-Website Pinterest berühmt gemacht. Es wurde seither zügig von vielen Designern adaptiert. Mittlerweile haben auch Twitter und Google (für Google Now) dieses Design aufgegriffen.

Das Cards-Design von Google Now

Wichtige Links

Mobile Webdesign-Trends

Hier noch einige Trends zur Zukunft des mobilen Webdesigns.

wearable

Wichtige Links

Fazit

Auch wenn vielleicht nicht alle unserer vorhergesagten Webdesign-Trends eintreffen, so war und ist das Web doch immer in Bewegung und entwickelt sich beständig weiter. Jeden Tag kommen neue und spannende Dinge hinzu. Scheuen Sie sich also nicht, einige davon einmal auszuprobieren und anzuwenden. Denn nur dann kann das Internet immer interessanter, spannender und benutzerfreundlicher werden. Analysieren Sie ruhig, wieviel Einfluss diese neuen Trends auf Ihr Unternehmen haben werden und was Sie auf Grundlage dieser neuen Kenntnisse erreichen können. Was ist Ihr persönlicher Supertrend 2015?

Links zum Beitrag

(dpe)

Ioanni Mitsakis ist Frontend-Entwickler bei einem großen europäischen Automobilzulieferer und dort verantwortlich für die Gestaltung der UIs der diversen internen Online-Tools, ohne deren Hilfe die Zusammenarbeit über Landesgrenzen hinweg aus heutiger Sicht undenkbar erscheint.

Sortiert nach:   neueste | älteste | beste Bewertung
Vladimir
Gast
1 Jahr 4 Monate her

Die Hero Bereiche kenne ich nicht, gibt’s da mehr Infos dazu?

Marcus
Gast
1 Jahr 4 Monate her

Das Coding abnimmt, ist richtig. Jedoch nicht ganz so stark wie man vielleicht denkt. WYSIWYG Editoren sind hier viel zu spezifisch, denn eigentlich sind es die CMS, JS Librarys und Frameworks – aber vom Coding selbst wird sich auch 2015 meiner Meinung nach nichts ändern. Für viele, wie auch mich, sind fertige CMS ein Hindernis bei der Umsetzung einer wirklich großen Seite. Eher werden kleiner „Tools“ zunehmen, als eigenständige Webprojekte.
Sonst aber ein toller Artikel. Das bestätigt auch meine Ansichtsweise für 2015 großteils.

lg, Marcus

Oliver von Weise
Gast
1 Jahr 4 Monate her

„Infografiken werden durch interaktive Webgrafiken ersetzt werden“ ??

Dieter Petereit
Dr. Web
1 Jahr 4 Monate her

Starre Bilder werden durch dynamische Bilder ersetzt. Einfacher verständlich?

trackback

[…] ausführlichen Bericht über die kommenden Web-Trends für das Jahr 2015 gibt es auf der Seite von http://www.drweb.de zu lesen. Die Infografik bietet dazu einen schnellen […]

OMU2014
Gast
1 Jahr 3 Monate her

Sehr informativer und nett zusammengefasster Artikel. Danke

Herr Samstag
Gast
Herr Samstag
1 Jahr 2 Monate her

Das ist ein ausgezeichneter Artikel, dr.web. Vielen Dank!

trackback

[…] aussehen, als seien sie jeweils ein Teil des großen Ganzen, das genau an diese Stelle gehört. Ein klares Design muss nicht minimalistisch sein, jedoch macht genau das die Anziehung zwischen den bunten Elementen […]

eule
Gast
eule
1 Jahr 1 Monat her

Sobald drweb nur als App zu konsumieren ist, werde ich mich verabschieden. Eine APPlikation bitte nur wenn es eine Applikation ist. Der Trend wird hoffentlich sein, dass Websites auch in Zukunft einfach nur vernünftig im Browser genutzt werden können.

Michael Dobler
Dr. Web
1 Jahr 1 Monat her

Keine Sorge…

Patrick Zach
Gast
1 Jahr 26 Tage her

Sehr interessanter Artikel, ich bin auch gespannt, wie sehr sich die längst totgesagten gifs wieder integrieren werden. Auch Seiten bei denen viel durch Scrolling interagiert wird, waren die letzten Jahre schon sehr im Trend, ich bin der Meinung, dass dies nach wie vor der Fall sein wird.

Martin Kleinheinz
Gast
11 Monate 7 Tage her

Ein mehr als ausführlicher Artikel zu den Webdesign Trends 2015. Gut zusammengefasst. Ich finde der wichtigste Punkt ist die mobile Freundlichkeit. Viele Grüße!

trackback

[…] das der Arbeits-Workflow genauso verläuft. Doch leider ist das viel zu häufig nicht der Fall. Der Designer entwirft das Layout, arbeitet an neuen Buttons oder an einer wirklich schönen Typografie. Der Webentwickler hingegen […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen