Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

(8. FS) Digitale Typografie 2021 – ARAG-Redesign

(8. FS) Digitale Typografie 2021 – ARAG-Redesign

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.


Das Abschlussprojekt:

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.


Problemanalyse:

Typo Präsi Doku-Slides.001.jpegTypo Präsi Doku-Slides.001.jpeg
Typo Präsi Doku-Slides.004.jpegTypo Präsi Doku-Slides.004.jpeg
Typo Präsi Doku-Slides.003.jpegTypo Präsi Doku-Slides.003.jpeg
Typo Präsi Doku-Slides.002.jpegTypo Präsi Doku-Slides.002.jpeg
Typo Präsi Doku-Slides.005.jpegTypo Präsi Doku-Slides.005.jpeg
Typo Präsi Doku-Slides.007.jpegTypo Präsi Doku-Slides.007.jpeg
Typo Präsi Doku-Slides.006.jpegTypo Präsi Doku-Slides.006.jpeg
Typo Präsi Doku-Slides.008.jpegTypo Präsi Doku-Slides.008.jpeg
Typo Präsi Doku-Slides.009.jpegTypo Präsi Doku-Slides.009.jpeg
Typo Präsi Doku-Slides.010.jpegTypo Präsi Doku-Slides.010.jpeg
Typo Präsi Doku-Slides.011.jpegTypo Präsi Doku-Slides.011.jpeg
Typo Präsi Doku-Slides.012.jpegTypo Präsi Doku-Slides.012.jpeg
Typo Präsi Doku-Slides.013.jpegTypo Präsi Doku-Slides.013.jpeg
Typo Präsi Doku-Slides.014.jpegTypo Präsi Doku-Slides.014.jpeg
Typo Präsi Doku-Slides.015.jpegTypo Präsi Doku-Slides.015.jpeg
Typo Präsi Doku-Slides.016.jpegTypo Präsi Doku-Slides.016.jpeg
Typo Präsi Doku-Slides.017.jpegTypo Präsi Doku-Slides.017.jpeg
Typo Präsi Doku-Slides.018.jpegTypo Präsi Doku-Slides.018.jpeg
Typo Präsi Doku-Slides.019.jpegTypo Präsi Doku-Slides.019.jpeg
Typo Präsi Doku-Slides.020.jpegTypo Präsi Doku-Slides.020.jpeg
Typo Präsi Doku-Slides.021.jpegTypo Präsi Doku-Slides.021.jpeg
Typo Präsi Doku-Slides.022.jpegTypo Präsi Doku-Slides.022.jpeg
Typo Präsi Doku-Slides.023.jpegTypo Präsi Doku-Slides.023.jpeg
Typo Präsi Doku-Slides.024.jpegTypo Präsi Doku-Slides.024.jpeg
Typo Präsi Doku-Slides.025.jpegTypo Präsi Doku-Slides.025.jpeg
Typo Präsi Doku-Slides.026.jpegTypo Präsi Doku-Slides.026.jpeg
Typo Präsi Doku-Slides.027.jpegTypo Präsi Doku-Slides.027.jpeg
Typo Präsi Doku-Slides.028.jpegTypo Präsi Doku-Slides.028.jpeg
Typo Präsi Doku-Slides.029.jpegTypo Präsi Doku-Slides.029.jpeg
Typo Präsi Doku-Slides.030.jpegTypo Präsi Doku-Slides.030.jpeg

- 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


Farben & Formen

1.001.jpeg1.001.jpeg

1.002.jpeg1.002.jpeg

1.003.jpeg1.003.jpeg


Das Redesign

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.


1. »Startseite« im Vergleich

01 Start Vergleich.png01 Start Vergleich.png
02 Start Vergleich.png02 Start Vergleich.png
03 Start Vergleich.png03 Start Vergleich.png
04 Start Vergleich.png04 Start Vergleich.png
05 Start Vergleich.png05 Start Vergleich.png
07 Vollbild Start Original.png07 Vollbild Start Original.png
06 Start Vergleich.png06 Start Vergleich.png
08 Vollbild Start Redesign.png08 Vollbild Start Redesign.png


2. »Mietrechtsschutz« im Vergleich

01 Mietrecht Vergleich.png01 Mietrecht Vergleich.png
02 Mietrecht Vergleich.png02 Mietrecht Vergleich.png
03 Mietrecht Vergleich.png03 Mietrecht Vergleich.png
04 Mietrecht Vergleich.png04 Mietrecht Vergleich.png
05 Mietrecht Vergleich.png05 Mietrecht Vergleich.png
07 Vollbild Mietrecht Redesign.png07 Vollbild Mietrecht Redesign.png
06 Vollbild Mietrecht Original.png06 Vollbild Mietrecht Original.png


Detailansicht »Startseite«

Start 01.pngStart 01.png
Start 02.pngStart 02.png
Start 04.pngStart 04.png
Start 03.pngStart 03.png
Start 05.pngStart 05.png
Start 06.pngStart 06.png
Start 07.pngStart 07.png
Start 08.pngStart 08.png
Start 09.pngStart 09.png
Start 10.pngStart 10.png

ezgif.com-gif-maker.gifezgif.com-gif-maker.gif


Detailansicht »Mietrechtsschutz«

Mietrecht 01.pngMietrecht 01.png
Mietrecht 02.pngMietrecht 02.png
Mietrecht 03.pngMietrecht 03.png
Mietrecht 04.pngMietrecht 04.png
Mietrecht 05.pngMietrecht 05.png
Mietrecht 06.pngMietrecht 06.png
Mietrecht 07.pngMietrecht 07.png
Mietrecht 08.pngMietrecht 08.png
Mietrecht 09.pngMietrecht 09.png
Mietrecht 10.pngMietrecht 10.png

Slide 2.gifSlide 2.gif


Fazit

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.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Digitale Typografie · SoSe 2021

Entstehungszeitraum

Sommersemester 2021

Keywords