2017 im Web unterwegs: Eine aktuelle Betrachtung

In den Anfängen des Web in den 1990ern waren die Gestaltungsmöglichkeiten noch begrenzt: Einspaltige Layouts waren der Darstellungsstandard, Texte konnten nur in websicherer Systemschrift dargestellt werden, ganz zu schweigen von den Limitierungen im Code, die Designer und Entwickler in ihren Möglichkeiten eingeschränkt haben.

Seither führte die Reise vom Material-Design zum Flat-Design und wieder zurück. Immer noch kann man beobachten: Gestaltungs-Trends setzen sehr schnell Staub an. Die Standards von 2014 wirken heute altbacken. Vor 4-5 Jahren herrschte aus gestalterischer Sicht noch Steinzeit: wir begegneten starren Seitenrastern mit max. 1000px Seitenbreite, Seitenhintergründen mit Texturen und oft wurde ein magazinartiger Seitenaufbau eingesetzt der die Gestaltung kleinteilig machte und den Betrachter überforderte.

Gegenwärtig geht der Trend zu großflächigen, flächenfüllenden Einstiegs-Teasern, die soziale Interaktion mit der Seite spielt eine immer größere Rolle. Responsives Webdesign mit zugrundeliegenden Gestaltungs-Patterns ist State of the Art. Eigentlich müsste man allerdings das Mithaltenkönnen gegenüber dem rasanten Wandel des Web als State of the Art bezeichnen.

Responsive ist der neue Standard

Dem Responsive Webdesign liegt die Idee zugrunde, dass die Bedienung einer Seite auf den unterschiedlichsten Endgeräten zu einem vergleichbar befriedigenden Bedienerlebnis führt. Noch vor einiger Zeit genügte es, eine vereinfachte Version der Desktop-Seite zu erstellen und damit den Bereich Mobile abzudecken. Designer und Programmierer brauchten hier nur auf die zwei gängigsten Bildschirmformate Rücksicht zu nehmen. Seitdem wurden eine Vielzahl von Endgeräten und damit immer weitere Bildschirmformate mit unterschiedlichen Auflösungen entwickelt. Dies macht einen responsiven Seitenaufbau nahezu zwingend, um auf allen Endgeräten einen ähnlich guten Auftritt zu haben.

In der Gestaltung trägt man dem Rechnung, indem man Elemente so anlegt, dass die Seite skalierbar bleibt. Der Atomic Design-Ansatz und der Aufbau einer Pattern-Library können für eine responsive Gestaltung zielführend sein. Die Elemente einer Seite sind damit gut dokumentiert, Änderungen an Elementen vererben sich seitenübergreifend und man hat eine Kontrolle über die Konsistenz der Seitendarstellung auf allen Geräten.

Darüber hinaus besteht kein Zweifel, dass Mobile immer weiter auf dem Vormarsch ist. Mobile Optimierung ist damit keine Option mehr, sondern eine Pflicht.

Der allgegenwärtige Einsatz von Templates

Derzeit kommen bei der Gestaltung von Webseiten häufig Templates zum Einsatz. Templates sind Designvorlagen, in denen alle Bausteine für eine funktionierende Webseite angelegt sind. Es müssen nur noch die Platzhalter gegen tatsächliche Inhalte getauscht werden und schon kann man mit einer neuen Seite an den Start gehen.

Die Pros für Templates: Sie sind durchdacht, getestet und bewährt. Darüber hinaus bilden sie eine günstige Alternative zum individuellen Seitenaufbau. Aus gestalterischer Sicht erkennt man allerdings, dass sich beim Einsatz von Templates Websites bis auf Logo und gewählter Schriftart oft gleichen. Positiv daran ist, dass der Nutzer sich auskennt in der dargebotenen Welt. Vieles, was Nutzer über die Zeit erlernt haben, wie die Position von Burger-Menü und Warenkorb-Icon, kommt – vor allem bei guten Templates – zum Einsatz. Mit Templates geht man sozusagen auf Nummer-Sicher.

Allerdings führt der verbreitete Einsatz von Templates auch zu Unerwünschtem: Uniformität im Web! Kein Auftritt und keine Funktion sind mehr eigenständig. Aussehen und Funktionen sind austauschbar. Nichts sticht wirklich heraus aus der Masse. Der Kunde empfindet das unter Umständen als: Laaaaangweilig!

Aus Sicht eines Shopbetreibers birgt das die Gefahr, dass die eigene Marke nicht als eigenständig und mutig präsentiert wahrgenommen wird. Durch den bewussten Einsatz von Gestaltung und Funktionen einer Seite sollte man Interaktionserlebnisse schaffen, die der Nutzer als außergewöhnlich und markentypisch empfindet und die im Gedächtnis bleiben.

Einsatz von großflächigen Bildern ist derzeit ein großer Trend

Auch auf emotionaler Ebene sollte dem Kunden Markentypisches vermittelt werden: Kunden wollen abgeholt werden und in eine andere Welt eintauchen. Der Einsatz großer Bilder lädt dazu ein. Damit das in vollem Maße möglich ist, sollte das Design sich dem Fokus, der auf den Bildern liegt, unterordnen. Das Story-Telling geschieht über Bilder. Typographie wird unterstützend eingesetzt. Permanente Elemente im First View werden zurückhaltend gestaltet.

In Zeiten von Bildschirmen mit Retina-Auflösung ist hohe Aufmerksamkeit garantiert.

Auch hier sollte man allerdings das Thema Mobile nicht außer Acht lassen: Für langsame, teure Mobilverbindungen können Bilder, sofern nötig, serverseitig heruntergerechnet werden.

Fazit

Immer am Puls der Zeit zu sein und den aktuellen Design-Trends zu folgen setzt voraus, kontinuierlich darin zu investieren, was sich nicht jeder leisten möchte. Wenn man sich aber vollkommen von diesem Druck befreit und den Design-Zeitgeist ignoriert, kann es auf Kosten der Glaubwürdigkeit der Marke gehen. Oft kann man mit einem Kompromiss schon einiges erreichen.

Aktuelle Empfehlungen aus Designsicht:

• Ein responsives Design aufbauen, das auf die konsistente Darstellung auf allen Endgeräten einzahlt.
• Klares zurückhaltendes Design mit eigenständigem, markentypischem Charakter.
• Einsatz von Mikrointeraktionen, die als markentypische Erlebnisse empfunden werden.
• Einsatz großer Bilder, die die Story der Marke transportieren.
• Kunden emotional abholen und einladen, Teil der Seite zu sein.

Mein Name ist Johannes Reinhart, Designer und Illustrator bei „H2D2 • UX und Design für Online-Shops“. Sie möchten mehr zum Thema wissen? Schreiben Sie mir, wir sind für Sie da: johannes.reinhart@h2d2.de