Transcript
Page 1: Designing Mobile Apps with HTML5 & CSS3

MOBILE APPS

HTML5 & CSS3

Designing

with

Page 2: Designing Mobile Apps with HTML5 & CSS3

JOHANNES IPPENSenior Graphics Designer, Wooga

FLORIAN FRANKEInteractive Designer, made in

Page 3: Designing Mobile Apps with HTML5 & CSS3
Page 4: Designing Mobile Apps with HTML5 & CSS3

55.000

Page 5: Designing Mobile Apps with HTML5 & CSS3
Page 6: Designing Mobile Apps with HTML5 & CSS3

100.000

Page 7: Designing Mobile Apps with HTML5 & CSS3
Page 8: Designing Mobile Apps with HTML5 & CSS3
Page 9: Designing Mobile Apps with HTML5 & CSS3

HTML5All made with …

Page 10: Designing Mobile Apps with HTML5 & CSS3

No AppStore Cloud-based

Independent Easy

Page 11: Designing Mobile Apps with HTML5 & CSS3

HTML5 ROCKT!

Page 12: Designing Mobile Apps with HTML5 & CSS3

WEBSITES

APPSvs

Page 13: Designing Mobile Apps with HTML5 & CSS3

Solve

Problems

Look &

Feel

Create

Experience

Page 14: Designing Mobile Apps with HTML5 & CSS3

GOOGLE MAIL

Page 15: Designing Mobile Apps with HTML5 & CSS3

SOUNDCLOUD

Page 16: Designing Mobile Apps with HTML5 & CSS3
Page 17: Designing Mobile Apps with HTML5 & CSS3
Page 18: Designing Mobile Apps with HTML5 & CSS3
Page 19: Designing Mobile Apps with HTML5 & CSS3

HOW TOdesign an app?

Page 20: Designing Mobile Apps with HTML5 & CSS3

PROBLEMIdentify the

Page 21: Designing Mobile Apps with HTML5 & CSS3

SITUATIONIn which

will the app be used?

Page 22: Designing Mobile Apps with HTML5 & CSS3

STORYBOARDhelps you understand

Page 23: Designing Mobile Apps with HTML5 & CSS3
Page 24: Designing Mobile Apps with HTML5 & CSS3

WIREFRAMES& user flow

Page 25: Designing Mobile Apps with HTML5 & CSS3
Page 26: Designing Mobile Apps with HTML5 & CSS3

USABILITY

TEST

Page 27: Designing Mobile Apps with HTML5 & CSS3
Page 28: Designing Mobile Apps with HTML5 & CSS3

DON‘T TELL

SOLVEthe user what to do, let him

the problem

Page 29: Designing Mobile Apps with HTML5 & CSS3

you are testing the App!

DON‘T TESTYOUR USER

Page 30: Designing Mobile Apps with HTML5 & CSS3

what he does

to what the user wishes

DON‘T LISTEN

OBSERVE

Page 31: Designing Mobile Apps with HTML5 & CSS3

HTML5CSS3

JAVASCRIPT

Page 32: Designing Mobile Apps with HTML5 & CSS3

TOOLSdon‘t reinvent the wheel

Page 33: Designing Mobile Apps with HTML5 & CSS3

BOOTSTRAP

Page 34: Designing Mobile Apps with HTML5 & CSS3

ZEPTO.JS

Page 35: Designing Mobile Apps with HTML5 & CSS3

JQUERY MOBILE

Page 36: Designing Mobile Apps with HTML5 & CSS3

SENCHA TOUCH

Page 37: Designing Mobile Apps with HTML5 & CSS3

WITH SHARKY!

HTML5ROCKT.DE@presskind

@ffranke1985,

www.madein.io

Page 38: Designing Mobile Apps with HTML5 & CSS3

FUTUREA look into the

Page 39: Designing Mobile Apps with HTML5 & CSS3

HTML5 IS HEREand it‘s here

TO STAY

Page 40: Designing Mobile Apps with HTML5 & CSS3

WEB GLon mobile? Hell, yeah!

Page 41: Designing Mobile Apps with HTML5 & CSS3

WEB RTC

Page 42: Designing Mobile Apps with HTML5 & CSS3

MAINSTREAMyour grandma uses webapps, too.

Page 43: Designing Mobile Apps with HTML5 & CSS3

HTML5 ROCKT!

Page 44: Designing Mobile Apps with HTML5 & CSS3

HTML5ROCKT.DE@html5rockt

@presskind

www.asidemag.com

@ffranke1985

www.madein.io


Top Related