SlideShare une entreprise Scribd logo
1  sur  77
Télécharger pour lire hors ligne
1© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MICAH GODBOLT
ROAD RUNNER RULESOR MORE WHAT YOU’D CALL GUIDELINES OF A DESIGN SYSTEM
© 2016 Phase2
2
MICAH GODBOLT
Frontend Architect
Author of Frontend Architecture for Design Systems
(fea.pub)
@micahgodbolt
micah.codes
© 2016 Phase2
3
ROAD RUNNER RULES
© 2016 Phase2
4
ROAD RUNNER RULES
Or More What You’d Call 

Guidelines 

of a Design System
5
© 2016 Phase2
6
EMERY: 4 YEARS OLD
“Daddy, can I have a flower?”
“I want a flower, now!”
“This flower looks beautiful.”
7
© 2016 Phase2
8
RHYS: 2 YEARS OLD
“Flower?”
“Flower!”
“Flower”
© 2016 Phase2
9
LINGUISTICS
© 2016 Phase2
10
LINGUISTICS: A SET OF STRUCTURAL RULES
GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
11© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The organization of sounds
PHONOLOGY
ONSET RIME
B eau
T y
12© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure and composition of words
MORPHOLOGY
BEAUTY FUL
N A
ADJECTIVE
13© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure of sentences
SYNTAX
“THIS FLOWER LOOKS BEAUTIFUL”
NounArticle
Noun Phrase
AdjectiveVerb
Verb Phrase
Sentence
© 2016 Phase2
14
WHAT DOES LINGUISTICS HAVE TO
DO WITH DESIGN SYSTEMS?
© 2016 Phase2
15
WHAT IF WE DID A SCIENTIFIC STUDY 

