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.

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