identity in motion

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:

  1. an animated or interactive poster
  2. a logo in motion
  3. 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

Responsive logos

corporate examples

article necessity of responsive logos & how to make them in 5 steps

Interactive poster, digital

Interactive poster, analog

Interactive graphics

https://processing.org/examples/

Typography in motion

https://codepen.io/lahdesign/pen/gqQzYx