OF A VISUAL LANGUAGE
© 2016 Phase2
16
A SYSTEM OF COMMUNICATION
USING VISUAL ELEMENTS
WIKIPEDIA.ORG/WIKI/VISUAL_LANGUAGE
© 2016 Phase2
17
A SHARED VOCABULARY
FOR DESIGN
WWW.IBM.COM/DESIGN/LANGUAGE
18© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTTP://WWW.INTEL.COM/HTTPS://WWW.HILLARYCLINTON.COM/
Communicating Ideas
• Trust
• Value
• Reliability
• Authority
THEY BOTH HAVE A COMMON GOAL
19© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTTPS://WWW.REDHAT.COMHTTP://WWW.MACYS.COM/
Communicating Intention
• Click here
• Read this first
• Use this for navigation
• Go here for help
THEY BOTH HAVE A COMMON GOAL
20© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITS
Dialects
• Word Length
• Information Density
• Power Colors
21© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITS
Jargon
• Price Quality Matrix
22© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITS
Slang
• Carousel Navigation
• Hamburger Menu
HTTP://KENWHEELER.GITHUB.IO/SLICK/
23© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
BOTH CAN BE BROKEN DOWN INTO SMALLER UNITS
24© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“PHONOLOGY” OF VISUAL LANGUAGE
Layout
• Balance
• Proportion
Typography
• Weight
• Scale
Iconography
• Interface
• Ornamental
Color
• Palettes
• Tints/Shades
• Contrast/Accessibility
Animation
• Types
• Speed
• Appropriate Uses
HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/LAYOUT
HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/COLOR-IN-DESIGN-SYSTEMS-A1C80F65FA3 HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM/RESOURCES/ICONS/
HTTP://WWW.GOOGLE.COM/DESIGN/SPEC/ANIMATION/RESPONSIVE-INTERACTION.HTML
The organization of “sounds”
25© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure and composition of “words”
“MORPHOLOGY” OF VISUAL LANGUAGE
26© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“MORPHOLOGY” OF VISUAL LANGUAGE
The structure and composition of “words”
27© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure of sentences
“SYNTAX” OF VISUAL LANGUAGE
FUN LAUGHS UNDERDOGS FIND A PARK
PARKS R US ABOUT | CONTACT
28© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“SYNTAX” OF VISUAL LANGUAGE
HTTP://BRADFROST.COM/WP-CONTENT/UPLOADS/2015/12/ATOMIC-GIF-3.GIF
© 2016 Phase2
29
LINGUISTICS: A SET OF STRUCTURAL RULES
GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
DESIGN SYSTEM
VISUAL
© 2016 Phase2
30
DESIGN SYSTEMS
31© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
32© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Methodologies
• OOCSS (Object Oriented CSS)
RULES
<div class="toggle simple">
<div class="toggle-control open">
<h1 class=“toggle-title">
Title 1
</h1>
</div>
<div class="toggle-details open”>
...
</div>
...
</div>
Two Main Principles
1.Separation of
structure and skin
2.Separation of
container and content
33© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Methodologies
• SMACSS (Scaleable Modular Architecture for CSS)
RULES
<div class="toggle toggle-simple">
<div class="toggle-control is-active">
<h2 class="toggle-title">Title 1</h2>
</div>
<div class="toggle-details is-active">
...
</div>
...
</dl>
Folder Structure
1. Base
2. Layout
3. Module
4. State
5. Theme
34© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
<div class="toggle toggle--simple">
<div class="toggle__control toggle__control--active">
<h2 class="toggle__title">Title 1</h2>
</div>
<div class="toggle__details toggle__details--active">
...
</div>
...
</dl>
Methodologies
• BEM (Block Element Modifier)
RULES
35© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Rules of Thumb
36© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Rules of Thumb
• Single Source of Truth
.blog-feed h1 {
color: red;
font-size: 32px;
}
article .title {
font-size: 26px;
line-height: 1.2;
}
<section class="blog-feed">
<h1>Our Blog</h1>
<article>
<h1 class="title">
A Blog Title
</h1>
...
</article>
</section>
37© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
<section class="blog-feed">
<h2 class="headline"></h2>
</section>
<footer>
<h2 class="headline"></h2>
</footer>
RULES
Rules of Thumb
• Single Responsibility Principle
.headline {
color: red;
font-size: 28px;
}
.blog-feed .headline {
text-transform: uppercase;
}
38© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Rules of Thumb
• Flat CSS Selectors
.about-contact .hero1 .container
> section.features-quarter
> section.f-contact h3 {
color: red;
}
.about-contact .hero1 .container
> section.features-quarter
> section.f-contact h3.active {
color: white;
}
39© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Rules of Thumb
• Flat CSS Selectors
.about-contact__title {
color: red;
}
.about-contact__title--active {
color: white;
}
40© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Asset Guidelines
41© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Asset Guidelines
• How to create icons
HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/ICONOGRAPHY
42© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Asset Guidelines
• Photography dos and don’ts
HTTPS://DESIGN.ATLASSIAN.COM/BRAND/PHOTOGRAPHY
43© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Custom Rules
• Visible
• Agreed Upon
• Actionable
RULES
44© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
ASSETS
45© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
• Raw Markup
ASSETS
HTTP://GETBOOTSTRAP.COM/COMPONENTS/
46© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
• Templates
ASSETS
HTTPS://GITHUB.COM/DRUPAL/DRUPAL
COMMENT.HTML.TWIG
<article{{ attributes.addClass(classes) }}>
<mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}”>
</mark>
<footer class="comment__meta">
{{ user_picture }}
<p class="comment__submitted">{{ submitted }}</p>
{% if parent %}
<p class="parent visually-hidden">{{ parent }}</p>
{% endif %}
{{ permalink }}
</footer>
<div{{ content_attributes.addClass('content') }}>
{% if title %}
{{ title_prefix }}
<h3{{ title_attributes }}>{{ title }}</h3>
{{ title_suffix }}
{% endif %}
{{ content }}
</div>
</article>
47© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
• API
ASSETS
HTTPS://RIZZO.LONELYPLANET.COM/STYLEGUIDE/UI-COMPONENTS/CARDS
48© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Linked Assets:
• CSS
• JavaScript
• Fonts
• Images/SVGs
ASSETS
49© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
ASSETS
Build Assets:
• Sass
• JavaScript Modules
• Task Runners
50© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEM
Style Guides
• KSS
• Living Style Guide
• Hologram
HTTPS://TRULIA.GITHUB.IO/HOLOGRAM/
HTTP://WARPSPIRE.COM/KSS/
HTTPS://LIVINGSTYLEGUIDE.ORG/
51© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEM
Pattern Libraries:
• Fractal
• Pattern Lab
HTTP://PATTERNLAB.IO/
HTTP://FRCTL.GITHUB.IO/
52© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEM
Roll Your Own
• Lightening Design System
• Rizzo (Lonely Planet)
• Pattern Kit
HTTPS://RIZZO.LONELYPLANET.COM
HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM
HTTPS://GITHUB.COM/PATTERNBUILDER/PATTERN-KIT
© 2016 Phase2
53
DESIGN SYSTEMS
A Design System is a set of rules and assets…
© 2016 Phase2
54
DESIGN SYSTEMS
…define how to express everything a visual language needs
to say
55
FOCUS ON
[Name of country in native language]
Promo
VIDEOS
Technologies Services & support Success stories About Red Hat
CUSTOMERS PARTNERS OPEN SOURCE COMMUNITIES
CALL TO ACTION
RED HAT CUSTOMERS
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod
opes nostrud secundum odio
nostrud regula ad vulputate.
Headline for featured topic
Very brief subtitle lorem ipsum dolor ad potentas in
migo astram exculpam preo. Vulputate huic ut fere
nimis euismod molior consequat exerci dolore.
Facilisi tation aliquip dolor vel duis incassum quis
olim aliquip. Veniam exputo immitto praesent tego
nostrud consectetuer ex vicis.
EVENTS
MORE NEWS
Red Hat in the press
Video caption
•
•
•
•
NEWS & EVENTS POPULAR LINKS RESOURCESLOCAL CONTACTS
CALL TO ACTION
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod
opes nostrud secundum odio
nostrud regula ad vulputate.
NEWS
VIDEO TITLE VIDEO TITLE VIDEO TITLE
CALL TO ACTION
1
Country specific - NEW [detail] 2
2
1
Anchor links to frequently accessed content panels. Is not
persistent with the scroll. Image behind the hero spot should
be from the country specified, rather than standard stock.
2
Country marketing team may use this panel for
whatever messaging they require. It may be a
single or two column layout.
Headline is optional.
3
Up to three campaign cards. Needs to be able to
accommodate several types of imagery (icon, photo). Card
three illustrates behavor of CTA button revealed on
mouseover. (e.g. Nordic country pages)
This type of panel could accomodate a headline, but it should
only be used if all cards have a common theme.
3
4
4
Content in this promo band supplied by HQ
Annotations
Purpose
The detail page for a specific country or region educates users on
Red Hat on the culture, product/services offerings, campaigns,
and success stories from that area. It is a primary marketing page
for that country: driving traffic to contact the country/regional
sales team, download targeted resources, or to participate in local
events/initiatives.
5
5 Should include the filter set to the region's
country.
6
6 Red Hat customers based or operating
heavily in the selected country.
VIDEOS
NAME OF LOCATIONSOCIAL
Executives
Developers
Partners
RHEL
Red Hat Storage
Server 2.1
JBoss Fuse
Serviceworks
My Account
Customer Portal
Resources
Hardware Catalog
Buy online
Contact sales
Find a reseller
Contact us
Feedback
Social
News
Investors
Jobs @ Red Hat
Cool Stuff Store
INFO FOR FEATURED TOOLS PURCHASE COMMUNICATE ABOUT
email@redhat.com
99 11 222 33 44
LOCAL CONTACTS
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
Red Hat [Location]
Red Hat HQ
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
email@redhat.com
NAME OF LOCATION
email@redhat.com
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
email@redhat.com
NAME OF LOCATION
email@redhat.com
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
email@redhat.com
NAME OF LOCATION
email@redhat.com
99 11 222 33 44
CONTACT SALES
SECONDARY CONTACT
99 11 222 33 44
email@redhat.com
POPULAR LINKS
Products
EXPLORE MORE VIDEOS
Data Sheets Whitepapers Case Studies
Reference
Architectures
Brochures Infographics
MORE RESOURCES
FEATURED RESOURCES
Your Partners
Services
Local Training
Certification sites
Red Hat Enterprise Linux
JBoss Middleware
Cloud computing
Data sheet Case study Reference architecture
Name of the resource.
Example: Managing Hybrid
Cloud: Diversified Workloads
and Unified Cloud
Infrastructure Administration
READ MORE
Name of the resource.
Example: Managing Hybrid
Cloud: Diversified Workloads
and Unified Cloud
Infrastructure Administration
Name of the resource.
Example: Managing Hybrid
Cloud: Diversified Workloads
and Unified Cloud
Infrastructure Administration
READ MORE READ MORE
VIDEO TITLE VIDEO TITLE VIDEO TITLE
7
7
Similar mortar system to Executive Team.
Blocking is the address for that location.
Ideally, each location card is a shared
content type that is pulled in to this panel.
8 8
For each of these quick links, whenever
possible take user to a pre-filtered list of
partners/training locations/etc for that
country.
9
9
This uses the Success Story card format.
No more than two rows of three featured
resource cards. These can be selected by
the country's marketing team, but ideally
should simply be a reference to a
document (and its associated metadata) in
the Resource Library. The icon and
resource type are picked up from the
particular resource featured.
10
10
Like the filter buttons on the main
Resources home page, these link the user
off to a results set filtered both by the
region and resource type tags. If a
particular resource type does not have
entries for that region, ideally its selector
box should not display here.
56
57
58HTTPS://TWITTER.COM/SOPHSHEPHERD/STATUS/725075564445483012
DESIGN SYSTEMS ARE THE FUTURE OF THE WEB
59
© 2016 Phase2
60
HOW DO WE GET OUR DESIGN
SYSTEM INTO DRUPAL?
© 2016 Phase2
61
HOW DO WE GET OUR DESIGN
SYSTEM INTO DRUPAL?
Why haven’t we already done this?
62© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DIRTY DATA MODELS
Model
$title
function(title)
<h1>Title</h1>
63© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Solved by D8
DIRTY DATA MODELS
Model
{{title}}
{{image}}
{{content}}
64© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
TYRANNY OF THE MODEL VIEW PARADIGM
Model
{{title}}
{{image}}
{{content}}
View
65© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Enter Atomic Design
TYRANNY OF THE MODEL VIEW PARADIGM
Model
{{title}}
{{image}}
{{content}}
View
Title

