Passion Project

I decided to make an extra project to show I have enough to show for the learning outcomes. Because I love to watch Formula 1, I decided to make an information website for people who just started to watch it. When you're new to the sport, you don't know all the rules and that's why I wanted to make a Formula 1 guide.

Mindmapping

What and why I did it?

I made a mindmap to brainstorm about what I could implement into this informational website about F1. This gave me a better overview and helped me to see if I had to add more subjects.

How did I do?

I wrote different ideas that came into my head. I was thinking about the time I didn't understand anything of F1 and what I would've wanted to know from the beginning. I only started to understand it by watching it online multiple times.

Moodboard

What and why I did it?

I made a moodboard for the information website. I wanted to put the vision that I had from the start on one single page. This helped me to take it as an example and remember to stay on the path of the vision that I had and not to go into different directions.

How did I do it?

I wanted to keep the original colors, because the peolple that start watching F1 will recognize that it's about F1. I put elements in it that I would like on the page such as the starting lights. It's very simple, because I wanted the actual website to be simple.

Prototype

What and how I did it?

I did a digital card sorting to see how I was going to order the website. After that I started making the wireframe of the prototype in Figma. A simple designs to make it a easy to understand and follow. To make the prototype I started giving it color, that I already had chosen in the moodboard, I only had to make the right combinations.

To better the prototype I made iterations based on the feedback I got after testing it. I didnt want use the exaxt same logo, so I made my own version in Illustrator. To make the prototype more visual I designed my own flag with the pencil tool in Figma that works the same in Illustrator.

Why I did it?

By making the prototype I was able to see if the design decisions were ok, if not I could make adjustment before starting with coding,

Prototype

F1 Guide website

I made a loading page that has a design with the starting lights that you will always see at the start of the race. This makes the beginning of visiting more fun and it immediately connects the visitor to the feeling of watching a F1 start. For this I used HTML, CSS and JavaScript.

GIT F1 Guide website

Reflection

I liked working on this project. Unfortunately I didn't have enough time to finish it. Even though the semester is over I would like to finish this website, because it's a subject that I like to talk about and it's and handy tool for other that don't understand F1 from the start.