Design Systems and Drupal

Design Systems and Drupal

Presented by Larry Garfield (@Crell)

@Crell

Senior Architect, Palantir.net
Drupal 8 Web Services Lead
Drupal Representative, PHP-FIG
Advisor, Drupal Association
Loveable pedant

The Key to Design Nirvana

Think Systems, Not Pages.

Why Design in Systems?

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

Consistency: Aesthetics, UX, wayfinding. Patterns.
Efficiency: Don't design 8500 pages. Helps inform design decisions later.
Sustainability: Life beyond you. Natural evolutionary paths.

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

Druplicon

Our case study
Talk about the project

Step One

Start at the Beginning

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

Once you have the color palette and base level elements you can really start to see the beginning of something good.

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

What does that have to do with Drupal?

Drupal is a Content Management... System

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

Boy that looks familiar!

Build spec

Proper prior planning prevents piss poor performance

—British military adage

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

Build spec

The Palantir Build Spec spreadsheet

Build spec

The Palantir Build Spec spreadsheet

Content Type config page

Node edit page

Step Three

Create components and templates

Component == Visual representation of content

Visual representation of content == Drupal View Mode

Component == View Modes!

Full View mode configuration

Show only some fields
Formatters for fields: "Elements"
Hide others

Unstyled Full View Mode

Sprinkle magic theming fairy dust

node-full.tpl.php + CSS

Themed page

Step Four

More components,
more templates!

Illustrated list (image style)

Image style configuration

Illustrated list (view mode)

Create new View mode

Illustrated list (view mode)

Configure Illustrated list view mode

Where does this actually get used...?

Views

This is a design tool, too...

Content assembly!

Views

Styled Illustrated List

Illustrated list on list page

Illustrated list on home page

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

Some exec wanted X thing to appear without reason? Stick to the system.
"Because it looks pretty" isn't a system.

A system is a system

Use the same system across your project

Designers and developers define the system together

Larry Garfield

Making the Web a Better Place

Keep tabs on our work at @Palantir