General Assembly: Web Design Circuits

art direction, motion design/animation

Last year, General Assembly, an education company specializing in design, technology, and business skills instruction, launched their first online class for training in website design and development. The course, entitled Web Design Circuits, was broken up into 10 units of 4 or 5 video lessons each that students could tackle at their own pace. It was geared towards individuals who did not have a background in design or development, beginning with basic graphic design principles and ending with more in-depth code exercises. The goal was to clearly explain the principles and techniques needed to consturct a website in a manner that was easy to digest online.

 

The videos were a mix of instructor lectures, illustrative examples, and on-screen demonstrations that helped to flesh out the material. After the script was written for each of the 10 units, the design team worked to figure out which portions would would work best as animations or demonstrations and which would work best recorded by the instructor. We established a rough style guide for how different scenarious would be represented and then began designing and animating according to the script. After the animated sections were completed, the editing team cut them together with the video recordings and voice-over to create the final lesson.

 

The video below shows just a few examples of the animated portions I created for these lessons:

Other screens I designed for the lessons:

x-height comparisons

river in typography

rule of thirds

golden mean

image composition

mobile mindset

desktop vs. mobile priorities

email composition focal lines