Webdesign 3.0

Gestaltungsaspekte im Wandel der Zeit

Quelle: https://www.istockphoto.com

Webdesign 3.0 ist in aller Munde und viele Unternehmer fragen sich nun, ob Ihr Onlineauftritt noch zeitgemäss ist, oder dieser ggf. angepasst werden sollte. Doch was bedeutet der Begriff Webdesign 3.0 überhaupt und sind allfällige Änderungen wirklich in aller Konsequenz notwendig? Nachfolgend möchten wir euch das Thema erläutern, Designaspekte und Beispiele aufzeigen, sowie abschliessend diese Eingangsfrage beantworten.

Die Anfänge

Als ca. 1992 die ersten textbasierten Websites online gingen konnten sich nur die Wenigsten ausmalen, welche Entwicklung dieser Bereich in den kommenden Jahren und Jahrzehnten noch nehmen würde. Vier Jahre später gingen die ersten tabellenbasierten Seiten an den Start und ca. um das Jahr 2000 wird die Geburtsstunde der ersten modernen Aspekte angesehen, das Webdesign 1.0 war da.

Durch das Aufkommen von Social Media Plattformen wie Facebook und YouTube, dem Launch von WordPress-Seiten und spätestens seit der Einführung von Smartphones im Jahr 2007, zeigten sich immer weitere Grenzen in der bisherigen Darstellung auf. Es wurde Zeit auf diese Entwicklungen zu reagieren und ein weiterer bedeutender Meilenstein und damit der Start von Webdesign 2.0, begann ab dem Jahr 2011. Viele neue Features wurden eingeführt und die Programmierung von Websites auf eine einheitlichere Basis gestellt. Nachfolgend möchten wir einige der elementarsten Aspekte auflisten:

  • Launch von Bootstrap
  • Mobile-Support
  • Responsive-Design
  • Umstieg von Eigenprogrammierungen zu standardisierten CMS-Lösungen
  • Trennung von Inhalt und Layout
  • Themes & Templates
  • Verstärktes Corporate Branding
  • Unzählige Plug-Ins
  • Userrollen und Zugriffsrechte

In den nachfolgenden Jahren konnte damit auf Basis von allgemein gültigen Richtlinien und Vorgehensweisen ein Webdesign erschaffen werden, dass einfacher und schneller umsatzbar war, sowie mehr Funktionen bot. Gleichzeitig kristallisierte sich aber auch zunehmend der Trend heraus, dass viele Websites sich immer ähnlicher sahen, indem auf vorgefertigte Templates mit fixen Gridlines zurückgegriffen wurde. Webdesign wurde damit zwar günstiger, in dem mit vorhanden Strukturen und Plug-Ins gearbeitet werden konnte, doch dabei litt oftmals auch die Kreativität.

Die Konzeption

Der Aspekt Konzeption betrifft sowohl Webdesign 2.0 als auch 3.0. Im Gegensatz zu einer bisherigen Vorgehensweise, nimmt die konzeptionelle Phase bei Webdesign 3.0 jedoch wieder einen grösseren Stellenwert ein. Designaspekte und ein auf die Zielgruppe optimal zugeschnittener Aufbau rücken in den Fokus, während technische Aspekte erst in einem weiteren Schritt betrachtet werden. Ggf. werden dann einige kreative Aspekte nochmals angepasst, sowohl aus budgetären als auch umsetzungstechnischen Gründen. Nichtsdestotrotz ist es ein designbasierter Ansatz, in dem man sich zu Beginn frei austoben und nicht von weiteren Rahmenbedingungen beschränken lassen sollte.

Quelle: https://www.istockphoto.com

Zu Beginn werden ein Designkonzept und eine Idee erstellt, die Hand in Hand mit einem Marketingkonzept und der unternehmerischen Strategie gehen sollten. Es handelt sich um einen ganzheitlichen Ansatz, der über die Programmierung bzw. das eigentliche Webdesign hinaus geht. Dabei steht jederzeit die Zielgruppenbetrachtung an vorderer Stelle. Wer sind meine Buyer Persona und welche Pain Points haben diese? Wie muss also die Customer Journey Map gestaltet werden, sodass meine User ein optimales Erlebnis haben und sich gleichzeitig intuitiv zurechtfinden. Einzelne Touchpoints sollten analysiert bzw. geplant und ebenso die Gefahrenstellen eruiert werden, mögliche Punkte, an denen die Bounce-Rate bzw. die Conversion-Rate negativ beeinflusst werden könnte. Emotionalität spielt im Storytelling eine sehr grosse Rolle. Was macht das Unternehmen, die dort beschäftigten Personen, die Produkte oder Dienstleistungen aus? Hierbei gilt es nicht zu protzen, sondern sich sympathisch, transparent und authentisch zu präsentieren. Damit wird das eigene Unternehmen auch im Vergleich zum Wettbewerb positioniert. Das Design und der Aufbau sollten dabei einem roten Faden folgen und die User nach Möglichkeit durch interaktive Elemente verstärkt in die Seitennutzung einbezogen werden. Hierzu gehören beispielsweise

  • Quizze und Umfragen
  • Kundenevents
  • Produktkonfiguratoren
  • Gamified Content
  • Interaktive E-Books
  • 360°-Clips und interaktive Videos

Der User wird somit zum Regisseur, das angebotene Produkt zur Story und die Userexperience rückt in den Fokus. Je nach Branche und Zielgruppe empfehlen wir dabei eine passende Balance zwischen einem komplexen und einem einfachen Webdesign zu finden und ebenso einen guten Mischung zwischen kontroversen und konformen Inhalten. Gerade bei diesem letzten Aspekt ist ein wenig Mut gefragt, um sich noch deutlicher von anderen Websites und deren Inhalten abzuheben.

