Rapid Prototyping with Sass & Middleman

Discover the benefits of rapid prototyping with Sass & Compass along with the static site generator, Middleman. Rapid prototyping is an easy way to streamline your development process and bridge the gap between UX & visual designers while meeting in the middle with the view layer. The session will cover:

• how to bend the view layer to your will
• creating a modular front-end framework
• working with pre-processors

Transcript

1. RAPID PROTOTYPING WITH SASS & MIDDLEMAN @bermonpainter | TAG IT
2. 1. A TYPICAL PROCESS 2. KILLING IT WITH FIRE 3. FROM THE ASHES 4. RAPID PROTOTYPES 5. EXAMPLE
3. TYPICAL TYPICAL PROCESS TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY
4. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY • STAKEHOLDER INTERVIEWS • BUSINESS GOALS • RISK ANALYSIS • COMPETITIVE ANALYSIS • PROJECT BRIEF • CONTENT • STATEMENT OF WORK • FUNCTIONAL SPECS
5. TYPICAL PROCESS DOCUMENTATION
6. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY • STATIC WIREFRAMES • PHOTOSHOP COMPS
7. TYPICAL PROCESS MORE DOCUMENTATION
8. TYPICAL PROCESS MORE DOCUMENTATION
9. TYPICAL PROCESS MORE DOCUMENTATION
10. TYPICAL PROCESS MORE DOCUMENTATION
11. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY • HTML • CSS • JAVASCRIPT • BACKEND
12. MONTHS PASS (OR MAYBE YEARS)
13. TYPICAL PROCESS DISCOVER DESIGN DEVELOP DEPLOY
14. TYPICAL PROCESS • CLIENTS • STAKEHOLDERS • WIREFRAMES • PHOTOSHOP COMPS • HTML • CSS • JAVASCRIPT • BACKEND DISCOVER DESIGN DEVELOP DEPLOY • STAKEHOLDER INTERVIEWS • BUSINESS GOALS • RISK ANALYSIS • COMPETITIVE ANALYSIS • PROJECT BRIEF • CONTENT • STATEMENT OF WORK • FUNCTIONAL SPECS OR NOT BECAUSE LEGAL DIDN’T DO THEIR DO DILIGENCE AND THE PRODUCT YOU WERE BUILDING WAS PATENTED BY ANOTHER COMPANY SO YOU JUST WASTED MILLIONS OF DOLLARS AND A YEAR AND A HALF OF MANPOWER ON A PRODUCT THAT CAN’T BE LAUNCHED AND YOU CAN’T SHOW ANY OF YOUR WORK BECAUSE THE LAWYERS WON’T LET YOU.
16. WIREFRAMES
17. http://www.analyticdesigngroup.com/files/ADGi-home-wireframe_0.jpg
19. WIREFRAMES PAINT BY NUMBERS
20. WIREFRAMES TOO MUCH, TOO EARLY
21. WIREFRAMES STATIC BY NATURE
22. WIREFRAMES HEAVY DOCUMENTATION
23. WIREFRAMES PEOPLE DON’T READ DOCUMENTATION
24. WIREFRAMES WATER FLOWS DOWNSTREAM
25. WIREFRAMES NEVER ENDING REVISIONS
26. MOCKUPS
27. http://www.analyticdesigngroup.com/files/ADGi-home-wireframe_0.jpg
28. MOCKUPS PLAGUED BY THE SAME PROBLEMS OF WIREFRAMES
29. MOCKUPS TIME CONSUMING PIXEL PERFECT DETAIL
30. MOCKUPS DON’T TAKE INTO ACCOUNT USER INTERACTIONS
31. MOCKUPS DON’T TAKE INTO ACCOUNT THE EBB AND FLOW OF THE WEB
32. MOCKUPS SETS UNREALISTIC AESTHETIC EXPECTATIONS FOR CLIENTS
33. MOCKUPS DESIGN CHANGES CONTINUALLY OCCUR CAUSING LOST HOURS IN DEVELOPMENT REWORK
34. MOCKUPS NEARLY IMPOSSIBLY TO MANAGE IN A RESPONSIVE CONTEXT
35. WHY DO WE CREATE WIREFRAMES?
36. TO CREATE STRUCTURE
37. WHY DO WE CREATE MOCKUPS?
38. TO CREATE AESTHETICS
39. WIREFRAMES
40. WIREFRAMES
41. MOCKUPS
42. MOCKUPS
43. TYPICAL BURN IT DOWN FROM THE ASHES
44. TYPICAL BURN IT DOWN 5 ADVANTAGES OF RAPID PROTOTYPING
45. TYPICAL BURN IT DOWN FOCUS ON CONTENT AND FUNCTIONALITY 1
46. TYPICAL BURN IT DOWN STAKEHOLDER FOCUS 2
47. TYPICAL BURN IT DOWN IMPROVED COMMUNICATION 3
48. TYPICAL BURN IT DOWN LESS DOCUMENTATION 4
49. TYPICAL BURN IT DOWN STAKEHOLDER BUY-IN 5
50. TYPICAL BURN IT DOWN RAPID PROTOTYPING TOOLS
52. @bermonpainter #teamsass
53. @bermonpainter #teamsass
54. TYPICAL BURN IT DOWN SETUP
64. TYPICAL BURN IT DOWN RAPID PROTOTYPES
65. TYPICAL BURN IT DOWN
66. TYPICAL BURN IT DOWN
68. github.com/cardinal-solutions/pattern-library
80. TYPICAL BURN IT DOWN “SPEED FIRST, AESTHETICS SECOND.” – JASON FREID
81. TYPICAL BURN IT DOWN fin.