designing your web app
DESCRIPTION
Basic introduction to the structure and design of web apps from concept, screens, designs, HTML / CSS to live running code. The talk was originally held at Rails Girls Cologne and Rails Girls Rheinland Workshop. www.railsgirls.com/cologne www.railsgirls.com/rheinlandTRANSCRIPT
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?