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

Basics Interface

Der Kurs Basics Interface von Prof. Boris Müller stellte eine Auseinandersetzung der zentralen Themen des Interfacedesigns dar, welche anhand 3 Aufgaben erarbeitet wurden. Die ersten beiden Aufgaben sollten in Gruppenarbeit und die letzte in Einzelarbeit durchgeführt werden. Um alle praktischen Arbeiten durchführen zu können, erhielten wir vor jeder Aufgabe theoretische Wissensvermittlung über Design selbst und dessen Entstehungsgeschichte, Entwicklung und sahen verschiedene Möglichkeiten die Aufgabe umsetzen zu können.Nach jeder Sitzung präsentierten wir unsere Ergebnisse und erhielten von Kommilitonen*innen und Boris stets Feedback.

1. Digitales Buch

Die erste Aufgabe war es, ein digitales Buch unserer Wahl anhand zwei vorgegebener Screenformate zu gestalten, einmal 1024 x 768 px und 240 x 320 px. Dabei lag der Fokus auf der Typografie, der Zentrierung und der Verhältnisverteilung der beiden Screens. Hierbei war es besonders wichtig auf die Pixel zu achten, Bild und Text Verhältnis in Einklang zu bringen ohne, wichtige Zusammenhänge aus dem Kontext zu reißen.

Maeva Dongmo und ich haben uns für ein italienisches Barista Buch, das ,,BARISTA SAPIENS'' von Antonio Vincenzo Malvasi und den beiden Dario Ciarlantini & Lauro Fioretti entschieden, welches wir in der italienischen Sprache übernommen haben.

Unser Screendesign sollte modern und minimalistisch sein. Wir wollten mit viel Weißraum arbeiten und trotzdem den rustikalen Kaffeestil aufgreifen, weswegen wir uns für die Schriftart: PT Serif entschieden haben.

Für die 1024 x 768 px Screens haben wir die Überschriften in PT Serif Bold 36, den Lesetext in Regular 20 und unsere Zwischenüberschriften in Bold 20 gesetzt.

Auf den 240 x 320 px Screens haben wir für unsere Überschriften die PT Serif Bold 22 und für den Lesetext, als auch die Zwischenüberschrift Regular 14 benutzt.

Für unser digitales Kaffeebuch haben wir uns verschiedene Seiten rausgesucht, die für uns am wichtigsten und interessantesten waren wie: Mehrere Rezepte von unterschiedlichen Getränken, die Kunst des Milchschaums und dessen Variationen, wichtige Begriffserklärungen, ein Cover und ein Inhaltsverzeichnis.

Unser Buch hatte bereits ein gutes Verhältnis von Text und Bild, was es uns leichter machte gutes Material einzubinden.

1024 x 768 px

iPad Mockup Light.pngiPad Mockup Light.png
5. LATTE ART.png5. LATTE ART.png
6. Cappuccino Foderato.png6. Cappuccino Foderato.png
7. Espresso Martini.png7. Espresso Martini.png
8. Tropical Mango.png8. Tropical Mango.png

240 x 320 px

iPad Mockup Light Kopie 3.pngiPad Mockup Light Kopie 3.png
1. Cover.png1. Cover.png
2. INHALTSVERZEICHNIS.png2. INHALTSVERZEICHNIS.png
3. Begriffserklärung.png3. Begriffserklärung.png
4. Caffe alla Turca.png4. Caffe alla Turca.png

Analoge Buch

2cda8f4b-4bb7-4f96-82b0-31e9d16f3fed.JPG2cda8f4b-4bb7-4f96-82b0-31e9d16f3fed.JPG
f81e9ad2-f14f-4ba4-a3ad-5403db1c7635 2.JPGf81e9ad2-f14f-4ba4-a3ad-5403db1c7635 2.JPG
d137f69a-6da5-43b7-8eb2-8ca1a645b7bb.JPGd137f69a-6da5-43b7-8eb2-8ca1a645b7bb.JPG
b7b75a1b-1e3f-487f-883f-28b95ea3a9de.JPGb7b75a1b-1e3f-487f-883f-28b95ea3a9de.JPG
f08a0121-dd12-42bf-86ca-4aea46225386.JPGf08a0121-dd12-42bf-86ca-4aea46225386.JPG

2. GUI

Die zweite Aufgabe bestand darin, eine App zu gestalten, welche Designerinnen in ihrem alltäglichen Leben unterstützen sollte. Dabei sollten wir entweder IOS oder Android konform gestalten. Huy Hoang Nguyen und ich haben uns hierbei für IOS entschieden und uns an die Human Interface Guidelines von Apple gehalten.

Unsere App sollte eine Art minimalistisches Instagram sein, in der es den Nutzerinnen möglich ist sich auf die wesentlichen Dinge im Alltag zu fokussieren und stundenlanges Scrollen abzuwenden. Durch bewusst reduzierte und einfach gehaltene Funktionen, Design mit viel Weißraum und bewussten Verschachtellungen soll es leichter sein, sich auf die wesentlichen Dinge im Alltag zu konzentrieren und die App nur einmal am Tag zu benutzen, welches unsere Murmel unterstützen soll, in dem die Nutzerinnen nur einmal pro Tag ihre Murmel vergeben können. Die Murmel lässt sich per Drag-and-Drop auf Posts anderer setzen und somit die Murmel des Tages/Like vergeben. Anstatt das klassische Profilbild, wählen die Nutzerinnen anhand mehrerer Murmeln ihre eigene aus, die sie auch bearbeiten können. Unsere App soll nicht nur an das wesentliche erinnern und minimalistisch sein sondern auch Freude bringen, indem wir die bunt gestalteten Murmeln mit einbeziehen und diese spielerisch einsetzen lassen mit unserem Motto: ,, A Murmel a Day keeps the Doctor away''.

