Projektumsetzung

Ausgangspunkt für die Entwicklung war die Beobachtung, dass viele Studierende zwar schnell neue Kontakte knüpfen, aber echte, tiefere Verbindungen häufig schwerer entstehen. Ziel von OneCampus ist es, Studierende auf Basis gemeinsamer Interessen zu vernetzen und das soziale Miteinander an Hochschulen aktiv zu stärken.

Design & Konzept

Der Designprozess startete mit Papierprototypen und entwickelte sich über erste Entwürfe hin zu einem ausgereiften Interface im Material-Design-Stil. Besonderes Augenmerk lag auf Benutzerfreundlichkeit, Vertrauen und Sicherheit innerhalb der Plattform.

Technische Umsetzung

Die App wurde mit React Native und dem Expo Framework entwickelt, um eine plattformübergreifende Nutzung auf Android, iOS und im Web zu ermöglichen. Das Backend basiert auf Supabase und unterstützt Funktionen wie Echtzeit-Chat, Eventorganisation und Nutzerverifizierung.

Tools & Technologien

- Expo (React Native Plattform)
- Supabase (Backend und Authentifizierung)
- Figma (UI/UX Design)
- GitHub (Versionierung und Zusammenarbeit)

Ein Projekt von Florian Zick, Isabella Etschel und Mark Oelmaier im Rahmen des Masterstudiums Informatik an der TH Augsburg.

Projektumsetzung

Basierend auf einer umfassenden Recherche und einer Analyse vergleichbarer Tools entstand ein interaktives Webtool, das speziell auf die Bedürfnisse von TEAM23 zugeschnitten ist. Der Fokus lag auf einer klaren Struktur, einem zugänglichen Design und einer modularen technischen Umsetzung. Die Anwendung hilft Mitarbeitenden, ihre Lernziele besser zu planen, den eigenen Fortschritt zu überwachen und bietet gleichzeitig eine strukturierte Übersicht über alle verfügbaren Weiterbildungsinhalte.

Design & Usability

Das User Interface wurde mithilfe von Figma gestaltet und folgt einem klaren Farb- und Typografiekonzept, das sowohl einen Light- als auch einen Dark Mode unterstützt. Besonders wichtig war die Einhaltung von Barrierefreiheitsrichtlinien, um eine möglichst breite Nutzbarkeit sicherzustellen. Die visuelle Struktur der Roadmaps wurde durch die Verwendung von SVG-Grafiken realisiert, die eine intuitive Navigation und ein angenehmes Lernerlebnis bieten.

Technische Umsetzung

Die Webanwendung basiert auf Vue.js (Version 3) und nutzt moderne Technologien wie Pinia für das State Management, TypeScript für typsichere Programmierung sowie eine REST-API für den Datenaustausch. Der Fokus lag auf einer skalierbaren, modular aufgebauten Architektur, um zukünftige Erweiterungen der Plattform zu erleichtern. Zusätzlich wurde besonderes Augenmerk auf ein flexibles Dark/Light-Mode-Design und die Optimierung für mobile Endgeräte gelegt.

Funktionen

Die Anwendung bietet eine Fortschrittsanzeige, eine Filter- und Suchfunktion, eine visuelle Markierung von Themen nach Schwierigkeitsgrad und einen individuellen Bookmark-Status. Durch die Visualisierung der Lerninhalte als Roadmaps erhalten Nutzer einen klaren Überblick über ihre Entwicklungspfade.

Tools & Technologien

- Vue.js (Frontend Framework)
- TypeScript
- Pinia (State Management)
- Figma (Design und Prototyping)
- SVG-Integration
- REST API

Eine Bachelorarbeit, eingereicht an der Technischen Hochschule Augsburg in Kooperation mit TEAM23.

Projektumsetzung

HUHU schließt eine bisher bestehende Lücke: Es gibt kaum webbasierte Kommunikationsapps, die vollständig individuell konfigurierbar sind und speziell auf die Bedürfnisse von Senioren oder Menschen mit Einschränkungen abgestimmt wurden. Unser Fokus lag auf einer intuitiven, barrierearmen Nutzererfahrung - basierend auf umfassender Recherche und in enger Zusammenarbeit mit der Caritas.

UX & UI Design

Der Entwicklungsprozess startete mit Papierprototypen, die anschließend in einem detaillierten Figma-Prototypen ausgearbeitet wurden. Durch kontinuierliche Nutzertests, insbesondere mit Personen, die große Herausforderungen im digitalen Umgang haben, konnten wir das Design immer weiter optimieren. Das Ergebnis ist eine klare, intuitive Benutzeroberfläche, die auf die Bedürfnisse der Zielgruppe zugeschnitten ist.

