Webdesign Trends 2015

Seitdem internetfähige Smartphones und Tablets den Markt eroberten, hat sich die digitale Welt rasant verändert. Die Internetnutzung war fortan nicht mehr an eine Telefondose oder einen Routerstandort gebunden, sondern wurde mobil. Der Siegeszug der Touch-Displays begann. Diese Entwicklung beeinflusste nicht nur das Design von Websites, sondern auch Optik und Bedienung der marktbeherrschenden, für Desktops entwickelten Betriebssystemoberfläche Windows. Immer zahlreicher werdende Displayformate mobiler Geräte verlangten nach adäquaten Darstellungsmöglichkeiten. Es war der Beginn einer Entwicklung, die zu dem führen sollte, was wir heute Responsive Webdesign nennen.

Der mobile Trend bei der Internetnutzung wird auch im Jahr 2015 andauern, wenngleich die Zuwachsraten bei Mobilgeräten nicht mehr ganz so hoch sein werden wie in den Jahren zuvor. Dementsprechend wird dieser Trend beim Webdesign weiterhin eine hohe Priorität genießen. Gleich, ob Flat-Design, One-Page-Design oder Parallax Scrolling – die Anforderungen der mobilen Nutzer im Hinblick auf die Usability von Websites bestimmen deren Erscheinungsbild. Hierbei dürfen allerdings die Desktop- und Notebook-Nutzer keinesfalls vernachlässigt werden, denn auch sie erwarten, dass sich Websites auch künftig mit Maus und Tastatur noch flüssig bedienen lassen.

Ich haben die wichtigsten Webdesign Trends für 2015 einmal kurz zusammengestellt.

• Parallax Scrolling im Webdesign
• Flat Design
• Infinite Scrolling und One-Page-Design
• Fullscreen-Background Fotos und Videos
• Individuelle Typographie
• Modern Metro

Parallax Scrolling im Webdesign

Parallax Scrolling zählt zu den wichtigsten Webdesign Trends des Jahres 2014. Auch in 2015 wird diese Technik, bei der sich durch unterschiedlich schnell bewegende Ebenen beim Betrachter den Eindruck von Tiefe erzeugen, eine wichtige Rolle spielen. Nah wirkende Objekte scheinen sich schneller zu bewegen als solche, die weiter entfernt sind und umgekehrt. Jeder, der in einem fahrenden Auto oder Zug aus dem Fenster schaut, kennt diesen Effekt, bei dem nahe Häuser nur noch schemenhaft wahrgenommen werden, weil sie während der Fahrt zu schnell vorbeiziehen. Entfernte Silhouetten, Berge oder Wälder scheinen hingegen stehen zu bleiben.

Diese Bewegungsparallaxe kennt man von Videogames, bei denen sich Objekte im Vordergrund schneller zu bewegen scheinen als Objekte im Hintergrund. Ähnlich verhält es sich mit Websites, die Parallax Scrolling unterstützen. Sie erfreuen sich bereits seit 2011 einer wachsenden Popularität. Dem Betrachter zeigen sich mehrere Ebenen, die unabhängig voneinander scrollen. Das wirkt so, als würden sich auf unterschiedlichen Layern liegende Objekte untereinander verschieben. Die Umsetzung dieser Effekte wurde mit der Einführung von HTML5 sowie CSS3 wesentlich vereinfacht, weil diese Sprachen Parallax Scrolling begünstigen.

Die Technik hat vor allem im Bereich Marketing viel Potenzial, weil sie durch animierte Effekte das beliebte Storytelling unterstützt, Aufmerksamkeit erzeugt und anders als beispielsweise Flash-Animationen ohne ressourcenfressende, die Performance killende Plug-ins auskommt. Die Effekte, die sich mit Parallax Scrolling erzielen lassen sind vielfältig. Von vertikalen bis horizontalen Scrolleffekten bis zu Mischformen, bei der die Seite nach unten gescrollt und ein Bildschirmbereich währenddessen seitlich wegscrollt, reicht das Spektrum. Es können auch komplette Seiteninhalte während des Scrollens aus verschiedenen Richtungen so eingeblendet werden, dass die komplette Website als einzige Animation erscheint. Wie auch immer man Parallax Scrolling verwendet, es ist eine mächtige Technik, mit der man Besucher tief beeindrucken kann.

