Das visuelle Gleichgewicht, wichtig für jedes Webdesign

Das visuelle Gleichgewicht, wichtig für jedes Webdesign

Das Gleichgewicht kennen wir zum Beispiel vom Balancieren auf einem Balken oder vielleicht vom Wiegen mit Gewichten auf altmodischen Waagen, wie sie vor langer Zeit oft von Gemischtwarenhändlern genutzt wurden.

Dieses Gleichgewicht ist das psychische Gleichgewicht, wie wir es tagtäglich beim aufrechten Gehen oder Fahrrad fahren halten müssen. Es gibt aber auch noch eine andere Art von Balance, ich meine heute ausnahmsweise mal nicht das seelische, sondern das visuelle Gleichgewicht.

Das visuelle Gleichgewicht ist für alle Arten von Layouts und Gestaltung sehr wichtig und natürlich auch für das Webdesign. Genauso wie Objekte die Du anfassen und in die Hand nehmen kannst etwas wiegen, haben auch die einzelnen Objekte und Elemente auf deiner Website ein Gewicht. Wird die Balance im Layout nicht beachtet, wirkt die Seite unharmonisch. Manchmal kannst Du sogar das Gefühl haben, die Website zieht an einer Seite nach unten oder droht regelrecht umzukippen.

Das symmetrische Gleichgewicht oder auch formales Gleichgewicht

Wenn die Elemente auf beiden Seiten eines Layouts gleich sind, entsteht ein symmetrisches Gleichgewicht. Denke dir zum Beispiel eine vertikale Achse in der Mitte einer Website und spiegel einfach die Spalten und Container von einer Seite auf die andere.

In der unteren Grafik siehst Du ein einfaches Beispiel für symmetrisches Gleichgewicht. Die Spalten der Website habe ich als graue Blöcke dargestellt.

Beispiel für ein symmetrisches Gleichgewicht

Im oberen Teil besteht das Layout aus drei gleichen Spalten und im unteren Teil aus zwei breiteren Spalten, dazwischen ist noch eine Trennlinie. Dieses Spaltenlayout ist entlang der vertikalen Mittelachse absolut im symmetrischen Gleichgewicht.

Diese Form der Gestaltung ist im Webdesign nicht eher weniger vorzufinden als das Layout im asymmetrischen Gleichgewicht.

Das asymmetrische Gleichgewicht oder auch informelles Gleichgewicht

Diese Art sein Weblayout zu gestalten ist in der Regel interessanter als die Gleichmäßigkeit des symmetrischen Designs. Das asymmetrische Gleichgewicht begegnet dir sicherlich auch viel häufiger im Internet, alleine schon durch die Vielzahl an bestehenden Blogs und es kommen täglich neue hinzu.

Beim asymmetrischen Layout werden Bilder, Grafiken, Texte und andere Objekte so angeordnet, dass sie die jeweils andere Seite vom Gewicht her wieder ausgleichen. Dabei muss nicht nur die Größe des Objektes, sondern zum Beispiel auch die Farbe, der Kontrast, die Sättigung und die Form des Elementes beachtet werden. Alles zusammen bestimmt das visuelle Gewicht. Das klingt alles bestimmt sehr abstrakt, deshalb hier ein kleines Beispiel:

Beispiel für ein asymmetrisches Gleichgewicht

Bei unterschiedlicher Größe stellst Du einem großen Objekt mehrere kleine Objekte gegenüber um dieses auszugleichen.

Wenn Du auf einer Seite nicht nur ein großes, sondern auch durch seine Farben recht dominantes Bild hast, handelst Du genau so wie bei unterschiedlich großen Objekten. Du stellst diesem einfach ebenso mehrere kleine Elemente gegenüber. Du gleichst eben nicht nur das Gewicht der Größe aus, sondern beachtest außerdem noch das Gewicht der Farbe.

Beispiel für ein asymmetrisches Gleichgewicht mit Farben

Je nach Sättigung und Farbton wirkt eine Farbe leichter oder schwerer. In der Regel kannst Du davon ausgehen, dass je dunkler und satter eine Farbe ist umso mehr Aufmerksamkeit erhält sie – bei hellen, neutralen Hintergründen. Ist der Hintergrund dunkel, fallen natürlich die helleren Farben mehr auf.

Dieses Spiel der Möglichkeuten kannst Du praktisch unendlich fortführen, aber alle Eventualitäten der Gewichtung zu beschreiben würde den Rahmen dieses Artikels sprengen.

Das visuelle Gleichgewicht – ein Fazit:

Ein harmonisches Design zu erstellen ist nicht so kompliziert, wie es zuerst klingen mag. Es ist gar nicht nötig mathematische Formeln aufzustellen, damit Du das Layout deiner Website ins Gleichgewicht bekommst.

Probiere aus, schiebe hin und her, spiele mit Farben und Formen – ich mache es auch nicht anders. Betrachte dein Layout in aller Ruhe – ich bin sicher, Du kannst vom Gefühl her bestimmen, ob es harmonisch wirkt oder nicht und früher oder später hast Du auch das Gleichgewicht gefunden.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

Comments are closed.