Nachhaltigkeit durch Erkennen & Verstehen von aktuellen Trends im Webdesign

Damit Ihre Webseite auch nach längerer Zeit modern bleibt und den aktuellen Standards entsprechen kann, ist es wichtig, Trends und Tendenzen des Webdesigns frühzeitig zu erkennen, zu verstehen und umzusetzen. Wir von digital art informieren uns aktiv im eigenen Interesse, um Trends rechtzeitig zu erkennen und diese unserem Kunden zu empfehlen oder aber von einer Umsetzung abzuraten.

Aktuelle Trends bei Webseiten Designe. State of the Art Webseiten. Neusten Webseitendesign methoden bei digital art - Mönchengladbach, nähe Köln / nähe Düsseldorf

OnePage Design

Webseite mit Onepage-Design und Scrolling-Navigation von Webagentur digital art
Einfaches Beispiel für einen Onepager

Die Architektur aktueller Websites geht weg vom verschachtelten Seitenaufbau, hin zum sogenannten "OnePage Design" - viele Unterseiten werden damit hinfällig. Einer repräsentativen Umfrage zur Folge scrollen Internetuser lieber, anstatt sich durch viele verschachtelte Menüpunkte zu klicken. Scrollen statt klicken, ganz dem natürlichen Instinkt folgend.

OnePage Design und Scrolling-Navigation bedeuten:

  • Ein Schritt in Richtung mobiles Surfing
  • User Experience ist vor allem an mobile Geräte angepasst, bei denen Scrolling einfacher ist, als mit dem Finger Buttons und Links anzuwählen
  • Auch mit langsameren Internetverbindungen können alle Inhalte ohne lange Ladezeiten erreicht werden

Zu beachten gilt hier:

Der Content muss sinnvoll und übersichtlich strukturiert werden, damit der User auf der Seite nicht den Überblick verliert. Hilfreich sind unterschiedliche Farbabschnitte als „Kapitelmarker“. Zudem ist eine sinvolle Grenze bezüglich der Menge an Content zu setzen.


Parallax Scrolling

Webseite mit Onepage-Design und Parallax Scrolling
Schemenhafte Darstellung von Parallax Scrolling

Das Parallax-Scrolling gibt es schon sehr lange, jedoch vertikal angewandt, beschert es ein völlig neues Scrolling-Erlebnis und wird auch in 2015 top aktuell sein - vor allem für lange One-Pager.

Parallax Scrolling bedeutet:

  • Verschiedene Layer eines Abschnittes scrollen in unterschiedlich schnellen Geschwindigkeiten
  • Somit können plastische sowie 3D-Effekte hervorgerufen werden

Zu beachten gilt hier:

Parallax Scrolling benötigt einen sinvollen und gezielten Fallback auf statische Elemente, denn selbst auf dem Laptop und Desktop-Computer lässt sich das Parallax-Scrolling manchmal nur ruckelig ausführen.


Fullscreen-Backgrounds

Webseite mit Fullscreen Background - Hero Image - Webseitendesign mit Bild im Hintergrund
Beispiel eines Fullscreen-Image

In 2014 haben großformatige Motive das Design vieler Websites maßgeblich geprägt - das wird auch 2015 weitestgehend so bleiben. Oft wird man erst einmal von einem Full-Screen-Image (auch Hero-Image genannt) oder sogar einem Full-Screen-Video Loop begrüßt. Dies kann man übrigens auch mit einem Slider kombinieren.

Fullscreen-Backgrounds kann bedeuten:

  • mehr Videos statt Stills
  • Interaktivität in den Videos kombiniert mit Ghost-Buttons
  • Der erste Eindruck kann durch gutes Bild- bzw. Video-Material gesetzt werden

Zu beachten gilt hier:

Aufpassen sollte man hier ganz klar bei der Datenmenge, die beim Öffnen der Seite geladen werden muss. Die Herausforderung ist, die Daten so weit wie möglich zu komprimieren, um sie auch von mobilen Geräten aus schnell laden zu können.


Mikrointeraktionen & Ghost-Buttons

Webseite mit Ghostbutton und Mikrointeraktion von Webagentur digital art
Dezente Aufforderung zur Interaktion

Diese beiden Trends haben das Web nicht maßgeblich geprägt, aber sehr dezent dazu beigetragen. Zum einen werden die Ghost Buttons immer beliebter. Diese Form des Buttons fügt sich dezent in den Hintergrund ein, ohne zu aufdringlich zu sein, denn er besteht nur aus der Outline.

