Prototyping your iPhone/iPad app

iOS Application Development

Prototyping your iOS appPaul Ardeleanu

Geek in Chief at Hello24

Tuesday, 24 January 12

The plan

‣ HIG’s & ADS

‣ User journeys

‣ Interface design patterns

‣ Creating new interfaces

‣ Keynotopia

‣ Storyboarding

‣ Demo

Development vs. Design

Design, UX

Debug&Test

Deployment

Traditional

Design, UX

Debug&Test

Deployment

Traditional

Design, UX

Debug&Test

Deployment

Traditional

Prototyping, UX, design

Debug&Test

Mobile

Let’s start from the beginning

There is no such thing as a bad idea!

flickr.com/photos/andyandorla/ 8

What to expect?

‣ “I have this idea...”

‣ I want to build the next Angry Birds

‣ I want to build an app that does ...

‣ I want my phone to connect to my brain and download my thoughts!

What to expect?

‣ Client brief

What to expect?

‣ Client brief

‣ List of requirements

What to expect?

‣ Client brief

‣ List of requirements

‣ Wireframes

List of features

too manyfeatures?

Filter

ApplicationDefinitionStatement

Appfeatures

User journeys

Wirefames

Prototype

List of features

too manyfeatures?

Filter

Appfeatures

User journeys

Wirefames

Prototype

Application Definition Statement

It is a concise, concrete declaration of an app’s main purpose and its intended audience.

h24.co/iOS-HIGs

iOS Human Interface Guidelines

Type of apps

Serious tool

Fun tool

Fun entertainment

Serious entertainment

Utility

Device constraints

‣ small size

‣ limited hardware

‣ one screen at a time

‣ one application at a time *

‣ touch input

Interaction