Template
Image

Template
Content

Template
66© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Model
{{title}}
{{image}}
{{content}}
View
Title

Template
Image

Template
Content

Template
{{headline}}
{{image}}
{{align}}
{{teaser}}
{{body}}
MODEL AND VIEW DON’T SPEAK THE SAME LANGUAGE
67© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Model
{{title}}
{{image}}
{{content}}
View
Title

Template
Image

Template
Content

Template
{{headline}}
{{image}}
{{align}}
{{teaser}}
{{body}}
MODEL AND VIEW DON’T SPEAK THE SAME LANGUAGE
Presenter
FILTER
RIGHT
Say hello to the Presenter
68© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% extends 'card.twig' %}
{% block body %}
{% include 'title.twig' with {'headline': title} only %}
{% include 'image.twig' with {
'image': image,
'align': 'right'}
only %}
{% include 'content.twig' with {
'teaser': content|truncate(35),
'body': content}
only %}
{% endblock %}
A Basic Presenter
69© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% include 'title.twig' with {'headline': title} only %}
Including the Title
Presenter
{{title}}
{{headline}}
70© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% include 'image.twig' with {
'image': image,
'align': 'right'}
only %}
Including the Image
Presenter
{{title}}
{{headline}}
{{image}}
{{image}}
RIGHT
{{align}}
71© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
Including the Content
{% include 'content.twig' with {
'body': content,
'teaser': content|truncate(35)}
only %}
Presenter
RIGHT
{{title}}
{{image}}
{{headline}}
{{image}}
{{align}}
{{teaser}}FILTER{{content}}
{{body}}
72© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% extends 'card.twig' %}
{% block body %}
…
{% endblock %}
{# card.twig #}
<div class="card">
{% block body %}
{% endblock %}
</div>
Using Extends: Keeping the presenter pure
73© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
A Basic Presenter
{% extends 'card.twig' %}
{% block body %}
{% include 'title.twig' with {'headline': title} only %}
{% include 'image.twig' with {
'image': image,
'align': 'right'}
only %}
{% include 'content.twig' with {
'teaser': content|truncate(35),
'body': content}
only %}
{% endblock %}
74© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
Defining the Model: Creating an API
{
"type": "object",
"properties": {
"title": {
"type": "string",
},
"image": {
"type": "string",
},
"content": {
"type": "string",
"format": "html"
}
},
"required": ["title", "image", "content"]
}
Model
{{title}}
{{image}}
{{content}}
75© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
• Prototype your entire design system in a static environment
• JSON Schemas
• Twig
• Import your MVP into D7 with a single Drush command.
• Creates a Paragraph bundle for each Model
• Combine Paragraphs to make new content types
• Render your clean Model through standard Twig templates
INTRODUCING PATTERN BUILDER
76© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Come to room 291 right after this talk for a BOF/demo!
drupal.org/project/patternbuilder
github.com/patternbuilder
INTRODUCING PATTERN BUILDER
77
SoHowWasIt?-TellUsWhatYouThink
Evaluate this session -
Thanks!

Contenu connexe

Plus de Phase2

A Modern Digital Experience Platform
A Modern Digital Experience PlatformA Modern Digital Experience Platform
A Modern Digital Experience PlatformPhase2
 
Beyond websites: A Modern Digital Experience Platform
Beyond websites: A Modern Digital Experience PlatformBeyond websites: A Modern Digital Experience Platform
Beyond websites: A Modern Digital Experience PlatformPhase2
 
Site building with end user in mind
Site building with end user in mindSite building with end user in mind
Site building with end user in mindPhase2
 
Fields, entities, lists, oh my!
Fields, entities, lists, oh my!Fields, entities, lists, oh my!
Fields, entities, lists, oh my!Phase2
 
Performance Profiling Tools and Tricks
Performance Profiling Tools and TricksPerformance Profiling Tools and Tricks
Performance Profiling Tools and TricksPhase2
 
Riding the Drupal Wave: The Future for Drupal and Open Source Content Manage...
Riding the Drupal Wave:  The Future for Drupal and Open Source Content Manage...Riding the Drupal Wave:  The Future for Drupal and Open Source Content Manage...
Riding the Drupal Wave: The Future for Drupal and Open Source Content Manage...Phase2
 
Site Building with the End User in Mind
Site Building with the End User in MindSite Building with the End User in Mind
Site Building with the End User in MindPhase2
 
The Yes, No, and Maybe of "Can We Build That With Drupal?"
The Yes, No, and Maybe of "Can We Build That With Drupal?"The Yes, No, and Maybe of "Can We Build That With Drupal?"
The Yes, No, and Maybe of "Can We Build That With Drupal?"Phase2
 
User Testing For Humanitarian ID App
User Testing For Humanitarian ID AppUser Testing For Humanitarian ID App
User Testing For Humanitarian ID AppPhase2
 
The New Design Workflow
The New Design WorkflowThe New Design Workflow
The New Design WorkflowPhase2
 
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)Phase2
 
Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8Phase2
 
