Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Ioanni Mitsakis 17. Januar 2015

Blick in die Glaskugel: die ultimativen Webdesign-Trends 2015

Die ultimativen Webdesign-Trends für 2015 (+ Vorhersage)

Jeden Webworker beschäf­tigt die Frage, in wel­che Richtung sich das Webdesign des Jahres 2015 bewe­gen wird. Denn auch das Design von Webseiten unter­liegt einer Mode – und das ist auch gut so. Sonst wür­de das Internet noch wie in sei­nen Anfängen in den 1990er Jahren aus­se­hen. Und die­ses Design von damals möch­te sicher nie­mand zurück­ha­ben. Wohin wird nun also der Trend im Jahre 2015 gehen? Lassen Sie uns also gemein­sam die Glaskugel anwer­fen 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 brem­sen sein. Dabei geht es aller­dings mehr in Richtung Material-Design, inspi­riert vom neu­en Android 5.0 “Lollipop”-Design und nie­der­ge­legt in den ent­spre­chen­den Design-Guidelines aus dem hau­se Google. Background und Full Screen Videos sind wei­ter­hin inter­es­sant und wer­den ver­mehrt ein­ge­setzt wer­den. An Bildformaten könn­ten sich ent­we­der SVG oder aber das ver­lust­frei zu kom­pri­mie­ren­de WebP durch­set­zen. Der mobi­le Trend im Webdesign wird über­wie­gend in Richtung Wearable und Health (Fitness/Body-Tracking etc.) gehen. Dabei ist von einer Android-First Strategie aus­zu­ge­hen, da Android welt­weit cir­ca 80% Marktanteil stellt. Das mobi­le, respon­si­ve Webdesign ist in 2015 immer noch ein Must-Have. Inwieweit es Apps ver­drän­gen wird, oder ob es am Ende selbst durch Apps abge­löst wer­den wird, ist Spekulationen zugäng­lich. Apps sind jeden­falls nicht nur ein will­kom­me­ner Service, son­dern pure Benutzerfreundlichkeit, wenn sie gut gemacht sind.

Der Aufstieg von Flat- und Material-Design

Einer der größ­ten Trends in 2014 war zwei­fel­los das Flat-Design. Aufgrund sei­nes ein­fa­chen, sau­be­ren und kla­ren Stils wird es auch in 2015 wei­ter­hin die gro­ße Rolle spie­len und popu­lär sein. Großen Einfluss auf Flat Design nimmt erkenn­bar bereits jetzt Googles Vorstellung eines “Material Design”. Dabei han­delt es sich um ein Design, wel­ches Google für sein Mobil-Betriebssystem Android imple­men­tiert wis­sen möch­te. Das funk­tio­niert ganz erfolg­reich, denn nicht nur Android 5.0 “Lollipop”, son­dern auch vie­le Apps erstrah­len bereits im neu­en Material Design.

Probieren Sie doch ein­fach das Material Design-Theme für Bootstrap 3 aus, wel­ches Designern und Entwicklern erlaubt, das Material Design mit jedem Front-End-Framework Ihrer Wahl zu nut­zen.

Das Google Material Design für Bootstrap 3

Wichtige Links

Background- und Fullscreen Videos

HTML5-Background-Videos, die im Hintergrund einer Webseite ablau­fen, waren bereits in 2014 popu­lär und wer­den es auch in 2015 sein. Der Grund dafür ist recht sim­pel: Die Menschen mögen lie­ber ein Video anschau­en, als Text-Artikel zu lesen. Auch ist es wesent­lich ein­fa­cher, die Geschichte eines Unternehmens in beweg­ten Bildern zu erzäh­len und so Emotionen zum Besucher zu trans­por­tie­ren, als über rein sta­ti­sche Text- und Bildelemente. Zwei gute Beispiele für voll­flä­chi­ge Hintergrundvideos sind Spotify und die mediaBOOM Agentur. Weitere Beispiele stellt die­ser die­sem Artikel zusam­men.

Spotify mit Hintergrundvideo

Die mediaBOOM Agentur mit Hintergrundvideo

Wichtige Links

Mobile Apps von Websites und Soziale Netzwerke werden 2015 dominieren

Die klas­si­sche Webseite (auch respon­siv) wird es in 2015 ins­ge­samt zuguns­ten der mobi­len Apps schwe­rer haben. Verschiedenen Studien zufol­ge nut­zen immer weni­ger Menschen zu ihrer Information den Browser, son­dern prä­fe­rie­ren die mobi­len Apps. Websites, die bereits heu­te Ihre Apps im Google Play Store und im Apple-Store anbie­ten, kön­nen daher in 2015 im Vorteil gegen­über ihren Konkurrenten sein, die nur eine sta­ti­sche Website oder eine respon­si­ve Ansicht ihrer Webseite anbie­ten. Eine App ist im Gegensatz zu einer respon­si­ven Website im gan­zen Handling kom­for­ta­bler. Es wird span­nend, zu sehen, inwie­weit sich der Trend fort­setzt. Der Zuwachs wur­de bereits im Vergleich zwi­schen 2013 und 2014 ziem­lich deut­lich.