Auf der Website von Matthew Wagerfield kann man sich die Javascript Datei parallax.js herunterladen und den Parallax-Effekt auf seiner eigenen Website einbauen.

Flat Design

Keine andere Windows-Version hat ihr Erscheinungsbild zur Vorgängerversion so stark verändert wie Windows 8, bei der Flat Design auf breiter Front Einzug hielt. Dieser anfänglich als Metro-Design, später als Modern UI (User Interface) bezeichnete Designstil sollte das Look-and-Feel von Windows revolutionieren. In dem Bestreben eine einzige Oberfläche für alle Geräte zu schaffen, hatte Microsoft die Rechnung allerdings ohne die eingefleischten Desktop-Fans gemacht. Das Ergebnis ist bekannt. Ein Sturm der Entrüstung brach über den Hersteller Microsoft nicht nur wegen des fehlenden Start-Buttons herein.

Windows 8 mit seiner Kacheloberfläche war Microsofts Antwort auf den Tablet-Boom. Das Feld wollte der Marktführer bei PC-Betriebssystemen natürlich nicht dem Wettbewerb allein überlassen und schuf eine Oberfläche, die für Touch-Bildschirme optimiert war. Kacheln und andere großflächige Elemente lassen sich im Modern UI nun mal leichter mit dem Finger antippen. Auch andere Betriebssysteme für Mobilgeräte wie iOS (seit Version 7) von Apple sowie Android (seit Version 4) setzen inzwischen ebenfalls auf Flat Design.

Nicht nur bei den Betriebssystemen für mobile Geräte hat sich dieser Designstandard durchgesetzt, sondern auch bei Apps und Webanwendungen, die auch auf mobilen Geräten laufen sollen. Desktop-Nutzer, die mit ihrem Browser durchs Internet surfen, werden immer häufiger mit diesem Designstandard für Mobilgeräte konfrontiert. Die Seiten enthalten großflächige, farblich voneinander abgegrenzte Elemente, die der Nutzer sowohl mit dem Finger als auch der Maus gut bedienen kann. Anders als bei vielen klassischen Websites, die nicht selten überladen sind, ist beim Flat Design die Informationsmenge auf das Wesentliche reduziert und kommt dadurch den Bedürfnissen von Mobilnutzern entgegen. Klare, minimalistische Strukturen mit möglichst wenig Text sind daher bei immer mehr Webanwendungen zu finden und werden wohl auch in 2015 die Optik von neuen Webanwendungen beherrschen.

Infinite Scrolling und One-Page-Design

Beide Techniken zielen darauf ab, Seitenbesuchern Informationen so nutzerfreundlich wie möglich zu präsentieren, und zwar auf einer einzigen Seite. Das geschieht allerdings aus ganz unterschiedlichen Gründen.

Beim Infinite Scrolling, das wir von Facebook, Pinterest, Tumblr und den Ergebnisseiten der Google Bildersuche her kennen, kann sich der Nutzer endlos Einträge oder Bilder anzeigen lassen. Bei einer umfangreichen Anzahl von Einträgen macht es wenig Sinn, die Einträge auf viele Seiten zu verteilen. Der Nutzer entscheidet selbst, wie viele Informationen er sehen will. Jedes Mal wenn er die Seite runterscrollt, lädt die Seite weitere Einträge dynamisch nach. Diese endlos scrollbaren Seiten sind dann sinnvoll, wenn der Besucher seine Auswahl nicht näher spezifizieren kann oder will oder nicht genau weiß, wonach er eigentlich sucht. Eine Paginierung Tausender Einträge ist unübersichtlich und wenig nutzerfreundlich. Da der Scrollbalken beim Nachladen immer wieder ein Stück nach oben springt und keine Auskunft über die bereits gesichteten Informationen beziehungsweise über das Potenzial noch nicht geladener Einträge abgibt, ist es hilfreich, dies als Prozentangabe oder als grafische Anzeige zu implementieren.

