1 of 69

Slide Notes

DownloadGo Live

DESIGN SYSTEMS

Published on Nov 19, 2015

No Description

View Outline

MORE DECKS TO EXPLORE

PRESENTATION OUTLINE

1.

DESIGN SYSTEMS

More Than Just Design...
2.

#QAdesign

Twitter: @robhuddlestonva
Photo by Nina Matthews Photography
3.

I AM A DESIGNER

But design is more than just visual
Photo by kevin dooley
4.

It's Code...

5.

It's Content...

Photo by contemplicity
6.

It's Usability...

(Without Instruction)
7.

It's Accessible...

Photo by catatronic
8.

It's About Experiences...

9.

Interactions...

10.

It Brings Us Together...

Photo by Charmaine Sylvia Photography
11.

It Starts Revolutions...

12.

It Changes How We Think...

13.

It Can Change Our Lives

When Done Well
14.

It Can Inspire

15.

It's Intuitive

When It's Done Great
Photo by Creative Tools
16.

And It Should Go Unnoticed

Photo by unseenesan at mahasarakham
17.

SO...

Photo by unseenesan at mahasarakham
18.

What is a Design System?

Photo by Leo Reynolds
19.

A design system defines the content, visual, and supporting assets & templates to produce and/or sustain a consistent & optimal user experience.

Credit Nathan Curtis / Eight Shapes as this definition is a modified version of what can be found in more detail here: http://eightshapes.com/blog/2011/05/10/what-is-a-design-system/
Photo by fractalSpawn
20.

Repeatable UI/UX Patterns

Photo by xavi talleda
21.

Untitled Slide

Photo by riekhavoc
22.

A Style Guide

Is a Perfectly Good Starting Point
23.

Content:

  • Primary/Secondary Marketing
  • Media: Images, Video, Etc
  • Headlines/Sub Headlines
  • Tables
  • Articles
Photo by jev55
24.

Visual:

  • Typography
  • Color Palette
  • Photography
  • Iconography
  • Grids/Layouts
Photo by kevin dooley
25.

Typography:

  • Font Family/Font Pairings
  • Weight
  • Size
  • Line Height
  • Are These Different By Device?
Photo by chrisangle
26.

Color Palette

  • Primary/Secondary
  • Background/Foreground
  • Accents, Tints & Shades
  • Defined Usage
Photo by Brett Jordan
27.

Supporting Assets:

  • Interactions & Behaviors
  • Code Libraries
  • Markup & Content Standards
  • Browser & Device Support
  • Accessibility Guidelines
Photo by ben.gallagher
28.

The System Is

As Unique As You are
29.

QA?

Where Design & Quality Control Meet
Photo by JF Sebastian
30.

Where We Started

Implementing Our First True Design System
31.

2010 Replatforming

and Site Redesign (capitalone.com)
Photo by Stuck in Customs
32.

capitalone.com

  • ~2,500 Pages
  • ~40,000,000 Unique Visitors Monthly
  • Over 500,000,000 Page Views Monthly
  • Multiple Internal Business Partners
Photo by staxnet
33.

Our Goal

  • Consistent Presentation
  • Flexible & Modular Content Model
  • Separation of Code & Content
  • To Deliver Solutions at Scale
  • Repeatable Operational Processes
Photo by jessica.diamond
34.

Franken-site

Resolving Inconsistent Patterns & Experiences 
Photo by Johnson Cameraface
35.

Our Build Book

More Than Just a Style Guide
Photo by toby___
36.

Introducing the GRID

Photo by sickmouthy
37.

Bento Box Model

Configurable Content Modules
Photo by taiyofj
38.

Untitled Slide

39.

Untitled Slide

40.

Content Level Templates

No Longer Defining Page Types
Photo by robglinka
41.

Flexibility

Every Module, Every Way
Photo by a4gpa
42.

Callout Component

At the Atomic Level, Elements Align With Semantic HTML Structure
43.

Configurable

Multiple Containers – Multiple Configurations
44.

Code ≠ Content

separating and defining ownership
45.

Scalability

Delivering Enterprise Benefits
Photo by Leo Reynolds
46.

Repeatable Process

Do It Once, Do It Again
Photo by Tyler Dawson
47.

Developing Teams

And the Tools They Need to Deliver
Photo by Theen ...
48.

Governance

Is Not a Bad Word - Its Guidance
Photo by onkel_wart (thomas lieser)
49.

GOVERNANCE
a method or system of processes and decisions that seek to define actions, grant power, and verify performance.

Photo by Scott*
50.

FUTURE SUCCESS

The Benefits of the Design System
51.

Speed to Market

Delivery Process Reduced from Months/Weeks to Days/Hours
Photo by medically_irrelevant
52.

Constant Evolution

The Design System Will Always Evolve
Photo by Axel.Foley
53.

Minimize LOE

But Still Deliver the BIG BANG
Photo by jeff_golden
54.

Deliver Globally

Photo by Ludovico Cera
55.

Quickly Define Gaps

Focus on Delivering Incremental Enhancements
56.

Accessibility

Content for the MASSES
Photo by Bust it Away Photography
57.

Framework Enhancements

Modifying the Infrastructre
Photo by Adrian S Jones
58.

2013 Responsive Web Effort

59.

Testing

Let's talk shop for a minute
Photo by Daniel Kulinski
60.

Testing

Multiple Devices & Creating SMEs 
Photo by Jeffrey
61.

Redesign

At the ATOMIC Level
Photo by schoschie
62.

Redefine

At the SYSTEM Level
Photo by greeblie
63.

Before/After

Show Color Palette & Typography
64.

Before/After

Show Iconagraphy
65.

Before/After

Show callouts
66.

Before/After

Show Something Else
67.

Before/After

Show Home Page
68.

Resources

Photo by marfis75
69.

#QAdesign

Twitter: @robhuddlestonva

rob huddleston