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

Basic Interface

Dieser Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar. Anhand von drei verschiedenen Aufgaben haben wir uns mit verschiedenen Bereichen der Gestaltung des Interface Designs auseinandergesetzt und es wurden gestalterische Probleme im Interface Design vermittelt.

1. Digitales Buch

Aufgabe:

Wir sollten uns in Zweierteams ein Buch aussuchen, dass Design sowie die Annordnung erfassen und es schließlich digitalisieren. Besonders Wert wurde bei der Aufgabe auf die Typografie und die Lesbarkeit der Texte gelegt. Außerdem sollte es auf zwei verschiedenen Größen dargestellt werden, dafür wurden uns folgende Formate vorgegeben: 1024x768 & 240x320.

Bearbeitung

Meine Teampartnerin (Sandra Fischer) und ich haben uns für das Buch Goodbye Zucker - Zuckerfrei glücklich in 8 Wochen entschieden. Da das Buch visuell für uns sehr ansprechend war, konnten wir es uns gut vorstellen, dies zu digitalisieren. Unsere Idee dafür war, eine Webseite zu erstellen, in der man alle Themen die im Buch behandelt werden einsehen kann. Hauptaugenmerk haben wir dabei auf die Rezepte gelegt. Somit entsandten dann auch die ersten Entwürfe.

sandra-lisa_goodbye_zucker_1_desktop_startseite.pngsandra-lisa_goodbye_zucker_1_desktop_startseite.png
sandra-lisa_goodbye_zucker_2_desktop_8wochen_programm.pngsandra-lisa_goodbye_zucker_2_desktop_8wochen_programm.png
sandra-lisa_goodbye_zucker_1_mobile_startseite.pngsandra-lisa_goodbye_zucker_1_mobile_startseite.png
sandra-lisa_goodbye_zucker_2_mobile_8wochen_programm.pngsandra-lisa_goodbye_zucker_2_mobile_8wochen_programm.png

Nach dem ersten Feedback begannen wir unsere Idee auszuarbeiten. Dabei erstellten wir erst einmal gleiche Illustrationen, wie sie auch im Buch verwendet wurden, suchten ähnliche Schriften und wählten Farben aus. Anschließend machten wir uns an den Aufbau der Webseite, was uns auch am schwierigsten viel. Die größte Herausforderung machte uns das Format 240x320, da es für uns gar nicht so einfach war, viel Inhalt aber auch eine sinnvolle und verständliche Anordnung in dieses Format unterzubringen, daher haben wir uns dort erst einmal viel ausprobiert.

Nach einer weiteren Feedbackrunde sind wir letztendlich auf folgende Screens gekommen. Auch wenn es immer noch ein paar Schwachstellen hat, ist es lesbar und verständlich, daher sind wir nun schon sehr zufrieden mit dem Ergebnis.

Die Aufgabe bot uns spannende Herausforderungen. Zum einen die Teamarbeit an sich, sowie der Umgang mit Typografie, unterschiedlichen Formaten und der Aufbau einer verständlichen Navigation. Mir hat diese Aufgabe aber sehr gut gefallen, da ich unheimlich viel lernen konnte.

3.png3.png
2.png2.png
1.png1.png
4.png4.png
7.png7.png
6.png6.png
5.png5.png
8.png8.png
9.png9.png

2. Graphical User Interface – Inspirations App

Aufgabe:

Bei dieser Aufgabe sollten wir eine Inspirationsapp entwerfen, die Designer/innen dabei helfen soll Ideen zu entwickeln, bei ihrer Arbeit als Hilfe unterstützend und/oder sie inspirieren soll. Die App sollte den üblichen UI- Standards (iOS oder Android / Material Design) entsprechen. Zudem sollte ein Flowchart zur Veranschaulichung der Interaktion in der App erstellt werden. Auch diese Aufgabe sollte wieder in Teams gelöst werden, daher entstand dieses Projekt in Zusammenarbeit mit Mauritz Renz.

Bearbeitung:

Wir näherten uns dieser Aufgabe zuerst, mit einem Brainstorming. Schnell kam der Entschluss eine App zu entwerfen, in der man seine eigenen Arbeiten hochladen kann und somit eine Art online Portfolio zur Verfügung hat. Mann hat außerdem die Möglichkeit, sich durch die Arbeit und den Austausch anderer Künstler inspirieren zu lassen.

