lAMA Website

Ausstellungssystem

Schüler Dashboard

Soli-Café Corporate Design

Besseres Leben in der Stadt

Digitaler Portier × Stadt Ulm

Das Fremde - Ein Gefühl von Fremdheit

Zeichnungen

Fotografie/Bildbearbeitung

Grafikdesign

lAMA Website

Beschreibung

In diesem Projekt habe ich meine ersten Erfahrungen im Webdesign gemacht. Das Ziel war eine Website, inspiriert durch ein professionelles Portfolio, zu erstellen. Wir wollten aber auch unsere eigene "Handschrift" in das Projekt einbauen, weshalb wir uns nur sehr kontrolliert an anderen Websites inspiriert haben. Dem Zeitgeist entsprechend entschieden wir uns ein Bento-Grid zu entwerfen. Uns war wichtig nicht nur eine einfache Website abzugeben, sondern den Fokus auch auf kleine Details und den "Joy of Use" zu legen.

Entstanden im

1. Semster
WiSe 23/24

Kurs

Webdesign

In Zusammenarbeit mit

Marco Coric

Benötigte Kenntnisse

HTML
CSS
Java Script

Die Website

Nach dem Intro der Website erscheint das Bento-Grid, welches hier zur besseren Verständlichkeit mit verschiedenen Grafiken gefüllt ist.

Das Intro der Website

Der Hintergrund in 10x Geschwindigkeit. Er funktioniert nur mit CSS Gradients.

Beim Interagieren mit den Boxen fallen die besonderen Hoveranimationen auf. Uns waren Details wie diese oder dem "Custom-Cursor" besonderst wichtig.

Erste Prototypen

Ausstellungssystem

Beschreibung

In diesem Projekt kann man beobachten wie aus dem zweidimensionalen Raum ein dreidimentionales Objekt entsteht, welches zu größeren Strukturen verknüpft wird. Die Aufgabe war, ein Verbindungsstück zu entwerfen, welches mindestens 3 (6 idealerweise) Vierkantrohre verbindet. Die Flächen der Vierkantrohre sollen rechtwinklig zueinander ausgerichtet sein (x,y,z-Achse). So entsteht ein Stecksystem, welches unendlich erweitert werden kann und für Ausstellungen genutzt wird.

Entstanden im

1. Semster
WiSe 23/24

Kurs

Grundlagen der 3D-Gestaltung

Benötigte Kenntnisse

Adobe Illustrator
Solid Edge

Das Ergebnis

Die Entstehung

Begonnen habe ich mit einer 9-Punkt-Matrix, in der ich die Punkte auf verschiedenen Weisen verknüpft habe.
Wichtig zu wissen ist, dass es in allen Schritten viele Fehlversuche gab, bevor das Endergebnis zustande kam.

Sobald ich zufrieden mit meiner Form war brachte ich sie in den dreidimentionalen Raum, indem ich in diesem Fall die Form aus einem Würfel ausgeschnitten habe und das Ergebnisnoch schräg durchteilt habe.

Dadurch entsteht diese Grundobjekt, mit dem ich daraufhin weitergearbeitet habe.

Dieses Objekt wird jetzt verdoppelt und gespiegelt. Beide Objekte werden verknüpft. Jetzt werden die Strukturen immer wieder verdoppelt und verbunden.

So entsteht eine Struktur, die auf vier Seiten bereits eine Öffnung hat, in der das Vierkantrohr befestigt werden kann.

Damit die Öffnung auch nach oben/unten vorhanden ist habe ich aus zwei Grundobjekten ein Verbindungsstück erstellt, mit dem man die Löcher auf der Ober-/Unterseite füllen kann. Dafür muss es auf der jeweiligen Seite vier mal eingesetzt werden.

Da das Vierkantrohr noch nicht perfekt in die Öffnung passt, habe ich einen Aufsatz für dieses erstellt.

Als letzten Schritt habe ich alle Grundobjekte, welche überflüssig sind, entfernt.

Natürlich kann man so viele Vierkantrohre befestigen wie man will.

Schüler Dashboard

Beschreibung

