In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre
Kursbeschreibung: In dem Kurs »Digitale Typografie« wird ein grundlegendes Verständnis für die angewandte Typografie vermittelt. Hierbei werden, durch diverse Übungen unterschiedliche Nutzungsszenarien veranschaulicht und typografische Details wie Lesbarkeit, sowie Mikrotypografie im Web und Apps diskutiert. Zum Semesterschluss sollte ein Redesign einer Webseite oder App mit typografischen Verbesserungen entstehen.
Ich entschied mich für ein Redesign der Webseite von ARAG. Das Unternehmen bietet Rechtsschutzversicherungen aller Art an. Leider wirkt ihre Webseite auf den ersten Blick nicht nur sehr altbacken, sondern sie weist neben einigen strukurellen Problemen auch signifikante typografische Probleme auf, die die Lesbarkeit und Nutzung der Seite deutlich erschweren.
- zu geringe Abstände der Text-/Bildkomponenten
- teilweise zu geringe Zeilenabstände
- teilweise Zeilenlänge zu lang
- Doppelungen von Inhalten
- zu viele unterschiedliche Schriftgrößen
- zu viele unterschiedliche Buttons
- Icons sind nicht konsistent (Stil & Kontur)
- grundlegende Gestaltgesetze werden nicht befolgt (Gesetz der… Nähe, Ähnlichkeit, gemeinsamen Region , Geschlossenheit, Symmetrie usw.)
- Farbkonzept nicht konsistent
- Sinnlose Anordnung von Informationen
Verbesserungen:
- Mehr Luft zwischen Informationsgruppen sowie Zeilenabstände / Verbesserung der Hierarchie. So kann das Auge die jeweilig wichtigen von unwichtigen Informationen schneller und besser erfassen.
- Reduktion von doppelten Informationen, sowie kitschig anmutenden & inkonsistenten Icons.
- Konsistenz in Schriftauszeichnungen und -größen
- Statt Arial & FF Tisa habe ich nur die Hausschrift FF Tisa verwendet, da das Design hierdurch einheitlicher wirkt und die vielen Schriftschnitte der Schriftfamilie zur Auszeichnung ausreichen. Ebenfalls wirkt die Seite dadurch auch seriöser, was man sich als Kunde von einem Unternehmen, das Versicherungen verkauft, auch wünscht.
- Nutzung von wiederkehrenden Stilelementen (abgerundete Bilder/Textboxen, Streifen), die zur Marke passen.
- Gelb und Schwarz als zentrale Leit-Farben; Blau und Olive sowie Grauabstufen und Creme dienen als Hintergrundfarben zur Trennung von Informationsgruppen.
Mit Sicherheit könnte man noch Einiges auf der Webseite ausprobieren und verbessern. Beispielsweise hätte man auch versuchen können die Farben Blau und Olive-Grün wegzulassen und nur mit Gelb und Schwarz/Weiß zu arbeiten, dennoch empfand ich die Berücksichtigung der Unternehmensfarben als wichtiger, auch wenn mir persönlich die Farbkombination rein geschmäcklerisch nicht zusagt. Ebenfalls hatte ich im Laufe meines Designprozesses auch am Umbau der Informationsarchitektur gearbeitet. Zu meinem Bedauern hätten weitere Kniffe jedoch den Rahmen einer 4-Minütigen Präsentation gesprengt, daher habe ich es bei der Hälfte dann sein gelassen.
Im Großen und Ganzen bin ich aber zufrieden mit dem Ergebnis. Die Seite lässt sich nun viel leichter lesen und wirkt klarer wie auch strukturierter.