Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
1© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MICAH GODBOLT
ROAD RUNNER RULESOR MORE WHAT YOU’D ...
© 2016 Phase2
2
MICAH GODBOLT
Frontend Architect
Author of Frontend Architecture for Design Systems
(fea.pub)
@micahgodbol...
© 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 GI...
11© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The organization of sounds
PHONOLOGY
ONSET RIME
B...
12© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure and composition of words
MORPHOLOGY...
13© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure of sentences
SYNTAX
“THIS FLOWER LO...
© 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.C...
19© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTTPS://WWW.REDHAT.COMHTTP://WWW.MACYS.COM/
Commu...
20© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITS
Dialects
• Word Len...
21© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITS
Jargon
• Price Qual...
22© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
THEY BOTH SHARE COMMON TRAITS
Slang
• Carousel Na...
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
•...
25© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure and composition of “words”
“MORPHOL...
26© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“MORPHOLOGY” OF VISUAL LANGUAGE
The structure and...
27© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
The structure of sentences
“SYNTAX” OF VISUAL LAN...
28© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
“SYNTAX” OF VISUAL LANGUAGE
HTTP://BRADFROST.COM/...
© 2016 Phase2
29
LINGUISTICS: A SET OF STRUCTURAL RULES
GOVERNING THE COMPOSITION OF CLAUSES, PHRASES,
AND WORDS IN ANY GI...
© 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...
33© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Methodologies
• SMACSS (Scaleable Modular Archite...
34© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
<div class="toggle toggle--simple">
<div class="t...
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
.bl...
37© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
<section class="blog-feed">
<h2 class="headline">...
38© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Rules of Thumb
• Flat CSS Selectors
.about-...
39© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Rules of Thumb
• Flat CSS Selectors
.about-...
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
HTTP...
42© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
RULES
Asset Guidelines
• Photography dos and don’...
43© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Custom Rules
• Visible
• Agreed Upon
• Actionable...
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...
46© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
• Templates
ASSETS
HTTPS://GITHUB.COM/DRUPA...
47© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
HTML:
• API
ASSETS
HTTPS://RIZZO.LONELYPLANET.COM...
48© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Linked Assets:
• CSS
• JavaScript
• Fonts
• Image...
49© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
ASSETS
Build Assets:
• Sass
• JavaScript Modules
...
50© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEM
Style Guides
• KSS
• L...
51© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEM
Pattern Libraries:
• F...
52© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
DELIVERING A DESIGN SYSTEM
Roll Your Own
• Lighte...
© 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 Ha...
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)
<h...
63© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Solved by D8
DIRTY DATA MODELS
Model
{{title}}
{{...
64© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
TYRANNY OF THE MODEL VIEW PARADIGM
Model
{{title}...
65© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Enter Atomic Design
TYRANNY OF THE MODEL VIEW PAR...
66© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Model
{{title}}
{{image}}
{{content}}
View
Title
...
67© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Model
{{title}}
{{image}}
{{content}}
View
Title
...
68© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% extends 'card.twig' %}
{%...
69© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% include 'title.twig' with...
70© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% include 'image.twig' with...
71© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
Including the Content
{% inc...
72© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
{% extends 'card.twig' %}
{%...
73© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
A Basic Presenter
{% extends...
74© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
MODEL VIEW PRESENTER
Defining the Model: Creating...
75© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
• Prototype your entire design system in a static...
76© 2016 Phase2
ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
Come to room 291 right after this talk for a BOF/...
77
SoHowWasIt?-TellUsWhatYouThink
Evaluate this session -
Thanks!
Prochain SlideShare
Chargement dans…5
×

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

352 vues

Publié le

Watch the full video here: https://vimeo.com/166818891
DrupalCon New Orleans - May 11, 2016
Micah Godbolt

Wouldn’t it be great if we could spend less time trying to style the markup we’ve been handed, and more time creating a system of smart, reusable design components?

Well, we’re in luck. With the increased popularity of pattern libraries and the Twig powered flexibility we’ll be seeing in Drupal 8, we finally have the tools to create and deploy our own design systems.

But what is a design system, and how do we create them? What rules should it follow? How do I get my team on board?

In this talk I will be pulling wisdom and insight from my past two years of creating a design system for Redhat.com. I will explain what we call our “Road Runner Rules”, which influence every piece of code that we write.

It doesn’t matter if you are a designer who wants to learn how to turn your visual language into a design system, or a developer who wants to create more modular components, you’ll want to sit in on this session and learn from the successes and failures of a large scale Drupal design system.

Publié dans : Technologie
  • Soyez le premier à commenter

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

  1. 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. 2. © 2016 Phase2 2 MICAH GODBOLT Frontend Architect Author of Frontend Architecture for Design Systems (fea.pub) @micahgodbolt micah.codes
  3. 3. © 2016 Phase2 3 ROAD RUNNER RULES
  4. 4. © 2016 Phase2 4 ROAD RUNNER RULES Or More What You’d Call 
 Guidelines 
 of a Design System
  5. 5. 5
  6. 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. 7
  8. 8. © 2016 Phase2 8 RHYS: 2 YEARS OLD “Flower?” “Flower!” “Flower”
  9. 9. © 2016 Phase2 9 LINGUISTICS
  10. 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. 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. 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. 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. 14. © 2016 Phase2 14 WHAT DOES LINGUISTICS HAVE TO DO WITH DESIGN SYSTEMS?
  15. 15. © 2016 Phase2 15 WHAT IF WE DID A SCIENTIFIC STUDY 
 OF A VISUAL LANGUAGE
  16. 16. © 2016 Phase2 16 A SYSTEM OF COMMUNICATION USING VISUAL ELEMENTS WIKIPEDIA.ORG/WIKI/VISUAL_LANGUAGE
  17. 17. © 2016 Phase2 17 A SHARED VOCABULARY FOR DESIGN WWW.IBM.COM/DESIGN/LANGUAGE
  18. 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. 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. 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. 21© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT THEY BOTH SHARE COMMON TRAITS Jargon • Price Quality Matrix
  22. 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. 23© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT BOTH CAN BE BROKEN DOWN INTO SMALLER UNITS
  24. 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. 25© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT The structure and composition of “words” “MORPHOLOGY” OF VISUAL LANGUAGE
  26. 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. 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. 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. 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
  30. 30. © 2016 Phase2 30 DESIGN SYSTEMS
  31. 31. 31© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT
  32. 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. 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. 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. 35© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Rules of Thumb
  36. 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. 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. 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. 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. 40© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT RULES Asset Guidelines
  41. 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. 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. 43© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Custom Rules • Visible • Agreed Upon • Actionable RULES
  44. 44. 44© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTML: ASSETS
  45. 45. 45© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT HTML: • Raw Markup ASSETS HTTP://GETBOOTSTRAP.COM/COMPONENTS/
  46. 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. 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. 48© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Linked Assets: • CSS • JavaScript • Fonts • Images/SVGs ASSETS
  49. 49. 49© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT ASSETS Build Assets: • Sass • JavaScript Modules • Task Runners
  50. 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. 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. 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. 53. © 2016 Phase2 53 DESIGN SYSTEMS A Design System is a set of rules and assets…
  54. 54. © 2016 Phase2 54 DESIGN SYSTEMS …define how to express everything a visual language needs to say
  55. 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. 56
  57. 57. 57
  58. 58. 58HTTPS://TWITTER.COM/SOPHSHEPHERD/STATUS/725075564445483012 DESIGN SYSTEMS ARE THE FUTURE OF THE WEB
  59. 59. 59
  60. 60. © 2016 Phase2 60 HOW DO WE GET OUR DESIGN SYSTEM INTO DRUPAL?
  61. 61. © 2016 Phase2 61 HOW DO WE GET OUR DESIGN SYSTEM INTO DRUPAL? Why haven’t we already done this?
  62. 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. 63© 2016 Phase2 ROAD RUNNER RULES BIT.LY/ROAD-RUNNER-RULES @MICAHGODBOLT Solved by D8 DIRTY DATA MODELS Model {{title}} {{image}} {{content}}
  64. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 77. 77 SoHowWasIt?-TellUsWhatYouThink Evaluate this session - Thanks!

×