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

UI Barbecue - Biosphäre Potsdam Redesign

UI Barbecue - Biosphäre Potsdam Redesign

Im Rahmen des Projektwochenkurses „UI Barbecue - Let's roast and try to make it better“ beschäftigten wir uns mit User Interface Guidelines, digitaler Typografie und Figma als Tool für UI-Design. Durch kleinere Hausaufgaben setzten wir das Gelernte direkt um und beendeten den Kurs mit einem Redesign unserer Wahl.

1. Design Guidelines

Als erste kleine Übung sollten wir einen Screen unter Berücksichtigung der Material Design Guidelines oder Apple Guidelines nachbauen. Das Thema war Parcel oder Food Delivery - ich entschied mich für den Nachbau der Ubereats Lieferverfolgung.

Section 1.pngSection 1.png

2. Typografie

Für die zweite Aufgabe sollten wir uns eine Zeitungs- oder Magazinwebsite aussuchen und dessen Desktop- und Mobil-Ansicht typografisch überarbeiten. 

Ich wählte die Seite von Hennerbichler Naturdesign mit einem Beitrag zu wissenswerten Fakten über den Bonsai.

VorherBonsai.pngVorherBonsai.png
Bonsai Vorher.pngBonsai Vorher.png

Die Schrift der Seite ist gut leserlich, aber die Zeilen zu lang für einen Fließtext, um das Lesen angenehm zu machen. Außerdem machen die Sätze im oberen Teil des Beitrages merkwürdige Umbrüche und der Text wiederholt sich (sicherlich ungewollt) an einer Stelle.

Für die neue Schrift wählte ich die Font Merriweather Sans. Außerdem kürzte ich die Zeilen und positionierte den Text linksbündig und weiter mittig.

Bonsai nachher.pngBonsai nachher.png
Bonsai nachher Webseite.pngBonsai nachher Webseite.png
Bonsai Webseite nachher Mobile.pngBonsai Webseite nachher Mobile.png

3. Redesign

Die Abschlussaufgabe war ein Redesign zu einer Webseite oder App unserer Wahl zu gestalten.

Ich wählte die Webseite der Biosphäre Potsdam. Die Biosphäre hat tolle Erlebnissangebote und bietet viele Veranstaltungen, die auf der aktuellen Webseite untergehen. Preise von Tickets oder zur Teilnahme bei Veranstaltungen sind nur sehr umständlich zu finden.

Auch die tollen Bilder sind viel zu klein dargestellt und wirken im Vergleich zu dem großen Freiraum links und rechts verloren. Das Grün im Hintergrund ist außerdem so dominant, dass die Farben der Bilder untergehen und es viel zu bunt und chaotisch wirkt.

BiosphäreKritik.pngBiosphäreKritik.png
Biosphäre Vorher.pngBiosphäre Vorher.png

Ich fokussierte mich in der kurzen Zeit von zwei Tagen auf die Startseite, die vor allem übersichtlich das Angebot der Biosphäre präsentieren sollte. 

Als Inspiration dienten mir Webseiten von Museen, Tierparks und Zoos.

Öffnungszeiten oder andere zeitlich-relevanten Informationen sollten schnell zu finden und übersichtlich aufgelistet sein, dafür ordnete ich sie tabellenartig nebeneinander. Hinzugefügt habe ich einen Timer, der stündlich abläuft und das nächste Donnergeräusch in der Biosphäre signalisiert.

Ein weiteres Feature ist die „Hör mal rein“-Funktion, die Sounds aus der Tropenwelt der Biosphäre abspielt.

Preise sind jetzt aufgelistet und Tickets schnell buchbar. Das Hamburger-Menü navigiert zu anderen wichtigen Seiten wie Informationen zur Anreise oder Serviceangeboten.

Seite1.pngSeite1.png
Seite2.pngSeite2.png
Seite3.pngSeite3.png
Seite5.pngSeite5.png
Seite 6.pngSeite 6.png
Seite 7.pngSeite 7.png
Biosphäre Potsdam Redesign.pngBiosphäre Potsdam Redesign.png

Designsystem.pngDesignsystem.png

4. Fazit

Dieser Projektwochenkurs hat mir wahnsinnig viel Spaß gemacht und ich wünschte er wäre länger gewesen. Die Atmosphäre im Kurs war toll und die Themen super interessant. Die Mischung aus Input und kleinen Aufgaben war super, um das Gelernte direkt umzusetzen.

Dieser Kurs war eine Bereicherung für mein Grundstudium und ich freue mich sehr über alles, was ich daraus mitnehmen kann und werde.

Ein Projekt von

Fachgruppe

Perspektiven und Social Skills

Art des Projekts

Keine Angabe

Betreuer_in

foto: Vanessa Schmitt foto: Alexander Giese

Zugehöriger Workspace

UI Barbecue - Let’s roast and try to make it better

Entstehungszeitraum

Wintersemester 2023 / 2024