Sunset and Sunrise

The page adapts to the users' real-world ambient conditions by utilising the sun.calc library and geolocation for precise sunlight and lunar phase calculations. This data triggers a smooth transition through four sunset and sunrise phases, adjusting the room lighting and the texture outside of the window.

Animations

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.

Record player

The music player is an artistic interface with records and covers. Music plays continuously even when the interface is closed. Reopening reveals the perpetually spinning record, creating visual continuity for the auditory experience.

Pomodoro Timer

The integrated Pomodoro timer can be accessed by clicking the monitor, doubling as a live clock. It guides users through 25-minute work phases and 5-minute breaks. After four cycles, a 15-minute break initiates before resetting, ensuring a harmonious blend of productivity and relaxation.

Implementing the API

The API is accessed using a client key. Search word and filter IDs are sent to the API, which in turn returns all matching university courses. The given information of all courses is mapped into card components and listed on the site for the user to scroll through. As the API can only return 20 courses per call, we decided to show 20 courses per page and enable users to skip through pages.

Component Based Design

We created the website with a component-based approach focused on utilizing the possibilities offered by Vue. This allowed us to minimize repeated code and maintain a consistent design.
As an example, the filters receive the options from the parent and emit any input back to their parent, where it is then sent to the API to affect the returns of university courses.

Backend

To enable favoritization, we deployed a backend database allowing the user to save university courses and come back later to view them again.

Astro

We adopted a component-based approach in developing our web application. Each page is structured as an initially empty template which is only on interaction dynamically filled with the necessary information retrieved from the database. For example, rather than creating individual pages for every playlist, we designed a blank playlist page. When a user interacts with a playlist icon, the corresponding information loads into the page in real-time using a unique UUID as Key.

Solid.Js

Utilizing Solid.js, we created dynamic interfaces that updates instantly upon change. For instance, unliked songs are removed immediately from the favourites playlist without a need to refresh the page.

Tailwind

The UI was quickly prototyped in Figma and then translated into our program using Tailwind. Adopting the framework helped us work quickly and efficiently. It also proved beneficial in creating a responsive UI as it is mobile-first by default.

Working as a Team

Following the design thinking process helped us to work together as a team more smoothly, working through each phase together with a focus on the desired outcome.

The Problem

Education can be used to kickstart the potential of each child, enhancing their skills and allowing them to shape their personalities. However, this is only possible in an environment where educators have the time to focus on each child as an individual.

In Germany, we currently lack approximately 100,000 qualified educators in the child care sector, with a tendency to increase over the years. This problem has several causes, one of them being extreme conditions in child daycare facilities, including issues such as excessive noise, long hours, extensive overtime, and overall poor working conditions.

Defining the Target Group

We conducted numerous tests and surveys aimed at creating a human-centric and future-oriented solution for the issue. During these phases we developed various ideas, ultimately settling on our current job-site structure.

Creating a Website that enhances Workplace transparency

We discovered a lack of transparency in the current application process for child care educators. By increasing workplace transparency employees gain greater agency in selecting a workplace which will fully support and supply them with humane working conditions. Additionally, by providing feedback to workplaces about their desirability in the open market, we could create an incentive for self-improvement.

The initial step in designing our prototype involved creating a flowchart. Subsequently, we developed sketches, a low-fi prototype and finally, a high-fi prototype, iteratively refining and enhancing its features at each stage of development.

Testing our Website to create a better User experience

Applying different testing methods, such as thinking aloud sessions and user questionnaires, enabled us to identify and address problems in the design of our prototype.

Naming

The initial step in establishing my personal brand was selecting a suitable name. The emphasis was placed on identifying a name with international and dynamic phonetics, semantic associations with design and youth, as well as strong syntactic potential.

Logo Construction

Variability was a primary focus in creating the logo. In a modern context, every logo needs to be adaptable to new trends, new media, and new ideas while still encapsulating and conveying the brand’s identity.

Copy

Every good brand needs its own copy layout. Every letter, message, and email needs to be instantly recognizable. All letters are constructed using a dynamic grid utilizing the Fibonacci numbers, guiding the eye from the addressee’s name to the text to the billed tasks.

To save everybody’s time, the bill is abbreviated into a scannable paragraph, allowing customers to pay by simply using the camera of the bank’s mobile app. The type of letter, invoice number, and firm name are located on the right edge, facilitating quick identification when browsing through a folder.

Envelope design

Custom envelope designs ensure a complete experience for the customer, starting at the point where the first letter is received. The custom design might be expensive but creates strong brand recognition.

Business Card

To stand out I opted for an expensive yet intriguing design. It features a semi-translucent notch for the filled part of the logo. On the front side, all necessary information can be found. On the backside the brand name “Razu“ is handwritten with the brand marker.

From Picture to Poster

All Posters are based on photographs of classical statues taken in Florence.
The original for the Alexander Poster is the so-called dying Alexander, a statue of a young man which has been presumed to be Alexander the Great.

Design and Intention

The designs are influenced by the backstory and themes of each statue, or better, my interpretation of those.

In the Laocoon poster the background seems to wrap around Laocoon and his sons, chocking him just like the serpents in the original work.

For the Medusa poster, I went a different way, making her the subject of my poster and not Perseus, who is the subject of the original statue. Her head floats in seemingly endless space, suspended from her body, showing her pain as well as the iconography her snake hair created over the years. Through her pain, she is remembered.

Preparation for Print

As the posters were designed for printing and not for digital use, several aspects had to be kept in mind. The height of the Prints was limited to 1.06 meters by the printer, narrowing the format to this hight. Furthermore, the Posters had to be created with a higher contrast and sharpness, allowing the plotter to capture the full detail of the images.
The posters were created in Procreate and Adobe Photoshop. The final files were prepared for print in InDesign.

Logo Creation

The logo was created using three circles constructed after the golden ratio, forming a letter M lying on its side.

Adaptability

The logo can be used in color and as an outline of different weights. This increases its use-cases and makes it as flexible as possible while still retaining its memorability.

Concept Art

The character, along with a fitting story, has been specifically created for this project. Through multiple iterations, I carefully planned the concept art for Kyra.

Modeling

Using the concept art, I was able to model the character in Blender.

Final Steps

Texturing was the final but most important process in my design process. Using Substance Painter, I focused on creating realistic textures for my character. The goal was to create an outfit that could give camouflage in a grey, foggy environment, as well as provide protection while not hindering agility.
To create an immersive trailer, I incorporated a basic environment and an asset gun.

Planning and Scene Copmotion

Before the project even started, planning was a main issue. We had less than one semester to complete our project. Creating a shot list marked with locations, actors, time, and weather requirements was a crucial part during this phase.

Color Grading

One of my main tasks after the shooting was completed was the color grading of the film, which was and is an area of great interest of mine. The movie was graded using DaVinci Resolve and countless online tutorials.

Styleframes

Before the animation process could begin, the main focus was on creating a gripping story with a fitting style. I decided that my main character should be a cat, living in a post-apocalyptic world where concrete infrastructure meets jungle-like overgrowth.

Storyboard

Creating a storyboard was a crucial step for my storytelling, as it allowed me to see which scenes were necessary to create a coherent and purely visual story. However, it was even more useful for my animation process. I created my frames using Procreate and the pose-by-pose method. Therefore, having the storyboard beats as main hero poses was very helpful.

Animatic

After the storyboard was finished, I created an animatic to see if it would translate into an animation environment. This helped me to fine-tune the scene perspective, transitions, and the approximate length of each scene, and therefore, the needed frames.