Technische Umsetzung

Die Webanwendung basiert auf dem Framework Vue.js und nutzt modular aufgebaute Komponenten für Funktionen wie Registrierung, Konfiguration und Kommunikation. Das Backend wurde mit Express.js entwickelt, während eine zentrale PostgreSQL-Datenbank Nutzer- und Kommunikationsdaten speichert und verwaltet.

Funktionen

Der HUHU Messenger ermöglicht Text- und Sprachnachrichten, Foto-Sharing sowie Videoanrufe und passt sich flexibel an die individuellen Anforderungen der Nutzer an. Durch umfangreiche Anpassungsmöglichkeiten werden verschiedene Einschränkungen berücksichtigt. Ziel ist es, Hemmschwellen in der digitalen Kommunikation abzubauen und Menschen dabei zu unterstützen, selbstbestimmt Kontakte zu pflegen.

Tools & Technologien

- Vue.js (Frontend-Framework)
- Express.js (Backend-Framework)
- PostgreSQL (Datenbank)
- Adobe Illustrator, Figma (Design)

Ein Projekt von 11 Studierenden der Technischen Hochschule Augsburg.

Funktionalität

Um die Software bedienen zu können gilt es als ersten Schritt, sich mit seiner E-Mail-Adresse und einem selbst ausgewählten Passwort zu registrieren. Erst nach dem darauffolgenden Login ist es möglich, eine Einkaufsliste aus ausgewählten Produkten zu erstellen.

Um eine Übersicht zu den vorhandenen Produkten zu erhalten, haben wir eine Seite mit einfach verständlichen Icons erstellt, welche die unterschiedlichen Überkategorien repräsentieren. Wählt man ein Icon, so werden die dazu passenden Produkte angezeigt und der User kann diese zur zuvor erstellten Einkaufsliste hinzufügen und speichern. Nach Beendigung dieser Schritte wird man zu der Karte des Super-marktes weitergeleitet, auf der die automatisch generierten Zielpunkte des nächsten Elements der Einkaufsliste angezeigt werden. Der User wird bestmöglich, von Produkt zu Produkt durch den Supermarkt geführt.

Wireframes

In folgender Abbildung werden die Funktionen als Wireframe Darstellung umgesetzt. Die Wireframes wurden benötigt um anschließend sinnvolle und strukturierte Prototypen mithilfe von Adobe XD entwickeln zu können. Dabei haben wir zunächst getrennt von-einander zwei verschiedene Prototypen entworfen, um in einer Diskussion die jeweiligen Vor- und Nachteile der Versionen herauszuarbeiten. Darauf-hin haben wir versucht, die Vorzüge der jeweiligen Prototypen zu einem gemeinsamen Prototyp zu verknüpfen, um dem User eine nutzerfreundliche Anwendung bieten zu können.

Ein Projekt von Andrea Burgmann, Leonie Dieter, Isabella Etschel und Luis Faderl.

Projektumsetzung

Der Erklärfilm ist eine Mischung aus Filmmaterial und Illustrierten Figuren. Beim Characterdesign haben wird darauf geachtet, dass die Charaktere klar erkennbar und kindgerecht sind. Wir haben uns selbst zur Aufgabe gemacht jeder Figur eine besondere Charaktereigenschaft zuzuweisen. So ist das Wasser Traurig, das CO2 wütend oder der Sonnenstrahl glücklich. Damit die Photosynthese besser erklärt werden kann haben wir eine extra Figur den Helfer hinzugefügt. Dieser soll durch wenig Worte den Prozess deutlich machen. Der Eyecatcher ist der sprechende Baum, welcher den Film einleitet und beendet. Er soll die Kinder anregen aktiv zuzusehen und mithilfe seines bayerischen Akzentes eine Verbindung zu den Zuschauern aufbauen.

Ein Projekt von Leonie Dieter, Isabella Etschel und Vanessa Mayr.

Funktionalität

Nach der Registrierung kann der Benutzer ein neues Projekt anlegen und beliebig viele Mitglieder hinzufügen. Die Zuteilung von Unteraufgaben an Gruppenmitgliedern, soll helfen, um eine bessere Koordination und Strukturierung im Team zu ermöglichen.
Abgeschlossene Teilaufgaben können per Häkchen markiert werden. Sind alle Häkchen eines Task gesetzt, wird dieser automatisch in die Spalte der erledigten Aufgaben geschoben. Die Teilung der Aufgaben in „Erledigt“ und „noch zu bearbeiten“, soll Projektmitglieder anregen aufgaben abzuschließen, um den Fortschrittsbalken zu füllen. Der Fortschrittsbalken dient dazu, den Stand eines jeden Projekts im Auge zu behalten, damit jedes Projekt rechtzeitig fertiggestellt werden kann.