In diesem Projekt habe ich das erste mal mit Figma gearbeitet. Die Aufgabe war ein Dashboard zu enwerfen, wobei man selbst die Funktionen wählen durfte. Wichtig war, dass man mit dem Dashboard interagieren kann und es verschiedene Funktionen aufweist.

Entstanden im

2. Semster
SoSe 24

Kurs

Interface Design

Benötigte Kenntnisse

Figma

Das Dashboard

Meine Idee war ein Dashboard für Schüler zu entwerfen, welches alle wichtigen Informationen auf einem Screen sammelt.

Auf dem Dashboard werden Events, Hausaufgaben, Stundenplan, Noten und ein Klassenchat vereint.

Besonders ist, dass die Statusleiste mit den Einstellungen im Grundmodus nicht zu sehen ist, sondern erst durch ein Klicken oder Herunterswipen angezeigt wird. Dadurch kann man sich voll auf die wesentlichen Funktionen der App fokusieren.

Soli-Café Corporate Design

Beschreibung

Zur Grundlage liegt ein fiktives Solidaritäts Café, für das ein zusammenhängendes und konsistentes visuelles Erscheinungsbild (Corporate Design) entworfen werden soll. Wichtig war, dass beim Gestalten vorallem auch die Werte und Umstände des Cafés berücksichtigt werden müssen.

Entstanden im

3. Semster
WiSe 24/25

Kurs

Corporate Design

Teilweise in Zusammenarbeit mit

Lovis Brefka
Marco Coric
Jona Glomb
Frederik Kiupel

Benötigte Kenntnisse

Adobe Photoshop
Adobe Illustrator
Adobe Indesign

Die Ergebnisse

Gestaltungsprozess

Bevor wir individuell an unserere Medienelementen arbeiten konnten, wurden von jedem in der Gruppe die Grundlagen jedes Corporate Designs ausgearbeitet. Danach entschieden wir uns in der Gruppe für ein Logo, Name und Slogan, sowie eine Farbpalette und eine Font aus dieser Auswahl.

Meine Farbpalette

Mein Logo, Name & Slogan

Nachdem wir uns für die verschiedenen Elemente entschieden hatten, überarbeiteten wir diese nochmal, bis wir zufrieden waren.

Farbpalette der Gruppe

Verschiedene Versuche und finales Logo, Name & Slogan

Aufbauend auf diesen Grundlagen, haben die verschiedenen Gruppenmitglieder individuell die verschiedenen Medienelemente gestaltet. Für meine finalen Versionen mussten die Elemente mehrere Revisionen durchlaufen. Einige Beispiele:

Briefpapier verworfene Versionen

Visitenkarte verworfene Versionen

Lastenrad verworfene Versionen

Vorversionen der Website

Alle finalen Medienelemente sind ganz oben auf dem Plakat abgebildet.

Verspieltere Umsetzung

Zusätzlich zu meiner schlichten Herangehensweise/Umsetzung des Corporate Designs, entschied ich mich einige Medienelemente nocheinmal neu umzusetzen. Diesmal habe ich aber als Konzept Logo-ähnliche Elemente eingebaut, um eine verspieltere und offenere Wirkung zu erzeugen und die Wiedererkennbarkeit zu steigern.

Printmedien nach dem Formen-Konzept

Beschilderung und Lastenrad nach dem Formen-Konzept

Website nach Formen-Konzept

Besseres Leben in der Stadt

Beschreibung

Zur Grundlage dieses Projekts liegt ein imaginärer Ideenwettbewerb der EU mit dem Thema „Das leben in der Stadt | Wie könnte es besser sein?“. Ziel ist Ideen zu finden, wie eine Stadt, in unserem Fall Ulm, lebenswerter gestaltet werden könnte. Diese Ideen sollen dann an 3 Locations durch fotorealistische Bilder dargestellt werden.

Entstanden im

3. Semster
WiSe 24/25

Kurs

Bildkonzeption

Benötigte Kenntnisse

Adobe Photoshop
Fotografie

Die Ergebnisse

Der Vorher/Nachher Vergleich. Die Bilder sowie fast alle der eingefügten Elemente wurden von mir fotografiert. Die Locations wurden passend zu meinem Konzept ausgewählt.

