Eine für Smartphones optmierte Version wird in Kürze verfügbar sein

3.0.Layout

3.0.Layout    3.1.Raster

3.1.Raster

Die Orientierung entlang eines fest definierten Verhältnisses von Spalten und Abständen vereinfacht nicht nur wesentlich die Entwicklung eines Layouts, sondern sorgt auch für einen klaren und aufgeräumten Gesamteindruck und erleichtert damit dem Anwender die Aufnahme von Inhalten.

Die Verwendung von Layout-Rastern - im Print-Bereich von jeher eine Selbstverständlichkeit - hat sich für Webanwendungen erst in den letzten Jahren durchgesetzt. Im Rahmen dieses Styleguides wird dabei empfohlen, auf das etablierte CSS-Framework Bootstrap zurückzugreifen, insbesondere da es auch die Erstellung von responsiven Layouts erheblich vereinfacht. Grundsätzlich ist dabei aber nicht entscheidend, welches Framework hierfür genutzt wird - entscheidend ist, dass prinzipiell die Anwendung innerhalb eines Rastersystems erstellt wird.

Some Image
Abbildung

Schematische Darstellung eines Rasters (responsive)

    Das Gestaltungsraster ist die grundlegende Architektur einer Seite. Je flexibler es ist, desto besser kann es den verschiedenen Ansprüchen unterschiedlicher Informationsstrukturen gerecht werden. Das verwendete Raster im Eco-System besteht aus zwölf Spalten, die eine Vielzahl von Gestaltungsmöglichkeiten zulassen. Dieses Raster ist auch im Hinblick auf unterschiedlichste Endgeräte geprüft und entwickelt worden.

    3.0.Layout      3.1.Raster      3.1.1.Modularität

    3.1.1.Modularität

    Der flexible Einsatz von Modulen innerhalb einer Seite lässt eine Vielzahl an Darstellungsmöglichkeiten zu, die auch den verschiedensten Anforderungen der unterschiedlichen Seitentypen bzw. deren Inhalt gerecht werden.

    Some Image
    Abbildung

    Modularer Umgang mit Rastersystemen

      Usability-Hinweis

      • Kommen Sie mit wenigen Fluchten aus, das reduziert die Komplexität des Dialoges bzw. der Bildschirmseite.
      • Machen Sie sich für das Screenlayout zwei Gestaltgesetze aus der Gestaltpsychologie zunutze:
        • Gesetz der Nähe: Elemente mit geringen Abständen zueinander werden als zusammengehörig wahrgenommen.
        • Gesetz der gemeinsamen Region: Elemente in abgegrenzten Gebieten werden als zusammengehörig empfunden.
      • Achten Sie also beim Layout darauf, die Elemente auf dem Bildschirm sinnvoll zu gruppieren, so dass die Abstände dem Anwender bei der Interpretation helfen, welche Objekte oder Informationen zusammen gehören.
      • Auch die Reihenfolge sollte sich an der Aufgabe des Anwenders orientieren. Grundsätzlich gilt die Leserichtung von links nach rechts, oben nach unten. Dem entsprechend sollten die Elemente angeordnet sein, von wichtig zu unwichtig.
      • Bei der Ausgestaltung der Layoutbreite ist darauf zu achten, dass für eine gute Lesbarkeit eine Textbreite von 100 - 120 Zeichen nicht überschritten werden sollte.