Design: minimalistisch, viel Weißraum, einfaches Design und Funktionen, bewusste Verschachtellungen und bunt gestaltete Murmeln die Freude bringen sollen.

Navigation: Auf der Startseite Home lassen sich die neuesten Posts anderer einsehen, Trending Ordner durchstöbern und die Möglichkeit seine Murmel des Tages per Drag-and-Drop auf ein Post zu setzen. Der Satz auf der Startseite soll spielerisch und humorvoll daran erinnern, seine eine Murmel pro Tag zu vergeben. ,, A Murmel a Day keeps the Doctor away''.

Durch Profile in der Navigationbar gelangt man zu dem eigenem Profil wo dann auch die Follower einzusehen sind oder vom Profil aus dann in den Editing/Murmelerstellungs Modus kommt.

Über Post in der Navigationbar kommt man dann in den Foto-Aufnahme und Posting Modus, indem sich dann durch Hashtagnutzung aufgenommene Fotos teilen lassen.

Um nach schönen kleinen Dingen oder anderen Profilen zu suchen, kann man ebenfalls durch die Navigationbar zu Search kommen und dort mit eigenen Hashtags und oder bereits vorgeschlagenen Tags zu Suchen.

Zur Veranschaulichung wurde ein Flowchart in der Gallerie hinzugefügt.

Shot.pngShot.png
Iphone 14.pngIphone 14.png
1 Startseite.png1 Startseite.png
1.1 Startseite.png1.1 Startseite.png
1.2 Startseite.png1.2 Startseite.png
1.3 Startseite.png1.3 Startseite.png
1.4 Startseite.png1.4 Startseite.png
1.5 Startseite.png1.5 Startseite.png
2..png2..png
2.1.png2.1.png
2.2.png2.2.png
2.3.png2.3.png
2.4.png2.4.png
2.5.png2.5.png
3 Murmel_erstellung.png3 Murmel_erstellung.png
3.1 Murmel_erstellung.png3.1 Murmel_erstellung.png
4 Posten.png4 Posten.png
4.1 Posten.png4.1 Posten.png
5 Suche.png5 Suche.png
5.2 Suche.png5.2 Suche.png
5.1 Suche.png5.1 Suche.png
6.png6.png
Flowchart.pngFlowchart.png

3. 1000 Worte

In der letzten Aufgabe sollten wir eine Infografik erstellen, welche einen komplexen Prozess darstellt. Dabei sollten wir weder Wörter noch Ziffern verwenden.

Ich entschied mich für ein vegetarisches Hackfleisch-Käselauchcreme Suppen Rezept, welches für 4 Personen geeignet ist. Meine Icons habe ich mit Illustrator erstellt und bewusst eine etwas chaotichere Anordnung meiner Schritte und Elemente gewählt, da ich diese am interessantesten fand.

Das Rezept startet oben rechts mit der Personenangabe, verläuft sich dann in einer Schlangenlinie nach links bis nach unten rechts, wo das Rezept mit dem fertigem Produkt endet.

In dem Rezept befinden sich die Personen und Zutatenanzahl bis hin zu allen Arbeitsschritten wie: waschen, schneiden, braten, kochen uvm.

Die Icons sollen so nah wie möglich an die Farben der realen Lebensmittel ran kommen und dennoch auf nicht mehr als 3/4 verschiedene Farben abzielen. Ich habe versucht einen bewussten Kontrast durch schwarze Pfannen,Schüssel,Teller, grau/braunem Besteck zu schaffen. Die Farben und die wilde Anordnung sollen Lust auf das Essen machen und dennoch nicht zu überdreht und gegen Langeweile wirken. Dadurch soll ein harmonisches Gesamtbild entstehen um ebenfalls einheitliche, wiedereinkehrende Elemente zu verdeutlichen.

Durch Größenunterteilung der einzelnen Icons sollen realitätsnahe Verhältnisse geschaffen werden und durch meine Wahl von einfach gehaltenen Icons und dessen Gestaltung, es dem Betrachter möglich zu machen, das Rezept mit Lust ganz einfach nach zu kochen.

Sina_Lang_Endpräsi_1000Worte.pngSina_Lang_Endpräsi_1000Worte.png

Fazit

Der Kurs hat mir viel Spaß gemacht und ich konnte vieles lernen, wie zum Beispiel der bessere Umgang mit Figma, Illustrator, Zentrierung, Icons, IOS Richtlinien, die Farb, Form und Schriftwahl als auch ein besseres Auge für Screendesign im Allgemeinen.

Alle Aufgaben waren trotz Herausforderungen gut zu meistern und ich konnte durch konstruktives Feedback der Kommiliton*innen und Boris stets wachsen und mich inspirieren lassen.

Was mir besonders gut gefallen hat waren die sehr gut strukturierten Abläufe des Kurses, bei denen ich immer wusste woran ich bin und was einen für die nächste Stunde erwartet.

Ich würde den Kurs jedem empfehlen, egal ob ID PD oder KD.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 02|23

Entstehungszeitraum

Wintersemester 2023 / 2024

Keywords

2 Kommentare

Please login or register to leave feedback

Joooo🤓🤓👏🏻

Eyyyy