01 Typografie in Bewegung

In der ersten Aufgabe sollten wir unser Können hinsichtlich Typografie unter Beweis stellen. Wir durften aus drei Texten einen wählen, der in Headline, Subheadline, Body Text, Marginalie, Bildunterschrift, Tabelle und Impressum unterteilt war. Wie wir die Hierarchie mit Schriftgrößen, Schriftschnitten oder auch verschiedenen Schriftarten im Layout einer Website sichtbar machen war uns überlassen. 

Meine Wahl fiel auf ein Text über Urban Gardening in Städten mit dem Titel „Wo früher nur Beton war: Der neue Garten der Weststadt“. Dazu entstanden zwei Entwürfe – ein etwas zurückhaltenes und ein experimentelles Layout.

Der experimentelle Entwurf gefällt mir persönlich besser und entspricht eher meinen Stil, wenn ich frei gestalten darf. Hauptaugenmerk war auffällige Typografie und ein unkonventionelles Raster. Man kann in den Screenshots erkennen, dass ich mir eine Einteilung mit Hilfslinien erstellt habe, an die ich mich aber nicht pixelgenau gehalten habe.

02 Formular

In Vorbereitung auf die zweite Übungsaufgabe sollten wir zwei Formulare mitbringen: eines, das uns gut gefiel, und eines, das wir als weniger gut gelungen empfanden. So konnten wir vergleichen, was funktionierte und was verbessert werden musste. Gestalterisch überprüften wir außerdem Abstände und die Einteilung in Raster und Spalten. Die Aufgabe bestand darin ein schlecht gestaltetes analoges Formular in ein digitale optimierte Variante zu überführen. 

In meinem Beispiel ging es um ein Teil der Steuererklärung. Ich achtete auf Inklusion und vereinfachte Funktionen bei der Eingabe von Personendaten. Zusätzlich integrierte ich eine Fortschrittsanzeige (engl.: Progress-Bar), die den User:innen zeigt, wie viele Seiten der Steuererklärung bereits ausgefüllt wurden.

Hier mein Entwurf...

03 Optimierung der Kalendar-Funktion

Die dritte Aufgabe entstand in Teamarbeit. Uns wurde ein Website-Bereich zugeteilt, der verbesserungswürdig war und bei dem zukunftsorientierte Funktionen ergänzt werden sollten, um den Service für User:innen zu optimieren. 

Meine Teampartnerin und ich arbeiteten an der Spielplan-Übersicht der Berliner Bühnen Website mit Fokus auf die Kalendar-Funktion und weitere Filtermöglichkeiten. Das ursprüngliche Design der Website gefiel uns gut, jedoch waren die Filterfunktionen unverständlich umgesetzt. Anbei sieht man Screenshots der Original Seite.

Wir entschieden uns die Aufführungen nicht mehr in einer langen Liste darzustellen, sondern jeweils zu dritt in einer Reihe. So erhält man auf einen Blick mehr Informationen und Auswahlmöglichkeiten. Auch die Filterung zwischen den Kategorien ist nun ersichtlicher in Form von abgerundeten Buttons, die aktiviert werden können.

Zusätzlich wollten wir der Kalendar-Ansicht mehr Raum geben, wodurch die Übersichtlichkeit deutlich verbessert wurde. Man kann nun den Tag, den Monat und das Jahr viel einfacher ändern. Außerdem werden favorisierte, mit einem Stern markierte, Aufführungen im Kalendar angezeigt oder können in einer Favoritenliste abgerufen werden. Von uns hinzugefügt ist ebenfalls eine Kartenansicht von Berlin mit allen Spielorten.

Dieser Redesign Entwurf der Berliner Bühnen Website wurde in Figma gestaltet und funktioniert auch als klickbarer Prototyp.

04 Redesign SMU Berlin

Für die finale Aufgabe entschied ich mich für ein Redesign der Website des Schwulen Museums Berlin. Das Museum bietet vielfältige Ausstellungen und Events über und für die queere Community. Als größte Schwäche der aktuellen Website empfand ich die überladene Startseite sowie die geringe Leserlichkeit. Zwar gefällt mir der experimentelle, typografisch geprägte Ansatz, im Museumskontext hätte ich mir jedoch eine visuellere Gestaltung mit mehr Bildmaterial gewünscht.

Anbei ist der aktuelle Stand der Startseite und der Ausstellungsübersicht zu sehen.

Zunächst analysierte ich die Website mithilfe eines User-Flows, um herauszufinden, welche Funktionen für User:innen besonders wichtig sind und wo Orientierung fehlt – insbesondere bei der Planung eines Museumsbesuchs. Anschließend setzte ich meine Ideen in Wireframes um. Diese sind mir schon im ersten Versuch so gut gelungen, dass ich kaum etwas überarbeiten musste und sie eine gute Grundlage für die finale Gestaltung der Website bildeten. 

Ich integrierte deutlich mehr Bilder ins Layout sowie die Möglichkeit, Online-Tickets zu kaufen. Wichtige Informationen sind nun präsenter, außerdem kann man nun die Ausstellungen mit einem Klick teilen und favorisieren.

