Inspired in part by Dan Cederholm's open source theme, Pears. I took the default WordPress theme at the time and created a custom theme to document sample page layouts, along with code samples for the basic elements that are used to create each page in the main site.
What's in a design pattern?
- Title
- Problem (situation)
- Use When (constraints)
- Solution
- Why (rationale)
- How (to apply)
- Examples
- Related Patterns
- Accessibility
- Code Samples
Pattern Library and Style Guide Goals
Provide Consistency
- Build a living reference library
- Favor constraints
- Encourage more cohesive design
- Improve maintainability
Improve Workflow
- See the design in action
- Cut out unnecessary steps
- Provide better deliverables
- Make life easier and save time
Raise Awareness
- Give design and development a voice
- Crate a shared vocabulary
- Advocate quality
Bring It to Life
- Build it in live real code
- Show behaviors and interactions
- Use actual examples
- Make it comprehensive
Document Standards
- Document set standards
- Educate through standards
- Include brand, code, design and editorial guidelines
Drive Participation
- Encourage contribution
- Evolve through collaboration
- Make it accessible
Watch the Unpredictable
- Predict the unpredictable
- Be rigorous, say no!
- Again, conform to standard
Iterate
- Do not neglect the style guide
- Keep the audience in mind
- Reduce friction
- Have a review process
Research
- Gather the team
- Ask thought provoking questions
- Listen to what is needed
- Organize feedback
Take visual inventory, Recognize patterns, Identify what to include...
- Branding
- Buttons
- Colors
- Forms
- Layout
- Media
- Navigation
- Typography
Build Incrementally
- Set a foundation for content: Colors, Layout, Lists, Normalize, Typography
- Add in theme and components: Alerts, Buttons, Labels, Navigation, Tooltips
- Round out the specifics: Carousels, Hero, Sidebar, Animations, Sprites