How, When, and Why to Patch a Module
How, When, and Why to Patch a Module How, When, and Why to Patch a Module
How, When, and Why to Patch a Module Phase2
 
Drupal Is Not Your Web Site
Drupal Is Not Your Web SiteDrupal Is Not Your Web Site
Drupal Is Not Your Web SitePhase2
 
Empathy For Idiots
Empathy For Idiots Empathy For Idiots
Empathy For Idiots Phase2
 
Open data + open government open goodness
Open data + open government open goodnessOpen data + open government open goodness
Open data + open government open goodnessPhase2
 
How 'Open' Changes Product Development
How 'Open' Changes Product DevelopmentHow 'Open' Changes Product Development
How 'Open' Changes Product DevelopmentPhase2
 
Open Source Logging and Metrics Tools
Open Source Logging and Metrics ToolsOpen Source Logging and Metrics Tools
Open Source Logging and Metrics ToolsPhase2
 
Open Source Logging and Monitoring Tools
Open Source Logging and Monitoring ToolsOpen Source Logging and Monitoring Tools
Open Source Logging and Monitoring ToolsPhase2
 
ReliefWeb's Journey from RSS Feed to Public API
ReliefWeb's Journey from RSS Feed to Public APIReliefWeb's Journey from RSS Feed to Public API
ReliefWeb's Journey from RSS Feed to Public APIPhase2
 

Plus de Phase2 (20)

A Modern Digital Experience Platform
A Modern Digital Experience PlatformA Modern Digital Experience Platform
A Modern Digital Experience Platform
 
