Design Systems and Drupal – Think Systems, Not Pages. – Start at the Beginning



Design Systems and Drupal – Think Systems, Not Pages. – Start at the Beginning

2 0


slides-design-systems-drupal

Design Systems and Drupal

On Github palantirnet / slides-design-systems-drupal

Palantir.net

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.

  • Systems are how we unify everything

Why Design in Systems?

  • Consistency (Visual + Content)
  • Efficiency (Production)
  • Sustainability (Life After Us)
  • Consistency: Aesthetics, UX, Patterns.
  • Efficiency: Don't design 100s of pages. Allow the system to help inform design decisions later.
  • Sustainability: Life beyond you. We want to create relationships not dependancies.

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.

A component is a visual representation of content.

Interconnected Parts

Elements, Components, Templates

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

Atomic Design

A phrase that Brad Frost coined.

Interconnected Parts

Elements, Components, Templates

Complex Whole

A CMS-Driven Site

  • Public Radio International
  • They develop and distribute public access content for the radio.
  • When they can my Palantir, they were looking for a modern design and responsive site.
  • A destination for people to come and consume, engage and share content.

Step One

Start at the Beginning

  • Where do you begin?
  • You've met the client, heard their goals, now what?

Your design should be based on their branding.

Use this as your foundation.

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

Start work on the type system. Modular scale.

Once you have the color palette and base level elements you'll start to see things take shape.

Step Two

Get to Know Your Content

Why are people coming here?

  • This is a vital step. One that shouldn't be overlooked.
  • Clients and sometimes designers/developers get hung up on certain features or blue sky ideas.

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
  • Read and listen to stories
  • We run through an exercise and start to capture what makes up a story. What's needed.

Step Three

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

  • Start with the whole view of a story and use the elements we just mentioned.

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

  • Disclaimer: Showing finished compos; start with sketches for form and strucgture.
  • High level information.

Ad Block

  • Pay attention to all styling, even ad blocks. How will those look in the design?

Lede Image, caption, credit

  • We want the lede information to stand out so we know to be aware of proportion and hierarchy.

Share controls

  • Sharing is important and should be readily available to the user.
  • Here is the full story template... we just scratched the surface.
  • Keep repeating this process. Add to the story.

Step Four

Make More Templates!

Mind what you have learned...

Analyze Your Content

What Should Go on theHome Page?

Why people are coming here Again? For Stories!

The homepage should offer various stories to the user.

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

We'll need to start refining the full story template into bite size pieces.

What's important on a smaller scale?

The Story Item

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

You can do another exercise to boil down the story element into a smaller list.

This is called a 'Story item'.

We need to describe a story without showing the whole thing.

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

The homepage needs to be engaging so let's create some variety.

Full width featured component.

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

We can create a grid component for additional visual interest.

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

This list view works perfectly for chronological ordering. Allows users to scroll through multiple story with high efficiency.

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

Combination of the square and illustrated list. Allows us to span multiple stories across the page.

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

This is the simplest form but still offers enough information for engagement.

Maybe used for a sidebar component for related content.

Here is the full view of the homepage.

By combining these components we created a dynamic and visually pleasing template.

Here's the breakdown to recap

The Good News

Creating Another Page Gets Easier Every Time

Atomic Design

Create a list view template.

We already have an illustrated list component.

...and if there's a need for sidebar content, we have that too.

We didn't have to start from scratch, reuse what's already been created.

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

Build spec

Step Three

Create components and templates

Component == Visual representation of content

Visual representation of content == Drupal View Mode

Component == View Modes!

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

Sprinkle magic theming fairy dust

node-full.tpl.php + CSS

Step Four

More components,more templates!

Illustrated list (image style)

Illustrated list (view mode)

Illustrated list (view mode)

  • Where does this actually get used...?

Views

This is a design tool, too...

Content assembly!

Views

  • Same component reused on both pages.
  • New page? Components are ready to use.
  • Responsive? Every component has own breakpoints.

In summary...

Drupal is a very designer-friendly CMS!

… if you design in systems

The most important step isunderstanding 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

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

A system is a system

Use the same system across your project

Designers and developers define the system

... together

Larry Garfield

Palantir.net

Making the Web a Better Place

Keep tabs on our work at @Palantir

Design Systems and Drupal Presented by Larry Garfield (@Crell)