Designing for iOS @ryankeairns @gofullstack
Before We Begin Let’s get a couple of things clear
Burrito Dreamin’
Design is a
Process Overview It’s not entirely new Problem � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Definition Solutions Sketch UI QA Analytics
We Need An iOS Understand the problem being solved Learn about the users Are there hardware specific needs?
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Problem Solutions Sketch UI QA Analytics
Research Always be observing Learn common design patterns Review data, web version and customer feedback UX Archive Pttrns Capptivate
Solutions So you need a mobile app, specifically iOS
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Problem Solutions Sketch UI QA Analytics
Defining The Sketch and share early Map out the flow Get the team on the same page First opportunity for user testing Examples Dot Grid POP App
Quick Sidenote Get feedback at each stage Walkthroughs InvisionApp
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Problem Solutions Sketch UI QA Analytics
Wireframing iOS templates Native controls & navigation User testing (in-person & remote) Moqups Balsamiq UI-8 Teehan + Lax Now in Sketch 3!
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Problem Solutions Sketch UI QA Analytics
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
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Problem Solutions Sketch UI QA Analytics
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
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
Your Friends Are Tools Actual tools Sketch Skala Preview LiveView iOS Simulator Your iPhone/iPad appicontemplate Slicy Teehan + Lax PS Scripts
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Dev & � App Store & � Problem Solutions Sketch UI QA Analytics
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
Process Overview Define � Research � Flows & � Wireframe Prototype Visual Design Build & � App Store & � Problem Solutions Sketch UI QA Analytics
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?”
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
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
Its Burrito Time @ryankeairns ryankeairns.com dribbble.com/ryankeairns gofullstack.com
Recommend
More recommend