Location 1

Location 2

Location 3

Das Konzept

Mein Konzept ist, die Straßen des Stadtzentrums in Ulm unter die Erde zu verlegen und damit eine autofreie und fußgängerorientierte Innenstadt zu erschaffen.
Nach diesem Konzept werden neue Bereiche an der Oberfläche frei, welche gezielt für die Bevölkerung angepasst werden können, während der Verkehr unterirdisch verläuft.
Bei richtiger Umsetzung ermöglicht man, nach meiner Recherche, eine Steigerung der körperlichen und geistigen Gesundheit, mehr soziale Interaktionen sowie mehr Komfort für die Bewohner der Stadt Ulm.

Skizzen

Auswahl der Skizzen, die zum Endergebnis geführt haben

Location 1

Location 2

Location 3

Mögliches Magazin-Cover über das Projekt

Digitaler Portier × Stadt Ulm

Beschreibung

Die Stadt Ulm plant in ihrem Rathaus und potenziell an weiteren Standpunkten einen Digitalen Portier, in Form eines Terminals, einzusetzen. Das Ziel damit ist die Mitarbeiter des Servicepoints im Rathaus zu entlasten, den Bürgern/Besuchern besser bei ihren Problemen zu helfen und das Interesse an der Stadt zu verbessern. Unsere Aufgabe war es in verschiedenen Gruppen verschiedene Prototypen zu entwerfen, welche der Stadt Anhaltspunkte für die Weiterarbeit am Projekt ermöglichen.

Entstanden im

3. Semster
WiSe 24/25

Kurs

Interaction Design

In Zusammenarbeit mit

Lovis Brefka
Marco Coric
Jona Glomb
Frederik Kiupel

Benötigte Kenntnisse

Figma
Html
Css
Java Script

Vorstellungs Plakat

Vorarbeit

Bevor wir mit der Gestaltung des Portiers beginnen konnten, befassten wir uns damit, was wichtig für die erfogreiche Einbindung des Terminals in den Alltag der Besucher ist. Dafür führten wir Befragungen im Rathaus und der Innenstadt durch, erstellten verschiedene User Journeys und arbeiteten die wichtigsten Aspekte für das Terminal durch verschiedene Methoden heraus. Der Fokus in dieser Phase war herauszufinden, wie man den Besuchern eine ideale User-Experience ermöglicht.

Zusammengefasste Ergebnisse der Umfragen

Eine der User-Journeys einer Persona

Dot-Voting für wichtige Aspekte

MoSCoW-Methode

Mögliche Taskflows

Wireframes

Diese Informationen und Ideen haben wir dann genutzt um in der Gruppe getrennt verschiedene Wireframes, mit verschiedenem Aussehen und Aufbau, zu entwerfen.

Lowfidelity Wireframes

Midfidelity Wireframes

Der Prototyp

Aus diesen Wireframes haben wir die besten Aspekte in unseren finalen Prototyp kombiniert. Er simuliert einen voll benutzbaren digitalen Portier und folgt dem Corporate Design der Stadt Ulm.

Idle-Screen

Hauptmenü, Einstellungen & Bedienungshilfe

Chatbot, Standorte & Mängelmelder

Formulare, Sehenswürdigkeiten & Neuigkeiten

Kalender, Infos für Neubürger*innen & Schwarzes Brett

Formulare Unterseite & Detailseite für Formulare sowie Infos für Neubürger*innen

Detailseiten von Sehenswürdigkeiten, Neuigkeiten & Kalender

Terminformular & QR-Code/Drucken

Vor der finalen Abgabe und der Präsentation im Rathaus haben wir noch verschiedene Personen den Portier testen lassen, was zu guten Rückmeldungen führte.

Das Fremde - Ein Gefühl von Fremdheit

Beschreibung

Fotoessay mit dem Thema "Das Fremde". Die Umsetzung/die Motive waren nichtvorgegeben. Bildbearbeitung sollte vorallem für eine bessere Wirkung, nicht für eine Veränderung des Motivs, genutzt werden.