Road Runner Rules Slides 0

ROAD RUNNER RULES
OR MORE WHAT YOUD CALL GUIDELINES OF A DESIGN SYSTEM
MICAH GODBOLT
ROAD RUNNER RULES

2016 Phase2
BIT.LY/ROAD-RUNNER-RULES
@MICAHGODBOLT
MICAH GODBOLT
Frontend Architect
Author of Frontend Architecture for Design Systems
(fea.pub)
@micahgodbolt
micah.codes
2016 Phase2
ROAD RUNNER RULES
2016 Phase2
ROAD RUNNER RULES

Or More What Youd Call
Guidelines
of a Design System
2016 Phase2
EMERY: 4 YEARS OLD

Daddy, can I have a flower?
I want a flower, now!
This flower looks beautiful.
2016 Phase2
RHYS: 2 YEARS OLD

Flower?
Flower!
Flower
2016 Phase2
LINGUISTICS
2016 Phase2
LINGUISTICS: A SET OF STRUCTURAL RULES

GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
2016 Phase2
10
PHONOLOGY
The organization of sounds
ONSET
B
eau
ROAD RUNNER RULES

2016 Phase2
RIME
@MICAHGODBOLT
11
MORPHOLOGY
The structure and composition of words
ADJECTIVE
N
BEAUTY
ROAD RUNNER RULES
2016 Phase2
FUL
@MICAHGODBOLT
12
SYNTAX
The structure of sentences
Sentence
Noun Phrase
Article
Noun
Verb Phrase
Verb
Adjective
THIS FLOWER LOOKS BEAUTIFUL

ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
13
WHAT DOES LINGUISTICS HAVE TO

DO WITH DESIGN SYSTEMS?
2016 Phase2
14
WHAT IF WE DID A SCIENTIFIC STUDY

OF A VISUAL LANGUAGE
2016 Phase2
15
A SYSTEM OF COMMUNICATION
USING VISUAL ELEMENTS
WIKIPEDIA.ORG/WIKI/VISUAL_LANGUAGE
2016 Phase2
16
A SHARED VOCABULARY
FOR DESIGN
WWW.IBM.COM/DESIGN/LANGUAGE
2016 Phase2
17
THEY BOTH HAVE A COMMON GOAL

Communicating Ideas
Trust
Value
Reliability
Authority
HTTP://WWW.INTEL.COM/
HTTPS://WWW.HILLARYCLINTON.COM/
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
18
THEY BOTH HAVE A COMMON GOAL

Communicating Intention
Click here
Read this first
Use this for navigation
Go here for help
HTTP://WWW.MACYS.COM/
HTTPS://WWW.REDHAT.COM
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
19
THEY BOTH SHARE COMMON TRAITS

Dialects
Word Length
Information Density
Power Colors
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
20

Jargon
Price Quality Matrix
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
21

Slang
Carousel Navigation
Hamburger Menu
HTTP://KENWHEELER.GITHUB.IO/SLICK/
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
22
BOTH CAN BE BROKEN DOWN INTO SMALLER UNITS
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
23
PHONOLOGY OF VISUAL LANGUAGE

The organization of sounds
Layout
Balance
Palettes
Proportion
Tints/Shades
Typography
Contrast/Accessibility
Weight
Animation
Scale
Types
Iconography
Interface
Ornamental
ROAD RUNNER RULES
2016 Phase2
Color
Speed
Appropriate Uses
HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/COLOR-IN-DESIGN-SYSTEMS-A1C80F65FA3
HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM/RESOURCES/ICONS/
HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/LAYOUT HTTP://WWW.GOOGLE.COM/DESIGN/SPEC/ANIMATION/RESPONSIVE-INTERACTION.HTML
@MICAHGODBOLT
24
MORPHOLOGY OF VISUAL LANGUAGE

ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
25
MORPHOLOGY OF VISUAL LANGUAGE

ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
26
SYNTAX OF VISUAL LANGUAGE

The structure of sentences
PARKS R US
FUN
ROAD RUNNER RULES

