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.
-
PowerPoint
Einen bleibenden Eindruck bei den Kollegas hinterlassen.
-
Schriftarten
Charakter zeigen mit Schriftarten, die nicht 08/15 sind.
-
Web Vorlagen
Lass die Arbeit andere machen und bau Dir eine Website im Nu.
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.
Wichtige Links
- Google Material Design Guide
- Material Design für Bootstrap 3
- Ein Überblick über die Elemente des Material Design Theme für Bootstrap 3
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.
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
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.
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.
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.
Ein Beispiel von gut umgesetzten 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.
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.
Wichtige Links
- Create beautiful photo narratives – Exposure
- Mysterium erklärt: Das sind Ghost-Buttons – und so schön können sie sein
- 260+ High-Res Free Blurred Backgrounds for Websites, Apps & Wallpapers
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.
Mobile portrait (320×480)
Wichtige Links
- 7 Website Design Trends To Watch In 2015
- Smashing Magazine — For Professional Web Designers and Developers
- Prioritizing Performance in Responsive Design
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.
Wichtige Links
- How to Use Custom Fonts with @font-face on WordPress
- 2015 Web Typography Trends to Try with Free Google Fonts
- Google Fonts
„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.
Wichtige Links
- WHY CARDS ARE THE FUTURE OF THE WEB
- Twitter Cards
- Google Now – Die richtigen Informationen zur richtigen Zeit
Mobile Webdesign-Trends
Hier noch einige Trends zur Zukunft des mobilen Webdesigns.
- Wearable & Smart Objects
- Sicherheit und Privatsphäre
- Android First Strategie (80% Weltweit)
- Mobile Zahlungssysteme
- Verbundene Gesundheitssysteme (zum Beispiel Google Fit oder Apple Health)
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
- Google Material Design Guide
- Material Design für Bootstrap 3
- Ein Überblick über die Elemente des Material Design Theme für Bootstrap 3
- Web Trend 2015
- 16 superb websites with video backgrounds
- Spotify
- mediaBOOM Agency
- The rise of mobile apps and the decline of the open web — a threat or an over-reaction?
- The Bright Future of Car Sharing
- Improve your websites with microinteraction
- Macaw: The Code-Savvy Web Design Tool
- Choose a website builder: 13 top tools
- Create beautiful photo narratives – Exposure
- Mysterium erklärt: Das sind Ghost-Buttons – und so schön können sie sein
- 260+ High-Res Free Blurred Backgrounds for Websites, Apps & Wallpapers
- 7 Website Design Trends To Watch In 2015
- Smashing Magazine — For Professional Web Designers and Developers
- Prioritizing Performance in Responsive Design
- How to Use Custom Fonts with @font-face on WordPress
- 2015 Web Typography Trends to Try with Free Google Fonts
- Google Fonts
- WHY CARDS ARE THE FUTURE OF THE WEB
- Twitter Cards
- Google Now – Die richtigen Informationen zur richtigen Zeit
- Mobile Trends for 2015
- 5 Important Design Principles for Apple Watch Apps
- Google Fit
- Apple Health
(dpe)
13 Antworten auf „Blick in die Glaskugel: die ultimativen Webdesign-Trends 2015“
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!
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.
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.
Keine Sorge…
Das ist ein ausgezeichneter Artikel, dr.web. Vielen Dank!
Sehr informativer und nett zusammengefasster Artikel. Danke
„Infografiken werden durch interaktive Webgrafiken ersetzt werden“ ??
Starre Bilder werden durch dynamische Bilder ersetzt. Einfacher verständlich?
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
Die Hero Bereiche kenne ich nicht, gibt’s da mehr Infos dazu?