Des Weiteren werden wir wohl immer häufiger über die Microinteractions stolpern. Diese kleinen Overlays öffnen sich automatisch sobald man auf einer Website landet und sollen die User zu mehr Interaktion mit der Website animieren. Sie fordern zu Umfragen, Kommentaren, Subscribtions auf oder bieten dem User zusätzliche Hinweise und müssen erst geschlossen werden, wenn man zur eigentlichen Website gelangen will.

Mikrointeraktionen & Ghost-Buttons bedeuten:

  • optische Implementierung vor einem Full-Screen Background
  • Interaktion mit dem User über Mikroaktionen

Zu beachten gilt hier:

Es muss hier genau abgewägt werden, ob die Mikroaktion im individuellen Fall einen nützlichen Mehrwert für den User bringt oder eher beim Browsen stört.


Der Wandel von Flat- zu Material-Design

Webseiten Flatdesign und Materialdesign von der Webagentur digital art - Mönchen Gladbach
Beispiel für Flat- und Material Design

Flat Design hat in den letzten ein bis zwei Jahren viel Fahrt aufgenommen und wird auch 2015 mit minimalistischen Formen und klaren, kontrastreichen Farben erhalten bleiben.

Wenn man Flat-Design weiterdenken würde, entsteht das sog. "Material Design" - Google stellte dies bereits vor. Dies könnte die nächste Evolutionsstufe für Flat Design bedeuten. Googles Material Design setzt das Flat Design fort und erweitert es um subtile Verläufe, Ebenen und Animationen, ohne die eigentlich angedachte Ästhetik zu beeinträchtigen.

Material Design bedeutet:

  • schlichte, aber elegante Design-Möglichkeiten
  • Liebe zum Detail wird erkennbar

Zu beachten gilt hier:

Spielereien, wie kleinere Animationen oder Effekte können ein Layout maßgeblich verbessern, wobei auch hier zählt: Zu viele Köche verderben den Brei.


Adaptive oder doch Responsive-Design?

Webseiten für mobile Engeräte (Smartphones, Handys, Tablets) mit Adaptive Layout oder Responsive Layout
Responsive Design für verschiedene Endgeräte

Ein Adaptive Layout ist ein für verschiedene (nicht für alle!) Displaygrößen optimiertes Web-Layout. Diese Lösung ist nicht perfekt, aber durchaus verbreitet. Der Kern des Adaptive Layouts ist ein starres Gestaltungsraster in Kombination mit Media Queries. Der gewählte Layouttyp dieser Variante ist also i.d.R. "fixed".

Das Responsive Layout ist die bessere Lösung, um eine Seite für jede erdenkliche Displaygröße zu optimieren. Das Responsive Layout arbeitet mit einem flüssigen Gestaltungsraster, in Kombination mit Media Queries. Der Layouttyp ist demnach »fluid« oder »elastic«. Im Gegensatz zum Adaptive Layout wird hier nicht gezielt für einen bestimmten Viewport optimiert, sondern das Design so entwickelt, dass der zur Verfügung stehende Platz immer optimal ausgenutzt wird. Lediglich nach oben ist häufig eine Grenze gesetzt, damit die Website auf großen Displays nicht zu breite Spalten erhält.

Dieser Trend bedeutet:

  • Wir empfehlen eindeutig das Responsive-Design
  • Berücksichtigung nahezu aller erdenklichen Displaygrößen

Zu beachten gilt hier:

Für den Webdesigner bedeutet ein Responsive Layout deutlich mehr gestalterischen und technischen Aufwand - für den Kunden dadurch einen etwas höheren Finanziellen Aufwand. Da flüssige Spalten in den meisten Layoutprogrammen nicht abgebildet werden können, müssen stattdessen Pixelwerte verwendet werden. Aus diesem Grund wird häufig bereits in einer sehr frühen Phase des Projekts vom Layoutprogramm in den Code-Editor gewechselt. Anschließend wird parallel weitergearbeitet.


Erfahrene Grafikagentur für Corporate Design (CD) aus Mönchen Gladbach, nähe Düsseldorf

Trends in Print / Grafik / Design

Digital art ist nicht nur bei der Gestaltung Ihres Online Auftritts Ihr kompetenter und trendbewusster Ansprechpartner, sondern auch bei der Gestaltung Ihrer Print Kampagnen und Ihres Corporate Designs.

Weitere Informationen zur Grafikagentur finden Sie hier!



Diese Seite verwendet Cookies, weitere Informationen finden Sie hier.
OK!