One-Page-Design möchte vermeiden, dass der Nutzer zwischen verschiedenen Seiten hin- und herspringen muss, um das Seitenangebot zu erfassen. Stattdessen durchscrollt er eine endliche und überschaubare Informationsmenge. Diese sollte natürlich logisch aufgebaut sein. Zuerst die Begrüßung, dann die Präsentation des Angebots gefolgt von einer kurzen Vorstellung des Anbieters (über uns) und zum Schluss Kontaktdaten oder ein Kontaktformular. Dieser Webdesign Trend wird immer beliebter und ist insbesondere bei mobilen Websites häufig anzutreffen, weil er auch das Storytelling unterstützt. Die Akzeptanz mobiler Websites steht und fällt mit der Navigation und die sollte so unkompliziert wie möglich sein.

Fullscreen-Background Fotos und Videos

Ein Bild sagt bekanntlich mehr als tausend Worte. Eine Binsenweisheit, die auch für das Webdesign gilt. Wenn der Besucher die Website betritt, zeigt ihm der Fullscreen-Background auf einen Blick, worum es bei dem Webangebot geht. Wie der Name sagt, erstreckt sich das Bild über den gesamten Bildschirm. Handelt es sich bei dem Angebot um ein abbildbares Produkt, fällt die Wahl für ein Motiv nicht schwer. Bei einer Dienstleistung sieht das allerdings anders aus. Wohl kaum würde ein Finanzdienstleister, der ein renditestarkes Produkt bewirbt, ein Bündel Geldscheine als Backgroundmotiv wählen. Das wäre schlicht zu unseriös. Vielmehr würde ein Motiv passen, das eine finanziell sorgenfreie Zukunft suggeriert. Ein Pärchen, das Hand in Hand am Strand flaniert, käme ebenso infrage wie eine Blumenwiese in den Bergen.

Die Qualität des Bildes ist wichtig. Es versteht sich von selbst, dass es sich um ein individuelles Bild handeln sollte und nicht um eines, das einer Online-Bilddatenbank entstammt. Es soll den Besucher nicht nur informieren, sondern auch inspirieren und einladen, sich mit dem Webangebot auseinanderzusetzen. Dazu muss das Bild die Neugierde des Besuchers wecken.

Ein kritischer Punkt ist die Ladezeit. Bilder, die lange laden, werden vor allem mobile Nutzer abschrecken, weil sie hochauflösend sind und viel Datenvolumen verbrauchen. Hier gilt es, den goldenen Mittelweg zwischen hoher Auflösung und technischer Verwendbarkeit zu finden. Auch sollten Bilder den Anforderungen des Responsive Webdesign genügen, damit sie auf jedem Gerät bildschirmfüllend skaliert werden können.

Erst recht kommt es bei Hintergrundvideos, die nach dem Betreten der Website abspielen, auf die Größe an. Für Unternehmen sind sie eine Herausforderung in Bezug auf die dargestellten Inhalte und für Webdesignern hinsichtlich der optimalen Performance auf allen Geräten. Daher dürfen sie nicht zu groß sein. Gelingt dies, sind automatisch ablaufende Background-Videos ein tolles Stilmittel.

Individuelle Typographie