2016 Phase2
ABOUT | CONTACT
LAUGHS
UNDERDOGS
FIND A PARK
@MICAHGODBOLT
27
SYNTAX OF VISUAL LANGUAGE
HTTP://BRADFROST.COM/WP-CONTENT/UPLOADS/2015/12/ATOMIC-GIF-3.GIF
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
28
N
G
I
S
E
D
M
E
T
SYS
LINGUISTICS: A SET OF STRUCTURAL RULES

GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GIVEN NATURAL LANGUAGE.
VISUAL
2016 Phase2
29
DESIGN SYSTEMS
2016 Phase2
30
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
31
RULES
Methodologies
OOCSS (Object Oriented CSS) <div class="toggle simple">
Two Main Principles
1. Separation of
structure and skin
2. Separation of
container and content
ROAD RUNNER RULES

2016 Phase2
<div class="toggle-control open">

<h1 class=toggle-title">
Title 1
</h1>
</div>
<div class="toggle-details open>
...
</div>
...
</div>
@MICAHGODBOLT
32
RULES
Methodologies
SMACSS (Scaleable Modular Architecture for CSS)
Folder Structure
1.
2.
3.
4.
5.
Base
Layout
Module
State
Theme
ROAD RUNNER RULES

2016 Phase2
<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>
@MICAHGODBOLT
33
RULES
Methodologies
BEM (Block Element Modifier)
<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>
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
34
RULES
Rules of Thumb
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
35
RULES
Rules of Thumb
Single Source of Truth
<section class="blog-feed">
<h1>Our Blog</h1>
<article>
<h1 class="title">
A Blog Title
</h1>
...
</article>
</section>
ROAD RUNNER RULES
2016 Phase2
.blog-feed h1 {
color: red;
font-size: 32px;
}
article .title {
font-size: 26px;
line-height: 1.2;
}
@MICAHGODBOLT
36
RULES
Rules of Thumb
Single Responsibility Principle
<section class="blog-feed">
<h2 class="headline"></h2>
</section>
<footer>
<h2 class="headline"></h2>
</footer>
ROAD RUNNER RULES
2016 Phase2
.headline {
color: red;
font-size: 28px;
}
.blog-feed .headline {
text-transform: uppercase;
}
@MICAHGODBOLT
37
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;
}
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
38
RULES
Rules of Thumb
Flat CSS Selectors
.about-contact__title {
color: red;
}
.about-contact__title--active {
color: white;
}
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
39
RULES
Asset Guidelines
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
40
RULES
Asset Guidelines
How to create icons
HTTPS://WWW.IBM.COM/DESIGN/LANGUAGE/FRAMEWORK/VISUAL/ICONOGRAPHY
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
41
RULES
Asset Guidelines
Photography dos and donts
HTTPS://DESIGN.ATLASSIAN.COM/BRAND/PHOTOGRAPHY
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
42
RULES
Custom Rules
Visible
Agreed Upon
Actionable
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
43
ASSETS
HTML:
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
44
ASSETS
HTML:
Raw Markup
HTTP://GETBOOTSTRAP.COM/COMPONENTS/
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
45
ASSETS
HTML:
Templates
<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>
HTTPS://GITHUB.COM/DRUPAL/DRUPAL
COMMENT.HTML.TWIG
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
46
ASSETS
HTML:
API
HTTPS://RIZZO.LONELYPLANET.COM/STYLEGUIDE/UI-COMPONENTS/CARDS
ROAD RUNNER RULES
2016 Phase2
@MICAHGODBOLT
47
ASSETS
Linked Assets:
CSS
JavaScript
Fonts
Images/SVGs
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
48
ASSETS
Build Assets:
Sass
JavaScript Modules
Task Runners
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
49
DELIVERING A DESIGN SYSTEM

Style Guides
KSS
Living Style Guide
Hologram
HTTPS://TRULIA.GITHUB.IO/HOLOGRAM/
HTTP://WARPSPIRE.COM/KSS/
HTTPS://LIVINGSTYLEGUIDE.ORG/
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
50

