Material Design on iOS

Resources from my SyncMobile presentation at Odecee on 15/2/2016.

Introduction to Material Design

• Slide 2: Material Design spec
• Slide 3: Introduction to Material Design
• Slides 4-5: What is material?
• Slide 6: Cards & lists
• Slide 7: UI components
• Slide 8: Card layout
• Slide 9: Navigation
• Slide 10: Meaningful transitions
• Slide 11: Material Design principles vs iOS Design principles

Navigation

• Slide 18: Quote by Mike Stern, Apple UX Evangelist, WWDC 2014
• Slide 19: The mystery meat of mobile navigation
• Slide 22: Floating Action Button
• Slides 23-25: Path iOS app

UI components

• Slide 30: Material (iOS)
• Slide 31: MaterialKit (iOS)
• Slide 32: Material Controls on iOS (iOS)
• Slide 33: Material Design Lite (web)
• Slide 34: MaterialTextField (iOS)

Meaningful motion

• Slides 37-38: Quotes on animation from iOS Human Interface Guidelines
• Slides 39-40: Quotes on animation from Material Design spec
• Slide 41: Meaningful transitions
• Slide 42: BubbleTransition (iOS)
• Slide 43: User Profile Interface Animation by Dmytro Prudnikov
• Slide 44: MaskZoomTransition (iOS)

Designing for animation is not as hard as you think

Resources from my presentation at /dev/world/2015.

Videos from slides

• Slide 16: Calendar (download)
• Slide 18: Duolingo (download)
• Slide 20: Stripe Checkout remember me
• Slide 31: Stripe verification code (YouTube video @ 8:20)
• Slide 35: Clear
• Slides 40, 41: MailChimp animations
• Slide 43: Dots
• Slide 45: Inbox by Google
• Slide 47: Delightful Weather animated weather icons (download)

Delightful Weather prototypes (Keynote files)

• Basic transitions (modal present & dismiss)
• Magic move (menu transitions)
• Build animations (weather warning icon)
• Self playing (communicate gestures, video below)
• Animated weather icons (self playing)

Resources

• Designing with Animation (WWDC 2015 Session 803)
• Prototyping: Fake It Till You Make It (WWDC 2014 Session 223)
• Tools and Tips for Prototyping Apps (/dev/world/2014, Judit Klein)
  
  
• Google’s Material Design Video Recreated in Keynote
• Linda Dong's Keynote Motion Graphic Experiment
• Prototyping Animation with Keynote by thoughtbot

Additional resources

These resources are not directly mentioned in my presentation, but I found them useful when researching for this talk.

• Motion and Meaning podcast
• Lets move! presentation by Benjamin De Cock at CSSConf Australia
• Designing with animation presentation by Pasquale D'Silva at Web Directions South
• Enhance Your User Experience with Animated Transitions
• Improve the payment experience with animations
• Transitional Interfaces
• Spatial Interfaces
• Stop Gratuitous UI Animation
• Motion in UI Design
• Gestures & Animations: The Pillars of Mobile Design
• Google’s Material Design guidelines for animation
• Design in Sketch Then Animate In Keynote
• Five app prototyping tools compared: Form, Framer, Origami, Pixate & Proto.io

Brownbag: Designing Delightful User Experiences

Resources from my brownbag presentation at Odecee on 29/4/15.

Keynote demos

• Basic demo (links, transitions, magic move)
• Advanced demo (accordion picker with magic move, build animations)
• Self-playing demo (show gestures with circle, export to QuickTime)

Videos

• Keynote prototype v1 (slide 18)
• Keynote prototype v4 (slide 20)
• OdConnect poll (slide 34)

Links

• 3 ways good design makes you happy (TED talk by Don Norman)
  
  
• Prototyping: Fake It Till You Make It (WWDC 2014 Session 223)
• Tools and Tips for Prototyping Apps (/dev/world/2014 talk by Judit Klein)
• Prototyping Animation with Keynote (thoughtbot blog post)
  
  
• Using UIKit Dynamics in Swift to Animate Your Apps (SitePoint blog post)
• Getting Started with UIKit Dynamics (
WWDC 2013 Session 206)
• Advanced Techniques with UIKit Dynamics (
WWDC 2013 Session 221)