Design Systems and Drupal

The Key to Design Nirvana

Think Systems, Not Pages.

Why Design in Systems?

• Consistency (Visual + Content)
• Efficiency (Production)
• Sustainability (Life After Us)

sys•tem | ˈsistəm | noun

A set of interconnected parts forming a complex whole.

Interconnected Parts

Elements, Components, Templates

Complex Whole

A CMS-Driven Site

Interconnected Parts

Elements, Components, Templates

H1–H6, p, a, ul, ol, hr, blockquote, form elements, etc.

Interconnected Parts

Elements, Components, Templates

Header, footer, navigation, hero element, call-to-action, etc.

Interconnected Parts

Elements, Components, Templates

General page, home page, landing page, listing page, etc.

Atomic Design

Interconnected Parts

Elements, Components, Templates

Complex Whole

A CMS-Driven Site

Step One

Start at the Beginning

Elements: H1–H6, p, a, ul, ol, hr, etc.

Step Two

Get to Know Your Content

Why are people coming here?

The Story

• Title
• Date
• Section
• Author
• Program
• Lede text
• Body text
• Lede image
• Lede image caption
• Lede image credit
• Program sound clip
• Inline embedded content
• Comments
• Share controls
• Taxonomy
• External links
• Related content

Step Three

Combine Colors & Elements to Create Components, and Your First Template

Story Header: Date, Author, Title, Program, Section

Ad Block

Lede Image, caption, credit

Share controls

Step Four

Make More Templates!

Mind what you have learned...

Analyze Your Content

What Should Go on the
Home Page?

Why people are coming here Again? For Stories!

The Story

• Title
• Date
• Section
• Author
• Program
• Lede text
• Body text
• Lede image
• Lede image caption
• Lede image credit
• Program sound clip
• Inline embedded content
• Comments
• Share controls
• Taxonomy
• External links
• Related content

The Story Item

• Title
• Date
• Section
• Program
• Lede text
• Lede image
• Share count

Story Item: Lead Feature Title, Date, Section, Program, Lede text, Lede image, Share count

Story Item: Square Featured Title, Date, Section, Program, Lede text, Lede image, Share count

Story Item: Illustrated List Title, Date, Section, Program, Lede text, Lede image, Share count

Story Item: Illustrated List Compact Title, Date, Section, Program, Lede text, Lede image, Share count

Story Item: List Compact Title, Date, Section, Program, Lede text, Lede image, Share count

The Good News

Creating Another Page Gets Easier Every Time

Atomic Design

Step One

Type and Color

Drupal doesn't care

Step Two

Get to know your content

In the biz, this is called Content Strategy

Specifically, Data Modeling

The Story

• Title
• Date
• Section
• Author
• Program
• Lede text
• Body text
• Lede image
• Lede image caption
• Lede image credit
• Program sound clip
• Inline embedded content
• Comments
• Share controls
• Taxonomy
• External links
• Related content

Build spec

Proper prior planning prevents piss poor performance

—British military adage

http://bit.ly/palantir-build-spec

Build spec

Build spec

Step Three

Create components and templates

Component == Visual representation of content

Visual representation of content == Drupal View Mode

Component == View Modes!

Sprinkle magic theming fairy dust

node-full.html.twig + CSS

Step Four

More components,
more templates!

Illustrated list (image style)

Illustrated list (view mode)

Illustrated list (view mode)

Views

This is a design tool, too...

Content assembly!

Views

In summary...

Drupal is a very designer-friendly CMS!

… if you design in systems

The most important step is
understanding your content

...in the abstract

http://www.palantir.net/blog/platonic-content

If it's hard to build,
your design system could use improvement

If a design element doesn't fit the system,
you probably don't need it

A system is a system

Use the same system across your project

Designers and developers define the system

... together