Bei unserem Design haben wir uns an den UI-Standards von iOS gehalten und dazu ein modernes, reduziertes und helles Design entwickelt.

Die App lässt sich durch ihre einfache Struktur sehr leicht Navigieren, denn durch die Tab-Bar sind alle wichtigen Kategorien sofort erreichbar. Auf dem Homescreen findet man vorgeschlagene Themen, in denen man sich Arbeiten von Künstlern ansehen, sowie dem Künstler schreiben kann und die Arbeiten Liken und somit unter seinen Favoriten speichern kann. Außerdem kann man eigene Arbeiten hochladen und erstellen und somit sein eigenes Portfolio online stellen.

Die Aufgabe hat mir besonders viel Spaß gemacht, da es keine gestalterischen Vorgaben gab und ich mich viel ausprobieren konnte. Außerdem habe ich einiges zur Navigation und über generelles App Design dazulernen können.

1 - Home Screen.png1 - Home Screen.png
2 - Kategorien.png2 - Kategorien.png
3 - Goldengate.png3 - Goldengate.png
4 - Favoriten.png4 - Favoriten.png
5 - neuer Post.png5 - neuer Post.png
6 - Kontakte.png6 - Kontakte.png
7 - Nachrichten.png7 - Nachrichten.png
8 - Profil.png8 - Profil.png
flowchart.pngflowchart.png

3. 1000 Worte

Aufgaben:

Bei der letzten Aufgabe sollten wir einzeln einen komplexen Sachverhalt in einem Schaubild verständlich darstellen. Dabei sollte das Design keinerlei Text oder Zahlen enthalten und ohne weitere Erklärung nachvollziehbar sein.

Bearbeitung:

Da ich mich in dieser Zeit stark mit dem Thema Hundeerziehung beschäftigt habe und vor allem die Stubenreinheit ein großes Thema bei Welpen ist, dachte ich mir, dass sich das gut für diese Aufgabe eignen würde.

Ich habe mir dafür zuerst ein Konzept überlegt und festgehalten welche Schritte benötigt werden und wie man sie darstellen könnte. Anschließend habe ich die Illustrationen erstellt und alles angeordnet.

1000Worte_1.Entwurf_Zeichenfläche 1.jpg1000Worte_1.Entwurf_Zeichenfläche 1.jpg

Nach der ersten Feedbackrunde wurde mir empfohlen, Entscheidungsstränge einzuarbeiten sowie Farbakzente einzusetzen und abgesehen von der Tageszeit, die man links sieht, zusätzlich noch Zeiten einzubauen, um ein Gefühl dafür zu bekommen wie lange eine Handlung dauert.

Die Anmerkungen habe ich aufgenommen und meine Illustrationen überarbeitet. Somit habe ich Uhren eingebaut, die darstellen wie viel Zeit bis dahin verstrichen ist. Ich habe Entscheidungsstränge eingearbeitet, wie man sich verhalten könnte und sollte, wenn der Hund sein Geschäft erledigt hat. Dies habe ich mit einem hellen grün (richtige Entscheidung) und rot (falsche Entscheidung) verdeutlicht.

Auch in dieser Aufgabe konnte ich vieles mitnehmen und auch drin aufgehen, da ich es sehr mag Illustrationen anzufertigen. Es war zwar auch eine Herausforderung, keinen Text zu verwenden, da es sonst so selbstverständlich ist aber gerade das, hat es besonders und spannend gemacht da man neue Lösungen finden musste.

1000Worte_LisaKoch.jpg1000Worte_LisaKoch.jpg

Fazit

Ich fand die Aufteilung von projektbezogenen Aufgaben und Vorträgen, wo wir spannende Hintergrundinformationen bekommen haben sehr angenehm. Außerdem waren für mich die Feedbackgespräche sehr hilfreich, da man hier von Herrn Müller, sowie den anderen Kursteilnehmer Feedback und neue Denkanstöße bekommen hat.

Mir hat der Kurs sehr gefallen und ich konnte unheimlich viel Infos, Tipps, Gestaltungsregeln und Erkenntnisse mitnehmen.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Wintersemester 2019 / 2020