Webdesign Trends 2014

Jetzt, während der Winter langsam im Anmarsch ist und sich das Jahr dem Ende zuneigt, ist es wieder Zeit die Webdesign Trends für das nächste Jahr vorzustellen. 2014 wird ein grosses Jahr für die Webdesign Branche. Neben der Tatsache, dass sich die Art wie man Webseiten programmiert und gestaltet vollkommen im Umbruch befindet, wird sich im nächsten Jahr die Nutzung des Internets weiter in Richtung mobile Nutzung und komplett neue Medien bewegen. Analysten rechnen damit, dass 2014 erstmals mehr Tablets als PCs oder Notebooks (inkl. Ultrabooks) verkauft werden. Ausserdem steht die kommerzielle Veröffentlichung von Google Glass und weiteren „Watch-Projekten“ bevor. Selbstverständlich wird es daher noch wichtiger, dass eine Webseite bzw. Web-App auf allen Endgeräten, auch diejenigen, die noch gar nicht offiziell veröffentlicht wurden funktioniert. Somit wäre der erste Trend bereits gefunden:

Full Responsive
Dass sich Responsive Design durchgesetzt hat, können wir heute täglich im Internet bestaunen, doch da in der Anfangsphase einer neuen Technik immer die Standards fehlen, gibt es bessere und schlechtere Beispiele für Responsive Design. Sehr viele Entwickler und Webdesigner bedienen bzw. bedienten sich umfangreicher JavaScript-Lösungen, um das Ziel zu erreichen oder es wurden nur die absoluten Schnittpunkte der Endgeräte berücksichtig, was dazu führt, dass die Seite „springt“ wenn wir das Browserfenster verkleinern. Dies führt dazu, dass im ersten Fall keine Responsive-Version der Webseite zur Verfügung steht, wenn aus irgendwelchen Gründen JavaScript deaktiviert ist und im zweiten Fall dazu, dass Geräte mit Zwischenformaten nicht unterstützt werden und das Ganze auch ziemlich unschön aussieht.

Daher wird es sich wahrscheinlich durchsetzen, dass Webseiten in Zukunft immer mehr mit Full Responsive Unterstützung programmiert werden. Das heisst, die Layout werden noch flexibler und man kann die Seite z.B. mit dem Browserfenster fliessend verkleinern und vergrössern, ohne das Elemente plötzlich „springen“ oder fehlerhaft dargestellt werden. Zudem wird so jedes Endgerät automatisch unterstützt, auch wenn es bis jetzt noch nicht erfunden wurde, da sich die Webseite mit dieser Technik jedem Format anpasst.

Storytelling through Design
Storytelling ist nützlich und hilfreich um komplexe Themen schnell und unkompliziert darzustellen. Denn Bilder im Verbund mit Geschichten können sich die Menschen gut merken. Durch das Auslösen von Emotionen werden bleibende Eindrücke hinterlassen. Daher werden wir in im Jahre 2014 immer mehr Webprojekte sehen und erleben, die mit grossen Bilder und bewegenden und bewegten Geschichten arbeiten. Auch Filme im Hintergrund einer Webseite werden dazu einen grossen Teil beitragen. Dieser Trend wird das Internet greifbarer machen und sich ganz klar vom üblichen Baukastenprinzip und fixen Strukturen abheben.

Mehr CMS-basierende Webseiten
Die Popularität von WordPress steigt und steigt. Zudem wächst der Wunsch bei den Endkunden, die Seite nach der Realisierung selbst verwalten zu können und nicht für jede kleinere Anpassungen auf einen Webmaster bzw. Webdesigner angewiesen zu sein. Da die CMS-Lösungen unserer Zeit auch immer mehr Fähigkeiten bzw. Funktionen besitzen, ist diese Entwicklung durchaus berechtigt. Die zukünftige Arbeit der Webdesigner und Programmierer wird dadurch aber nur unwesentlich vereinfacht. Die neue Herausforderung wird sein, die Webseite so zu gestalten und zu programmieren, dass einem als Laie der Unterschied zu einer komplett individuell entwickelten Lösung nicht auffällt und die Barrierefreiheit gewährleistet wird. Selbstverständlich betrifft dies auch alle anderen Systeme wie z.B. Typo3, Joomla, modX, Drupal und wie sie alle heissen.

Vollständiger Retinasupport
Retina Displays mit enorm hoher Auflösung sind mittlerweile in fast allen Geräten von Apple zu finden, zudem erscheinen nun auch Geräte mit 4k-Auflösung (4x BluRay). Wenn nun Webseiten mit „normalen“ Bildern auf diesen Medien betrachtet werden, kann es sein, dass diese ein wenig unscharf wirken. Dies liegt daran, dass die Bilder nicht für diese Auflösung ausgelegt sind. Mittlerweile gibt es mehrere Möglichkeiten diesem Schönheitsfehler entgegenzuwirken. Die erste Möglichkeit ist es, mehrere Bilder in verschiedenen Auflösungen zu hinterlegen bzw. im Falle einer CMS-Lösung beim Upload zu erzeugen. Die zweite wesentlich einfachere, jedoch noch nicht überall unterstützte Methode ist die Arbeit mit SVG-Bildern. Diese Bilder befinden sich quasi in einem verpackten Zustand, ähnlich dem von vektorisierten Grafiken wie z.B. Firmenlogos. Dieser Zustand ermöglicht es, einen Befehl an die SVG-Datei zu senden, die darauf die korrekte für das jeweilige Endgerät benötige Auflösung ausgibt.

