Skip to content

Latest commit

 

History

History
68 lines (52 loc) · 3.75 KB

animations.md

File metadata and controls

68 lines (52 loc) · 3.75 KB
Raw

Animations at EFF

As a small generalist design team at a nonprofit, our workload mostly consists of illustrations, web design, and user experience tasks. However, once in a while, we have some capacity to work on motion graphics, specifically for:

  • how movement should feel in an interface (e.g. what might a loading animation look like? How should something scroll?)
  • gifs for tutorials (such as how to use certain software)
  • gifs for illustrating concepts (used for Deeplinks blogposts, Surveillance Self-Defense and the Security Education Companaion)
  • and once in a blue moon, videos. But for the purposes of this document, we we'll solely focus on audioless animations.

We're still building our capacity on animations and are open to feedback! Here are some considerations we keep in mind.

Considerations for Movement in an Interface

This is a work in progress!

EFF-y Principles for Animations

The following sections detail considerations for tutorial gifs, and for illustrating concepts.

Visuals:

DON'T:

Use images or assets that you do not own. Look out for types of attribution and copyright considerations.

DO:

Use images that you've created yourself. If you're short on time, or if it's preferable to use graphics that exist out in the world, use external images that are CC-BY, which require attribution. A good resource is commons.wikimedia.org.

Type:

DON’T:

Use proprietary typefaces.

DO:

Use free and open typefaces. You can check fonts.google.com.

Privacy & Security Constraints:

If you are making animations that include a working piece of software, such as for a demo or for a tutorial:

DON’T:

Record private and/or sensitive information on your screen.

DO:

Make a dummy account, and only record the part of your screen that you need.

Accessibility

DON'T:

Forget about these considerations :)

DO:

  • Write alt-text for your animations! Really! Alternative text is used by screen readers, search engines, and when the image cannot be loaded. By adding alt-text you improve accessibility and search engine optimization.
  • Be mindful of epilepsy considerations for animations. Count how many flashes you have: Have fewer than 3 flashes in any one second period. Source: w3.org/TR/WCAG20/#seizure
  • Be mindful of color contrast. Aim for 4.5:1. Check webaim.org/resources/contrastchecker if you're unsure of your contrast.
  • Be mindful of text size. Make sure that the text is large enough.
  • Be mindful of pace: Make sure the speed is at a comfortable reading pace for others.
  • Show your animations to others for feedback! You can user test animations to check for comprehension, and whether things were at a comfortable pace.

CONSIDER: Adding Captions (Depending on the Content)!

If you’re editing a video with audio, please consider adding captions to the original video or gif version of it. Captions can be helpful for lots of situations:

  • for folks with disabilities,
  • for folks scanning their social media feeds without having to click in to hear,
  • and with emphasizing comedic or dramatic effects.

General Principles for Animations

  • Consider making a few versions of the same animation at different sizes / qualities, keeping different screen sizes, internet connections, and vision impairments in mind.

  • If you’re showing how to do something: Be prepared to record the steps a few times!

  • Try to focus on one action at a time. What should people notice, having watched the one thing? Why is it helpful for that action to repeat (e.g. what would they learn how to do, what’s humorous about it)?

Some Art-y Constraints

  • cut out unnecessary details and length
  • remove clutter

Videos

This section is a work in progress!