Designing for iOS

I recently presented on our iOS design process at FullStack for the local UXPA meetup here in Kansas City. The slides are full of links to tools and resources we use when designing and user testing iOS apps… and there is animated gif of a hamster eating a burrito.

Transcript

1. Designing for iOS @ryankeairns @gofullstack
2. Before We Begin Let’s get a couple of things clear
3. Burrito Dreamin’
4. Design is a
5. Process Overview Problem! Definition Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics It’s not entirely new
6. We Need An iOS Understand the problem being solved Learn about the users Are there hardware specific needs?
7. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics
8. Research Always be observing Learn common design patterns Review data, web version and customer feedback UX Archive Pttrns Capptivate
9. Solutions So you need a mobile app, specifically iOS
10. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics
11. Defining The Sketch and share early Map out the flow Get the team on the same page First opportunity for user testing Examples POP App Dot Grid
12. Quick Sidenote Get feedback at each stage Walkthroughs InvisionApp
13. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics
14. Wireframing iOS templates Native controls & navigation User testing (in-person & remote) Moqups Balsamiq UI-8 Teehan + Lax Now in Sketch 3!
15. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics
16. Prototyping So. Many. Options. From no coding to HTML/CSS to Xcode Animation Have you done any user testing yet? Marvel App Flinto Xcode Ratchet Keynote Framer.js
17. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics
18. Visual Design (He finally got here) ! You’re going to need to read this iOS Human Interface Guidelines screensiz.es iOS Fonts iOS7 Cheat Sheet
19. Things To Consider Asset preparation! Screen sizes and resolution (@2x, ~ipad) Device Orientation OS versions System default vs custom graphics Auto layout Launch image (4-inch iPhone5 screen) App icons ! Style Guide! Preview it on an actual device! Emulators
20. Your Friends Are Tools Actual tools Sketch Skala Preview LiveView iOS Simulator Your iPhone/iPad appicontemplate Slicy Teehan + Lax PS Scripts
21. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Dev &! QA App Store &! Analytics
22. Development & Walkthroughs! Plan for changes Designing like its 1999 Learn a little Xcode CSS “like” helpers UX QA! Beta Test / Distribution Style Guide Freestyle TestFlight
23. Process Overview Define! Problem Research! Solutions Flows &! Sketch UI Wireframe Prototype Visual Design Build &! QA App Store &! Analytics
24. App Store Don’t celebrate just yet! ! “We need another app icon size” “We need screenshots ASAP” “We also need screenshots for iPad” “We need better ASO” “We need to promote the app” ! …wait one to two weeks… ! “Can you rate and review the app?”
25. Analytics & Beyond You can track everything Keep an eye on ratings Read the reviews - UX issues? Customer interviews Feedback through customer support More User Testing Rinse & Repeat Mixpanel
27. Getting Started 1. Read the guidelines 2. Install some apps 3. Study design patterns & touch gestures 4. Design something for fun 5. Try the tools & templates ! Be prepared for the opportunity ! Advanced topics! 1. Learn basic animation 2. Play with storyboards in Xcode 3. Learn some Objective-C
28. Its Burrito Time @ryankeairns ryankeairns.com dribbble.com/ryankeairns gofullstack.com