designing your web app

DESIGNING YOUR WEB APPby @liane_thoennes + @schlafturbine

! i" # u$ing %

t

IDEA DESIGN CODE

CONCEPT

tCONCEPTtSCREENS

tCONCEPTtSCREENStDESIGNS

tCONCEPTtSCREENStDESIGNStHTML / CSS

tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE

t

COWORKING SPACE GASMOTORENFABRIK

Up to 20 People working here, drinking coffee, preparing food, chilling

t

IDEA – WE NEED AN APP FOR THAT!

tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE

The fucking Mess

The fucking MessWhere is the mess?

The fucking MessWhere is the mess?What exactly is messed up?

The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?

The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?

The fucker who did it

The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?

The fucker who did it(Who needs to clean it?)

The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?

The fucker who did it(Who needs to clean it?)

Overview of all the mess

The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?

The fucker who did it(Who needs to clean it?)

Overview of all the mess(What‘s already done and what needs to be done?)

The fucking Mess

The fucker who did it

Overview of all the mess

tCONCEPT

tDESIGNStHTML / CSStLIVE CODE

tSCREENS

A pattern for screens

INDEXSHOWNEWEDIT

Screens for „Fucking do it“

INDEXSHOWNEWEDIT

List of all the mess Details page of a special mess„Report a new mess“„Mark it as <done>“

tCONCEPT

tHTML / CSStLIVE CODE

tSCREENStDESIGNS

Today we will not do a complex design.

WE‘LL USE A DESIGN FRAMEWORK!TWITTER BOOTSTRAP

Why use a design framework?

IT‘S QUICKIT‘S EASY *IT‘S TRANSFERABLEIT‘S CROSS-BROWSER FRIENDLYIT‘S BETTER THAN NOTHING

*MOSTLY

tCONCEPT

tHTML / CSStLIVE CODE

tSCREENStDESIGNS

tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE

tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE

tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE

Your app is all of these things, all of the time!

t

Wanna know what happened to the mess?