Designing your Web App

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/rheinland

Transcript

1. DESIGNING YOUR WEB APP by @liane_thoennes + @schlafturbine i Ŧ u ing
2. t IDEA DESIGN CODE
3. CONCEPT
4. t CONCEPT t SCREENS
5. t CONCEPT t SCREENS t DESIGNS
6. t CONCEPT t SCREENS t DESIGNS t HTML / CSS
7. t CONCEPT t SCREENS t DESIGNS t HTML / CSS t LIVE 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. t CONCEPT t SCREENS t DESIGNS t HTML / CSS t LIVE 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. t CONCEPT t DESIGNS t HTML / CSS t LIVE CODE t SCREENS
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. t CONCEPT t HTML / CSS t LIVE CODE t SCREENS t DESIGNS
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. t CONCEPT t HTML / CSS t LIVE CODE t SCREENS t DESIGNS
29. t CONCEPT t SCREENS t DESIGNS t HTML / CSS t LIVE CODE
30. t CONCEPT t SCREENS t DESIGNS t HTML / CSS t LIVE CODE
31. t CONCEPT t SCREENS t DESIGNS t HTML / CSS t LIVE CODE Your app is all of these things, all of the time!
32. t Wanna know what happened to the mess?
33. t http://fucking-do-it.com