SideBarMenu

Überblick Visual Style Guide

Vier allgemeine Gestaltungsprinzipien für Stud.IP

"...the basic principles of design that appear in every well-designed piece of work."

- Robin Williams, The Non-Designer's Design Book

Visuelle Gestaltung

Bezüglich der visuellen Gestaltung von Elementen innerhalb einer Seite gibt es viel zu beachten. Eine einfache Möglichkeit die Nutzbarkeit der jeweiligen Seite schnell zu erhöhen, ist die Beachtung der vier C.R.A.P.-Prinzipien:

  1. Kontrast (Contrast)
  2. Wiederholung (Repetition)
  3. Ausrichtung (Alignment)
  4. Nähe (Proximity)

Die im Folgenden vorgestellten Regeln gibt es auch als Poster Attach:studip-design-poster-final.pdf.

Kontrast (Contrast)

  • Kontrast dient als gestalterisches Mittel, um verschiedene Seitenelemente klar unterscheidbar voneinander abzuheben.
  • Kontrast kann dazu verwendet werden, um auf wichtige Inhalte zu fokussieren.
  • Nicht gleiche Elemente sollten sich deutlich voneinander unterscheiden.
  • Kontrast kann über verschiedene gestalterische Elemente realisiert werden z.B. Schriftart, Farbe, Größen, Formen, Nähe, etc.

Negativbeispiel

  • Dateien hochladen in Veranstaltungen - 9 gleichaussehende Button in einer Reihe

Repetition (Wiederholungen):

  • Wiederholungen schaffen Konsistenzen im System
  • Ein konsistentes Design verbessert die Nutzbarkeit des Systems
  • Konsistenzen können durch den wiederholten Einsatz verschiedenster gestalterischer Elemente erzeugt werden:
    • Abstrakt: Menüstrukturen, Funktionsabläufe
    • Konkret: Icons, Schriften, Bezeichnungen

Beispiele

  • Hauptnavigationsleiste bleibt gleich
  • Footer bleibt gleich
  • Infobox/Sidebar

Negative Beispiele

  • verschiedene Suchformularvarianten bei der Personensuche

Ausrichtung (Alignment):

  • Inhaltselemente sollten nicht willkürlich auf einer Seite platziert, sondern an anderen Elementen horizontal und vertikal ausgerichtet sein.

Tipps

  • Text sollte links- oder rechtsbündig ausgerichtet sein, aber nicht beides gleichzeitig auf einer Seite.
  • Abstände sollten gleichmäßig sein.
  • Kein rechts ausgerichteter Text in einer rechten Seitenspalte. Dies erzeugt zu viel Whitespace.
  • Hilfslinien zeichnen, Abweichungen festzustellen

Negativbeispiel

  • Assistent zum Anlegen von Veranstaltungen

Nähe (Proximity)

  • Inhaltselemente, die nah beieinander stehen, erwecken den Eindruck, dass sie zusammen gehören:
  • Verwandte Inhaltselemente sollten daher räumlich nah zueinander gruppiert werden.
  • Zwischen unterschiedliche Inhaltselementen sollte genug Abstand vorhanden sein, weil sonst ein Eindruck von Zusammengehörigkeit erweckt wird.
  • Die Gruppierung der Elemente erhöht die Übersichtlichkeit und Inhalte werden besser strukturiert.

Negatives Beispiel

  • Gruppenverwaltung - TeilnehmerInnen einer Veranstaltung oder Kalender/Adressbuch - Button zum Hinzufügen zu einer Gruppe ist zu weit weg

Weiterführende Informationen

Letzte Änderung am 29.05.2013 15:22 Uhr von melalbre.