In Teil 1 unserer Blogreihe über Webdesign haben wir die Wichtigkeit der Nutzerfreundlichkeit, auch User Experience genannt, herausgestellt und erklärt, was eine gute UI, also eine Benutzeroberfläche, ausmacht. Im 2. Teil widmen wir uns nun weiteren Grundlagen des Webdesigns.

Entstehungsprozess Website

Es ist der Job eines Webdesigners dafür zu sorgen, dass eine Website möglichst übersichtlich und “clean” gehalten ist, damit sie die Navigationswege des Besuchers erleichtert und gezielt dafür sorgt, dass er zum Abschluss einer Conversion gebracht wird. Diese Conversion kann ein abgeschlossener Kauf, eine ausgefüllte Anmeldung für einen Newsletter, die Teilnahme an einer Umfrage und vieles mehr sein. Doch woher weiß der Webdesigner so genau, wie der Nutzer sich auf der Website bewegen wird?

Lässt ein Unternehmen eine Website für sich bauen, wird zunächst eine Persona der Zielgruppe erstellt, die gleichzeitig definiert, in welchen Farben und Formen das Design gehalten werden sollte. Danach erstellt der Webdesigner eine sogenannte User Flow Chart, die schematisch alle Wege beschreibt, die ein Nutzer auf einer Website gehen wird und an welcher Stelle dafür welche Art von Element nötig ist. Eine solche User Flow Chart beschreibt beispielsweise, an welcher Stelle der Gast auf eine Design Page treffen sollte, wann er durch Klicks eine Entscheidung fällt und welche Zwischenschritte nicht von ihm, sondern vom System selbst gegangen werden müssen. Die User Flow Chart dient dem Webdesigner als Landkarte, anhand derer er dann einen Wireframe erstellt, eine Art inhaltslose Maske der zukünftigen Website. Auf den Wireframe folgt der erste Clickdummy. Hierbei handelt es sich um einen noch nicht voll funktionale Version der Website, den man von Probanden testen lässt, um zu sehen, ob das Klickverhalten tatsächlich richtig eingeschätzt wurde und alle Prozesse reibungslos durchlaufen werden können.

Gesetze im Webdesign: Hier ist nichts dem Zufall überlassen

Am Raster ausrichten:

Webdesign orientiert sich stets an einem unsichtbaren Gestaltungsraster, an dem die Elemente positioniert werden, um eine optimale Anordnung zu garantieren. Die meisten Webdesigner orientieren sich hier am sogenannten 960 Grid, einem Raster, dass für entweder 12, 24 oder 36 Spalten genutzt werden kann.

Der goldene Schnitt:

Auch im Webdesign spielt dieses mathematische Teilungsverhältnis eine wichtige Rolle. Er begünstigt konsistente Proportionen, indem sich vom größten bis zum kleinsten Gestaltungselement immer wieder das gleiche Muster wiederholt. Das goldene Rechteck, das 1,6180x so breit wie hoch ist, dient als Grundlage zur Errechnung der Pixelzahl. Hier ein Beispiel: 300px Breite → 300 x 1,6180 = 485px Höhe

Nähe und Gleichheit:

Webdesigner vermitteln die Zusammengehörigkeit von Elementen durch Nähe oder Gleichheit in Form, Farbe und Größe.

Geschlossenheit und Kontinuität

Geschlossene Objekte werden vom Gehirn schneller erkannt als offene. Darüber hinaus ergänzt es angeschnittene Formen oder Texte weitgehend automatisch. Diese Fähigkeit nutzen Webdesigner, um dynamische, auffällige Elemente zu platzieren, die auf den ersten Blick unvollständig wirken, deren Inhalt aber dennoch verstanden wird.

Figur-Grundprinzip und Symmetrie:

Die Verwendung von verschiedenen Ebenen im Webdesign macht sich das Gesetz des Form-Grundprinzips zu Nutze. Leicht transparente Elemente beispielsweise rücken hierbei in den Hintergrund und werden als weniger wichtig wahrgenommen, stehlen den wesentlichen Informationen somit nicht die Show. Ähnlich wie beim Gesetz der Kontinuität, besagt das Gesetz der Symmetrie, dass angeschnittene Elemente im Gehirn zu einem symmetrischen Ganzen zusammengefügt werden. Es dient ebenfalls der Auflockerung durch gezieltes Weglassen von Formen.

Farbe, Helligkeit und Typografie:

Farben sind im Webdesign sehr vielseitig einsetzbar. Während miteinander harmonierende Farben Zusammengehörigkeit symbolisieren, können Komplementärfarben für besondere Aufmerksamkeit sorgen. Hinzu kommen die zahlreichen symbolischen Konnotationen verschiedener Farben. Unser Gehirn ist vor allem durch den Straßenverkehr darauf trainiert, Rot als Warnsignal wahrzunehmen. So erzielt es im Zusammenhang mit Rabattaktionen und wichtigen Hinweisen eine besondere Aufmerksamkeit. Es zeichnet einen guten Webdesigner aus, sich ebenfalls über die Wirkung bestimmter Typografien abzusichern. Nicht jede Schrift ist auf jedem Endgerät gleich gut lesbar. Generell sollten im Bereich Webdesign Serifenschriften zu Gunsten leicht lesbarer, klarer Schriften vermieden werden. Ebenfalls sollten nicht mehr als 3 Schriftarten auf einer Seite gemischt werden, da sich das Auge sonst verliert.