Pattern Libraries:
Fractal
Pattern Lab
HTTP://FRCTL.GITHUB.IO/
HTTP://PATTERNLAB.IO/
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
51

Roll Your Own
Lightening Design System
Rizzo (Lonely Planet)
Pattern Kit
HTTPS://GITHUB.COM/PATTERNBUILDER/PATTERN-KIT
HTTPS://WWW.LIGHTNINGDESIGNSYSTEM.COM
HTTPS://RIZZO.LONELYPLANET.COM
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
52
DESIGN SYSTEMS
A Design System is a set of rules and assets
2016 Phase2
53
DESIGN SYSTEMS
define how to express everything a visual language needs
to say
2016 Phase2
54
VIDEOS
CUSTOMERS
PARTNERS
Country specific - NEW [detail] 2
OPEN SOURCE COMMUNITIES
Technologies
Services & support
Success stories
About Red Hat
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.
FOCUS ON
[Name of country in native language]
Annotations
1
LOCAL CONTACTS
NEWS & EVENTS
POPULAR LINKS
RESOURCES
VIDEO TITLE
VIDEO TITLE
VIDEO TITLE
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.
EXPLORE MORE VIDEOS
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)
LOCAL
CONTACTS
This type of panel could accomodate
a headline,
but it should
only be used if all cards have a common theme.
Loreum ipsum dolor sit amet.
Loreum ipsum dolor sit amet.
Accumsan ut secundum euismod

opes nostrud secundum odio
nostrud regula ad vulputate.
Accumsan ut secundum euismod

opes nostrud secundum odio
nostrud regula ad vulputate.
SOCIAL
CALL TO ACTION
NAME OF LOCATION
NAME OF LOCATION
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.
For each of these quick links, whenever

possible take user to a pre-filtered list of
partners/training locations/etc for that
country.
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.
Red Hat [Location]

Red Hat HQ
Red Hat [Location]
CONTACT SALES
CONTACT SALES
Red Hat HQ
Red Hat [Location]
email@redhat.com
email@redhat.com
SECONDARY CONTACT
SECONDARY CONTACT
email@redhat.com
email@redhat.com
99 11 222 33 44
99 11 222 33 44
99 11 222 33 44
99 11 222 33 44
Red Hat HQ
Red Hat [Location]
Content in this promo band supplied by HQ
Red Hat HQ
Promo
NAME OF LOCATION
NAME OF LOCATION
CONTACT SALES
CONTACT SALES
email@redhat.com
email@redhat.com
SECONDARY CONTACT
SECONDARY CONTACT
email@redhat.com
email@redhat.com
Headline for featured topic

4
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.
99 11 222 33 44
Country marketing team may use this panel
for
whatever messaging they require. It may 99be11 a222 33 44
single or two column layout.
99 11 222 33 44
99 11 222 33 44
Headline is optional.
POPULAR LINKS
CALL TO ACTION
EVENTS
NEWS
Red Hat in the press
Products
Services
Red Hat Enterprise Linux
Your Partners
JBoss Middleware
Local Training
Cloud computing
Certification sites
FEATURED RESOURCES
9
Video caption
MORE NEWS
RED HAT CUSTOMERS
6
6
Should include the filter set to the region's

country.
Data sheet
Case study
Reference architecture
Name of the resource.

Example: Managing Hybrid
Cloud: Diversified Workloads
and Unified Cloud
Infrastructure Administration

and Unified Cloud

and Unified Cloud
Red Hat customers based or operating

heavily in the selected country.
READ MORE
READ MORE
10
MORE RESOURCES
CALL TO ACTION
READ MORE
10
VIDEOS
Data Sheets
VIDEO TITLE
VIDEO TITLE
Case Studies
Reference
Architectures
Brochures
Infographics
INFO FOR
FEATURED
TOOLS
PURCHASE
COMMUNICATE
ABOUT
Executives
RHEL
My Account
Buy online
Contact us
News
Developers
Red Hat Storage

