Web Animation @CMD2020

This course is part of the Minor Visual (Interface) Design before Ontwerpen 3 alongside Web Typography, together making up Visual Interface Design 2. In ontwerpen 3 you’ll apply your newfound web skills. We build further on knowledge acquired in Internetstandaarden, Inleiding Programmeren, Blok Web and Blok Tech.

Assignment

Pick a piece of artwork (poster, album cover etc.) from either the Letterform Archive or AIGA Archive and translate that to the web. You can also pitch another piece of artwork to your teacher. What happens when people hover over certain elements with their mouse? What if they press keys on their keyboard? How should the 'static artwork' behave on different screen sizes? First try to re-create it with web technology (html elements, svg) then add interactivity and animation and maybe you can even enhance the artwork with elements in the same graphical style as the original work.

Artwork

The artwork that was chosen for this project is presented below. It's used to the cover of the book After the Mass-Age by Chris Riley.

The design is fairly simple. A grid created out of dots, which is accompanied by a title and author text. What makes it interesting to me is the distortion. Which makes certain dots translated out of the grid.

This immediately made me think about certain interactions. Like moving your mouse through the grid and the dots would repel and attract.

Technical approach

I needed to do research to be able to understand the technical solution. Which let me to the work of Daniel Shiffman on The Nature of Code. Finding this resource made me change the concept a bit:

Read and watch the Nature of Code until you are able to create the effects you initially had in mind

So I did that. After going through 6 chapters I was able to create those effects. There were about 30-40 digital sketches created to learn the techniques.

To show some of the processes I decided to present one "art-work" per chapter. Each one highlighting a specific technique