Apps ver­sus Web

apps-vs-web

Die Beschäftigung mit und das Posten auf Sozialen Netzwerken wie Facebook und Twitter wird wei­ter­hin zuneh­men, so dass die­se eher zur ulti­ma­ti­ven Nachrichten- und Informationsquelle wer­den.

app-time-spent

Wichtige Links

The rise of mobi­le apps and the decli­ne of the open web — a thre­at or an over-reac­tion?

Infografiken werden durch interaktive Webgrafiken ersetzt werden

Die Zeit der “nor­ma­len” Infografiken wird sich dem Ende zunei­gen. Im Vormarsch sind ein­deu­tig die inter­ak­ti­ven Webgrafiken, die optisch und erzäh­le­risch anspre­chen­der sind. Sie ermög­li­chen es den Benutzern, mit der zur Verfügung gestell­ten Information phy­sisch zu inter­agie­ren, dies schafft ein ein­präg­sa­me­res Ergebnis. Die Zukunft des Car-Sharing ver­fügt über eine wun­der­schön auf­be­rei­te­te inter­ak­ti­ve Webgrafik, mit der ein Besucher inter­agie­ren und davon ler­nen kann.

future-of-car-sharing

Wichtige Links

The Bright Future of Car Sharing

Mikro-Interaktionen

Mikro-Interaktionen (zu gut Englisch: micro inter­ac­tions) wer­den ein wei­te­rer, belieb­ter und gro­ßer Trend in 2015 sein. Micro-Interactions sind etwa Buttons, die klei­ne Aufgaben erfül­len, wie zum Beispiel das Raten eines Songs, das Ändern einer Einstellung oder das Liken eines Artikels. Sie för­dern das Engagement der Besucher und wer­den ver­wen­det, um eine Website noch ein­neh­men­der zu gestal­ten.

Infografik Micro-interactions

Ein Beispiel von gut umge­setz­ten Mikro-Interaktionen:

Ein Beispiel gut umgesetzter Mikro-Interaktionen

Wichtige Links

Improve your web­sites with micro­in­ter­ac­tions

Mehr Webseiten – weniger Coden

Das manu­el­le Coden (oder Entwickeln) von Webseiten mit­tels Auszeichnungs- und Programmiersprachen nimmt ab, da immer mehr visu­el­le WYSIWYG (What you see is what you get) Editoren (mal wie­der) auf den Markt drän­gen. Somit wird es auch Menschen ohne HTML- und CSS-Kenntnisse mög­lich, anspre­chen­de Websites zu erstel­len. Selbstverständlich kann dar­über debat­tiert wer­den, ob dies die rich­ti­ge Richtung ist. Denn schliess­lich hat das Web davon mehr als pro­fi­tiert, dass visu­el­le Editoren im letz­ten Jahrzehnt kaum genutzt wur­den.

Ein brauch­ba­rer visu­el­ler Editor wären zum Beispiel Macaw. Jedoch gibt es noch eini­ge mehr, hier eine Liste von 13 visu­el­len Editoren. Bei Dr. Web haben wir Webydo und Wix  schon desöf­te­ren näher betrach­tet.

macaw-editor

Wichtige Links

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

Große soge­nann­te “Hero”-Bereiche mit gro­ßen (zum Teil unschar­fen) Bildern oder Videos wer­den immer mehr Karussels und Slider ablö­sen. Ghost-Buttons sind eben­falls ein Riesen-Trend, der eng mit gro­ßen Bildern und Background-Videos ver­zahnt ist.

Exposure

Wichtige Links

Responsive Design mit besserer Performance

Auch wenn Responsive Design schon bald von mobi­len Apps über­holt sein könn­te, so ist es doch ein Must-Have in 2015 und dar­über hin­aus. Jedoch soll­te man in die­sem Jahr viel mehr Wert auf die Performance einer respon­si­ven Website legen. Grundsätzlich soll­ten nur die wirk­lich not­wen­di­gen Elemente in die mobi­le Ansicht über­nom­men und die­se dann auch auf Leistung opti­miert wer­den. Ein her­vor­ra­gen­des Beispiel ist die mobi­le Ansicht des Smashing Magazine. Nur die essen­ti­el­len Bereiche wur­den über­nom­men und dann auf Ladegeschwindigkeit opti­miert.

smashingmagazine

Mobile por­trait (320x480)

smashingmagazine-mobile

Wichtige Links

Funktionelle Webdesign-Typographie