Beyond websites: A Modern Digital Experience Platform
Beyond websites: A Modern Digital Experience PlatformBeyond websites: A Modern Digital Experience Platform
Beyond websites: A Modern Digital Experience Platform
 
Site building with end user in mind
Site building with end user in mindSite building with end user in mind
Site building with end user in mind
 
Fields, entities, lists, oh my!
Fields, entities, lists, oh my!Fields, entities, lists, oh my!
Fields, entities, lists, oh my!
 
Performance Profiling Tools and Tricks
Performance Profiling Tools and TricksPerformance Profiling Tools and Tricks
Performance Profiling Tools and Tricks
 
Riding the Drupal Wave: The Future for Drupal and Open Source Content Manage...
Riding the Drupal Wave:  The Future for Drupal and Open Source Content Manage...Riding the Drupal Wave:  The Future for Drupal and Open Source Content Manage...
Riding the Drupal Wave: The Future for Drupal and Open Source Content Manage...
 
Site Building with the End User in Mind
Site Building with the End User in MindSite Building with the End User in Mind
Site Building with the End User in Mind
 
The Yes, No, and Maybe of "Can We Build That With Drupal?"
The Yes, No, and Maybe of "Can We Build That With Drupal?"The Yes, No, and Maybe of "Can We Build That With Drupal?"
The Yes, No, and Maybe of "Can We Build That With Drupal?"
 
User Testing For Humanitarian ID App
User Testing For Humanitarian ID AppUser Testing For Humanitarian ID App
User Testing For Humanitarian ID App
 
The New Design Workflow
The New Design WorkflowThe New Design Workflow
The New Design Workflow
 
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
Drupal 8, Don’t Be Late (Enterprise Orgs, We’re Looking at You)
 
Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8Memorial Sloan Kettering: Adventures in Drupal 8
Memorial Sloan Kettering: Adventures in Drupal 8
 
How, When, and Why to Patch a Module
How, When, and Why to Patch a Module How, When, and Why to Patch a Module
How, When, and Why to Patch a Module
 
Drupal Is Not Your Web Site
Drupal Is Not Your Web SiteDrupal Is Not Your Web Site
Drupal Is Not Your Web Site
 
Empathy For Idiots
Empathy For Idiots Empathy For Idiots
Empathy For Idiots
 
Open data + open government open goodness
Open data + open government open goodnessOpen data + open government open goodness
Open data + open government open goodness
 
How 'Open' Changes Product Development
How 'Open' Changes Product DevelopmentHow 'Open' Changes Product Development
How 'Open' Changes Product Development
 
Open Source Logging and Metrics Tools
Open Source Logging and Metrics ToolsOpen Source Logging and Metrics Tools
Open Source Logging and Metrics Tools
 
Open Source Logging and Monitoring Tools
Open Source Logging and Monitoring ToolsOpen Source Logging and Monitoring Tools
Open Source Logging and Monitoring Tools
 
ReliefWeb's Journey from RSS Feed to Public API
ReliefWeb's Journey from RSS Feed to Public APIReliefWeb's Journey from RSS Feed to Public API
ReliefWeb's Journey from RSS Feed to Public API
 

Dernier

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 

Dernier (20)

Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 

