For my shared office space I wanted to create a small website to display the different people and their skills in the office.

I took some inspiration from the intros before every episode of the Netflix series Love, Death and Robots in that I wanted to create animated icons that represent each person.

There are three people in the office. One graphic designer, one photographer and me (illustrator).

Therefor I started by figuring out what Icons could fit the professions in my sketchbook.

Next I decided that I don't want to create the web animations by hand with CSS because that would probably end up janky and ineffective.

Instead I went with the lottie library which allowed me to create the animations in After Effects and display them as animated SVGs in the web.

First I created the single Icons in Illustrator and then I animated them with After Effects.

Here are the final animations:

Keeping them simple made it no problem to export them with bodymovin and using them in the web.

As a background for the website I used a photo of a wall in the office taken by Sascha Lepp.

Now it was just a matter of putting it all together and coding the pieces in between.

The font I used is Roboto which provides a simple, clean balance to the more complex background and animations.

As a color I used an orange derived from the background image.

Here you can see the final animations put together and used in reverse as hover effects on the links to the office members separate websites:

See the final result on https://karstenbuckstegge.github.io/vorraum/