Server 2.1
Customer Portal
Contact sales
Feedback
Investors
Resources
Find a reseller
Social
Jobs @ Red Hat
Partners
VIDEO TITLE
Whitepapers
JBoss Fuse
Serviceworks
Hardware Catalog
Cool Stu Store
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.
55
56
57
DESIGN SYSTEMS ARE THE FUTURE OF THE WEB
HTTPS://TWITTER.COM/SOPHSHEPHERD/STATUS/725075564445483012
58
59
HOW DO WE GET OUR DESIGN

SYSTEM INTO DRUPAL?
2016 Phase2
60
HOW DO WE GET OUR DESIGN

SYSTEM INTO DRUPAL?
Why havent we already done this?
2016 Phase2
61
DIRTY DATA MODELS

$title
Model
function(title)
<h1>Title</h1>
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
62
DIRTY DATA MODELS

Solved by D8
{{title}}
Model
{{image}}
{{content}}
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
63
TYRANNY OF THE MODEL VIEW PARADIGM

{{title}}
Model
{{image}}
View
{{content}}
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
64
TYRANNY OF THE MODEL VIEW PARADIGM

Enter Atomic Design
{{title}}
Model
{{image}}
{{content}}
ROAD RUNNER RULES

2016 Phase2
Title
Template
View
Image
Template
Content
Template
@MICAHGODBOLT
65
MODEL AND VIEW DONT SPEAK THE SAME LANGUAGE

{{title}}
{{headline}}
Title
Template
{{image}}
Model
{{image}}
{{align}}
View
Image
Template
{{teaser}}
{{body}}
{{content}}
ROAD RUNNER RULES

2016 Phase2
Content
Template
@MICAHGODBOLT
66
MODEL AND VIEW DONT SPEAK THE SAME LANGUAGE

Say hello to the Presenter
{{title}}
{{headline}}
Title
Template
{{image}}
Model
Presenter
{{image}}
RIGHT
FILTER
{{align}}
{{teaser}}
{{body}}
{{content}}
ROAD RUNNER RULES

2016 Phase2
View
Image
Template
Content
Template
@MICAHGODBOLT
67
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 %}
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
68

Including the Title
{{headline}}
{{title}}
Presenter
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
69

Including the Image
{{headline}}
{{title}}
{{image}}
{{image}}
Presenter
RIGHT
{{align}}

'image': image,
'align': 'right'}
only %}
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
70

Including the Content
{{headline}}
{{title}}
{{image}}
{{content}}
{{image}}
Presenter
RIGHT
FILTER
{{align}}
{{teaser}}
{{body}}

'body': content,
'teaser': content|truncate(35)}
only %}
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
71

Using Extends: Keeping the presenter pure
{% block body %}
{% endblock %}
ROAD RUNNER RULES

2016 Phase2
{# card.twig #}
<div class="card">
{% block body %}
{% endblock %}
</div>
@MICAHGODBOLT
72

A Basic Presenter
{% block body %}
'image': image,
'align': 'right'}
only %}
'teaser': content|truncate(35),
'body': content}
only %}
{% endblock %}
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
73

Defining the Model: Creating an API
{
"type": "object",
"properties": {
"title": {
"type": "string",
},
"image": {
"type": "string",
},
"content": {
"type": "string",
"format": "html"
}
},
"required": ["title", "image", "content"]
ROAD RUNNER RULES

2016 Phase2
{{title}}
Model
{{image}}
{{content}}
@MICAHGODBOLT
74
INTRODUCING PATTERN BUILDER
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
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
75
INTRODUCING PATTERN BUILDER

Come to room 291 right after this talk for a BOF/demo!
drupal.org/project/patternbuilder
github.com/patternbuilder
ROAD RUNNER RULES

2016 Phase2
@MICAHGODBOLT
76
So How Was It? - Tell Us What You Think

Evaluate this session -
Thanks!
77

Road Runner Rules Slides 0

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Road Runner Rules Slides 0

Загружено:

Авторское право:

Доступные форматы

ROAD RUNNER RULES

OR MORE WHAT YOUD CALL GUIDELINES OF A DESIGN SYSTEM