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

Problem Definition Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & Analytics

It’s not entirely new

We Need An iOS

Understand the problem being solved Learn about the users Are there hardware specific needs?

Process Overview

Define Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & 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 Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & Analytics

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

Quick Sidenote

Get feedback at each stage

Walkthroughs InvisionApp

Process Overview

Define Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & 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 Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & 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 Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & 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 Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Dev & QA App Store & 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 Problem Research Solutions Flows & Sketch UI Wireframe Prototype Visual Design Build & QA App Store & 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