HELLO!

PLANNING & PRE-PRODUCTION

IS EVERYTHING!

IMPROVE

EXECUTE

PLANNING

RESEARCH

FIGURING OUT STUFF

  • Forget about software!
  • Take things one step at a time
  • Don’t get distracted
  • Observe
  • Compare good vs bad

Useful Links

WHAT INFORMATION DO WE GET FROM THESE DESIGNS?

GOOD:

  • Gradients
  • Lens effects (Depth of Field, Light leaks)
  • Circles and circular arrangements
  • Very thin lines and dotted lines
  • Scale indicators in non-linear shapes
  • Ticking numbers that roll
  • Dot grids
  • Monochrome icons
  • Bright accent color rarely used
  • Assymetrical tables
  • ‘Extra’ windows with other information in the background or next to main focus
  • Dark background, light text

BAD:

  • Many text and lines of the same shape and style / thickness
  • Can’t tell what’s connected to what
  • Appears too cluttered to be readable
  • Strong glow hiding detail
  • Overlapping interfaces and elements brightening each other too much

WHAT INFORMATION DO WE GET FROM THESE ANIMATIONS?

GOOD:

  • Depth of Field
  • Animates in reading order
  • Fast and eased
  • Flashes and waves used to clarify directions and shapes
  • Colors change with status
  • Each item moves independently and ‘locks’ into place
  • Read zero and then go past their value and settle
  • Shifting focus of different elements
  • Zooming in to show finer values
  • “Boot up” and scrolling text

BAD:

  • Many things moving at once as if we’re meant to focus on all of them
  • Object moving before its readable
  • Unimportant elements moving when something happens

LET’S DESIGN OUR OWN!

IMPROVE

EXECUTE

PLANNING

RESEARCH

IMPROVE

Add overlaps and extra details. Look at ideas from research that can be implimented to make the design better. Keep in mind the “BADS” from previous examples.

EXECUTE

Get into producing what we want. Work is tweaked and improved as we go along, but we generally stick to what we had planned. Better planning makes this step easier.

PLANNING

Style. Arrangements. Color scheme.

RESEARCH

Look online at what people have done before. What do we need to think about?

MOGRAPH HANGOUT: HUD Animation - Google Slides