Master test (Meesterproef)

Description

the master test was the final project of the Visual Interface Design minor. This assignment was my chance to show off all I learned from previous courses and to show my personal designer vision.

The goal of this project was to visualize a video, podcast or article. I chose to work on an article about The Fermi Paradox on Wait But Why written by Tim Urban.

Product

The final product of this project is a web-based prototype of how I would visualize the chosen article. Below you can view a screencast of the demo.

Process

Debrief

For the master test, I am going to choose a case (text, image, sound, or video) for which I am going to create a visual interface. It is important that I convey my personal vision to the viewer/user. It is also important that I apply my previously acquired knowledge of all previous subjects in this master's thesis.

For the case, there are a number of different pre-determined sources from which I can choose. These include The Correspondent, Aarsman Collection, The Good, the Bad & the Interesting, and Tegenlicht van VRPO. I may also choose my own subject, with the approval of my coach.

For the assignment, there are a number of conditions that it must meet:

One of he main goals of this project is to develop a personal vision. To do this, I must have knowledge of existing visions, be able to express my vision, and be able to explain why certain design choices align with my vision.

Personal goals

During the course Interface and Motion, I returned to one of my biggest passions, animation. This is something I enjoy doing but often don't have enough time or motivation for (since it's a "time-consuming" hobby).

In the past, I often used programs for animation that were old and not future-proof. During the course, I discovered Rive, a new web-based animation program specifically made for web animation. This program brings together two of my favorite subjects, the web and animation.

For this Master Test I wanted to to delve into Rive so that I can build more experience with it. This program has a lot of potential and could replace After Effects and Lottie when it comes to animation for the web.

Chosen case

I chose to work on an article about The Fermi Paradox on Wait But Why written by Tim Urban. This article is about the Fermi Paradox, which is the question of why we haven't found any evidence of extraterrestrial life. The article is very long and contains a lot of information. I wanted to create a visual interface that would make it easier to understand the article.

Sketches and storyboards

To get a better view of the animations and structure of the website I made several sketches.

Styleguide

It was essential to create all animations and components in the same style. I made a styleguide which helped me stay consistent throughout this project.

Personal vision

For this project, I took on the challenge of transforming a visually "dull" article into an interesting reading experience. The original article has very few images, and the images that are present are of low quality.

The future of the web, as I see it, is a place where text, illustration, and animation come together to create a seamless experience. Currently, many articles are still stuck in the reality that animations were never possible in newspapers. Nowadays, everything is online, allowing for creative motion design that can take an article to the next level.

I kept this vision of the future in mind while creating this project. There are new tools emerging that can bring interactive, small file sized animations and illustrations to the web. I used these for this article.

For the style of this project, I wanted to challenge myself. It is mostly standard for websites to use at least three colors, with one of them serving as an accent color. I chose to only use black and white. This allowed me to search for new ways to keep the user's attention and fits well with the "space" subject.

Software

Github

This project has been documented on Github.

Github page