Design Pattern Wars

The Last UI

What is a pattern library?

A software design pattern is a general reusable solution to a commonly occurring problem within a given context in software design

Who needs it?

MEDIUM to Large TEAMS

Multiple designers

Few designer resources

Work with outside teams

MEDIUM to LARGE PROJECTS

Large code base

Speed up development

Work with outside teams

Who DOESN't need it?

EARLY STAGE STARTUPS

Delays getting started

Still discovering what you need

Continuous improvement

SMALL PROJECTS

Small websites

Easy to make changes

Learning about users

Who benefits?

Designers

Create interfaces faster

Make interfaces more consistent

Increased performance

Developers

Can get started sooner

Write less new code

Write more consistent code

Users

Better accessibility

More consistent experience

Increased trust

Product teams

A common design language

Faster prototyping and build outs

Centralized source of truth

How do I get started?

AUDIT DESIGN PATTERNS

Comb through Buttons,

Form Fields and

Tables and document it

MAKE A PLAN FORWARD

Standardise Buttons,

Form Fields and

Tables

FIND THE RIGHT Home

Publicly available

Hosted internally

Individually distributed

GET IT DONE

Add to sprints,

special teams or

go rogue!

STARTING With a Framework

BOOTSTRAP, FOUNDATION, Material or UIKIT

Documented

Get started faster

Continuous improvement

BUILDING FROM SCRATCH

Planning

Design audit?

What do you need?

What time do you have?

GET DESIGNING

All basic components

Iterate style on feeling and mood

Consult developers

Front End Chops

To write your markup with WCAG consideration

Write styles to match design

Multiple scripting languages?

Front End Chops

To write your markup with WCAG consideration

Write styles to match design

Multiple scripting languages?

LEARN MORE

PATTERN LAB

http://patternlab.io

Design Pattern Wars

By Kevin Wirth

Design Pattern Wars

Presentation for UX Akron on the overview of design pattern libraries

  • 419