ROLE – Designer & Developer  |  CATEGORY – Web + API Data + Illustration  |  TIME – 2 Weeks & Weekends

See the Pen gPLrNQ by David Utt (@davidutt36) on CodePen.

Project Review

A fun project to test my development abilities. For this piece I wanted to create a single page web project to help get some daily inspiration for both myself and others, as I know how hard that can be to find in ones life. I was inspired by the old adage/characterization of this with the light bulb appearing over someones head but in a digital form. A small test for both my animation, illustration and coding abilities.

I initially started off with idea of using an API system to generate the actual information on the site, I used forismatic.com.  To create the light and chain illustration was simple enough using the combination of Illustrator and the good old pen and paper to get the look just right. The hardest part came about from the animation. To keep the metaphor clear I wanted to include this concept of “pulling the chain” actually making the light TURN ON as it were. This was eventually segmented into three parts and tackled independently: Pulling the chain, creating the light (darkness and glow) and making a new quote appear.

For the first part, pulling the chain I had looked into both JS and CSS based animations an after a weekend I pulled a CSS based animation sequence on the chain asset which creates that bouncing movement when the button is pressed and reset. To create the light change was a combination of luck and knowledge as the background change was a simple if statement the glow was a trial of try and fail ending up on a drop-shadow glow which uniquely pixelates as it spread outwards.

Conclusion

Looking at the project now, about a week after it’s conclusion, I’m fairly happy with the results. I know it can be considered very simple. Never-the-less it was great to get some practice with web based animations as well as seeing different ways to interpret the use of the internet. For a long time now I have only seen the internet and digital space as a place to communicate companies, brands, and stories. It is only until recently I have started to change my perceptions of this seeing it as both a canvas and not solely as a billboard for others.

Davidutt

Author Davidutt

More posts by Davidutt

Leave a Reply