Digital Design
Figma Prototyping
UX/UI
Component based development
Java
JavaScript
HTML/CSS
TailwindCss
Vue.js
Astro
Solid.js
React.js
Flutter
Interaction design
Next.js
Pjs.5
Motion design
Creative Coding
Processing
Figma Prototyping
UX/UI
Component based development
Java
JavaScript
HTML/CSS
TailwindCss
Vue.js
Astro
Solid.js
React.js
Flutter
Interaction design
Next.js
Pjs.5
Motion design
Creative Coding
Processing
Uni-search Website
Web Design
Vue.js
Node.js
Frontend design
Component based development
API Integration
University search Web Project to utilities Vue.js and train API integration
The Studiensuche API from the BUND is used to map information of all German Universities and courses to allow for a comprehensive search tool. The Prototype was built with Figma, allowing for a fast tracked frontend design. Universities can be liked, a status which is temporarily saved on the server. Vue.js is used to build a component based architecture with sensible child parent communication.
Filters were used to on the mapped out information from the API.
A fluid design was implemented to allow for great usability on all devices.
Interactive Lofi Apartment
Web Design
JavaScript
Web Animation
Geolocation Data use
Create Js
Motion design
Dreaming Plants is an interactive website experience to relax or study along to.
The website shows a room in a hand drawn design, several items here either display random passive animation to create a live atmosphere or allow for minimal interaction. Such as the computer which enables the user to deploy a pomodoro timer for focused studying. The lighting in the room and outside the window changes based on solar data of the user's location to create immersion.
Using the suncalc library and the user's geolocation the light situation of the user can be calculated. The Website uses 5 distinct light circles from midnight to midday, creating a smooth transition through sunset and sunrise.
The animations were created with Adobe Animate, rendering as HTML5 objects. Applying CreateJS for dynamic responses, random delays for passive movements and mouseOver events for actives allowed the page to react to user interaction as well as to showcase passive natural animations.
Web2 Music Application
Web Design
Tailwindcss
Figma Prototyping
Component based development
SQLite
Data architecture
Astro
Solid.js
Webdesign exploration on both front and backend
Tailwindcss is used to create a fully responsive and mobile first user interface based on the Spotify interface. A concept for the data storage logic was created and implemented using SQLlite. The use of the Astro framework in combination with solid.js allowed for a smooth combination of both user side rendering upon interaction and a client-side base to ensure quick and memory efficient rendering.
Flutter Art Archive
App Development
Flutter
Widgetbased Design
Firebase
Cross Plattform Application
Flutter Application for artist to record produced artworks safely.
This project is an exploration of flutters widget-based approach. A basic backend was implemented using firebase. Material ui components were used for an easy frontend design. The main challenges were to understand and facilitate flutters widget-based approach and to create a smooth communication between child and parent widgets.
Generative Animation
Coding
Pjs.5
JavaScript
LinearAlgebra
Creative Coding
Processing
Small game with procedurally generated Salamanders
Linear algebra is used to procedurally generate these little salamanders and let them wander around on scream. They search and collect berries while trying to avoid other salamanders and leaves. Pixel graphics are added via a ray tracing algorithm.
A chain of segments is created using distance restraints and linear algebra. The shape of the body is defined by the radius size of the individual segments.
With basic flocking algorithms, a notion of liveliness can be added to create a simple example of fish swimming in a pond.
Legs are added to the body using a type of inverse kinematics (FABRIC).
Cross Media Campaign
Web Design
JavaScript
Web Animation
Geolocation Data use
Create Js
Motion design
Group Project with individual focus on Illustration, Consumer research and Prototyping
Ocean Guard is a fictional campaign meant to motivate people to consume less fish. The focus was on researching how people can be motivated to reduce their consumption, and then apply this knowledge to create a multimedia campaign.
Personality groups were created to add a feeling of belonging as well as recommend steps which are crafted for the respective group. Challenges are recommended which correspond to the user's current position regarding fish eating. This was based on extensive user research.
An app prototype was design using Figma to show how the personality types can be accesses by the consumer.
Illustrations were created for the individual personality types to create a Mascot effect as well as a unique brand personality.
Youth Center Webdesign
Bricks
Web design
Figma prototyping
Mobile first
Responsive design
php
WordPress
NGO Webdesign
Motion design
Design and development of a website for the anyway youth center after a rebranding.
Working together with the anyway e.v. their website was redesigned and later developed using WordPress and Bricks. The environment was chosen based on the wished of the anyway team to allow content management on a familiar platform. The challenge of the design was to apply the new branding guidelines to old information pages and to develop a new homepage and calendar page.
The old website was analysed and restructured into a more accessible and coherent setup, which was translated into a nested navigation bar. Conflicting user groups, such as sponsors for the organisation as well as the youths who partake in anyway’s activities, had to be analysed to create a design which works for everyone.
A big focus was on the promotion of the different acitivy groups anyway offers as well as the repecitve events by those groups.
Events are displayed with color coding for the respective activities and a focus on images as well as the weekday when the event takes place.
Countdowns are used to create a sense of time in the users and allow for better planing. They also create a sense of urgency for upcoming events.
It was also important to highlight calls to action such as dontation options or engagement with information / coursese.
3D Modelling
3D Design
Blender
After Effects
Motion Design
KYARA is a Blender 3D model based on dystopian concept design
This is an exploration of Blender as a 3D modelling platform. The Model was created based on a unique concept art for this project. Blender was used to sculpt the model, creating a minimal topography. Adobe Substance painter was used to color the model. Different Scenes were created in Blender with unique camera movement, lighting, and background sets. Finally, a cinematic trailer was created with After Effects.
