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

Rapid Prototyping with Sass & Compass

Bermon Painter
August 02, 2012

Rapid Prototyping with Sass & Compass

Given at CSS Summit, 2012. http://environmentsforhumans.com/2012/css-summit/

Traditional design and development processes are a drag. Wireframes should die in a fire, prototyping is OK but a little rapid prototyping with Sass & Compass goes a long way.

Discover how to architect your own rapid prototyping framework with Sass & Compass. Increase collaboration with your teams. Decrease the time it takes to get a product launched.

Bermon Painter

August 02, 2012
Tweet

More Decks by Bermon Painter

Other Decks in Design

Transcript

  1. With Sass & Compass Rapid Prototyping @bermonpainter #csssummit #teamsass

  2. @bermonpainter #csssummit #teamsass 1. Fidelity 2. Kill wireframes with fire

    3. Prototyping 4. Rapid Prototyping 5. Workflow
  3. @bermonpainter #csssummit #teamsass Fidelity

  4. @bermonpainter #csssummit #teamsass Visual Fidelity Low vs. Medium vs. High

  5. @bermonpainter #csssummit #teamsass Content Fidelity Lorem Ipsum vs. Real English

    (no context) vs. Actual Content
  6. @bermonpainter #csssummit #teamsass Functional Fidelity Static vs. Interactive

  7. @bermonpainter #csssummit #teamsass Wireframing

  8. @bermonpainter #csssummit #teamsass Wireframes should die because...

  9. @bermonpainter #csssummit #teamsass Wireframes should die because... static, not suited

    for dynamic interactions
  10. Wireframes should die because they are... not user friendly, ironic

    huh?, Mr. UX Designer
  11. @bermonpainter #csssummit #teamsass Wireframes should die because they are... open

    to interpretation
  12. @bermonpainter #csssummit #teamsass Wireframes should die because they cause a...

    lob it over the fence mentality
  13. @bermonpainter #csssummit #teamsass Wireframes should die because they... add drag,

    on everything
  14. @bermonpainter #csssummit #teamsass Prototyping

  15. @bermonpainter #csssummit #teamsass Prototype Review/Test Refine

  16. @bermonpainter #csssummit #teamsass Prototyping is nice because...

  17. @bermonpainter #csssummit #teamsass Prototyping is nice because it... Communicates design

    closer to it’s intended use
  18. @bermonpainter #csssummit #teamsass Prototyping is nice because it is... more

    user friendly
  19. @bermonpainter #csssummit #teamsass Prototyping is nice because it... requires less

    documentation
  20. @bermonpainter #csssummit #teamsass Prototyping is nice because it... better support

    user centered design
  21. @bermonpainter #csssummit #teamsass but...

  22. @bermonpainter #csssummit #teamsass Prototyping isn’t nice because it... still doesn’t

    capture full user interactions
  23. @bermonpainter #csssummit #teamsass Rapid Prototyping with Sass & Compass

  24. @bermonpainter #csssummit #teamsass Rapid prototyping is nicer because...

  25. @bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it provides

    a... More natural focus on fluidity and interactions
  26. @bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it allows...

    Markup & code reuse
  27. @bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it provides...

    Inherent documentation with code + comments
  28. @bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it provides...

    More efficient use of time
  29. @bermonpainter #csssummit #teamsass Rapid prototyping is nicer because it helps...

    Improve collaboration with other disciplines
  30. @bermonpainter #csssummit #teamsass Workflow

  31. @bermonpainter #csssummit #teamsass Don’t over engineer your prototyping workflow

  32. @bermonpainter #csssummit #teamsass 1. Sketch

  33. @bermonpainter #csssummit #teamsass

  34. @bermonpainter #csssummit #teamsass 2. Style Tiles http://styletil.es

  35. @bermonpainter #csssummit #teamsass

  36. @bermonpainter #csssummit #teamsass 3. Rapid Protoype System Building a graybox

    and theming system with Sass & Compass
  37. @bermonpainter #csssummit #teamsass

  38. @bermonpainter #csssummit #teamsass Alt Static Site Generators https://gist.github.com/2254924

  39. @bermonpainter #csssummit #teamsass Command Line

  40. @bermonpainter #csssummit #teamsass

  41. @bermonpainter #csssummit #teamsass

  42. @bermonpainter #csssummit #teamsass

  43. @bermonpainter #csssummit #teamsass

  44. @bermonpainter #csssummit #teamsass

  45. @bermonpainter #csssummit #teamsass https://github.com/ bpainter/frankenstein

  46. @bermonpainter #csssummit #teamsass

  47. @bermonpainter #csssummit #teamsass

  48. @bermonpainter #csssummit #teamsass

  49. @bermonpainter #csssummit #teamsass

  50. @bermonpainter #csssummit #teamsass

  51. @bermonpainter #csssummit #teamsass

  52. @bermonpainter #csssummit #teamsass

  53. @bermonpainter #csssummit #teamsass

  54. @bermonpainter #csssummit #teamsass

  55. @bermonpainter #csssummit #teamsass

  56. @bermonpainter #csssummit #teamsass

  57. @bermonpainter #csssummit #teamsass

  58. @bermonpainter #csssummit #teamsass

  59. @bermonpainter #csssummit #teamsass Compile Methods

  60. @bermonpainter #csssummit #teamsass Local

  61. @bermonpainter #csssummit #teamsass On Deploy

  62. @bermonpainter #csssummit #teamsass On the Server (cached)

  63. @bermonpainter #csssummit #teamsass Client

  64. @bermonpainter #csssummit #teamsass

  65. @bermonpainter #csssummit #teamsass

  66. @bermonpainter #csssummit #teamsass

  67. @bermonpainter #csssummit #teamsass

  68. @bermonpainter #csssummit #teamsass If your CSS sucks, Sass & Compass

    won’t un-suck it.
  69. @bermonpainter #csssummit #teamsass

  70. @bermonpainter #csssummit #teamsass

  71. @bermonpainter #csssummit #teamsass

  72. @bermonpainter #csssummit #teamsass

  73. @bermonpainter #csssummit #teamsass

  74. @bermonpainter #csssummit #teamsass

  75. With Sass & Compass Rapid Prototyping @bermonpainter #csssummit #teamsass