In der Vergangenheit waren Arial, Helvetica und Verdana die meistverwendeten Schriften auf Websites, weil sie auf allen Rechnern verfügbar waren. Diese Zeiten sind allerdings vorbei. Heute sind Webdesigner daher viel experimentierfreudiger. Schriften gibt es schließlich wie Sand am Meer. Wer den individuellen Anspruch seiner Seite allerdings krönen möchte, muss nicht mehr auf Klassiker zurückgreifen, sondern verwendet individuelle Schriftarten, die sich mithilfe von Webfonts erstellen lassen. Eine individuelle Typografie hat viele Vorteile: sie besitzt ein Alleinstellungsmerkmal, unterstreicht den individuellen Anspruch der Website und hat einen Wiedererkennungswert. Ähnlich wie ein Logo, kann sie ein Teil des Corporate Designs werden.

Insbesondere große Schriften, die beim minimalistischen Webdesign immer beliebter werden, können aussagekräftige Akzente setzen. Zum einen erhöhen sie die Usability einer Website und zum anderen machen sie die Website interessanter. Dank CSS lassen sich heutzutage beliebige Schriftsätze einbinden. Der Trend, der in den letzten Jahren einsetze, wird sich auch in 2015 fortsetzen. Der Kreativität des Webdesigners sind fast keine Grenzen gesetzt. Und doch gibt es einen Punkt, den es zu beachten gilt: die Ladezeiten. Hierauf sollte sich die Aufmerksamkeit des Webdesigners richten, denn hier gilt wie bei allen anderen Elementen einer Website: lange Ladezeiten verärgern den Besucher und führen dazu, dass er die Seite vorzeitig verlässt.

Dank Webfonts wie beispielsweise Google Fonts ist individuelle Typografie inzwischen für jeden selbst bei kleinem Budget realisierbar. Firmen sollten daher eigene Schriften für ihren Internetauftritt nutzen.

Modern Metro

Der Design-Trend setzte sich 2013 mit der Veröffentlichung von Windows 8 durch. Charakteristisch bei Modern Metro oder Modern UI sind lebendige, skalierbare Vierecke, die sich in Rastern anordnen lassen. Microsoft setzte dieses neue Designprinzip konsequent in all seinen Produkten um. Nicht nur im Betriebssystem Windows 8, sondern auch in den Office-Produkten, bei Windows Phone, in den Stores und schließlich auch auf den hauseigenen Support-Websites.

Trotz des viel kritisierten Kachellooks von Windows 8, kam dieser Designtrend bei Webentwicklern und –designern gut an und entwickelte sich zu einem Megatrend. Immer mehr Websites nutzen Kacheln zur Gestaltung von Websites. Online-Shops bilden darin Artikel oder Artikelbeschreibungen ab und Filmtheater angesagte Filme. Das moderne und frische Design der Quadrate folgt den Traditionen eines funktionalen, reduzierten Designs.

Die Kacheln sind zweidimensional, haben klar umgrenzte Kanten ohne Schattenumrisse und lassen sich regelmäßig anordnen. Insgesamt wirken sie eher minimalistisch und beschränken Informationen auf das Wesentliche. Das kommt sowohl in den reduzierten Icons zum Ausdruck als auch in den verwendeten Schriftarten. Die Kacheln sind quasi autarke Informationseinheiten, die sich durch Vergrößerung hervorheben und mit anderen Kacheln gruppieren lassen. In Webanwendungen dienen sie nicht nur der schnellen Information, sondern auch zur Navigation. Während ein Tipp oder Klick auf die Kachel in Windows 8 eine App öffnet, bewirkt dieselbe Aktion in der Webanwendung eine Weiterleitung zur Unterseite der Website oder einer anderen Website.

Inzwischen arbeiten viele Seiten wie beispielsweise Instagram oder Pinterest mit Kacheln, in denen sich Fotos mit kurzem Text einbinden lassen. Auch Entwickler von mobilen Apps machen von diesem Designstil Gebrauch. Für 2015 wird Modern Metro auch weiterhin einer der beherrschenden Design-Trends bleiben.