Buck In-App Project

The Challenge

Create a set of 5 animated

illustrations for each of Apple’s

Home app categories

Considerations

-The set of looping animations

should be clear and simple

-There will be text associated

with each of the imagery

-Animations will be used in the mobile

app, under the Discover tab

-Titles Set : Getting Started,

Lighting, Security, Comfort, Entry

Initial Ideas

First Idea

The first was to create an icon-type design through simple shapes considering simplicity. Solid shapes were used in bright colors to blend in with Apple's neat and edgy style. Details were added using subtle noise texture and gradation.

Second Idea

It was designed to be an illustrative way using primitive shapes. For a clean arrangement, perspective was removed and the screen was made flat. Shapes bounce, gather to build up, and become objects interacting with each other.

First Pass Animation

Morphing to the line to emphasize that various lamps can be turned on through the Home app. In addition, the color of the light changes along with the same timing of morphing to inform that the color of light can be changed using the Home app.

-> Morphing :

Give keyframes on path

Second Pass Animation

While maintaining Morphing animation, the design has been changed by adding gradients for detail. Fake 3D and Camera Layer were used to express a three-dimensional effect, and Echo Effect and bounce expression were used to make a playful/dynamic motion.

-> Gradient making:

Highlights, shadows, and noise were made using Inner Glow, Inner Shadow, and Bevel Emboss from Layer Style.

-> Design Choice :

It maintains a simple form but adds details to prevent a flat and boring design.

Both cameras in the video are based on camera models used in the actual Apple Home Kit; Security.

->Expression that I used for bounce :

amp = effect("Scale - Overshoot")("ADBE Slider Control-0001") / 2.5, freq = effect("Scale - Bounce")("ADBE Slider Control-0001") / 10, decay = effect("Scale - Friction")("ADBE Slider Control-0001") / 10, n = 0, 0 < numKeys && (n = nearestKey(time)

.index, key(n)

.time > time && n--), t = 0 === n ? 0 : time - key(n)

.time, 0 < n ? (v = velocityAtTime(key(n)

.time - thisComp.frameDuration / 10), value + v / 100 * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t)) : value;

} catch (e$$4) {value = value;

Design Question

Problems that emerged after 2 pass animation:

The animation of the 2pass was morphing apple devices. This was to show that various Apple kits make our lives comfortable.

However, it turned out that the animation was not about “what is each category is about”. My animation is more like "the transition of devices".

I also realized that the motions and colors were not Apple's preferred style.

New Design Approach

I changed the whole design style to a metaphorical approach.

The designs are based on the line, circular grids, and rectangular frames.
It’s because the 5each Home category is sophisticated functioned along with the rules/orders.

I wanted to represent it as geometry rules and it makes patterns naturally.