Ü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:
- Kontrast (Contrast)
- Wiederholung (Repetition)
- Ausrichtung (Alignment)
- 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