‣ gestures (tap, double-tap, drag, flick, swipe, pinch open/close, touch&hold

‣ shake

‣ orientation

‣ audio switch (and volume buttons)

‣ home & power buttons

User journeys

It is a concise, concrete declaration of an app’s main purpose and its

intended audience

flickr.com/photos/v50/6319721666/Tuesday, 24 January 12

step 1

check in

Check in info

Case Study: check-in system

step 1

check in

Check in info

step 2

Your gender

female

step 1

check in

Check in info

step 2

Your gender

female

step 3

Select your date of birth

29 30 31

step 1

check in

Check in info

step 2

Your gender

female

step 3

29 30 31

step 4

Select your month of birth

January February March April

May June July August

September October November December

step 1

check in

Check in info

step 2

Your gender

female

step 3

29 30 31

step 4

step 5 - OK, take a seat

step 1

check in

Check in info

step 1

check in

Check in info

step 2

step 1

check in

Check in info

step 3

2 14 30

step 2

step 1

check in

Check in info

step 3

2 14 30

step 2

step 4 - OK, take a seat

Don’t... Just don’t!

List of features

too manyfeatures?

Filter

Appfeatures

User journeys

Wirefames

Prototype

Interface design patterns

‣ Table view

‣ Navigation controller

‣ Tab bar

‣ Popover & Modal views

‣ SplitViewController

Table view controller

UITableViewController

table header view

footer header view

table header view

footer header view

section header view

table header view

footer header view

section header view

section footer view

table header view

footer header view

section header view

section footer view

row 0 view

table header view

footer header view

section header view

section footer view

row 0 view

row 1 view

table header view

footer header view

section header view

section footer view

row 0 view

row 1 view

section header view

section footer view

row 0 view

row 1 view

Navigation Controller

mailbox1 mailbox2

message1.1 message1.2 message3.1

TableView

mailbox3

My Mail

Root View Controller

Top View Controller

Tab Bar Controller

Modal view

Popover view

SplitViewController

Don’t... Just don’t!

Creating new interfaces

Inventing new interfaces

Instapaper

Flipboard

List of features

too manyfeatures?

Filter

Appfeatures

User journeys

Wirefames

Prototype

Prototyping with Keynotopia

Keynotopia demo: Timers

Storyboarding

http://www.raywenderlich.com/5138/beginning-storyboards-in-ios-5-part-1 62

iBooks2

Creating an app

‣ create an application definition statement

‣ top down approach

‣ primary task (keep it simple)

‣ ease of use (make it obvious)

Questions?

Features

‣ simple countdown timer countdown

‣ CRUD for timer

‣ local notifications for when the timer is up

‣ collection of timers

‣ pomodoro (25min + 5 min)

‣ gym training (5 mins, etc. )

‣ Crud for collections - move timers in list

Timers app

A simple to use countdown collection for time conscious individuals.

Serious Tool

Keynote tips&tricks

Keynote tips & tricks

Resources

Resources LiTG

http://skillsmatter.com/user-group/os-mobile-server/litghttp://www.linkedin.com/groups?gid=3323860

Resources MagicTou.ch

http://magictou.ch74

Resources

http://lanyrd.com/guides/ios-london/ http://nsconference.com

2nd & 3rd April, London2 DaysWorkshops and Main Conference

Day 1:Hands-on Full Day Workshops - iOS Development with Paul Ardeleanu - Android Fast Track Development with Marko Gargenta - Mobile Web Development (tbc)

Day 2: Main Conference with 5 tracks - iOS - Android - Mobile Web - Platforms - Mobile Business

International Speakers - Technical Sessions - Great Networking

150 for 150 offer - £150 for 1st 150 places

One more thing...

Free ticket raffle

Email to: mobile360live@sandsmedia.com

subject: ‘PAUL A RAFFLE’

Ticket draw on Thursday 26th January

Thank you!

stay hungry, stay foolish

Thank you!

paul@hello24.com

Thank you!

paul@hello24.com

twitter.com/pardel

Prototyping your iPhone/iPad app

Technology

Transcript of Prototyping your iPhone/iPad app

iPhone 5C*, iPhone 5S*, iPhone 5*, iPhone 4S, iPhone 4 ... · iPhone 5C*, iPhone 5S*, iPhone 5*, iPhone 4S, iPhone 4, iPhone 3GS iPad Mini*, iPad Air*, iPad 4*, iPad 3, iPad 2, iPad

HALO Halo and TruLink are compatible with iPhone 5s ... · Halo and TruLink are compatible with iPhone 5s, iPhone 5c, iPhone 5, iPhone 4s, iPad Air, iPad 4, iPad mini with Retina

Curso Reparo iPhone iPad

仕様とユーザーサポート Lightning-USB 3.1(Gen1)/3.0 メモリ ......2017/09/27 · iPhone 6/iPhone 5s/iPhone 5c/iPhone 5/iPad Air 2/iPad Air/iPad （4th generation）/iPad

Iphone ipad-application

© Aastra – 2013 BluStar for iPad / iPhone September 2013 BluStar for iPad/iPhone.

Iphone ipad itunes university

IPHONE & IPAD Q&a

iPhone and iPad Photography

DCD3020 Questi on ? Philip s · Сумісні iPod/iPhone/iPad 120 Встановлення iPod/iPhone/iPad 120 Заряджання iPod/iPhone/iPad 120 Прослуховування

Iphone 5 & New Ipad

Développement Web sur iPhone (iPhone+iPad DevCamp Québec)

Aplicaciones moviles iphone ipad

Spirit One - Focal · tion and following), iPhone 3GS, iPhone 4 and iPhone 4S, iPad, and iPad 2. Audio is supported by all iPod and iPad models. "iPad, iPhone, iPod, iPod classic,

iPhone and iPad development

Ipad vs iphone

glamo iPhone , iPad i Remocom 0/0 ! iPhone/iPad/iPod … · 2015. 7. 2. · glamo iPhone , iPad i Remocom 0/0 ! iPhone/iPad/iPod touch/Android iremocon

iPhone, iPad Mini

Rapid Prototyping iPhone App

IPHONE/IPAD/IPOD ACCESSORIES IPHONE/IPAD/IPOD …cable-link.cn/english/products/IPHONE.pdf · IPhone/IPAD -AC+in-Car USB Charger IPhone/IPAD -3.5mm stereo to 2X3.5mm IPhone/IPAD -in-Car

iPhone 5C, iPhone 5S, iPhone 5, iPhone 4S, iPhone 4 ... · iPhone 5C, iPhone 5S, iPhone 5, iPhone 4S, iPhone 4, iPhone 3GS iPad Mini, iPad Air, iPad 4*, iPad 3, iPad 2, iPad