Google Doodle

This school project was made during my first year of Digital Experience Design. Before starting this course, I had no knowledge of coding or design, as it wasn't required and I was eager to take on the challenge of learning these things.

This Google Doodle was created exclusively with HTML, CSS, and a few custom SVG images, which I designed in Figma.

For this Google Doodle, I chose May 16, International Day of Light.

Tyco's potion cart

Context

A ‘Google Doodle’ is a special, temporary modification of the Google logo on the search engine's homepage. These doodles are often created to mark holidays, important events, or to honor notable individuals.

For this assignment, my classmates and I had to design a Google Doodle of our choice. After browsing around and finding out that almost every day there’s a special occasion or someone to be celebrated, I chose to work with The International Day of Light, which takes place on May 16th.

Light sources are an interesting thing in my opinion. Without light, there would be only darkness... Not a lot to see, so not a very exciting life to live. Seeing as I have a history in science, both natural light and artificial light are quite interesting to me. That’s why I chose to work around this day.

Iterative process

I kept track of my process through Figma, a tool I really love using to create pretty much anything that has to do with design, collaboration and process-tracking.

I started with designing some ideas on paper. I came up with 3 different ideas for the Doodle.

idea 1 idea 2 idea 3

Though I liked all the designs quite a lot, I decided the first one was the most achievable for me at that time. I only had a couple months worth of lessons in coding/designing, so I wasn’t that sure of my skills yet.

Then it was time to create my design in Figma. I decided to change the way the letter G would look, because I wasn’t convinced of my first idea. After some alterations, like changing the colours a couple of times, The final design became something like this.

final design in figma

G - a star constellation
O - an eclipse
O - a burning campfire
G - a matchbox
L - a lit match
E - the coil in a light bulb

Coding and animating with CSS

Afterwards, it was time to jump into code and start animating. I didn’t want the animation to be too busy, so the first O and the second G are just static images. For the first G, I wanted the stars to twirl and change sizes. For the second O, I created the fire in CSS to make it move, so I used the logs to position it. The same applies for the L, a match that was lit by a fire created in CSS. And lastly the E, which I originally wanted to leave static, but a classmate told me I could turn it into a flickering light bulb, so that’s what I did!

And then it was ready! I must say I am quite content with how this turned out. At first I wasn’t so sure of my skills, but throughout the process I kept getting numerous compliments from classmates and friends. So in the end I was pretty proud of myself for having achieved my vision in code. You can see the animation here.

Overall, I am quite satisfied with the final result of my Google Doodle. It was a great learning experience for me, and I am proud of what I have accomplished with my limited knowledge at that time.

Here is the final animation: