Top Banner
MOBILE APPS HTML5 & CSS3 Designing with
44

Designing Mobile Apps with HTML5 & CSS3

Jan 27, 2015

Download

Design

Johannes Ippen

Johannes Ippen and Florian Franke about Mobile App Design with HTML5 and CSS3 at Webinale 2012 in Berlin
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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