Palantir.net
Presented by Larry Garfield (@Crell)
The Key to Design Nirvana
sys•tem | ˈsistəm | noun
Interconnected Parts
Complex Whole
Interconnected Parts
H1–H6, p, a, ul, ol, hr, blockquote, form elements, etc.
Interconnected Parts
Header, footer, navigation, hero element, call-to-action, etc.
A component is a visual representation of content.
Interconnected Parts
General page, home page, landing page, listing page, etc.
A phrase that Brad Frost coined.
Interconnected Parts
Complex Whole
Step One
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
Why are people coming here?
Step Three
Story Header: Date, Author, Title, Program, Section
Ad Block
Lede Image, caption, credit
Share controls
Step Four
Mind what you have learned...
Analyze Your Content
Why people are coming here Again? For Stories!
The homepage should offer various stories to the user.
We'll need to start refining the full story template into bite size pieces.
What's important on a smaller scale?
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
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
Drupal doesn't care
Step Two
In the biz, this is called Content Strategy
Specifically, Data Modeling
Step Three
Component == Visual representation of content
Visual representation of content == Drupal View Mode
Component == View Modes!
Sprinkle magic theming fairy dust
node-full.tpl.php + CSS
Step Four
This is a design tool, too...
Content assembly!
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
A system is a system
Use the same system across your project
Designers and developers define the system
... together
Making the Web a Better Place
Keep tabs on our work at @Palantir