FOSTERING
COLLABORATION WITH
PATTERN LIBRARIES
AN ENTERPRISE CASE STUDY
WITH SASS, COMPASS, SUSY & MIDDLEMAN
@bermonpainter
Slide 2
Slide 2 text
THE CHALLENGES
Ensuring at a site or service maintains a consistent
experience, aesthetic, and architecture over time and
be relatively easy to maintain.
Multiple groups
working within the
same application
Slide 6
Slide 6 text
Bloated front-end
Slide 7
Slide 7 text
Confusing workflows
and interactions
Slide 8
Slide 8 text
Poor communication
Slide 9
Slide 9 text
Missing deadlines
Slide 10
Slide 10 text
Shipping the wrong thing
Slide 11
Slide 11 text
Don’t value design
Slide 12
Slide 12 text
Adds Value
Slide 13
Slide 13 text
Adds Value
It’s Usable
Slide 14
Slide 14 text
Adds Value
It’s Useful
It’s Usable
Slide 15
Slide 15 text
Adds Value
It’s Useful
It’s Attractive
It’s Usable
Slide 16
Slide 16 text
It’s Attractive
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
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.
Slide 19
Slide 19 text
Consistent
User Experience
Slide 20
Slide 20 text
Consistent Aesthetic
Slide 21
Slide 21 text
Consistent Language
Slide 22
Slide 22 text
Reusability
Slide 23
Slide 23 text
Maintainability
Slide 24
Slide 24 text
RECOGNIZING
PATTERNS
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
Home Members Sponsors Photos Discussions More
Slide 28
Slide 28 text
Upcoming 2 Suggested 0 Past Calendar
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
Front-End Developers
Group Reviews
Upcoming Meetups
Past Meetups
Our Calendar
530
38
4
32
Slide 31
Slide 31 text
Polls
Files
Promote
Stats
Report this Group
More
Slide 32
Slide 32 text
MODULE
REQUIREMENTS
Slide 33
Slide 33 text
Can be Nested
1
Slide 34
Slide 34 text
Can be Combined
2
Slide 35
Slide 35 text
Must Clearfix
3
Slide 36
Slide 36 text
Flexible
4
Slide 37
Slide 37 text
Separate Structure
and Theme
5
Slide 38
Slide 38 text
6
Accessible
Slide 39
Slide 39 text
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.
Slide 40
Slide 40 text
THE FOUNDATION
Slide 41
Slide 41 text
Standards
1
Slide 42
Slide 42 text
Base
2
Slide 43
Slide 43 text
Modules
3
Slide 44
Slide 44 text
Modules
3
Scaffold
4
Slide 45
Slide 45 text
Modules
3
Scaffold
4
Theme
5
Slide 46
Slide 46 text
THE DEMO
Slide 47
Slide 47 text
2 TYPES OF
PATTERN LIBRARIES
Slide 48
Slide 48 text
STATIC HTML
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
PATTERN API
Slide 58
Slide 58 text
.css
Unit Tests .html
.js
Functional Tests
.sass
Slide 59
Slide 59 text
Product or Service
.css
Unit Tests .html
.js
Functional Tests
.sass
Slide 60
Slide 60 text
Product or Service
Pattern Library
.css
Unit Tests .html
.js
Functional Tests
.sass