Road Runner Rules: More What You’d Call “Guidelines” for Design Systems

  • 1. 1© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MICAH GODBOLT ROAD RUNNER RULESOR MORE WHAT YOU’D CALL GUIDELINES OF A DESIGN SYSTEM
  • 2. © 2016 Phase2 2 MICAH GODBOLT Frontend Architect Author of Frontend Architecture for Design Systems (fea.pub) @micahgodbolt micah.codes
  • 3. © 2016 Phase2 3 ROAD RUNNER RULES
  • 4. © 2016 Phase2 4 ROAD RUNNER RULES Or More What You’d Call 
 Guidelines 
 of a Design System
  • 5. 5
  • 6. © 2016 Phase2 6 EMERY: 4 YEARS OLD “Daddy, can I have a flower?” “I want a flower, now!” “This flower looks beautiful.”
  • 7. 7
  • 8. © 2016 Phase2 8 RHYS: 2 YEARS OLD “Flower?” “Flower!” “Flower”
  • 10. © 2016 Phase2 10 LINGUISTICS: A SET OF STRUCTURAL RULES GOVERNING THE COMPOSITION OF CLAUSES, PHRASES, AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
  • 11. 11© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT The organization of sounds PHONOLOGY ONSET RIME B eau T y
  • 12. 12© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT The structure and composition of words MORPHOLOGY BEAUTY FUL N A ADJECTIVE
  • 13. 13© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT The structure of sentences SYNTAX “THIS FLOWER LOOKS BEAUTIFUL” NounArticle Noun Phrase AdjectiveVerb Verb Phrase Sentence
  • 14. © 2016 Phase2 14 WHAT DOES LINGUISTICS HAVE TO DO WITH DESIGN SYSTEMS?
  • 15. © 2016 Phase2 15 WHAT IF WE DID A SCIENTIFIC STUDY 
 OF A VISUAL LANGUAGE
  • 16. © 2016 Phase2 16 A SYSTEM OF COMMUNICATION USING VISUAL ELEMENTS WIKIPEDIA.ORG/WIKI/VISUAL_LANGUAGE
  • 17. © 2016 Phase2 17 A SHARED VOCABULARY FOR DESIGN WWW.IBM.COM/DESIGN/LANGUAGE
  • 18. 18© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTTP://WWW.INTEL.COM/HTTPS://WWW.HILLARYCLINTON.COM/ Communicating Ideas • Trust • Value • Reliability • Authority THEY BOTH HAVE A COMMON GOAL
  • 19. 19© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTTPS://WWW.REDHAT.COMHTTP://WWW.MACYS.COM/ Communicating Intention • Click here • Read this first • Use this for navigation • Go here for help THEY BOTH HAVE A COMMON GOAL
  • 20. 20© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT THEY BOTH SHARE COMMON TRAITS Dialects • Word Length • Information Density • Power Colors
  • 21. 21© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT THEY BOTH SHARE COMMON TRAITS Jargon • Price Quality Matrix
  • 22. 22© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT THEY BOTH SHARE COMMON TRAITS Slang • Carousel Navigation • Hamburger Menu HTTP://KENWHEELER.GITHUB.IO/SLICK/
  • 23. 23© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT BOTH CAN BE BROKEN DOWN INTO SMALLER UNITS
  • 24. 24© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT “PHONOLOGY” OF VISUAL LANGUAGE Layout • Balance • Proportion Typography • Weight • Scale Iconography • Interface • Ornamental Color • Palettes • Tints/Shades • Contrast/Accessibility Animation • Types • Speed • Appropriate Uses HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/LAYOUT HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/COLOR-IN-DESIGN-SYSTEMS-A1C80F65FA3 HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM/RESOURCES/ICONS/ HTTP://WWW.GOOGLE.COM/DESIGN/SPEC/ANIMATION/RESPONSIVE-INTERACTION.HTML The organization of “sounds”
  • 25. 25© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT The structure and composition of “words” “MORPHOLOGY” OF VISUAL LANGUAGE
  • 26. 26© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT “MORPHOLOGY” OF VISUAL LANGUAGE The structure and composition of “words”
  • 27. 27© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT The structure of sentences “SYNTAX” OF VISUAL LANGUAGE FUN LAUGHS UNDERDOGS FIND A PARK PARKS R US ABOUT | CONTACT
  • 28. 28© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT “SYNTAX” OF VISUAL LANGUAGE HTTP://BRADFROST.COM/WP-CONTENT/UPLOADS/2015/12/ATOMIC-GIF-3.GIF
  • 29. © 2016 Phase2 29 LINGUISTICS: A SET OF STRUCTURAL RULES GOVERNING THE COMPOSITION OF CLAUSES, PHRASES, AND WORDS IN ANY GIVEN NATURAL LANGUAGE. DESIGN SYSTEM VISUAL
  • 31. 31© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
  • 32. 32© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Methodologies • OOCSS (Object Oriented CSS) RULES <div class="toggle simple"> <div class="toggle-control open"> <h1 class=“toggle-title"> Title 1 </h1> </div> <div class="toggle-details open”> ... </div> ... </div> Two Main Principles 1.Separation of structure and skin 2.Separation of container and content
  • 33. 33© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Methodologies • SMACSS (Scaleable Modular Architecture for CSS) RULES <div class="toggle toggle-simple"> <div class="toggle-control is-active"> <h2 class="toggle-title">Title 1</h2> </div> <div class="toggle-details is-active"> ... </div> ... </dl> Folder Structure 1. Base 2. Layout 3. Module 4. State 5. Theme
  • 34. 34© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT <div class="toggle toggle--simple"> <div class="toggle__control toggle__control--active"> <h2 class="toggle__title">Title 1</h2> </div> <div class="toggle__details toggle__details--active"> ... </div> ... </dl> Methodologies • BEM (Block Element Modifier) RULES
  • 35. 35© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Rules of Thumb
  • 36. 36© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Rules of Thumb • Single Source of Truth .blog-feed h1 { color: red; font-size: 32px; } article .title { font-size: 26px; line-height: 1.2; } <section class="blog-feed"> <h1>Our Blog</h1> <article> <h1 class="title"> A Blog Title </h1> ... </article> </section>
  • 37. 37© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT <section class="blog-feed"> <h2 class="headline"></h2> </section> <footer> <h2 class="headline"></h2> </footer> RULES Rules of Thumb • Single Responsibility Principle .headline { color: red; font-size: 28px; } .blog-feed .headline { text-transform: uppercase; }
  • 38. 38© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Rules of Thumb • Flat CSS Selectors .about-contact .hero1 .container > section.features-quarter > section.f-contact h3 { color: red; } .about-contact .hero1 .container > section.features-quarter > section.f-contact h3.active { color: white; }
  • 39. 39© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Rules of Thumb • Flat CSS Selectors .about-contact__title { color: red; } .about-contact__title--active { color: white; }
  • 40. 40© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Asset Guidelines
  • 41. 41© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Asset Guidelines • How to create icons HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/ICONOGRAPHY
  • 42. 42© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Asset Guidelines • Photography dos and don’ts HTTPS://DESIGN.ATLASSIAN.COM/BRAND/PHOTOGRAPHY
  • 43. 43© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Custom Rules • Visible • Agreed Upon • Actionable RULES
  • 44. 44© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTML: ASSETS
  • 45. 45© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTML: • Raw Markup ASSETS HTTP://GETBOOTSTRAP.COM/COMPONENTS/
  • 46. 46© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTML: • Templates ASSETS HTTPS://GITHUB.COM/DRUPAL/DRUPAL COMMENT.HTML.TWIG <article{{ attributes.addClass(classes) }}> <mark class="hidden" data-comment-timestamp="{{ new_indicator_timestamp }}”> </mark> <footer class="comment__meta"> {{ user_picture }} <p class="comment__submitted">{{ submitted }}</p> {% if parent %} <p class="parent visually-hidden">{{ parent }}</p> {% endif %} {{ permalink }} </footer> <div{{ content_attributes.addClass('content') }}> {% if title %} {{ title_prefix }} <h3{{ title_attributes }}>{{ title }}</h3> {{ title_suffix }} {% endif %} {{ content }} </div> </article>
  • 47. 47© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTML: • API ASSETS HTTPS://RIZZO.LONELYPLANET.COM/STYLEGUIDE/UI-COMPONENTS/CARDS
  • 48. 48© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Linked Assets: • CSS • JavaScript • Fonts • Images/SVGs ASSETS
  • 49. 49© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT ASSETS Build Assets: • Sass • JavaScript Modules • Task Runners
  • 50. 50© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT DELIVERING A DESIGN SYSTEM Style Guides • KSS • Living Style Guide • Hologram HTTPS://TRULIA.GITHUB.IO/HOLOGRAM/ HTTP://WARPSPIRE.COM/KSS/ HTTPS://LIVINGSTYLEGUIDE.ORG/
  • 51. 51© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT DELIVERING A DESIGN SYSTEM Pattern Libraries: • Fractal • Pattern Lab HTTP://PATTERNLAB.IO/ HTTP://FRCTL.GITHUB.IO/
  • 52. 52© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT DELIVERING A DESIGN SYSTEM Roll Your Own • Lightening Design System • Rizzo (Lonely Planet) • Pattern Kit HTTPS://RIZZO.LONELYPLANET.COM HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM HTTPS://GITHUB.COM/PATTERNBUILDER/PATTERN-KIT
  • 53. © 2016 Phase2 53 DESIGN SYSTEMS A Design System is a set of rules and assets…
  • 54. © 2016 Phase2 54 DESIGN SYSTEMS …define how to express everything a visual language needs to say
  • 55. 55 FOCUS ON [Name of country in native language] Promo VIDEOS Technologies Services & support Success stories About Red Hat CUSTOMERS PARTNERS OPEN SOURCE COMMUNITIES CALL TO ACTION RED HAT CUSTOMERS Loreum ipsum dolor sit amet. Accumsan ut secundum euismod opes nostrud secundum odio nostrud regula ad vulputate. Headline for featured topic Very brief subtitle lorem ipsum dolor ad potentas in migo astram exculpam preo. Vulputate huic ut fere nimis euismod molior consequat exerci dolore. Facilisi tation aliquip dolor vel duis incassum quis olim aliquip. Veniam exputo immitto praesent tego nostrud consectetuer ex vicis. EVENTS MORE NEWS Red Hat in the press Video caption • • • • NEWS & EVENTS POPULAR LINKS RESOURCESLOCAL CONTACTS CALL TO ACTION Loreum ipsum dolor sit amet. Accumsan ut secundum euismod opes nostrud secundum odio nostrud regula ad vulputate. NEWS VIDEO TITLE VIDEO TITLE VIDEO TITLE CALL TO ACTION 1 Country specific - NEW [detail] 2 2 1 Anchor links to frequently accessed content panels. Is not persistent with the scroll. Image behind the hero spot should be from the country specified, rather than standard stock. 2 Country marketing team may use this panel for whatever messaging they require. It may be a single or two column layout. Headline is optional. 3 Up to three campaign cards. Needs to be able to accommodate several types of imagery (icon, photo). Card three illustrates behavor of CTA button revealed on mouseover. (e.g. Nordic country pages) This type of panel could accomodate a headline, but it should only be used if all cards have a common theme. 3 4 4 Content in this promo band supplied by HQ Annotations Purpose The detail page for a specific country or region educates users on Red Hat on the culture, product/services offerings, campaigns, and success stories from that area. It is a primary marketing page for that country: driving traffic to contact the country/regional sales team, download targeted resources, or to participate in local events/initiatives. 5 5 Should include the filter set to the region's country. 6 6 Red Hat customers based or operating heavily in the selected country. VIDEOS NAME OF LOCATIONSOCIAL Executives Developers Partners RHEL Red Hat Storage Server 2.1 JBoss Fuse Serviceworks My Account Customer Portal Resources Hardware Catalog Buy online Contact sales Find a reseller Contact us Feedback Social News Investors Jobs @ Red Hat Cool Stuff Store INFO FOR FEATURED TOOLS PURCHASE COMMUNICATE ABOUT email@redhat.com 99 11 222 33 44 LOCAL CONTACTS Red Hat [Location] Red Hat HQ Red Hat [Location] Red Hat HQ Red Hat [Location] Red Hat HQ Red Hat [Location] Red Hat HQ CONTACT SALES SECONDARY CONTACT 99 11 222 33 44 email@redhat.com NAME OF LOCATION email@redhat.com 99 11 222 33 44 CONTACT SALES SECONDARY CONTACT 99 11 222 33 44 email@redhat.com NAME OF LOCATION email@redhat.com 99 11 222 33 44 CONTACT SALES SECONDARY CONTACT 99 11 222 33 44 email@redhat.com NAME OF LOCATION email@redhat.com 99 11 222 33 44 CONTACT SALES SECONDARY CONTACT 99 11 222 33 44 email@redhat.com POPULAR LINKS Products EXPLORE MORE VIDEOS Data Sheets Whitepapers Case Studies Reference Architectures Brochures Infographics MORE RESOURCES FEATURED RESOURCES Your Partners Services Local Training Certification sites Red Hat Enterprise Linux JBoss Middleware Cloud computing Data sheet Case study Reference architecture Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration READ MORE Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration Name of the resource. Example: Managing Hybrid Cloud: Diversified Workloads and Unified Cloud Infrastructure Administration READ MORE READ MORE VIDEO TITLE VIDEO TITLE VIDEO TITLE 7 7 Similar mortar system to Executive Team. Blocking is the address for that location. Ideally, each location card is a shared content type that is pulled in to this panel. 8 8 For each of these quick links, whenever possible take user to a pre-filtered list of partners/training locations/etc for that country. 9 9 This uses the Success Story card format. No more than two rows of three featured resource cards. These can be selected by the country's marketing team, but ideally should simply be a reference to a document (and its associated metadata) in the Resource Library. The icon and resource type are picked up from the particular resource featured. 10 10 Like the filter buttons on the main Resources home page, these link the user off to a results set filtered both by the region and resource type tags. If a particular resource type does not have entries for that region, ideally its selector box should not display here.
  • 56. 56
  • 57. 57
  • 59. 59
  • 60. © 2016 Phase2 60 HOW DO WE GET OUR DESIGN SYSTEM INTO DRUPAL?
  • 61. © 2016 Phase2 61 HOW DO WE GET OUR DESIGN SYSTEM INTO DRUPAL? Why haven’t we already done this?
  • 62. 62© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT DIRTY DATA MODELS Model $title function(title) <h1>Title</h1>
  • 63. 63© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Solved by D8 DIRTY DATA MODELS Model {{title}} {{image}} {{content}}
  • 64. 64© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT TYRANNY OF THE MODEL VIEW PARADIGM Model {{title}} {{image}} {{content}} View
  • 65. 65© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Enter Atomic Design TYRANNY OF THE MODEL VIEW PARADIGM Model {{title}} {{image}} {{content}} View Title
 Template Image
 Template Content
 Template
  • 66. 66© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Model {{title}} {{image}} {{content}} View Title
 Template Image
 Template Content
 Template {{headline}} {{image}} {{align}} {{teaser}} {{body}} MODEL AND VIEW DON’T SPEAK THE SAME LANGUAGE
  • 67. 67© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Model {{title}} {{image}} {{content}} View Title
 Template Image
 Template Content
 Template {{headline}} {{image}} {{align}} {{teaser}} {{body}} MODEL AND VIEW DON’T SPEAK THE SAME LANGUAGE Presenter FILTER RIGHT Say hello to the Presenter
  • 68. 68© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER {% extends 'card.twig' %} {% block body %} {% include 'title.twig' with {'headline': title} only %} {% include 'image.twig' with { 'image': image, 'align': 'right'} only %} {% include 'content.twig' with { 'teaser': content|truncate(35), 'body': content} only %} {% endblock %} A Basic Presenter
  • 69. 69© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER {% include 'title.twig' with {'headline': title} only %} Including the Title Presenter {{title}} {{headline}}
  • 70. 70© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER {% include 'image.twig' with { 'image': image, 'align': 'right'} only %} Including the Image Presenter {{title}} {{headline}} {{image}} {{image}} RIGHT {{align}}
  • 71. 71© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER Including the Content {% include 'content.twig' with { 'body': content, 'teaser': content|truncate(35)} only %} Presenter RIGHT {{title}} {{image}} {{headline}} {{image}} {{align}} {{teaser}}FILTER{{content}} {{body}}
  • 72. 72© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER {% extends 'card.twig' %} {% block body %} … {% endblock %} {# card.twig #} <div class="card"> {% block body %} {% endblock %} </div> Using Extends: Keeping the presenter pure
  • 73. 73© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER A Basic Presenter {% extends 'card.twig' %} {% block body %} {% include 'title.twig' with {'headline': title} only %} {% include 'image.twig' with { 'image': image, 'align': 'right'} only %} {% include 'content.twig' with { 'teaser': content|truncate(35), 'body': content} only %} {% endblock %}
  • 74. 74© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT MODEL VIEW PRESENTER Defining the Model: Creating an API { "type": "object", "properties": { "title": { "type": "string", }, "image": { "type": "string", }, "content": { "type": "string", "format": "html" } }, "required": ["title", "image", "content"] } Model {{title}} {{image}} {{content}}
  • 75. 75© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT • Prototype your entire design system in a static environment • JSON Schemas • Twig • Import your MVP into D7 with a single Drush command. • Creates a Paragraph bundle for each Model • Combine Paragraphs to make new content types • Render your clean Model through standard Twig templates INTRODUCING PATTERN BUILDER
  • 76. 76© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Come to room 291 right after this talk for a BOF/demo! drupal.org/project/patternbuilder github.com/patternbuilder INTRODUCING PATTERN BUILDER