Design Systems and Drupal – Think Systems, Not Pages. – Start at the Beginning
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 performanceBuild 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
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
Making the Web a Better Place
Keep tabs on our work at @Palantir