Ed Nepomuceno | UX Designer

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

What's in a design pattern?

• Title
• Problem (situation)
• Use When (constraints)
• Solution
• Why (rationale)
• How (to apply)
• Examples
• Related Patterns
• Accessibility
• Code Samples