We kick off the workshop with an introduction to the tools we will be using. We will also do a refresher of HTML + CSS and Javascript.

We will also start thinking about our poster generators. Collect the following references for your own design systems:

• A list of visual contradictions
• Repeating typographic patterns
• Existing posters as reference
• Code snippets

While sketching, consider the following things:

• Work from a visual contradiction (e.g. fast-slow).
• Make a storyboard for each idea: sketch a beginning, middle and end of the system you are building.
• Consider which elements change over time.
• How do you want the poster generator to interact with its user?

While progressing further in the afternoon, think about:

• How do you use type in your system? Do you make it yourself, do you modify it or animate it?
• What does your poster look like when it is moving?
• What layers are you using in your design system?
• Does the motion loop?
• Are you using physical samples in your poster, such as 3D scans or images? Or samples from other apps?
• Do you want the poster to be interactive? If so, how?

Today we make an export version of our tool for video and for final print. Make sure you respect the format. Try to export a few versions. In the morning we will test and program animations. In the late afternoon we will export the animations and prepare the presentation.

Upload the final code folder here, and the video animation as .mp4 video here.