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 Interfacedesign Wi/Se 2023 Doku - Charlotte Preger

Basics Interfacedesign Wi/Se 2023 Doku - Charlotte Preger

In dieser Dokumentation werden die Aufgaben des Basics Interfacedesign Kurs dargestellt, sowie eine Reflexion zu den Ergebnissen.

1. Digitales Buch

Aufgabe: Erstelle in einem Zweierteam eine digitale Verfassung eines Buchs. Hauptkriterien der Bearbeitung sind: Lesbarkeit & Klarheit der Darstellung sowie das Navigationskonzept, mit welchem Inhalte des Buches erschlossen werden.

- erstes Format: 1024 x 768 Pixel (XGA) -> mindestens 2 horizontale screens

- zweites Format: 240 x 320 Pixel (QVGA) -> mindestens 2 vertikale screens

Ideenentwicklung: Das von mir und Christopher ausgesuchte Buch ist „Die Farben des Riffs - Das faszinierende Leben unter Wasser“ von W. Gregory Brown & Owen Andrews. In diesem wird vor allem Wert auf Unterwasserfotografie gelegt. Der Text, welcher aus Informationen über die Lebewesen im Ozean besteht, trägt hierbei eine untergeordnete Rolle, was die Aufgabe zwar schwerer aber auch interessanter in der Umsetzung macht. Die Frage lautet: wie können wir informativen Text über Korallenfresser, Riffbaumeister und Überlebnsstrategien der Fische an den Leser bringen?

Hier ein Einblick in das Buch:

IMG_9685.jpegIMG_9685.jpeg

IMG_9686.jpegIMG_9686.jpeg

Unser erster Impuls: ein Navigationssystem, welches durch den spielerischen Umgang mit dem Computer Interesse weckt und zum Lesen ermutigt. Hinzu soll ein Layout kommen, welches den eher trockenen und wissenschaftlichen Text zu einer spannenden Reise in die Welt der See-Lebewesen macht. Christopher hat sich um die See-Karte gekümmert, die den Inhalt des Buches visualisieren soll. Mein Schwerpunkt war das Layout, das Titelbild sowie die Text Verarbeitung und das Navigationssystem.

Entwürfe für das Format 1024 x 768:

2.Planktonfresser.png2.Planktonfresser.png
1.1024x768.png1.1024x768.png
3.Korallenfresser.png3.Korallenfresser.png
4.Seekarte.png4.Seekarte.png

Entwürfe für das Format 240 x 320:

6._Planktonfresser_.png6._Planktonfresser_.png
5.240_320.png5.240_320.png
7._Planktonfresser_.png7._Planktonfresser_.png

Reflexion

Generell spiegelt der Entwurf die Unterwasserwelt gut wieder, ohne zu überfordern. Nachträgliche Kritik-Punkte wären, die Grundlinien zwischen Text und Bildspalte einheitlicher zu gestalten. Außerdem könnte man das Icon auf den Unterwasser-Fotografien, welches zur Karte führt, noch prägnanter gestalten. Der Schlagschatten der Farbpalette müsste weiterhin noch auf die Screens angepasst werden, damit das Element einheitlich wird.

2. Graphical User Interface (GUI)

Aufgabe: Erstelle in einem Zweierteam eine App für entweder Android oder IOS. Die Zielgruppe sind Designer. Die App soll fokussiert und nicht zu komplex sein. Präsentation findet in statischer Screen-Sequenz statt. Dabei soll das Ui-Kit benutzt werden.

Idee: 

eine soziale App , welche „Prompts“ für Designer generiert, zu welchen man dann seine Entwürfe hochladen kann. Die App hat Wettbewerb Charakter und soll zur Inspiration, zum Üben und zum networken einladen.

Features: 

- Prompt Generator (Wo der Nutzer eigene Challenges erstellen kann)

-  „For You Page“ mit vorgeschlagenen Designern und Themen (zum Beispiel Grafik Design oder Ui/UX)

- das Profil: man kann hier seinen Namen, eine Beschreibung sowie den Standort festlegen und seine Challenges sowie seine Werke anschauen

- Home Page: hier ist die monatliche Challenge der App aufgelistet und andere vorgeschlagene Challenges

-> sonst kann man anderen folgen und so zu Mutuals werden und die Arbeiten der anderen einsehen, sowie liken, kommentieren und teilen

2_Challenge_Overlay.png2_Challenge_Overlay.png
1_Homepage_with_ilustrations.png1_Homepage_with_ilustrations.png
3_Uploaded_Projects_Overlay.png3_Uploaded_Projects_Overlay.png
4_Comments.png4_Comments.png
6_Feedback Save.png6_Feedback Save.png
7_Feedback Share.png7_Feedback Share.png
8_following_Nick_Thomas.png8_following_Nick_Thomas.png
9_Generator.png9_Generator.png
10_Generator.png10_Generator.png
11_Search.png11_Search.png
13_My_Profile_Active_Challenges.png13_My_Profile_Active_Challenges.png
14_My_Profile_Generated_Prompts.png14_My_Profile_Generated_Prompts.png
15_Saved Projects.png15_Saved Projects.png

Reflexion:

mithilfe von Illustrationen, einer entspannten aber fröhlichen Farbwahl sowie der großflächigen Nutzung von IOS-Elementen haben wir ein modernes und kompetentes dennoch freundliches Nutzungserlebnis geschaffen.

3. 1000 Worte

Aufgabe: Erstelle eine Infografik ohne dabei auf Text, Zahlen etc... zurückzugreifen

Idee: Ich möchte ein Kuchen Rezept darstellen. Die Schwierigkeit hierbei ligt im Darstellen der Abmessungen von Zutaten oder der Abbildung der Backzeit ohne Zahlen verwenden zu dürfen.

Ich habe zwei Versionen hochgeladen. Die erste ist die finale Version, mit mehr Struktur und Klarheit. Die Illustrationen stehen im vordergrund und die gruppierung der Schritte ist definierter.

Um meinen Prozess darzustellen gibt es noch die erste Version.

Infgrafik „Käsekuchen“:

final

Infografik_final.pdf PDF Infografik_final.pdf

erste Version

Charlotte_Preger-Infografik.pngCharlotte_Preger-Infografik.png

Reflexion:

Ich hätte mir noch gewünscht alle Illustrationen isometrisch darstellen zu können. Manche Illustrationen sind zu feinteilig. Auch sind manche Arbeitsschritte (hinzufügen der Butter) noch nicht so eindeutig wie gewünscht.

Aber im Großen und Ganzen bin ich sehr zufrieden mit dem Stil und der Navigation.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Prof. Boris Müller

Zugehöriger Workspace

Basics Interface 02|23

Entstehungszeitraum

Wintersemester 2023 / 2024