A basic sticker sheet and workflow for animating user interfaces - Deepstash

A basic sticker sheet and workflow for animating user interfaces

I’ve already shared why Motion Design Doesn’t Have to be Hard , but I wanted to make it even easier for designers to use the Material motion principles I know and love. After Effects is the primary tool our team uses to create motion examples for the Material guidelines . Having used it to animate my fair share of UIs, I wanted to share my workflow tips and…

STASHED IN:

2

STASHED IN:

0 Comments

MORE IDEAS FROM Guide to Material Motion in After Effects

Download this basic sticker sheet to see a project completed using my streamlined workflow (outlined below). It contains a collection of Material components, baseline UIs, and navigation transitions.

STASHED IN:

2

First things first, we need assets to animate. Most of the visual designers on our team use Sketch, which by default doesn’t interface with AE. Thankfully Adam Plouff has created this plugin that adds this functionality. I used it to import our library of baseline Material components from Sketch into AE. These assets are found in the sticker sheet’s Components folder.

STASHED IN:

2

With this library of baseline components, new UIs can quickly be assembled by dragging them into a new AE comp.

STASHED IN:

2

Master properties in Ae make it possible to create a single reusable asset. The App bar is often customized by changing its Icons, colors and shadows. You can find these in the baseline UIS folder in the Download.

STASHED IN:

2

The examples in the navigation transitions folder illustrate a method for applying material motion patterns in after effects. To start, each property is animated without easing. The parent composition is then time Remapped to apply easing and set duration for all the nested Keyframes. This allows for quick adjustments to easing and duration since only two time Remapped Keyframes control the entire transition. This method can be used to consistently animate most transitions that use material motion principles.

STASHED IN:

2

Deepstash helps you become inspired, wiser and productive, through bite-sized ideas from the best articles, books and videos out there.

GET THE APP:

RELATED IDEA

Musical theory: a tool to understand music

Music theory will give you a better understanding of music. It is not a set of rules but a tool to help you understand, create, and communicate music.

The best is to learn music fundamentals first. The building blocks of musical compositions include:

  • Harmony - When multiple notes play at the same time to produce a harmonious new sound.
  • Melody - Notes in succession that are arranged into a musical phrase.
  • Rhythm - A recurring movement of notes and rests and a pattern of strong and weak notes.

11

STASHED IN:

52

One of the most important times for a design review is at the end of a development sprint. A design review evaluates whether or not the developed product is in line with the original creative vision and user experience. In other words, it’s a review of the developed project which helps to verify all graphic and technical components display and function properly.

As the design gets passed from design teams to product owners and development teams, they each make changes due to temporal or business issues, which can mean the final product doesn't correspond with the design team’s vision.

1

STASHED IN:

4

Organic Solar Cells

An organic solar cell is a type of photovoltaic that uses organic electronics—a branch that deals with conductive organic polymers or small organic molecules for light absorption and charge transport to produce electricity from sunlight using photovoltaic effect. Organic solar cells are cheap, resulting in low production costs to form large volumes. Due to the high optical absorption coefficient () of organic molecules, large amounts of sunlight can be absorbed easily and efficiently.

6

STASHED IN:

5