Build a portfolio-level piece that features a clear identity system, in motion. The end result of this piece will feature strong typographic and design choices and cut through the clutter when placed into the world. Three possible directions for this assignments include:
- an animated or interactive poster
- a logo in motion
- a logo that resizes itself based on @media breakpoints
Solutions will show a deepened understanding of typography and the 12 principles of animation.
PROCESS
IMAGE DEVELOPMENT
Explore a variety of approaches and media. Be inventive and push your creativity. Explore and perform typographic experiments using a variety of 2D and 3D materials and processes. Look at ways of hybridization working back and forth between physical and digital making.
All imagery created must be your own. You may use any combination of processes and imagery this may be accomplished by lettering, drawing, illustration, photography/video, stop motion, 3D built, collage, etc. Letters may be based on existing typefaces, however I highly encourage you to experiment with the form itself.
Consider implementing a different method for each animation and/or creating a visual system that connects them. Formal aspects such as, type style, image, composition, color, texture, shape, perspective, weight, scale, foreground/background – are all vital in how your pieces might relate.
STORYBOARD
The first step in creating an animation is storyboarding your animation to create a proof of concept.
This sequence of drawn or digitally created panels will depict the main sections of your animation. What you want to think about here is what is going to be on the screen when and how it is going to enter, move and/or exit your screen.
DELIVERABLES + FORMAT
- Photoshop, After Effects, CSS animation
- RGB
- No smaller than 300 x 300 px
- (GIF’s smaller loads faster,
- limited color pallet loads faster)
- Must include at least 100 frames no more than 500
- After Effects: MP4 or MOV, frame rate 22 fps reduces file size without losing quality
- Upload your identity in motion to the google drive with your name in camelCase at the projectFolder
– – – – – – – – – – – – – – – – – – – – – – – – – –
Considerations
Timing: Fast, slow, intermittent, rhythmic
Motion: Smooth, jittery, chaotic, abrupt, gradual
Weight: objects heavy and slow? Light and quick?
Exaggeration: cartoony, realistic, bold, subtle
Follow-through: “wind-down” after the movement
Squash and stretch: the impact of collision or gravity upon an object that imitates physical forces
Ease-in/Ease-out: Deceleration/acceleration
Anticipation: “wind-up” before the movement; more organic, natural
– – – – – – – – – – – – – – – – – – – – – – – – – –
Project review
Wednesday, March 3rd (last class before Spring Break)
Inspirations
Animated posters
- The moving poster
- International Typographic Biennale: Typojanchi saisai 2018-19in Seoul.
- Her movie poster
- Grand Budapest Hotel
- Inception poster
- Robu-Grotesk
- Article – the importance of animated posters
Responsive logos
article necessity of responsive logos & how to make them in 5 steps
Interactive poster, digital
- educational information layering
- coded posters
Interactive poster, analog
Interactive graphics
https://processing.org/examples/