Mit Abstand am Besten
Im Anfang waren die vielen Informationen ...
Jedes Webprojekt beginnt mit einer Flut an Informationen: Fließtexte, Headlines, Bilder, Grafiken und Animationen – und daraus soll am Schluss im besten Fall ein wunderschönes, aber vor allem funktionales und übersichtliches Layout entstehen. Dazu ist es von Beginn an wichtig, die Inhalte in eine sinnvolle Struktur zu bringen und Themenkategorien für eine benutzerfreundliche Navigation durch die Seite zu entwickeln.
Was bei der Optimierung der sogenannten Web-Usability häufig vergessen wird: Nicht nur die Headlines, Texte und Bilder schaffen Struktur, sondern vor allem die leeren Flächen – der sogenannte Weißraum. Dieser leere Raum einer Webseite ist nicht nur wichtig für ihre Lesbarkeit, sondern kann den Blick der Lesenden genauso lenken, wie die „echten“ Inhalte der Seite. Und auch wenn der Weißraum „Weißraum“ heißt, handelt es sich nicht immer um eine weiße Fläche. Andere neutrale Farben, aber auch beispielsweise ein knalliges Gelb, können als Hintergrundfarbe dienen. Entscheidend ist die Einheitlichkeit dieser Fläche. Sie schafft Raum zum Atmen für das Auge – so bekommen die Inhalte einer Webseite mehr Gewicht. Wichtig ist es, mittels Konzept und Hintergrundraster eine gute Balance zwischen Inhalten und Weißraum zu finden, und ganz bewusst Fokuspunkte für das Auge zu setzen, sodass die Seite weder überladen noch kahl aussieht.
Padding und Margin oder: Das Ausloten von Nähe und Distanz
Wie auch unsere zwischenmenschlichen Beziehungen lebt gutes Webdesign von einem ausgewogenen Verhältnis von Nähe und Distanz der verschiedenen Elemente. Im Webdesign regelt man den Weißraum durch die Abstände der Objekte zueinander. Und das geht ganz einfach mit Padding und Margin:
Padding (auch Padding area genannt) beschreibt als Fachbegriff der Informatik nichts weiter als den Abstand eines Objekts zu seinem Rahmen (border). Man könnte ihn auch als den erzwungenen Innenabstand bezeichnen. Er ist vergleichbar mit dem persönlichen Tanzbereich, der intimen Zone einer Person.
Dazu im Kontrast steht das sogenannte Margin. Es meint den Abstand zwischen den Objekten inklusive Objektrahmen – den Außenabstand. Das ist der erzwungene Leerraum zwischen dem aktuellen Element und seinem übergeordneten Elternelement bzw. seinen Nachbarelementen. Das klingt kompliziert? Es wird leichter vorstellbar, wenn man sich die nachfolgende Abbildung anschaut.
Die Begrifflichkeiten sind klar – aber wann nutzt man das eine oder das andere? Im folgenden Beispiel haben wir eine Headline auf einer farbigen Fläche platziert. Die Farbfläche ist ohne Einstellungen genauso groß wie die Headline. Um einen Abstand der Headline zu den Außenseiten der Fläche zu erzeugen, müssen wir das Padding des Objekts anpassen.
Zur Headline soll sich nun noch eine Subline hinzugesellen: Wenn wir ein neues Element auf der Farbfläche unter der Headline platzieren, klebt dieses erstmal direkt an der Überschrift. Um in diesem Fall einen Abstand zu erzeugen, muss das Margin vergrößert werden. Somit entsteht ein Abstand zwischen den zwei Textelementen auf der Farbfläche.
Was wir heute gelernt haben? Ohne Abstand gehts auch im Webdesign nicht. Denn ein ausgewogenes Verhältnis zwischen Nähe und Distanz von Gestaltungselementen ist wesentlich, damit das Auge die Informationen einer Webseite erfassen kann und die verschiedenen Elemente Platz finden, um sich zu entfalten. Funktionalität und Ästhetik gehen dabei Hand in Hand.
