Fostering Collaboration with Pattern Libraries

Recognize the benefits of using a living pattern library and rapid prototyping to increase communication and collaboration between designers and developers. In this session we will review a case study from an enterprise-level development group traditionally staffed with 60+ developers and no designers and how they were able to implement a pattern library and rapid prototyping framework into their design and development process. In this session we will discuss:

• recognizing patterns
• modular pattern creation with Sass/Compass/Slim/JavaScript
• how patterns can be combined to be used during rapid prototyping
• developing a consistent language that can be used between designers and developers
• collaboration exercises for designers and developers to create a consistent feedback loop

Transcript

1. FOSTERING COLLABORATION WITH PATTERN LIBRARIES AN ENTERPRISE CASE STUDY WITH SASS, COMPASS, SUSY & MIDDLEMAN @bermonpainter
2. THE CHALLENGES Ensuring at a site or service maintains a consistent experience, aesthetic, and architecture over time and be relatively easy to maintain.
3. Developers 60 Teams 5 Designers 0 Application 1 Frameworks 2 Front-End 0
5. Multiple groups working within the same application
6. Bloated front-end
7. Confusing workflows and interactions
8. Poor communication
9. Missing deadlines
10. Shipping the wrong thing
11. Don’t value design
12. Adds Value
13. Adds Value It’s Usable
14. Adds Value It’s Useful It’s Usable
15. Adds Value It’s Useful It’s Attractive It’s Usable
16. It’s Attractive
18. ENTER THE PATTERN LIBRARY Collection of documented interface design patterns that defines the presentation and structure of individual patterns, their use cases, and relationships to other patterns.
19. Consistent User Experience
20. Consistent Aesthetic
21. Consistent Language
22. Reusability
23. Maintainability
24. RECOGNIZING PATTERNS
27. Home Members Sponsors Photos Discussions More
28. Upcoming 2 Suggested 0 Past Calendar
30. Front-End Developers Group Reviews Upcoming Meetups Past Meetups Our Calendar 530 38 4 32
31. Polls Files Promote Stats Report this Group More
32. MODULE REQUIREMENTS
33. Can be Nested 1
34. Can be Combined 2
35. Must Clearfix 3
36. Flexible 4
37. Separate Structure and Theme 5
38. 6 Accessible
39. THE DRAWBACK It takes a lot of time up front. It takes time creating, testing, and documenting patterns. It takes time educating bosses and developers.
40. THE FOUNDATION
41. Standards 1
42. Base 2
43. Modules 3
44. Modules 3 Scaffold 4
45. Modules 3 Scaffold 4 Theme 5
46. THE DEMO
47. 2 TYPES OF PATTERN LIBRARIES
48. STATIC HTML
57. PATTERN API
58. .css Unit Tests .html .js Functional Tests .sass
59. Product or Service .css Unit Tests .html .js Functional Tests .sass
60. Product or Service Pattern Library .css Unit Tests .html .js Functional Tests .sass
62. STATIC HTML vs. PATTERN API
64. fin.