Das Gleichgewicht! Grundlage für gutes Webdesign!

  • von Lennart Prange

Es ist mal wieder Zeit, sich einem Grundsatz beim Webdesign zu widmen. Dieses Mal geht es ums Gleichgewicht. Ein Gleichgewicht entsteht, wenn alle Elemente des Layouts auf beiden Seiten des Layouts gleich “schwer” sind. Es gibt das symmetrische Gleichgewicht (formales Gleichgewicht) und das asymmetrische Gleichgewicht (informelles Gleichgewicht). Ergänzend muss ich wohl noch erwähnen, dass es auch noch andere Symmetrien gibt. Die behandle ich in diesem Beitrag allerdings nicht.
Ohne das Gleichgewicht wirkt eine Seite unfertig und unausgeglichen. Der Nutzer fühlt sich nicht wirklich wohl.

Kommentare, Social Bookmarks oder eine kleine Abstimmung bei Yigg wären wie immer toll :). Viel Spaß mit dem Artikel.

Symmetrisches Gleichgewicht (formales Gleichgewicht)

Wenn die Elemente einer Komposition auf beiden Seiten einer Achse gleich sind, spricht man von symmetrischem Gleichgewicht. Der Inhalt muss zentriert sein, oder in beiden Spalten gleich gewichtet werden. Bei den meisten Internetseiten kann man diese Symmetrie nicht anwenden, da der Inhalt dafür nicht passend ist, manchmal funktioniert es allerdings.

Beispiel für symmetrisches Gleichgewicht

Beispiel für symmetrisches Gleichgewicht

Ich denke, dass mein grafisches Beispiel das symmetrische Gleichgewicht recht gut verdeutlicht. Die Elemente sind links und rechts genau gleich. Dadurch wirkt das Ganze sehr ausgewogen und komplett. Allerdings ist es auch ein wenig langweilig. Das asymmetrische Gleichgewicht ist optisch meist interessanter.

Asymmetrisches Gleichgewicht (informelles Gleichgewicht)

Das asymmetrische Gleichgewicht ist beim Webdesign meistens passender. Wenn man ein großes und schweres Objekt auf einer Seite der Komposition einfügt, kann man es durch mehrere kleine Objekte auf der anderen Seite ausgleichen. Hier ist es üblich mit Farben ein Gleichgewicht zu schaffen. hicksdesign zeigt, wie es funktioniert.

hicksdesign zeigt asymmetrisches Gleichgewicht

Bemerkt ihr die Harmonie, die hicksdesign erschaffen hat? Durch die schwere und dunkle Navigationsleiste wird das helle und leichte, aber große Element, ausgeglichen.

Mit diesem Wissen gewapnet, solltet ihr bessere Webseiten gestalten können. Viel Spaß damit!

13 Kommentare

  1. NeX
    29. August 2008 um 16:49 Uhr

    Sehr Informativ, gut zu wissen!

  2. OrangeBlue
    30. August 2008 um 00:44 Uhr

    Echt klasse… 🙂

  3. Uraiwan
    30. August 2008 um 11:33 Uhr

    Gute Rechtschreibung, auch eine Grundlage für gutes Webdesign.

    Mindestens 11 Rechtschreibfehler in so einem kurzen Artikel geben mir das Gefühl, dass es hier wohl nur darum geht, Traffic und besseres Ranking zu erhalten.

    Setzen … 6

  4. Lennart Prange
    30. August 2008 um 12:04 Uhr

    Aha. Kritik akzeptiert. Aber wo sind die Rechtschreibfehler? Ich hab drei gefunden aber nicht die besagten 11. Naja, ich lasse mich gerne aufklären.

    Ich verstehe aber was du meinst. Teilweise habe ich wohl anders gedacht als geschrieben ;). Ich habe die meisten Fehler korrigiert, glaube ich. Passiert mir normalerweise nicht, danke für den Hinweis.

  5. Udo
    30. August 2008 um 12:43 Uhr

    Kritik erwünscht?
    O.k.:

    – Flüchtigkeitsfehler, Bsp.: Gleichgewischt

    – Fehler in Groß-/Kleinschreibung, Bsp.: das ganze

    – falsche bzw. fehlende Interpunktion, Bsp.:
    Auch wenn ein großes Element einem kleinen gegenübersteht, schaffen sie es mit dem geschickten Einsatz von Farben ein Gleichgewicht zu erzeugen.

    – Generell kaum nennenswerter Informationsgehalt. Wem solche Grundlagen nicht deutlich sind, der sollte dir Finger davon lassen.

  6. Lennart Prange
    30. August 2008 um 12:51 Uhr

    Danke. Ich habe die Fehler korrigiert. Über den Informationsgehalt müssen wir wohl nicht reden. Dieses Blog soll auch für Anfänger interessant sein und sicherlich ist sich nicht jeder über symmetrisches und asymmetrisches Gleichgewicht im Klaren. Die Verwendung im Web dürfte den meisten Anfängern fremd sein.

  7. OrangeBlue
    30. August 2008 um 13:05 Uhr

    also die rechtschreibfehler finde ich jetzt nicht tragisch… kann ja jedem mal passieren, wenn er einen langen artikel schreibt.

    MfG

  8. Lennart Prange
    30. August 2008 um 13:10 Uhr

    Naja, ich muss schon sagen, dass der Artikel nicht so lang war. Diese Fehler hätten mir nicht passieren müssen/dürfen. Ich muss mich wohl ein wenig mehr konzentrieren 😉

  9. Uraiwan
    30. August 2008 um 13:13 Uhr

    Schon besser 🙂

    Fehlt nur noch:

    – Elemente eine Komposition -> .. einer …

    – Durch die schwere, dunkle Navigationsleiste wird das helle, leichte aber große Element ausgeglichen. -> Durch die schwere und dunkle Navigationsleiste wird das helle und leichte, aber große Element, ausgeglichen.
    (Sieht so vielleicht besser aus, was meint Udo ?)

    – Überschrift und Legende der Grafik (Beispiel für symmetrisches Gleichgewicht) sind gleich, eine kann weg.

    Zum Informationsgehalt: Da hast du Recht, Lennart. Jeder fängt mal klein an und auch die einfachsten Grundlagen sind dafür hilfreich. Nicht jeder ist als Design-Profi geboren worden. Etwas mehr Tiefgang wäre trotzdem hilfreich gewesen.

  10. nastorseriessix
    1. September 2008 um 13:38 Uhr

    Schön das es noch Leute gibt die sich mit diesen Grundlegenden Themen befassen. Bei der Verwendung von Grafiken im Design/Theme ist das sehr wichtig wie ich finde, stimme dir da auch zu. Wenn man allerdings nur mit CSS arbeitet, dann kann man das viel feiner ausbalancieren. 😉

    nastorseriessixs letzter Beitrag..Theme Version 1.5 Online

  11. Anessa
    9. Dezember 2008 um 12:17 Uhr

    Ich denke, dass der Fehler war nicht das Wichtigste, und nicht, weil sie gibt es, und viele, die Hauptsache ist bedeutungslos. Ich bin kein Designer, sondern auch für mich dieser Artikel war verständlich, so vielen Dank an Autor.

Trackbacks/Pingbacks