Designing for iOS @ryankeairns @gofullstack Before We Begin Lets - PowerPoint PPT Presentation

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

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

Wireframing iOS templates Native controls & navigation User testing (in-person & remote) Moqups Balsamiq UI-8 Teehan + Lax Now in Sketch 3!

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

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

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

Designing for iOS @ryankeairns @gofullstack Before We Begin Lets - PowerPoint PPT Presentation

Designing for iOS @ryankeairns @gofullstack Before We Begin Lets get a couple of things clear Burrito Dreamin Design is a Process Overview Its not entirely new Problem Research Flows & Wireframe Prototype Visual

Designing for differences Dan Smith 2 Designing for Differences - Goals Be familiar with

Designing Designing, Making and T , Making and Tes.ng es.ng Samp mple

Designing All Sky Camera for Designing All Sky Camera for the AMISR the AMISR REU Student :

Class 14 Slides SLIDE what is the designing principle how does designing principle

Designing Around New Designing Around New g g g g Operation/Maintenance Needs

Topics The Tablet PC: The Tablet PC: Designing Pen- Designing Pen - ! Tablet PC introduction

Designing Applications that See Designing Applications that See Lecture 8: OpenCV Dan

Designing Applications that See Designing Applications that See Lecture 6: Processing Dan

Designing Soils for Infiltration, Drainage, and Stormwater Treatment Designing Landscape Soils for

Designing Applications that See Designing Applications that See Lecture 2: Human Vision and

Personal Tutoring Personal Tutoring Designing a Designing a Purposeful Purposeful System

Modelling and Designing a Database Bela Tiwari btiwari@ceh.ac.uk Modelling and designing a

Designing a Designing a Feminist Alexa Feminist Alexa An experiment in feminist conversation

WHAT IS THE MAIN PROBLEM IN DESIGNING SINGLE-FAMILY HOUSES? WHAT IS THE MAIN PROBLEM IN DESIGNING

Designing Applications that See Designing Applications that See Lecture 5: Motion and Tracking

Designing Kernel Functions Designing Kernel Functions Using the Karhunen-Love Using the

Designing for Designing for Greenspace Greenspace Greenspace Designing for Designing for

Designing Slides Business and Administrative Communication 1. Before you start 2. Designing

Designing a Multipurpose Designing a Multipurpose Longitudinal Incentives Experiment for the

Designing E ffi cient Span Programs Robert palek joint work with Ben Reichardt 1 Designing

Designing Database Applications Walid G. Aref Roadmap for Designing Database Applications 1.

Bringing learning to regional communities: Designing the new game Designing the game Barbara

ProMed Molded Products Designing for Success (Silicone Molded Components) Designing a silicone

Designing and Implementing an Award- Designing and Implementing an Award- Winning Energy