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
![Page 1: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/1.jpg)
DESIGNING YOUR WEB APPby @liane_thoennes + @schlafturbine
! i" # u$ing %
![Page 2: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/2.jpg)
t
IDEA DESIGN CODE
![Page 3: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/3.jpg)
CONCEPT
![Page 4: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/4.jpg)
tCONCEPTtSCREENS
![Page 5: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/5.jpg)
tCONCEPTtSCREENStDESIGNS
![Page 6: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/6.jpg)
tCONCEPTtSCREENStDESIGNStHTML / CSS
![Page 7: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/7.jpg)
tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE
![Page 8: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/8.jpg)
t
COWORKING SPACE GASMOTORENFABRIK
Up to 20 People working here, drinking coffee, preparing food, chilling
![Page 9: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/9.jpg)
![Page 10: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/10.jpg)
t
IDEA – WE NEED AN APP FOR THAT!
![Page 11: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/11.jpg)
tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE
![Page 12: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/12.jpg)
The fucking Mess
![Page 13: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/13.jpg)
The fucking MessWhere is the mess?
![Page 14: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/14.jpg)
The fucking MessWhere is the mess?What exactly is messed up?
![Page 15: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/15.jpg)
The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?
![Page 16: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/16.jpg)
The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?
The fucker who did it
![Page 17: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/17.jpg)
The fucking MessWhere is the mess?What exactly is messed up?Is it urgent?
The fucker who did it(Who needs to clean it?)
![Page 18: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/18.jpg)
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
![Page 19: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/19.jpg)
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?)
![Page 20: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/20.jpg)
The fucking Mess
The fucker who did it
Overview of all the mess
![Page 21: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/21.jpg)
tCONCEPT
tDESIGNStHTML / CSStLIVE CODE
tSCREENS
![Page 22: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/22.jpg)
A pattern for screens
INDEXSHOWNEWEDIT
![Page 23: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/23.jpg)
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>“
![Page 24: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/24.jpg)
tCONCEPT
tHTML / CSStLIVE CODE
tSCREENStDESIGNS
![Page 25: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/25.jpg)
![Page 26: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/26.jpg)
Today we will not do a complex design.
WE‘LL USE A DESIGN FRAMEWORK!TWITTER BOOTSTRAP
![Page 27: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/27.jpg)
Why use a design framework?
IT‘S QUICKIT‘S EASY *IT‘S TRANSFERABLEIT‘S CROSS-BROWSER FRIENDLYIT‘S BETTER THAN NOTHING
*MOSTLY
![Page 28: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/28.jpg)
tCONCEPT
tHTML / CSStLIVE CODE
tSCREENStDESIGNS
![Page 29: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/29.jpg)
tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE
![Page 30: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/30.jpg)
tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE
![Page 31: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/31.jpg)
tCONCEPTtSCREENStDESIGNStHTML / CSStLIVE CODE
Your app is all of these things, all of the time!
![Page 32: Designing your Web App](https://reader038.vdocuments.net/reader038/viewer/2022103117/5599ee401a28abef1a8b4572/html5/thumbnails/32.jpg)
t
Wanna know what happened to the mess?