Webdesign Trends 2016

An diesem vorletzten Tag im Jahre 2015 wollen wir uns wie jedes Jahr wieder den Trends der Webdesign-Branche widmen, an denen im nächsten Jahr garantiert kein Weg vorbeiführt.

Sicherlich gibt es noch viele andere Trends, die wir hier nicht erwähnen, doch wir mussten uns auf eine kleine Auswahl begrenzen, um den Rahmen nicht zu sprengen. Daher haben wir auf die Trends konzentriert, die am deutlichsten erkennbar sind.

CSS Flexbox
Für Responsive Webdesign ist es essenziell, dass die Elemente einer Website flexibel gestaltet und positioniert werden können. Die neue CSS3-Eigenschaft „Flexbox“ bietet dazu umfangreiche neue Möglichkeiten, die das Erstellen von responsiven Webseiten deutlich vereinfacht.

Flexbox ermöglicht es, Webseiten-Elemente sowohl in der Höhe, wie auch in der Breite nach unterschiedlichsten Verhältnissen flexibel zu gestalten. Div-Container lassen sich mühelos nebeneinander in Zeilen oder untereinander in Spalten anordnen, in der Reihenfolge beliebig positionieren und aneinander ausrichten. Und das ganz ohne float, position oder display:table.

Wir können uns also auf noch flexiblere und kreativere Designs freuen, die trotz hoher Komplexität auf jedem Endgerät eine gute Figur machen. Mehr zum Thema Flexbox finden Sie hier.

OnePager / Page-Carousel
Die klassischen OnePager für kleine Webseiten oder gezielte Marketingmassnahmen sind mittlerweile fast jedem bekannt, sicherlich auch durch die häufige Verwendung dieser Technik durch Apple für die jeweiligen Produktpräsentationen im Web.

Diese Technik werden wir auch im Jahr 2016 immer wieder antreffen, doch nun in leicht erweiterter oder abgewandelter Form. Die klassischen OnePager werden dabei vermehrt für Scrollytelling (Storytelling in Form einer Geschichte, die durch das Scrollen der Seite erzählt wird) eingesetzt, während ein neuer Trend, das Page-Carousel als OnePage 2.0 angesehen werden kann.

Page-Carousel-Webseiten sind so gestaltet und aufgebaut, dass ein vertikales Scrollen, also von oben nach unten, nicht zwingend nötig ist. Die Inhalte der Webseite sind so gestaltet, dass die Elemente immer in der Höhe und Breite vollflächig zum aktuellen Viewport (sichtbarer Bereich) sind. Gescrollt wird falls notwendig nur horizontal, also von links nach rechts oder umgekehrt.

Nur wenn es sich anbietet, kann mit einem vertikalen Scrollen z.B. in der nächste, losgelöste, Bereich angesteuert werden. Um schnell solche Webseiten umsetzen zu könnten, bietet es sich an eine Framework-Lösung wie fullpage.js zu nutzen. Wie wir dies unter anderem für das Projekt la-luce.ch getan haben.

SVG Icons und Animationen
SVG ist altes Vektorgrafiken-Format, welches schon häufiger totgesagt wurde. Doch seit der Einführung von Responsive Design und dem Support in nahezu allen modernen Browsern findet das Format wieder mehr Zuspruch.

Dies liegt vor allem daran, dass sich auf diese Weise, Grafiken auf Webseiten integrieren lassen, die immer gerade so skaliert werden, wie sie auf dem jeweiligen Endgerät benötigt werden. D.h. die Bereitstellung von Grafiken in verschiedenen oder übergrossen Auflösungen ist so nicht mehr nötig. Es reicht, wenn die Grafik als SVG bereitgestellt wird.

Zudem können SVG-Grafiken mittels CSS3 animiert werden. Dies bietet neue ungeahnte Möglichkeiten, Ladegrafiken oder Logos zu animieren ohne dabei JavaScript oder die total veraltete Technik Flashscript einsetzen zu müssen. Beispiele dafür befinden sich unter http://tympanus.net/Development/SVGDrawingAnimation/

Daher ist fest damit zu rechnen, dass es 2016 immer mehr Webseiten geben wird, die auf eben diese Technik setzen werden.

