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 01/23

In diesem Kurs haben wir uns mit Themen wie Typographie, Icons und Guidelines zum entwerfen von Nutzerinterfaces beschäftigt. Wir haben Interfaces für ein digitales Buch und einer Design-Tool App entworfen.

Der Kurs war klar in 3 Abgaben aufgeteilt: Digitales Buch, App Interface, Infografik. Zu Beginn des Kurses haben wir einige Stunden eine theoretische Einführung in die historische Entstehung von Intefacedesign und die oben genannten Themen bekommen.

Zum Entwurfprozess gehörten ausführliche Feedback Runden dazu.

Digitales Buch

Displaygrößen 1024 x 768px und 240 x 320px waren Vorgabe. (Tablet und Smart-Watch ähnliche Größen)

Aufgabe war ein Buch zu digitalisieren und dabei dessen Charakter zu übernehmen. Jacqueline hat vorgeschlagen eine alte Broschüre vom Karl May Museum in Radebeul aus 1969 zu nehmen. 

Im Museumsführer sind rote Einfarbige illustrative Zeichnungen die
Erklärtes aus den zugehörigen Texten darstellen. Die Zeichnungen und das vergilbte Papier haben uns zur Farbgebung inspiriert. Auf den letzten Seiten ist ein Glossar mit Zeichen & Symbolen zu finden, die wir als
Inspiration für Navigationselemente genutzt haben.

Bei dieser Aufgabe lag der Fokus besonders auf Typografie. Alle Screens wurden im JPG Format präsentiert um beim Zoomen zu erkennen wie sehr die Typo nachgeben würde.

MacBook Air - 5.pngMacBook Air - 5.png
MacBook Air - 4.pngMacBook Air - 4.png
MacBook Air - 6.pngMacBook Air - 6.png
MacBook Air - 3.pngMacBook Air - 3.png
start.jpgstart.jpg
inhalt.jpginhalt.jpg
kapitel.jpgkapitel.jpg
Frame 37.jpgFrame 37.jpg
Frame 38.jpgFrame 38.jpg
Frame 41.jpgFrame 41.jpg
Frame 40.jpgFrame 40.jpg

App Interface

Eine App die beim Designprozess helfen soll zu gestalten war die Grobe Vorgabe für diese Aufgabe. 

Zusammen mit Carla haben wir zuerst ein paar Ideen gesammelt und uns dann für eine Auto-Layout App entschieden. Diese führt über mehrere Schritte zu einem generierten Layout für Bild/Text Medien.

Fokus lag dabei sich mit Interface Guidelines für Android oder iOS
Systemen zu beschäftigen und diese in unserem Entwurfsprozess
anzuwenden. Wir haben uns mit den iOS Guidelines beschäftigt und uns an Apples Komponenten orientiert um unsere eigenen zu entwerfen.

mock2 (1).pngmock2 (1).png
mock1 (1).pngmock1 (1).png
1 anmelden.png1 anmelden.png
2 start.png2 start.png
3 layouttyp.png3 layouttyp.png
4 format.png4 format.png
5 elemente.png5 elemente.png
7.0 layout.png7.0 layout.png
6 format medien.png6 format medien.png
7.1 Layout.png7.1 Layout.png
7.2 Layout.png7.2 Layout.png
7.3 Layout.png7.3 Layout.png
7.4 Layout.png7.4 Layout.png
12.1 export-1.png12.1 export-1.png
12.1 export.png12.1 export.png
12.2 export.png12.2 export.png
12.3 export.png12.3 export.png
14.0 alle layouts.png14.0 alle layouts.png
14.1 alle layouts.png14.1 alle layouts.png
14.2 alle layouts.png14.2 alle layouts.png
16 profil.png16 profil.png
17 gespeichertes Layout.png17 gespeichertes Layout.png

Infografik

Eine Infografik die etwas erklärt aber ohne dabei Worte zu benutzen. Erst war ich abgeschreckt und genervt von der Aufgabenstellung aber ich habe schnell Spaß an der Herausforderung gefunden. 

Anders als die anderen Aufgaben sollten wir hier alleine Arbeiten, mehr will ich gar nicht sagen.

Zucker.pngZucker.png
mockbi.pngmockbi.png

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 01|23

Entstehungszeitraum

Sommersemester 2023

Keywords