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 Designer*innen 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.

Design:Unsere App soll eine minimalistisch gehaltene Social Media Plattform bieten, in der es der Nutzer*in möglich ist, sich durch bewusst reduzierte Funktionen, Design und Verschachtelungen auf wichtige Dinge konzentrieren zu können. Wir waren uns einig, das vieles heutzutage unnötig scheint und viel zu viel ist.Eine Art Instagram im Minimalistischen Stil sollte her.Unsere ersten Gedanken drehten sich um die kleinen schön designten Dinge, die man sieht abfotografieren und einfach teilen möchte ohne groß Schnick Schnack.Wir dachten darüber nach, was kleine schöne Dinge für uns sind und da fiel uns die Murmel ein.

So sind wir dann auch auf unser Murmelkonzept/Design gekommen, welches sich durch unsere ganze App zieht. In unserer App kann man pro Tag nur eine Murmel vergeben, welche mit dem ,,Like'' gleichzusetzen ist. Diese Murmel lässt sich per Drag-and-Drop auf Posts anderer setzen und damit die Murmel des Tages/Like vergeben. Anstatt ein Foto von sich selbst hochzuladen, kann man in unserer App Murmeln als Profilbild einstellen, welche sich nach belieben bearbeiten lassen und bereits einige Murmeln zur Auswahl anbietet.Das Design und die Funktionen wollten wir minimalistisch halten und mit viel Weißraum arbeiten als auch Spaß bringen und unnötig viele Funktionen vermeiden.

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 benutzen.

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 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 Farben habe ich den realen Lebensmittelfarben entnommen und versucht einen bewussten Kontrast durch schwarze Pfannen,Schüsseln, Teller und grau/braunem Besteck zu schaffen. 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 Gestaltung dem Betrachter es zu ermöglichen das Rezept leicht zu verstehen und nach kochen zu können.

Sina_Lang_Endpräsi_1000Worte.pngSina_Lang_Endpräsi_1000Worte.png

Fazit

Der Interface Basics Kurs bei Prof. Boris Müller, hat mir sehr viel Spaß gemacht und vieles dazu gelernt.

Sei es nun 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 stets wachsen.

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

Ich würde den Kurs jeder Design Student*in empfehlen, unabhängig ob ID, KD der PD.

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