Darüber hinaus legte ich mehr Fokus auf Community-Building, da die Zielgruppe relativ eng gefasst ist. So entstand die Idee eines persönlichen Bereichs nach Account-Erstellung, der über Neuigkeiten informiert, passende Events vorschlägt und eine Chat-Funktion bietet. Des Weiteren könnte ein Abonnement-Modell eingeführt werden, das gegen einen monatlichen Beitrag unbegrenzte Museums- und Veranstaltungsbesuche ermöglicht.

04.1 Design Konzept

Der letzte Schritt umfasste die visuelle Gestaltung. Dafür entwickelte ich zunächst eine Ikonografie sowie ein Farbkonzept. Farben, Bildsprache und Typografie sollten weiterhin auffällig und experimentell bleiben, jedoch besser kombiniert werden. Somit habe ich auch verschiedene Tests zur Kombination Farbe der Typografie und Hintergrundfarbe gemacht, um sicher zu gehen dass der Kontrast hoch genug ist. Ebenfalls erstellte ich ein Moodboard mit visueller Inspiration für einzelne Bestandteile oder dem gesamten Look & Feel der Website.

04.2 Finaler Entwurf

Ergänzend fügte ich interaktive Animationen hinzu, die der Website einen eigenständigen und spielerischen Charakter verleihen. So verändern die Buttons ihre Form, wenn man mit der Maus darüber fährt, das Hauptmenü ist dynamisch und es gibt eine Hover-Over Animation in der Ausstellungsliste.

Das Highlight ist die neue Startseite, die nun nicht mehr ausschließlich typografisch aufgebaut ist, sondern aus Vorschau-Bildern der Ausstellungen besteht, durch die sich User:innen frei bewegen können.

Das freie gestalten dieser Website machte mir besonders Spaß, ich arbeitete vor allem intuitiv und meinem persönlichen Stil entsprechend. Ich mag es mit knalligen Farben und auffälliger Typografie zu arbeiten. Meine Gestaltung soll möglichst nicht gewöhnlich sein. Die einzige Schwierigkeit für mich war die Farbkontraste und Leserlichkeit zu überprüfen, damit es eine gewisse Barrierefreiheit gibt. Darüber hinaus achtete ich auf große Schriftgrößen. 

Ich arbeitete ausschließlich mit Figma, wodurch ein sehr ausführlicher Prototyp der Website entstand. Dabei setzte ich mir selbst die Herausforderung, alle Elemente klickbar zu machen, was ich zuvor noch nie so in Detail umgesetzt hatte.

Im Video kann man eine Bildschirmaufnahme von meinem Prototypen sehen, der einen möglichen User-Flow zeigt.

04.3 Abschlusspräsentation

Am letzten Termin stellten wir unser Endergebnis des selbstgewählten Redesign vor. Dabei ging es nochmal um den Ausgangspunkt/die Problemstellung, die Herangehensweise & Ausführung sowie unsere Erkenntnisse während und nach der Gestaltung.

05 Fazit

Ich finde, dass dieser Kurs sehr lehrreich und gut strukturiert war. Die einzelnen Workshops oder Übungen wurden detailliert vorgestellt und bereiteten uns gezielt auf das Endprojekt vor. Ich würde sagen, dass ich schon ein gutes Auge für Gestaltung habe, aber bewusst die erlernten Regeln und Grundlagen nochmal aufzunehmen und vor allem aufzufrischen, in meinem Fall, half mir sehr! Das was wir über Online-Formulare und UX-Writing (leider keine Fotos vorhanden) gelernt haben, war neu für mich und damit besonders spannend. 

Positiv fand ich auch die Mischung aus Einzel- und Teamarbeit sowie die ausführlichen Feedbackrunden mit den Kommiliton:innen und Edmundo. Insgesamt hatte ich das Gefühl, dass viel Wert auf konstruktives Feedback gelegt wurde, weshalb auch zusätzliche Meetings angeboten wurden. Eine gute Mitarbeit ist Grundvorraussetzung und auch der Umgang mit Kritik an der eigenen Arbeit, dennoch fand ich es immer nachvollziehbar und es war eine gute Balance zwischen hilfreichen Verbesserungsvorschlägen und eigener gestalterischer Freiheit. 

Für mich war es der erste richtige Gestaltungskurs im Interface Design, meine Vorkenntnisse waren definitiv hilfreich. Dadurch dass ich mich in Figma schon auskannte, hatte ich keine Probleme und konnte schnell arbeiten. Zum Programm selbst gab es keinen Input, daher sollte einem bewusst sein, dass man es schon können muss oder sich selbst beibringt. Ich habe dadurch noch mehr einen Workflow in Figma entwickelt und hatte Freude daran mit Animationen im Prototypen zu experimentieren.

Als neue Master-Studentin an der Fachhochschule Potsdam war es ein toller Einstieg und ich bin sehr zufrieden mit meinem Endergebnis. Ich freue mich schon die neuen Projekte in mein Portfolio aufzunehmen.