Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Designing your Web App

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

3a8fa9e8ef391ae136c26a29b3e6a94e?s=128

Liane Kirschner

March 02, 2013
Tweet

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
  9. None
  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
  25. None
  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