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

Alle digitalen Interfaces haben fast keine mechanischen und physischen grenzen in ihrer Gestaltung. Software hat keine Form - wir gestalten sie und halten uns oft an konventionelle Designs. In dem Kurs Basics Interface, wurden wir an die Grundlagen des Interface Design herangeführt. Über verschiedene Vorträge vermittelte Boris uns Wissen bezüglich der Geschichte des Interface, Typografie am Screen, Graphical UI’s und über das visuelle Abbilden von Informationen.

I. Digitales Buch

Die erste der drei Aufgaben befasste sich mit der Digitalisierung eines Buches. In der Auswahl waren wir freigestellt. Die Schwierigkeiten lagen darin, ein funktionales Navigationskonzept zu entwerfen und die Screens in einem 240x320 Pixel Format nutzbar zu gestalten. Zu kleine Schriftgrößen oder Design Elemente werden in dieser Dimension schnell schlecht erkennbar.

Ich arbeitete mit Samira Rehmert an der Digitalisierung des Buches „Der Zauberspiegel des M. C. Escher“. Das Buch bringt sowohl eine Menge Text als auch viel Bildmaterial über seine Kunstwerke mit, wodurch sich die Screens abwechslungsreich befüllen ließen. Mehrere Iterationen und konstruktives Feedback ließen uns nach und nach das Interface korrigieren. Die Kernidee dieses Entwurfs lag darin, dass das Selbstportrait von Escher, die spiegelnde Sphere, als zentrales Navigationselement dient. Die einzelnen Kapitel sind wie bei einer Uhr im Kreis aufgelistet und können durch einfaches anklicken angewählt werden. Hierbei war uns wichtig, dass alle Kapitel jederzeit erreichbar sind, da diese nicht aufeinander aufbauen. Des weiteren bildet die radiale Anordnung der Striche eine progress-bar, die ersichtlich macht wie weit das Kapitel bereits gelesen wurde. Um zu dem zweiten Teil des Buches zu gelangen, entschieden wir uns eine Tab navigation im unteren Bereich einzubinden.

Screens-Buch_mobil_1-3.jpgScreens-Buch_mobil_1-3.jpg
Screens-Buch_mobil_4-6.jpgScreens-Buch_mobil_4-6.jpg
Screens-Buch_mobil_7-9.jpgScreens-Buch_mobil_7-9.jpg

Screens-Buch_1.jpgScreens-Buch_1.jpg
Screens-Buch_2.jpgScreens-Buch_2.jpg
Screens-Buch_3.jpgScreens-Buch_3.jpg
Screens-Buch_4.jpgScreens-Buch_4.jpg
Screens-Buch_5.jpgScreens-Buch_5.jpg
Screens-Buch_7.jpgScreens-Buch_7.jpg
Screens-Buch_6.jpgScreens-Buch_6.jpg
Screens-Buch_8.jpgScreens-Buch_8.jpg

II. Graphical User Interface (GUI)

In der zweiten Aufgabe war uns viel Freiheit gegeben. Wir hatten das Ziel eine App für iOS oder Android, zu entwickeln, die Designer in ihrer alltäglichen Arbeit unterstützt. Dies durfte ganz unterschiedlich interpretiert werden. Hierbei arbeitet ich mit Franky Stryj zusammen. Wir starteten in die Aufgabe mit einem Brainstorming und sammelten Ideen. Nachdem wir drei Ideen etwas weiter gedacht hatten, entschieden wir uns für eine. Ein Abomanager. Er listet alle deine laufenden und pausierten Abonnements. Über ihn lassen sich diese einsehen, wechseln, pausieren oder gar kündigen und es werden individuelle Vorschläge geboten, bei welchen Anbietern es gerade Sonderaktionen oder allgemein günstigere Tarife für den eigenen Status gibt (z.B. Studentenstatus). Außerdem lassen sich die Gesamtausgaben im Monat oder Jahr, sowie die Vertragslaufzeiten überblicken.

Nachdem wir wussten welche Features unsere App enthalten sollte, erstellten wir ein Moodboard und kreierten die ersten Design Entwürfe. Wir diskutierten sie gemeinsam und kombinierten die besten Stücke. Bevor es später an das Design der Screens ging hielten wir konzeptionell fest welche Seiten die App mitbringen soll, wie sie strukturiert ist und welche Inhalte wir auf den Seiten abbilden. So entstand Stück für Stück ein klares, übersichtliches und feinfühliges Design, dass sich an den Human Interface Guidelines von Apple orientiert.

