iOS 7

 

The motion design team at Apple played a big role in the iOS 7 redesign. With the simplification and flattening on the UI, we needed animation to step in and add a layer of polish that only Apple could produce.

 

Throughout the redesign, I personally contributed to the weather app, lock screen, parallax effect, slide to unlock, control center, notifications, and loading animations – along with various other UI elements. Marketing videos were also created for the WWDC Keynote, apple.com, and the launch video.

iOS 7

 

The motion design team at Apple played a big role in the iOS 7 redesign. With the simplification and flattening on the UI, we needed animation to step in and add a layer of polish that only Apple could produce.

 

Throughout the redesign, I personally contributed to the weather app, lock screen, parallax effect, slide to unlock, control center, notifications, and loading animations – along with various other UI elements. Marketing videos were also created for the WWDC Keynote, apple.com, and the launch video.

ios-mobile-design
parralax-3D-layout-black

Parallax

 

I was involved in the ideation of the brand new parallax effect. With a more powerful processor we were able to introduce a sense of depth not previously possible on a mobile device.

 

I explored a wide range of options, from breaking every individual object out in z-space, to floating elements above the glass. We settled on the more subtle direction with a recessed background. I’m also listed on the patent for the parallax designs.

Lockscreen

 

Many subtle animations were involved in bringing the Lockscreen to life. The power on fade and scale provides a sophisticated look to the UI. The parallax effect and slide to unlock animation brings depth to the UI and set the foundation for the rest of the interface.

Weather

 

We designed a brand new look for the weather app by creating a window to the outside world. Realistic animations provide instant recognition of the weather – while giving the app an open, spacious feel. Animations between the cities, along with the list view transitions, round out the new structure. I’m listed on Apple’s patent for the weather app.

Notification & Control Center

 

The movement and physics of Control Center and Notification Center were carefully considered. Control Center locked to its height with a spring. Since Notification Center covered the whole screen, we introduced a physical bounce when coming into contact with the edge. I’m listed on the patents for the control center design and animation.

UI Elements

 

I worked on various other animations for iOS 7 including airdrop, app downloading, icon notifications, audio playback, and more. I’m listed on the patents for airdrop and app loading.

 

I also completed over 130 animations for the battery charging state. I tried options with particles, glows, graphic elements. Did the ‘energy’ fill up from the positive side or negative? Was it green, blue, or white when charging? So many options. At the end to the day we decided not to animate it as it was too distracting. This project definitely taught me to not get attached to work – try everything, but be ok to kill it. While everything can be animated, not everything should.

Launch Video

 

Marketing videos for the launch event and apple.com were also created after the UI was completed. High resolution animations of the UI were recreated for use in 3D models and live footage.