Grafikdesign ist 1/5 einer guten Website

Schöne, aber nutzlose Websites

Die meisten Websites bewirken nichts. Es gibt tausende Websites, die hässlich sind und nichts bewirken. Es gibt auch tausende ästhetische Wunderwerke, die ebenfalls emotionslos im Internet sitzen und auf den Erfolg warten.

Dann gibt es aber auch Websites, die man aus grafischer Sicht gründlich kritisieren könnte, die erstaunlich erfolgreich sind. Warum das?

Das grafische Design ist nur 1/5 der Website

Man könnte sich fragen: Spielt die grafische Rolle denn nicht die wichtigste Rolle beim Erfolg einer Website? Oder spielt sie sogar gar keine Rolle?

Doch, sie spielt eine Rolle: Nämlich einen Fünftel des ganzen, einfach gesagt. Wir schauen hier 5 wichtige Ebenen an, die beim Bau einer guten Website berücksichtigt werden. Grafikdesign ist die fünfte dieser Ebenen.

Die anderen Ebenen helfen uns dabei, dass die Website nicht nur schön ist, sondern auch die richtigen Inhalte und Funktionen am richtigen Ort hat. Das Gesamtpaket macht den Erfolg aus.

Die 5 Elemente von User Experience Design

Das Buch The Elements of User Experience: User-Centered Design for the Web and Beyond von Jesse James Garrett hat das Web ziemlich geprägt. Sein Modell mit den 5 Ebenen wird oft in der Planung von Websites eingesetzt. Die Planung bekommt eine Struktur und auch das Projekt läuft viel strukturiertes ab, als wenn man einfach mal konzeptlos beginnt.

Hier möchte ich das Konzept vorstellen.

Es gibt fünf voneinander abhängige Ebenen. Jede Ebene baut auf der Ebene davor auf. Es beginnt abstrakt und geht Richtung konkret: Von unten nach oben. Beginnen wir mit der ersten Ebene, der Strategie-Ebene.

Ebene 1: Strategy (Strategie)

Warum gibt es die Firma überhaupt? Warum gibt es die Website? Für wen ist die Website da?

Warum sollte unsere Zielgruppe bereit sein, die Website zu verwenden?

Das Ziel ist hier, die Bedürfnisse der Benutzer und die Ziele der Firma und der Website zu definieren.

In der Praxis wird dies viel zu oft weg gelassen. Es ist erstaunlich wie viele Auftraggeber nicht sofort sagen können, wofür sie überhaupt eine Website haben/wollen.

Unser Content Strategy Kurs befasst sich mit genau dieser Ebene, der Strategie-Ebene.

Erst wenn wir dies kennen, können wir zur nächsten Ebene weiter gehen.

Ebene 2: Scope (Umfang)

Was soll die Website alles enthalten? Welche Funktionen, welche Inhalte – und in welcher Form?

Hier definieren wir die funktionalen und inhaltlichen Anforderungen. Die Anforderungen sollten die strategischen Ziele aus der ersten Ebene erfüllen und darauf abgestimmt sein.

Deshalb ist es enorm wichtig, dass die erste Ebene schon vor dieser Ebene in der Planung berücksichtigt wurde.

Funktionale Anforderungen

Dies sind die Anforderungen an die Funktionen oder Features der Website. Diese Funktionen sind es, die der Benutzer benötigt, um die Ziele zu erreichen.

Inhaltliche Anforderungen

Dies sind die Informationen, die wir benötigen, um den Wert zu liefern. Informationen in Form von verschiedenen Medien wir Text, Bilder, Audio, Videos und Social Media.

Auch diese Ebene decken wir im Kurs Content Strategy ab.

Ebene 3: Structure (Struktur)

Hier definieren wir die Interaktionen der Benutzer mit der Website und wie sie organisiert und priorisiert werden. Die Struktur ist in zwei Komponenten aufgeteilt, Interaktionsdesign und Informationsarchitektur.

Interaction Design (Interaktionsdesign)

Anhand der funktionalen Anforderungen wird definiert, wie der Benutzer mit der Website interagieren kann und was dann passiert.

Information Architecture (Informationsarchitektur)

Aufgrund der inhaltlichen Anforderungen definiert wir hier die Anordnung der Inhaltselemente, wie sie organisiert sind, um das Verständnis der Benutzer zu erleichtern.

Ich sehe diese Ebene als die „Flowchart-Ebene“. Es geht noch nicht um die Anordnung (4. Ebene) oder das Aussehen (5. Ebene), sondern erst, was womit in welchem Zusammenhang steht und welche Abläufe und Navigationswege enthalten sein müssen.

Ebene 4: Skeleton (Skelett)

Hier geht es um Wireframes. Was wird wo sein?

Das Skelett bestimmt die visuelle Form auf dem Bildschirm, die Anordnung aller Content-Elemente, damit sie klar und offensichtlich sind. Und die Art und Weise, wie sich die Benutzerin durch die Informationen bewegt.

Hier nutzen wir sogenannte Wireframes, um ein visuelles Format zu erstellen, also Diagramme, die ein visuelles Format der Website darstellen, inklusive Inhalt und Navigation.

Die Anordnung der Inhalte und Funktionen, aber noch ohne das „schöne Design“, das in der nächsten Ebene kommt. Wir wollen definieren, wie der Aufbau der Website sein wird.

Die Werkzeuge, die du für diese Ebene brauchst: Kugelschreiber und Papier.

Ebene 5: Surface (Screendesign)

In der Ebene 5 beginnt unsere Website wie eine Website auszusehen. Aus den Wireframes gestalten wir eine Website. So wissen wir schon im voraus, dass alles am richtigen Platz sein wird.

Es muss aber noch ästhetisch gut aussehen… Warum? Die Besucherinnen und Besucher sollen wissen, dass sie richtig (oder falsch) sind. Ebenfalls sollte der Content gut lesbar sein und verständlich sein. Und auch glaubwürdig. Und dann noch visuell passend zur Firma und zur Zielgruppe. Und, und, und… Ja, Grafikdesign spielt hier zweifellos die grosse Rolle – und die Herausforderung ist enorm, auch diese Ebene zu knacken.

Schlussfolgerung

Viele Website-Bauer beginnen direkt in der 5. Ebene, die für die grafische Gestaltung verantwortlich ist. Alles andere wird gnadenlos übersprungen.

Du kennst sie auch, die wunderschönen Websites, die einfach im Internet vor sich hin strahlen, aber nichts bewirken! Sie werden weder gefunden, noch sprechen sie die Zielgruppe in irgendeiner Form an. Der Funke springt nicht. Nutzlose Schönheit.

Wenn wir mit dieser Struktur unsere Website planen, dann steigern wir die Erfolgschancen enorm. Das ganze hat Hand und Fuss.