2-visuelle Organisation

1. Nähe ("Proximity") – Dinge, die nah beieinander sind, stehen in einer Beziehung

2. Ausrichtung ("Alignment") – Gleich ausgerichtet bedeutet gleich wichtig, „nebeneinander“

3. Konsistenz – Ähnlich aussehende Dinge sind inhaltlich auch ähnlich

4. Kontrast – Verschiedene Dinge sollten auch verschieden aussehen 

Menüs links und rechts

mindestens 50% Inhalt (in der Mitte)

Zeige die Liste und biete direkt daneben/darin/darüber/darunter Bearbeitungsfunktionen
an!

Vier Gestaltungsprinzipien: Nähe, Ausrichtung, Konsistenz, Kontrast
Gesamtziel: Gute Entsprechung zwischen Inhaltsstruktur und visueller Organisation
     o zum schnelleren Erfassen einer Seite
     o zum sichereren und schnelleren Navigieren auf der Seite / in dem Webauftritt
Teilweise widersprüchlich
     o Interessant gestalten vs. konsistent gestalten?
     o Kontrast steigern vs. nicht überladen (visuelles Rauschen)
Weitere Gesetze (es gibt viele Varianten!)
     o Geschlossenheit (unvollständiges wird entsprechend ergänzt)
     o Symmetrie / Asymmetrie
        (symmetrische Darstellungen wirken "anziehend")
     o Visuelles Gewicht (bestimmt durch Größe, Farbe, Helligkeit, Form, Länge)

Grundidee:
    Formatierung (primär: Anordnung) von Elementen in Abhängigkeit von Geräteeigenschaften
        (primär: Größe, Auflösung)
    vor allem durch Zuordnung verschiedener CSS-Stylesheets
        (z.T. unterstützt durch JavaScript-Code)

*Fest Breite  - starr, Angabe aller Positionen in Pixel

*Fluid Layouts - Angabe von Breitenangaben und Positionen in Prozent (der Gesamtbreite)

*Elastisches Layouts - Angabe von Breitenangaben und Positionen in "em", dadurch Kopplung der
Anordnung an die aktuelle Schriftgröße (statt an die Bildschirmbreite) [width: 55em Anzeigen von rund 55 Zeichen pro Zeile]

*Hybride Layouts - Häufig: Menüleiste feste Breite, prozentualer Anteil in der Mitte