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

In der folgen Dokumentation werden die Aufgaben dargestellt, die im Kurs Basics Interface bearbeitet wurden. Boris Müller betreute diesen Kurs, der die Grundlagen des Interfacedesigns lehrte und aufzeigte, wie facettenreich der Studiengang ist.

Digitales Buch

Farben des Riffs.jpeg
Farben des Riffs.jpegFarben des Riffs.jpeg
Farben des Riffs 1.jpegFarben des Riffs 1.jpeg

In diesem Projekt sollten wir ein frei gewähltes, gedrucktes Buch logisch digitalisieren. Gemeinsam mit meiner Kommilitonin Charlotte Preger erstellten wir eine digitale Version des Buches „Die Farben des Riffs - Das faszinierende Leben unter Wasser“ von W. Gregory Brown & Owen Andrews.

Bei diesem Buch lag das Hauptaugenmerk auf der farbenfrohen Unterwasserwelt. Deshalb entschieden wir uns, diese nach logischen Farbschemen zu visualisieren.

(1024 x 768 Pixel XGA)

1 Farben des Riffs.png1 Farben des Riffs.png
3.Korallenfresser.png3.Korallenfresser.png
Farben des Riffs 3.pngFarben des Riffs 3.png

Da der Text nur eine untergeordnete Rolle spielt, aber dennoch für die digitale Visualisierung nicht unwichtig ist, kam uns die Idee, einen spielerischen Ansatz  zu wählen und beim Klick auf die stilisierte Weltkugel unten rechts auf den Bildern eine interaktive Weltkarte, den Standort und Informationen anzuzeigen.

Farben des Riffs Karte.pngFarben des Riffs Karte.png

Außerdem wollten wir das Buch auch für Mobilgeräte optimieren und entwarfen eine Version für kleinere Screens im Format 240 x 320 Pixel (QVGA)

5.240_320.png5.240_320.png
FDR2.pngFDR2.png
FDR3.pngFDR3.png

Graphical User Interface

Im zweiten Projekt sollten ein Interface und eine App entwerfen. Zielgruppe sollten Designer sein. Präsentation findet in statischer Screen-Sequenz statt. Dabei soll das Ui-Kit von Figma sollte hier benutzt werden. 

Die Idee war eine Art Netzwerk nur für Designer zu entwickeln, in der man anhand von Schlagwörtern Designer für bestimmte Projekte finden und kontaktieren kann. Erst setzte ich mich an die Namensfindung. Ich lege mich schließlich auf das Design und Logo für die App „Designer Fusion“ (DeDFusion) fest.

iPhone 14 Plus - 1 Kopie.pngiPhone 14 Plus - 1 Kopie.png

Beim Design der App entschied ich mich für ein Mintgrün und eine kleine Navigationsbar unten am Bildschirm. Außerdem Gibt es einen Button rechts oben auf dem Startsceen, mit dem man sich in eine Art inkognito-Modus setzen kann. 

Das Besondere, und ein Unterschied zu anderen Business Apps, sollte ein System mit Verschlagwortung sein. Bei dem jeder angemeldete Designer seine Professionen als Schlagwörter speichern und somit einfacher gefunden und direkt angeschrieben werden kann. 

Durch die Inkognito-Funktion kann man sich (beispielsweise während eines Projektes) selbst aus dem Pool verfügbarer Designer nehmen.

iPhone 14 Plus - 2 Kopie.pngiPhone 14 Plus - 2 Kopie.png
iPhone 14 Plus - 4 Kopie.pngiPhone 14 Plus - 4 Kopie.png
iPhone 14 Plus - 3 Kopie.pngiPhone 14 Plus - 3 Kopie.png

Infografik

Bei diesem Projekt sollten wir eine Infografik erstellen, welche komplett ohne Text und Zahlen auskommt. Alle nötigen Informationen, sollen durch grafische Elemente dargestellt werden. 

Die Erste Phase diente der Ideenfindung und Inspiration. Ich fokussierte mich auf die grafische Darstellungen von Dingen, die man aufgrund ihrer Form und/oder Silhouette dem Betrachter vertraut vorkommen. In diesem Zuge dachte ich zuerst an bekannten Markenzeichen und Namen.

Christopher Holz_3.pngChristopher Holz_3.png

Da bei den Markennamen jedoch meist ein paar Schriftzeichen des Markennamens (Nike, McDonald´s) integriert waren und das Zeichen als solches für diese Aufgabe etwas trivial erschien, entfernte ich mich von der Logo-Idee wieder. 

Ich kam dann in diesem Prozess eher auf Themen wie Stern oder Planetenkonstellationen. Diese haben zwar auch eine Prägnante Darstellung, sind aber dynamischer und erzählen eine Geschichte.

Inspiration_Projekt_1.png
Inspiration_Projekt_1.pngInspiration_Projekt_1.png

Im Weiteren Verlauf erkannte ich, dass das Planeten und Sternen - Thema schon von anderen Kommilitonen aufgegriffen und in diversen Versionen ausgearbeitet wurde. Letzten Endes kam die Idee, die Evolution des Menschen als Infografik darzustellen. Ich beschloss, mich darauf zu fokussieren.

Christopher Holz_2.pngChristopher Holz_2.png
Projekt_3.pngProjekt_3.png

So kam ich zum Abschluss-Schaubild. Es brauchte einige Versuche und Feedback um einen geeigneten Zeitstrahl zu erstellen.

Artboard 1BasicsInterface.pngArtboard 1BasicsInterface.png

Bildschirmfoto 2024-03-19 um 22.38.56.pngBildschirmfoto 2024-03-19 um 22.38.56.png

Als Endergebnis stellte ich folgendes Schaubild vor. Es zeigt die Evolutionsschritte und darunter eine Zeitangabe in kleinen Hellgrünen Blöcken, welche ein dynamisches Design mit einem Farbverlauf haben. Gleichzeitig stellen die Blöcke Zeiträume von jeweils 2000 Jahren dar. Diese visualisieren so auf diesem Schaubild die enormen Zeiträume, in denen die Evolution voranschritt.

Die etwas zufällig anmutende Zahl von 2000 ist in diesem Kontext nicht so wichtig, da nur das zeitliche Verhältnis der Evolution dargestellt werden muss, damit diese Grafik einen Sinn ergibt.

Bildschirmfoto 2024-03-19 um 22.48.10.pngBildschirmfoto 2024-03-19 um 22.48.10.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

Wintersemester 2023 / 2024