Projektumsetzung

Für die Frontendentwicklung wurde das JavaScript-Framework „Vue“ genutzt. Es ist speziell für Single -Page-Anwendungen konzipiert, kann aber auch für komplexere Websiten verwendet werden. Mit Vue.js kommen viele neue Funktionen und Optimierungen in das JavaScript-Frame- work. Beispielsweise können durch Proxies reaktive Objekte hinzugefügt oder gelöscht werden. Außerdem wird eine simple Skalierungsmöglichkeit durch die Nutzung von Templates angeboten. Weshalb Vue eine große Unterstützung war, um dynamische Seiten zu erstellen.

Wireframes

In folgender Abbildung werden die Funktionen als Wireframe Darstellung umgesetzt. Die Wireframes wurden benötigt um anschließend sinnvolle und strukturierte Prototypen mithilfe von Figma entwickeln zu können.

Ein Projekt von Isabella Etschel und Luis Faderl.

Projektkonzept

Zu Beginn des Semesters haben wir durch verschiedenste Beobachtungen in der Küche, wie die Verbindung von Handy, Küche, Timer, Töne und SmartHome, dokumentiert. Uns ist schnell aufgefallen, dass das Feedback in der Küche oft nur im Raum zu hören oder zu sehen ist. Deshalb hat sich unsere Gruppe damit auseinandergesetzt wie das Feedback aus der Küche mittels Beleuchtung und Ton in andere Räume übertragen werden kann, um den Nutzer mehr Bewegungsfreiheit in der Wohnung zu geben. Außerdem soll der Nutzer durch die ambient Experience nicht abrupt von der aktuellen Tätigkeit unterbrochen werden. Vielmehr soll der User mit Vorlaufszeit darauf hingewiesen, dass er bald wieder in die Küche zurückkehren muss.

App

Für die Veranschaulichung der Projektidee wurde ein App Konzept entwickelt. In der App soll der Timer für die ambient Experience nicht manuell gestellt werde. Somit soll der User keine konkrete Zeit einstellen. Stattdessen soll angegeben werden, was in der Küche zubereitet wird. Bei den Küchengeräten haben wir uns auf den Herd und den Ofen beschränkt. Wenn beispielsweise der Backofen vorgeheizt wird oder Nudeln gekocht werden, wird der Timer automatisch auf eine andere Zeit gestellt. Durch drei Parameter kann jede mögliche Aktion abgefragt werden.

Weiterentwicklung

Unsere Projektidee kann auch in Zukunft erweitert werde. Es wir in naher Zukunft möglich sein, Prozesse in der Küche genauer zu tracken und diese Informationen können dann an die Anwendung weitergegeben werden, sodass die Auswahl der Aktion wegfällt und das Feedback intuitiver übertragen werden kann. Auch ist das Konzept im Hinblick auf Barrierefreiheit im Küchen-Umfeld relevant, da speziell das Feedback über Vibration, Sound oder Licht jeweils für einen bestimmten Anwenderbereich interessant sein kann.

Ein Projekt von Isabella Etschel, Vanessa Mayr und Teresa Hauser.

Future City Scene

Die Aufgabe im ersten Projekt was es, einen futuristischen oder cyberpunkigen Stadtblock zu erstellen, welcher ausschließlich aus primitiven Objekten bestehen sollte. Außerdem mussten verschiedene Materialien verwendet und sowie die Szene beleuchtet werden.

Beleuchtung
Für den Stadtblock wurde uns ein kurzer Einblick in die Beleuchtung mit Maya und Arnold gegeben. Für diese Abgabe wurden Area Lights, Point Lights, Spot Lights und Direktional Lights verwendet. Die Beleuchtungstechnik und -prinzip ist recht komplex und wurde im weiteren Verlauf des Moduls ausführlicher behandelt.

Floating Objects

Für diesen Block wurde eine Komposition aus mehreren schwebenden Objekten erstellt. Dabei wurden Werkzeuge aus dem Basic Modeling Tools verwendet. Als Referenz für die Objekte konnten Objekte aus dem alltäglichen Leben verwendet werden. Eine weitere Anforderung war, dass die Objekte aus derselben Farbe bestehen sollen und der Hintergrund von dieser Farbe abweichen kann.