Log-In.pngLog-In.png
Abo Übersicht & Hinzufügen.pngAbo Übersicht & Hinzufügen.png
Abo wechseln.pngAbo wechseln.png
Pausieren & aktivieren.pngPausieren & aktivieren.png
Kündigen.pngKündigen.png
Seitenstruktur-Abomanager-1.jpgSeitenstruktur-Abomanager-1.jpg
Finanzen & Profil.pngFinanzen & Profil.png

III. 1000 Worte

Die dritte Aufgabe befasste sich mit einem komplexen Sachverhalt unserer Wahl, der wie der Titel indirekt verrät ohne Worte abgebildet werden sollte. Die Abbildung durfte also keinerlei Text enthalten und sollte den Sachverhalt dennoch möglichst deutlich kommunizieren.

Mein erstes Thema war der Herstellungsprozess eines Prozessors. Hierbei wollte ich Prozessebene chronologisch mit einbauen um die verschiedenen Herstellungsphasen zu visualisieren. Doch dann fand ich recht schnell heraus, dass die Produktion eines Mikroprozessors heute mehrere Wochen dauert und mehr als 100 einzelne Prozessschritte in Anspruch nimmt …

Also wandelte ich meine Leitfrage etwas ab und beschäftige mich mit der Evolution der Chips von Anbeginn bis 2021. Hierbei stellte ich drei Chips, die repräsentativ für ihre Zeit sind gegenüber und untersuchte Sie auf ihre Eigenschaften (Intel 4004 - 1971, AMD K5 - 1996, Apple M1 Max - 2021). Hierbei war es immer wieder schwierig verlässliche Fakten zum Aufbau der Mikroprozessoren zu finden, da die Firmen sie nur ungerne im Detail preis geben. Ich fokussierte mich schlussendlich auf folgenden Eigenschaften der CPU’s: physische Größe, Anzahl Kerne, Taktung der Kerne, Materialschichten, Herstellungszeit, Menge Transistoren. Die größte Herausforderung war hierbei diese gigantischen Sprünge vor allem im Bezug auf die Anzahl der Transistoren zu visualisieren. Angenommen ich hätte einen Transistor in der Größe eines Pixels dargestellt – was ja schon quasi nicht erkennbar ist – selbst dann hätte die Pixelmenge meines gesamten Displays nicht ausgereicht das Verhältnis von 1 (Intel 4004 – 2300 Transistoren) zu 24.782.608 (M1 Max – 57 Milliarden Transistoren) abzubilden. Dieses Problem löste ich, indem ich die Visualisierung der Menge nur angeschnitten auf dem Bild platzierte.
Um die drei Mikroprozessoren zeitlich einzuordnen, nutzte ich einen Zeitstrahl. Auf diesem sind drei prägnante Ereignisse der Geschichte abgebildet, zu denen fast jeder die Jahreszahlen im Kopf hat. Sie dienen zur Orientierung.

Lucas-1000-Worte-v1-01.jpgLucas-1000-Worte-v1-01.jpg
Lucas-1000-Worte-v2-01.jpgLucas-1000-Worte-v2-01.jpg
Bildschirmfoto 2022-10-06 um 00.09.52.pngBildschirmfoto 2022-10-06 um 00.09.52.png

IV. Fazit

Ich würde den Kurs an alle Interfacer weiterempfehlen, die sich noch im Grundstudium befinden. Er bietet einen reichhaltigen Überblick und spannende Einblicke in Felder des Interface Designs. Besonders gefallen hat mir das stetige Vorstellen des Arbeitsfortschritts, wodurch konstantes Feedback und ehrliche Kritik in die Verbesserung seiner Gestaltung einbezogen werden konnte. Die Präsentationen von Boris weckten in mir weiter reges Interesse am Fach und lehrten mich, die Verantwortung von DesignerInnen zu erkennen. Auch die Aufgabenstellungen haben Spaß gemacht. Zwischenzeitig hätte ich mir gewünscht, etwas mehr Methodik bei der Erstellung von Interfaces mit an die Hand zu bekommen, denn was man vorher in der Konzeptionsphase mitdenkt, erspart einem oft Zeit in der Gestaltung. Doch zum Ende verstand ich, dass dies gerade in den ersten Semestern oft die Möglichkeiten neue kreative, eher unkonventionelle Wege zu gehen, einschränken kann.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 01|22

Entstehungszeitraum

Sommersemester 2022