Nearly Flat Design oder auch Flat Design 2.0
Flat Design war und ist einer der schönsten Trend für unsere Augen. Webseiten wirken aufgeräumt, haben keine ablenkenden Effekte oder augenkrebserzeugende Farbvariationen. Doch so schön die neue Designwelt ist, hat dieser Trend so seine Tücken. Da es keine Schatten, Verläufe etc. mehr gibt, wird es auch schwieriger, die einzelnen Webseitenelemente voneinander zu unterscheiden. Daher hat man nun damit begonnen bei Flat Designs wieder ganz dezent mit schonenden Verläufen zu arbeiten, um z.B. wichtige Menü-Elemente oder Buttons klar als solche zu kennzeichnen. Die Kunst wird es sein, das Gleichgewicht zwischen Flat-Elementen und Effekten zu finden, so dass die Webseite am Schluss das Prädikat „Flat Design“ auch verdient.

Fixe Menüleiste
Menüleisten in denen das Logo, das Hauptmenü sowie Social-Buttons platziert und anschliessend am oberen oder linken Bildschirmrand fixiert werden, erfreuen sich immer grösserer Beliebtheit. Da Webseiten heute viel mehr Inhalte haben und diese oftmals mit viel Bildmaterial, Kommentaren und Bewertungen versehen sind, ist das Scrollen nach unten ein Muss geworden. Damit man dann nicht die Übersicht verliert oder für einen Seitenwechsel nicht wieder nach oben scrollen muss, ist die fixe Menüleiste gedacht. Ein sehr sympathischer Ansatz, den wir sicherlich auch bei einen oder anderen Projekte gerne einsetzen werden.

Off-Canvas
Eine Weiterentwicklung von Responsive Design ist das Off-Canvas-Design. Die Grundidee von Responsive Design ist es, Webseiten auch auf mobilen Geräten und damit auf kleinen Bildschirmen optimal darzustellen. Dies führt dazu, dass auf Smartphones die Inhalte aus Platzgründen alle untereinander dargestellt werden. Dies führt leider dazu, dass man sehr weit nach unten scrollen muss, um alle Inhalte sehen zu können. Off-Canvas-Design schafft dieses Problem ab, in dem gewisse Elemente ausserhalb des Sichtfelds platziert werden.

Mit Off-Canvas wird immer nur der Bereich angezeigt, der gerade gewünscht ist. Nur bei großen, wie z.B. Desktop-Bildschirmen werden alle Inhalte angezeigt. Bei mobilen Geräten (Smartphones und Tablets) werden Neben-Elemente wie Navigation oder Sidebars an den Seiten der Anzeigefläche angeordnet, ähnlich wie bei einer App.

Mit einem Klick auf ein Menüelement (meist ein Icon bzw. Symbol) werden diese dann in das Sichtfeld eingeblendet. Meist werden sie von den Seiten „hineingeslidet“. Off-Canvas-Design wird dazu beitragen, dass die Scroll Balken auf Webseiten verschwinden und Inhalte noch einfacher und schneller verfügbar machen.

Webseiten die wie Apps funktionieren
HTML5 ermöglicht es, dass der Benutzer auf die meisten Elemente der Website über einen normalen Browser zugreifen kann, ohne dabei auf Erweiterungen wie z.B. den Flash Player oder Java Runtimes angewiesen zu sein. Dies bedeutet, dass eine Webseite wie eine App bzw. Anwendung verwendet werden kann. Beispiel dafür sind viele der Google-Dienste, die ebenfalls auf HTML5 basieren. In Verbindung mit Responsive Design könnte sogenannte neue Web-Apps die plattformabhängigen Apps von Apple und Android ablösen, da diese auf allen Endgeräten unabhängig vom Betriebssystem und Auflösung funktionieren.

Code-Free Design
Interaktive Grafiken und Webseiten sind ist immer noch sehr beliebt und werden es auch weiterhin sein. Es gab zwar eine große Debatte und Aufruhr, weil der iPhone-Riese Apple verweigerte Flash auf ihren Geräten zu unterstützen, doch dieses Problem wurde durch die Einführung von HTML5 behoben. Nun sind eine Reihe von Online-Unternehmen dabei mit ‚Code-free“-Konzepten zu experimentieren.

Der Marktführer Adobe Systems hat kürzlich ein Design-Tool namens ‚Muse‘ vorgestellt, dass das Erstellung von Webseiten ohne das Schreiben von Codes oder restriktiven Vorlagen ermöglicht. Es ist noch im Beta-Stadium, aber die ersten Bilder und Videos sind beeindruckend. Grundsätzlich wird es möglich sein, eine Photoshop-, Illustrator- oder InDesign-Vorlage einer Webseite mit Hilfe von Muse in HTML5-Code umzuwandeln, ohne dabei nur eine Zeile Code zu schreiben. Weitere Entwickler haben Veröffentlichungen im Laufe des nächsten Jahres angekündigt. Zudem gibt es da ja auch noch die dutzenden Anbieter von Web-Baukasten-Systemen die ebenfalls Webseiten ohne Programmiercodes anbieten, die man selbst gestalten und mit Text befüllen kann. Für Privatanwender und kleinere Unternehmen wird dieser Ansatz sicherlich interessant sein, doch für anspruchsvollere Webprojekte wird man weiterhin nicht an einem individuelle programmierten und selbst „gecodeten“ Quellcode vorbeikommen.

Ob sich unsere Vermutungen aus unseren Beobachtungen bewahrheiten, werden uns die nächsten Monate zeigen. Gerne werden wir im Juni 2014 wie letztes Jahr eine Analyse dieses Berichts vornehmen und die aktuelle Situation beurteilen.