Unterschiedliche Bildschirmauflösungen und Medien, mit denen Webseiten kon­su­miert wer­den, erfor­dern eine bes­se­re, viel­sei­ti­ge­re und anspre­chen­de­re Typographie. Designer nut­zen bereits seit län­ge­rem Webfonts wie die umfas­sen­den Google Fonts. In 2015 wer­den wir noch mehr und grö­ße­re Fonts, ins­ge­samt mehr Vielfalt zu sehen bekom­men. Entdecken Sie in der fol­gen­den Liste die per­fek­te Verwendung der belieb­ten Google-Web-Fonts.

Perfekte Verwendung von Google-Web-Fonts

Wichtige Links

Karten”-Designs werden immer wichtiger

Ein wei­te­rer, durch den Anstieg der mobi­len Nutzung des Internets beein­fluss­ter Trend, ist die zuneh­men­de Popularität des soge­nann­ten Card-Designs. Card-Design ist die Unterteilung einer Webseite in “mund­ge­rech­te” Karten. Diese Karten ent­hal­ten im Wesentlichen kur­ze Texte, Benutzernamen, ein Bild und/oder eini­ge Share-Buttons. Dieses Design-Format hat die Social-Media-Website Pinterest berühmt gemacht. Es wur­de seit­her zügig von vie­len Designern adap­tiert. Mittlerweile haben auch Twitter und Google (für Google Now) die­ses Design auf­ge­grif­fen.

Das Cards-Design von Google Now

Wichtige Links

Mobile Webdesign-Trends

Hier noch eini­ge Trends zur Zukunft des mobi­len Webdesigns.

wearable

Wichtige Links

Fazit

Auch wenn viel­leicht nicht alle unse­rer vor­her­ge­sag­ten Webdesign-Trends ein­tref­fen, so war und ist das Web doch immer in Bewegung und ent­wi­ckelt sich bestän­dig wei­ter. Jeden Tag kom­men neue und span­nen­de Dinge hin­zu. Scheuen Sie sich also nicht, eini­ge davon ein­mal aus­zu­pro­bie­ren und anzu­wen­den. Denn nur dann kann das Internet immer inter­es­san­ter, span­nen­der und benut­zer­freund­li­cher wer­den. Analysieren Sie ruhig, wie­viel Einfluss die­se neu­en Trends auf Ihr Unternehmen haben wer­den und was Sie auf Grundlage die­ser neu­en Kenntnisse errei­chen kön­nen. Was ist Ihr per­sön­li­cher Supertrend 2015?

Links zum Beitrag

(dpe)

Ioanni Mitsakis

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.

10 Kommentare

  1. Ein mehr als aus­führ­li­cher Artikel zu den Webdesign Trends 2015. Gut zusam­men­ge­fasst. Ich fin­de der wich­tigs­te Punkt ist die mobi­le Freundlichkeit. Viele Grüße!

  2. Sehr inter­es­san­ter Artikel, ich bin auch gespannt, wie sehr sich die längst tot­ge­sag­ten gifs wie­der inte­grie­ren wer­den. Auch Seiten bei denen viel durch Scrolling inter­agiert wird, waren die letz­ten Jahre schon sehr im Trend, ich bin der Meinung, dass dies nach wie vor der Fall sein wird.

  3. Sobald drweb nur als App zu kon­su­mie­ren ist, wer­de ich mich ver­ab­schie­den. Eine APPlikation bit­te nur wenn es eine Applikation ist. Der Trend wird hof­fent­lich sein, dass Websites auch in Zukunft ein­fach nur ver­nünf­tig im Browser genutzt wer­den kön­nen.

  4. Das ist ein aus­ge­zeich­ne­ter Artikel, dr.web. Vielen Dank!

  5. Sehr infor­ma­ti­ver und nett zusam­men­ge­fass­ter Artikel. Danke

  6. Infografiken wer­den durch inter­ak­ti­ve Webgrafiken ersetzt wer­den” ??

  7. Das Coding abnimmt, ist rich­tig. Jedoch nicht ganz so stark wie man viel­leicht denkt. WYSIWYG Editoren sind hier viel zu spe­zi­fisch, denn eigent­lich sind es die CMS, JS Librarys und Frameworks – aber vom Coding selbst wird sich auch 2015 mei­ner Meinung nach nichts ändern. Für vie­le, wie auch mich, sind fer­ti­ge CMS ein Hindernis bei der Umsetzung einer wirk­lich gro­ßen Seite. Eher wer­den klei­ner “Tools” zuneh­men, als eigen­stän­di­ge Webprojekte.
    Sonst aber ein tol­ler Artikel. Das bestä­tigt auch mei­ne Ansichtsweise für 2015 groß­teils.

    lg, Marcus

  8. Die Hero Bereiche ken­ne ich nicht, gibt’s da mehr Infos dazu?

Schreibe einen Kommentar

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