Meine Komposition „Schachpartie beim Teekränzchen“ beinhaltet ein Paar Figuren eines Schachspiels und ein Teeservice.

Sci-fi Crate Concepts

In folgender Aufgabe wurden die Gestaltungsprinzipien, die Technik Groß-Mittel-Klein und die Aufteilung 70 zu 30 verwendet, um die 3D-Konzeptgrafik für Sci-Fi-Kisten zu erstellen.

Aufgabe war es fünf verschiedene Kisten mit den grundlegenden Modellierungswerkzeugen und dem neuen Arbeitsablauf der konstruktiven Volumengeometrie erstellt. Außerdem sollten drei verschiedenfarbige Materialien erstellt werden, um die Objekte einzufärben.

Robot Concept

In der letzten und größten Aufgabe für dieses Modul soll ein aufwändiges Characterasset, ein Roboter, gebaut werden. Die Aufgabe war über mehrere Abagaben hinweg zu bearbeiten. Letztendlich sollte ein kurzer animierter Shot des Roboters entstehen.

Sketches
Es sollten mehrere verschiedene Ideen visualisiert und ein Zweck für den Roboter überlegt werden.

Roboter Concept Model
Im folgenden Schritt musste die Idee in 3D umgesetzt werden. Dabei sollte anders, wie in vorherigen Abgaben mit feineren Formen gearbeitet werden. Sowie auf funktionierende Gelenke zu achten.

Materialien und Texturen
In dieser Phase soll der Roboter mit Materialien ausgestattet werden. Damit Texturen auf den Roboter verteilt werden, mussten alle Teile des Roboter in einen einzelnen UV-Space gepackt werden. Es sollten Texturen erstellt werden und auf die entsprechenden Stellen gemappt werden. Dabei wurde mit dem Programm Substance 3D Painter von Adobe gearbeitet.

Rigging
Für diesen Schritt musste der Roboter in einzelne bewegliche Teile zerlegt werden und ein Skelett aus Joints erstellt werden. Das Skelett wurde anschließen durch Spline Objekte als Controller gesteuert.

Animated Shot
Im letzten Aufgabenteil wird wurde das Animationsrig des Roboters verwendet um einen animierten Shot umzusetzen. Die Animation wurde auf den Grundlagen der 12 Principles of Animation aufgebaut.

Wie funktioniert generative Gestaltung?

Zu Beginn wird das Ziel formuliert und Eingabeparameter wie Leistung, Werkstoff, räumliche Gegebenheiten, Größe, Gewicht, Zeit, Belastbarkeit, Fertigungsverfahren oder Kostenziele werden an die Software übergeben. Anschließend wird durch Algorithmen und logische Kalkulationen automatisch eine Vielfalt von Konstruktionsvarianten erzeugt. Diese Varianten werden anschließend einer Leistungsanalyse unterzogen. Hierbei werden sichtbare Problemstellung durch Angleichung der Ziele und Sachzwängen verfeinert. Diese Schritte werden so lange wiederholt, bis es bei dem Ergebnis zu keinen Komplikationen mehr kommt.

Schwerpunkt: Dynamische Datenstrukturen

Daten, welche nicht hierarchisch angeordnet sind, können durch das „Force Directed Layout“ visualisiert werden. Die verwendeten Daten stammen aus einer WhatsApp Analyse. Die Analyse wurde in ein XML-Format überführt, damit die Daten für unsere Visualisierung genutzt werden können.
Die in der XML-Datei enthaltenen Daten werden in ein Diagramm übersetzt. Jeder Eintrag wird durch einen Abstrakten Punkt visualisiert. Die Verbindungen zwischen den Punkten werden durch Pfeile dargestellt.

Platzierung der Daten

Um Punkte an freien Stellen zu platzieren, müssen Abstoßungs- und Anziehungskräfte zwischen ihnen wirken. Durch die Anwendung der Kräfte sollen keine Verbindungslinien überschnitten werden. Dieser Algorithmus wird auch „Force Directed Layout“ genannt.

Force Directed Layout

Durch das Abstoßen von Knoten, welche nah beieinander liegen, wird das Problem der Überlappung gelöst. Dabei muss die Verlängerung jeder Verbindungslinie unterdrückt werden.
Für das Layout sind zwei gegensätzliche Kräfte notwendig. Einerseits die Abstoßungskraft zwischen den Knotenpunkten und andererseits die Anziehungskraft der Verbindungen. Die Netzstruktur optimiert sich mit der Zeit von selbst, da diese Kräfte in einem iterativen Prozesse simuliert werden.

Ein Projekt von Andrea Burgmann und Isabella Etschel.