Webdesign 3.0 und aktuelle Trends

Der Designer Milton Glaser formulierte einst so zutreffend:

„Es gibt 3 Antwortmöglichkeiten, um auf ein Design zu reagieren – mit ja, nein und Wow.

Wow ist unser erklärtes Ziel!“

Neben des „Basics“ eines modernen Designs mit einem guten Datenschutz, integrierten Analytics-Optionen und Fully-responsive-Design, kommt es auch auf eine ausdrucksstarke Bildsprache an. Ergänzt werden kann das Webdesign durch den Einsatz von Business Intelligence und Attributionsmodellen. Hier findet ihr weiterführende Informationen zu diesen Bereichen:

Künstliche Intelligenz im E-Commerce

Business Intelligence und Attributionsmodelle

Im Webdesign 3.0 ist Individualität gefragt, das Design soll einerseits klar und gut strukturiert, aber gleichzeitig nicht langweilig sein. Man möchte den Usern ein Aha-Erlebnis verschaffen, indem bekannte Strukturen und Formen durchbrochen werden. Das Design weist beispielsweise eine freie Positionierung von Elementen auf. Starre Gitterstrukturen bzw. Grids werden aufgeweicht und einzelne Elemente und sogar ganze Bereiche können sich überlappen. Dies reicht von Texten über Bildern bis hin zu Videos und Interaktionsmöglichkeiten. Horizontal, vertikal, frei positioniert – alles ist erlaubt. Abstrakte Brand-Elemente können eingefügt werden und der Designansatz orientiert sich tatsächlich mehr an Printprodukten, die keine Rücksicht auf deine technische Umsetzung nehmen müssen. Diese neue Freiheit gibt den Designern auch die Möglichkeit komplexe Zusammenhänge durch Bildsprache zu simplifizieren. Start harter Ecken und Kanten gibt es weichere Formen, oder diese werden sogar durchbrochen. Um das Ganze optisch darzustellen, findet ihr hier ein vereinfachtes Mock-Up-Design, um es zu verdeutlichen:

www.nine-elephants.de

Weitere aktuelle Design-Trends sind eine Ausrichtung an Ästhetik und Minimalismus. Statt vieler Worte lieber aussagekräftige Bilder für sich sprechen lassen. In der Ruhe liegt die Kraft und so bedienen sich viele Webdesigns 3.0 einer Bildsprache, die nicht

Quelle: Apple.com

aufdringlich ist. In Verbindung hierzu werden Websites nun auch gerne in einem Dark Mode designt, sodass nur die essentiellen Aspekte hell hervorgehoben werden. Ergänzt wird dies zum Teil durch Neumorphismus, also einem stilisierten Realismus, der eine Haptik simulieren soll. Quasi eine digitale Prägung durch Komposition und Gestaltung. Dreidimensionale Effekte finden Einzug in die Darstellung und werden durch Bewegtbilder wie Parallax- oder Scroll-Animationen ergänzt. Weichere Übergänge führen zu einem stimmungsvoll-ruhigen Gesamtbild, ergänzt durch eine 3D-Farbpalette. Produkte und ihre Eigenschaften werden digital durch Bildkompositionen in Szene gesetzt, statt den User durch lange Erklärungstexte zu informieren. Die Ausrichtung am User zeigt sich auch oft in einem Lead-Driven Webdesign-Ansatz.

Dem wichtigen Teilbereich und Thema Webdesign 3.0 und SEO widmen wir bald einen eigenen Artikel, stay tuned!

Fazit

Durch Webdesign 3.0 wird die digitale Welt wieder kreativer, abwechslungsreicher, überraschender, anspruchsvoller, oder zusammenfassend gesagt: spannender! Es liegt keine technische Schablone mehr zu Grunde, in die Designelemente eingefügt werden müssen. Vielmehr gehen Technik und Design Hand in Hand und sind gleichwertige Partner. Natürlich bedeutet dies auch einen erhöhten Anspruch an die Webdesigner und Programmierer. Trotz aller Designfreiheiten sollten immer noch die Funktionalität und Usability wegweisend sein. Damit möchten wir auch die Eingangsfrage beantworten. Nein, Webdesign 3.0 Aspekte müssen nicht überall und für alle Elemente angewandt werden. Insbesondere auch in Hinblick auf eine optimale Mobile-Darstellung reicht es oft punktierte 3.0 Integrationen vorzunehmen, um die Website frischer und moderner darzustellen. Einmal mehr ist hier die Devise: Strategy, Launch & Evolution. Webdesign 3.0 ist offen und frei und genauso wollte sich auch eine Website laufend entwickeln und offen nur neue Ideen sein.

Praxisbeispiele

Aufgrund der Tatsache, dass wir hier über Designaspekte sprechen, möchten wir zum Schluss einfach ein paar Impressionen (Desktop & darunter Mobile View) von schweizer Unternehmen zeigen, die unserer Meinung nach eine tolle Webdesign 3.0 Umsetzung gemacht haben.

CSS

Quelle: https://www.css.ch

 

Quelle: https://www.css.ch

Flughafen Zürich

Quelle: https://www.flughafen-zuerich.ch

 

Quelle: https://www.flughafen-zuerich.ch

Mobility

Quelle: https://www.mobility.ch

 

Quelle: https://www.mobility.ch