![Page 1: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/1.jpg)
How to approach designing for iOS and Android
9 December 2015
![Page 2: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/2.jpg)
Barbara Wajda Interaction Designer
Holly Wall Interaction Designer
Nice to meet you.
![Page 3: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/3.jpg)
![Page 4: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/4.jpg)
ABN AMRO Jumbo
Bright Stamps
![Page 5: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/5.jpg)
OR ?
![Page 6: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/6.jpg)
![Page 7: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/7.jpg)
![Page 8: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/8.jpg)
2
1
1
2
![Page 9: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/9.jpg)
OR ?
![Page 10: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/10.jpg)
![Page 11: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/11.jpg)
![Page 12: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/12.jpg)
22
1 1
![Page 13: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/13.jpg)
Design StrategiesChoosing your approach
![Page 14: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/14.jpg)
![Page 15: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/15.jpg)
Leading device strategy
Consequences of the leading device strategy
+ Less design work (at first)
+ Faster to market - build and release one platform first
- One platform will have to wait
- Higher risk of forcing patterns onto non-leading device
![Page 16: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/16.jpg)
![Page 17: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/17.jpg)
Custom design
- More development time
- Custom designed and developed everything
- Unpredictable behavior with OS updates
+ Most room for innovation
+ More design freedom but also more risk
![Page 18: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/18.jpg)
![Page 19: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/19.jpg)
Platform dedicated solutions
+ Strongest user experience across platforms
- More work - design twice
+ Less development time compared to custom solutions
+ Release at the same time
- Less consistency between designs thus more difficult to maintain
![Page 20: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/20.jpg)
“Exactly 0% of your users care about ‘cross-
platform consistency’ and no, your product
manager does not count.”
![Page 21: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/21.jpg)
Focus on functional consistency
not UI consistency
![Page 22: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/22.jpg)
Major platform differences
![Page 23: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/23.jpg)
![Page 24: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/24.jpg)
Stack of activities
![Page 25: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/25.jpg)
![Page 26: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/26.jpg)
1
2
back button
up button
![Page 27: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/27.jpg)
![Page 28: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/28.jpg)
Hierarchy
![Page 29: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/29.jpg)
![Page 30: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/30.jpg)
![Page 31: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/31.jpg)
![Page 32: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/32.jpg)
![Page 33: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/33.jpg)
![Page 34: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/34.jpg)
![Page 35: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/35.jpg)
![Page 36: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/36.jpg)
2
1
3
![Page 37: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/37.jpg)
Navigation bars
![Page 38: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/38.jpg)
tab bar
hamburger /drawer menu
3
1
2
3
app/tool bar
4
![Page 39: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/39.jpg)
tab bar
tool bar
navigation bar
21
33
![Page 40: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/40.jpg)
Swipe between tabs
![Page 41: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/41.jpg)
Overlapping gestures
![Page 42: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/42.jpg)
Material design iOS 9
![Page 43: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/43.jpg)
Designing for different screen sizes
![Page 44: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/44.jpg)
Developer Advice
![Page 45: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/45.jpg)
“Read the design guidelines…
Marnix Arnold iOS
![Page 46: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/46.jpg)
“Read the design guidelines…
and then keep reading them.”Marnix Arnold
iOS
![Page 47: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/47.jpg)
Body text
• Bullet
Slide title
“Try and use iOS and Android on a daily basis.”
Efren Fernandez Android
![Page 48: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/48.jpg)
“Look at what you can do on each platform
before you start designing.”Tom Bartels
iOSRoderik Lagerweij
Android
![Page 49: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/49.jpg)
May the force be with you…
• Use both iOS and Android on a daily basis
• Only clients & testers compare platforms
• Keep your developers close
• Know the iOS and Android guidelines
• But break the rules
![Page 50: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/50.jpg)
Thank you!
More? Questions? Feedback? Share experience? [email protected] [email protected]
/icemobile /icemobile/IceMobileAmsterdam
![Page 51: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/51.jpg)
Slide 1: http://buildforsearch.com/google-apple-extend-rivalry-auto-industry/
Slide 6-8: Airbnb iOS and Android app
Slide 10-12: Instagram iOS and Android app
Slide 14: YouTube iOS and Android app
Slide 15: http://www.allstarskcpc.org/apply/
Slide 16: Snapchat iOS and Android app
Slide 17: http://lionssharedigital.com/design/5-signs-its-time-to-invest-in-a-new-logo-design/
Slide 18: Spendee iOS and Android app
Slide 19: http://www.trendtailors.com/gentlemen.html
Slide 20: http://www.engadget.com/2013/02/20/bbc-sport-app-android/
Slide 21: Poder PDA: http://www.pulseheadlines.com/wp-content/uploads/2015/09/Runtastic-Moment-collection.jpg
Slide 24-27: http://developer.android.com/design/patterns/navigation.html
Slide 29-35: ABN AMRO Mobiel Bankieren app
Slide 36: Facebook iOS app
Slide 37: https://design.google.com/articles/design-from-ios-to-android/
Photo credits
![Page 52: How to approach designing for iOS and Android](https://reader035.vdocuments.net/reader035/viewer/2022062412/58857fcb1a28abbb7e8b7149/html5/thumbnails/52.jpg)
Slide 38: https://www.google.com/design/spec/layout/structure.html#structure-toolbars
Slide 39: Mail and Clock iOS apps
Slide 40: Clipboard Android app
Slide 41: Jumbo Android app
Slide 42: http://www.phonesreview.co.uk/2014/10/19/nexus-5-on-android-5-0-lollipop-vs-iphone-6-on-ios-8-review/
Slide 43: http://bgr.com/2015/11/07/2013-best-smartphones-iphone-5s-nexus-5-htc-one-m7/
Slide 44: http://citizenk9petcare.com/contact/
Slide 45-46: http://www.asha-labs.com/blog/
Slide 47: http://helpmyhelpdesk.com/how-many-devices-is-too-many/
Slide 49: http://bgr.com/2015/06/03/apple-vs-google-ios-android/
Photo credits