„Normale“ Webseiten mit HTTPS
In den letzten Jahren war es nur nötig bzw. ratsam eine SSL-Verschlüsselung (HTTPS) auf seiner Webseite zu integrieren, wenn man z.B.: einen Shop betreibt oder anderweitig darauf angewiesen ist, dass Kunden vertrauliche Daten über die Webseite eingeben können ohne dabei Angst haben zu müssen, dass diese von Dritten mitgelesen oder sogar gestohlen werden.

Dies lag nicht zuletzt daran, dass es sehr kompliziert war, diese Zertifikate zu beziehen bzw. diese dann auch noch einzurichten. Ausserdem wurde durch die Verschlüsselung auch die Ladezeit der Webseite beeinträchtigt. Seit diesem Jahr gibt es nun aber 2 Faktoren die deutlich für einen Einsatz von HTTPS auch für „normale“ Seiten sprechen.

Der Erste ist sicherlich, dass Google seit Mitte 2015 öffentlich kommuniziert hat, dass Webseiten mit HTTPS in den Suchergebnissen bevorzugt werden und zweitens ist eine solche HTTPS-Lösung dank innovativen Webhostern (wie z.B. Cyon) und „Let’s Encrypt“ mit dem ersten kostenlosen SSL-Zertifikat für alle, nur noch ein Mausklick entfernt.

Nebst der Verschlüsselung, die zusätzliches Vertrauen schafft und der Verbesserung des Google-Rankings gilt es natürlich auch zu erwähnen, dass die Ladezeiten durch den Einsatz von HTTP/2 ebenfalls deutlich verringert werden.

Bei bestehenden Webseiten ist lediglich zusätzlich darauf zu achten, dass alle Inhalte von HTTP auf HTTPS weitergeleitet werden und sämtliche Ressourcen der Webseite ebenfalls über HTTPS zur Verfügung stehen.

Retro Designs
Ausgelöst durch die Spieleindustrie – hauptsächlich im Mobil-Bereich – ist ein regelrechter Retro-Revival-Trend auszumachen. Viele Webdesigner und Grafiker greifen diesen Trend auf und gestalten Webseiten, Flyer, Visitenkarten und vieles mehr im Retro-Design der 70er- und 80er-Jahre.

Sehr oft wird das Retro-Design zudem mit Comic-Elementen verbunden, um dem Ganzen eine weitere künstlerische Note zu geben. Im nächsten Jahr werden wir noch mehr dieser Retro-Designs sehen, die wieder ein wenig Farbe in die zum Teil triste Web-Welt bringen.

Rückkehr der GIFs (Cinemagraph)
In den letzten Jahren konnten wir immer mehr mobile Plattformen wie z.B. Vine, Instagram oder Facebook dabei beobachten, wie sie Videos in Endlosschleife nutzen, um Ihre Inhalte zu animieren. Auch Künstler verwenden immer häufiger wieder GIFs um sich selbst auszudrücken.

Die wachsende Popularität der Cinemagraphs (auch bewegte Fotos genannt), wird sich 2016 im Webdesign wiederspiegeln und wir werden immer mehr Kopfbereiche oder andere Webseiten-Elemente mit hochauflösenden bewegten Bildern (GIFs) sehen, während der Rest des Bildes oder der Webseite statisch bleibt.

Authentizität
Mit dem Siegeszug der Baukastensysteme und vorgefertigten Frameworks haben Webseiten begonnen „sehr oft gleich“ auszusehen, umso wichtiger wird es darum, mit dem eigenen Profil bzw. Portfolio aus dieser Masse hinauszustechen und Ihrer Webseite einen eigenen Charakter zu geben.

Daher gilt es 0815-Stockfotos, wenn immer möglich zu vermeiden und stattdessen hochwertige und professionelle Bilder eines Fotografen zu verwenden. Alternativ können auch Dienst wie „Stocksy“ in Anspruch genommen werden, die es sich zum Ziel gesetzt haben, Bilder anzubieten, die sich von der Stockfoto-Masse abheben.

Handgezeichnete Illustrationen sind eine weitere gute Möglichkeit, etwas mehr Persönlichkeit auszustrahlen und Ihrem Auftritt eine eigene Note zu verleihen. Kurz gesagt, sollte man keine Angst davor haben, sich selbst zu sein.