Ausgangssituation

Ich habe mich für ein Redesign der internationalen Website der Fridays-For-Future-Bewegung entschieden. Die Website wirkt chaotisch und gestalterisch undurchdacht. Wiederkehrende grafische Elemente werden inkonsistent verwendet, Semantik und Funktion derselben visuellen Merkmale variieren. Die Schriftwahl fällt einfallsloserweise auf die Systemschrift Arial. Ein Raster gibt es nicht, Breiten und Positionierung von Elementen wirken willkürlich. Die Website wirkt zu großen Teilen ungestaltet.

Redesign-Konzept

Während die ungestaltete Wirkung die genannten Probleme mit sich bringt, liegt in dem dilettantischen Ansatz gleichzeitig eine Qualität: Die Seite wirkt „selbst gemacht“. Ein zu professionell und durchgeplant wirkendes Erscheinungsbild wäre nicht authentisch, es würde nicht zu einer sozialen Jugendbewegung passen.

Mein Ansatz war es nun, den rohen Charme des Ungestalteten zu einem gewissen Grad beizubehalten, gleichzeitig aber die oben genannten Probleme zu beheben und ein konsistentes visuelles System zu entwickeln –  gestalterisch durchdacht, aber keine Corporate-Ästhetik.

Um den rohen Charakter zu erzielen habe ich mich für eine Monospace-Schrift (Aperçu Mono) entschieden. Neben dem Regular-Schnitt in immer gleicher Schriftgröße kommt für Auszeichnungen und Überschriften, welche der inhaltlichen Hierarchie entsprechend in zwei unterschiedlichen Schriftgrößen auftreten können, der fette Schnitt zum Einsatz. Grafische Elemente bestehen aus simplen Formen wie Farbflächen und Linien. Das Layout basiert auf einem zwölfspaltigen Raster.

Um die Lesbarkeit zu verbessern wurde die Zeilenlänge verkürzt und die Schriftgröße und Zeilenhöhe vergrößert.

Redesign: About

Die nicht immer ganz nachvollziehbare Entscheidung, wann Links und wann Buttons verwendet wurden, wurde überdacht: Buttons kommen nur noch bei Handlungsaufforderungen zum Einsatz.

Das aufklappbare FAQ-Akkordeon ist durch visuelle Indikatoren nun als solches erkennbar.

Die Tabelle mit teilnehmenden Ländern und zugehörigen Kontakt- und Social-Media-Links wurde überarbeitet. Die Links wurden durch Icons ersetzt, da die ausgeschriebenen URLs keinen Mehrwert bieten. Alle Spalten sind nun gleich groß und die vertikalen Linien der Tabelle fallen weg.

Redesign: Calendar

Die Einteilung des Kalenders in die erste und zweite Jahreshälfte wurde geändert: der Kalender ist nun in bevorstehende und vergangene Ereignisse unterteilt. Die Sortierung verläuft ausgehend vom aktuellen Datum, das heißt bevorstehende Ereignisse werden aufsteigend sortiert und vergangene absteigend. Durch Klick auf den Tabellenkopf lässt sich die Sortierung bei Bedarf umdrehen.

Horizontale Trennlinien zur deutlicheren visuellen Abgrenzung der Ereignisse wurden hinzugefügt.

Textlinks sind nun unterstrichen zur besseren Identifizierbarkeit.

Redesign: Newsletter

Die Sprungmarken, die zu den News-Einträgen führen, sind nun präsenter und heben sich von gewöhnlichen Textlinks ab. Um die Spalteneinteilung des Kalenders (links das Datum, rechts der Titel) zu übernehmen und gleichzeitig als zusammenhängender Link erkennbar zu sein, wird die gesamte klickbare Fläche der Sprungmarken farbig hinterlegt – allerdings in geringerer Deckkraft als der übliche Grünton, um sich von den Buttons abzuheben.

Fazit

Obwohl ich mich schon lange mit der typografischen Gestaltung digitaler Produkte auseinandersetze, war dies mein erster Hochschulkurs, der sich explizit damit beschäftigt. Durch regelmäßige Aufgaben und gemeinsame Besprechungen im Kurs wurden konkrete, wiederkehrende typografische Probleme besprochen und mögliche Lösungen erarbeitet und praktisch vermittelt, was ich als enorm hilfreich empfunden habe.