The document discusses designing a web app called "Fucking do it" that allows users to track and manage messes. It outlines the design process including coming up with the concept, defining screens, designing screens, and adding HTML/CSS and live code. A design framework called Twitter Bootstrap is recommended to use for its quickness, ease of use, cross-browser friendliness, and the fact that it is better than having no design at all. The web app would allow listing and viewing all messes, reporting new messes, and marking messes as done.

1. DESIGNING YOUR WEB APP
by @liane_thoennes + @schlafturbine
do it
Ŧucking
—

2. t
IDEA DESIGN CODE

3. CONCEPT

4. tCONCEPT
tSCREENS

5. tCONCEPT
tSCREENS
tDESIGNS

6. tCONCEPT
tSCREENS
tDESIGNS
tHTML / CSS

7. tCONCEPT
tSCREENS
tDESIGNS
tHTML / CSS
tLIVE CODE

8. t
COWORKING SPACE GASMOTORENFABRIK
Up to 20 People working here,
drinking coffee, preparing food, chilling

10. t
IDEA – WE NEED AN APP FOR THAT!

11. tCONCEPT
tSCREENS
tDESIGNS
tHTML / CSS
tLIVE CODE

12. The fucking Mess

13. The fucking Mess
Where is the mess?

14. The fucking Mess
Where is the mess?
What exactly is messed up?

15. The fucking Mess
Where is the mess?
What exactly is messed up?
Is it urgent?

16. The fucking Mess
Where is the mess?
What exactly is messed up?
Is it urgent?
The fucker who did it

17. The fucking Mess
Where is the mess?
What exactly is messed up?
Is it urgent?
The fucker who did it
(Who needs to clean it?)

18. The fucking Mess
Where 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

19. The fucking Mess
Where 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?)

20. The fucking Mess
The fucker who did it
Overview of all the mess

21. tCONCEPT
tDESIGNS
tHTML / CSS
tLIVE CODE
tSCREENS

22. A pattern for screens
INDEX
SHOW
NEW
EDIT

23. Screens for „Fucking do it“
INDEX
SHOW
NEW
EDIT
List of all the mess
Details page of a special mess
„Report a new mess“
„Mark it as <done>“

24. tCONCEPT
tHTML / CSS
tLIVE CODE
tSCREENS
tDESIGNS

26. Today we will not do a complex design.
WE‘LL USE A DESIGN FRAMEWORK!
TWITTER BOOTSTRAP

27. Why use a design framework?
IT‘S QUICK
IT‘S EASY *
IT‘S TRANSFERABLE
IT‘S CROSS-BROWSER FRIENDLY
IT‘S BETTER THAN NOTHING
*MOSTLY

28. tCONCEPT
tHTML / CSS
tLIVE CODE
tSCREENS
tDESIGNS

29. tCONCEPT
tSCREENS
tDESIGNS
tHTML / CSS
tLIVE CODE

30. tCONCEPT
tSCREENS
tDESIGNS
tHTML / CSS
tLIVE CODE

31. tCONCEPT
tSCREENS
tDESIGNS
tHTML / CSS
tLIVE CODE
Your app is all of these things, all of the time!

32. t
Wanna know what happened to the mess?