Living Design Systems

Talk given at ISO Marketing and Communication Networking Event 2016 in Geneva

1. LIVING
 DESIGN SYSTEMS ISO COMMUNICATION AND MARKETING NETWORKING EVENT - GENEVA 2016 flickr.com/photos/rodneycampbell/16779178713
2. CREDITS Most of what follows was inspired by the fabulous work of Jina Anne on #designsystems - follow her on @jina or jina.me
3. HELLO!
4. @ROESSLI DAVID ROESSLI
5. WEB DESIGNER WEB DEVELOPER WEBMASTER CGI PROGRAMMER FRONT-END DEVELOPER BACK TO FRONT END DEV USER INTERFACE DESIGNER WEB STANDARDS EVANGELIST INFORMATION ARCHITECT CONTENT MANAGER INTERACTION DESIGNER USER EXPERIENCE DESIGNER WEB CONSULTANT PLEASE USE CSS GURU THAT WEB GUY DESIGN IN THE BROWSER NOW USER EXPERIENCE DESIGNER
6. I MAKE WEBSITES AT THE END OF THE DAY…
7. LIVING
 DESIGN SYSTEMS flickr.com/photos/rodneycampbell/16779178713
8. LIVING STYLE GUIDES STYLE GUIDES AND PATTERN LIBRARIES IEC Webstore Pattern Library
9. LIVING STYLE GUIDES THEY ARE APPEARING EVERYWHERE lightningdesignsystem.com style.codeforamerica.org harmony.intuit.com solid.buzzfeed.com ibm.com/design/language gov.uk/service-manual
10. LIVING STYLE GUIDES MAKE SURE TO CHECK OUT STYLEGUIDES.IO
11. LIVING STYLE GUIDES STYLEGUIDES.IO
12. UNLESS IT’S PART OF YOUR BUILD, YOUR STYLEGUIDE IS JUST SOME MORE DOCUMENTATION TO MAINTAIN Robert Haritonov #FRONTEERS15
13. NOT COHESIVE website investors shop mobile app
14. WHAT ABOUT GOOGLE?
15. MATERIAL DESIGN material.google.com
16. MATERIAL DESIGN LITE getmdl.io
17. PROVIDING A COHESIVE USER EXPERIENCE IN AN ENTERPRISE ORGANISATION CAN BE TRICKY
18. ENTERPRISE ORGANISATIONS CAN HAVE YEARS OF LEGACY LOTS OF EMPLOYEES LOTS OF PRODUCTS LOTS OF PLATFORMS AND DEVICES LOTS OF PEOPLE code, culture, hierarchy, technology product / sale / marketing / engineers managers, designers, developers, programmers systems, websites and apps, events, publications back and front facing, client and server, fixed and mobile using them, referring to them
19. WHAT COLOUR IS THE BORDER? WHAT COLOUR IS THE BORDER? WHERE CAN I FIND THE ICONS? WHAT COLOUR IS THE DISABLED STATE?
20. REDLINES (*) No, not your redlines… *
21. REDLINES EVER USED THESES?
22. REDLINES REDLINING DOESN'T SCALE TERRIBLY WELL
23. REMEMBER TO KEEP YOUR STYLEGUIDE CURRENT AND USEFUL
24. REDLINES STOP DESIGNING PAGES START
 DESIGNING
 SYSTEMS
25. SO WHAT IS A DESIGN SYSTEM? flickr.com/photos/rodneycampbell/16779178713 SO WHAT IS A DESIGN SYSTEM?
26. A DESIGN SYSTEM CAN BE AN HTML/CSS PLAYBOOK ux.mailchimp.com/patterns ‣ For a 1 product team ‣ To build a consistent design
27. A DESIGN SYSTEM CAN BE A DESIGN SPEC, ASSET LIBRARY harmony.intuit.com ‣ Supporting HTML/CSS ‣ For a 10 product teams ‣ To share a consistent design
28. A DESIGN SYSTEM CAN BE COLLABORATIVE ACTIVITY design.google.com ‣ A design spec and asset library ‣ Supporting HTML/CSS ‣ Over 100+ products ‣ To spread a cohesive design
29. A DESIGN SYSTEM CAN BE A TOOLKIT foundation.zurb.com ‣ Often HTML/CSS ‣ Customized by independant teams ‣ On an infinity of products ‣ To produce effective design efficiently getbootstrap.com
30. “ STYLE GUIDES, NOW DESIGN SYSTEMS.
 IS IT JUST A CHANGE IN THE MARKETING? OR ARE THESE THINGS ACTUALLY DIFFERENT FROM EACH OTHER? ” Jared Spool interviewing Nathan Curtis on “UIE Brain Sparks” (#16)
 https://www.uie.com/brainsparks/2015/09/09/nathan-curtis-building-scalable-design-systems-and-style-guides/
31. ABOUT A YEAR AGO NATHAN CURTIS TWEETED… twitter.com/nathanacurtis/status/656829204235972608
32. A SCALABLE FRAMEWORK OF DECISIONS AND TEAM BEHAVIOURS ACROSS A PRODUCT PORTFOLIO TO CONVERGE ON A COHESIVE EXPERIENCE Nathan Curtis A DESIGN SYSTEM IS #NOVAUX15
33. A DESIGN SYSTEM IS A SCALABLE FRAMEWORK OF DECISIONS AND TEAM BEHAVIOURS ACROSS A PRODUCT PORTFOLIO TO CONVERGE ON A COHESIVE EXPERIENCE Nathan Curtis #NOVAUX15
34. WHAT IS A DESIGN SYSTEM? A SCALABLE FRAMEWORK OF DECISIONS AND TEAM BEHAVIOURS ACROSS A PRODUCT PORTFOLIO TO CONVERGE ON A COHESIVE EXPERIENCE parts DECISIONS Nathan Curtis #NOVAUX15
35. WHAT IS A DESIGN SYSTEM? A SCALABLE FRAMEWORK OF DECISIONS AND TEAM BEHAVIOURS ACROSS A PRODUCT PORTFOLIO TO CONVERGE ON A COHESIVE EXPERIENCE products PRODUCT PORTFOLIO parts DECISIONS Nathan Curtis #NOVAUX15
36. WHAT IS A DESIGN SYSTEM? A SCALABLE FRAMEWORK OF DECISIONS AND TEAM BEHAVIOURS ACROSS A PRODUCT PORTFOLIO TO CONVERGE ON A COHESIVE EXPERIENCE parts DECISIONS people TEAM products PRODUCT PORTFOLIO Nathan Curtis #NOVAUX15
37. WHAT IS A DESIGN SYSTEM? A SCALABLE FRAMEWORK OF DECISIONS AND TEAM BEHAVIOURS ACROSS A PRODUCT PORTFOLIO TO CONVERGE ON A COHESIVE EXPERIENCE parts DECISIONS practices BEHAVIOURS products PRODUCT PORTFOLIO Nathan Curtis #NOVAUX15 people TEAM
38. WHAT ARE THE PARTS? VISUAL LANGUAGE Aa
39. WHAT ARE THE PARTS? VISUAL LANGUAGE Aa Typography Colour Iconography
40. WHAT ARE THE PARTS? WHILE THE CORE PARTS OF THE VISUAL LANGUAGE ARE Aa Typography Colour Iconography THERE IS MUCH MORE Space  ? Motion Imagery Logo Writing tone and more
41. WHAT ARE THE PARTS? UI ELEMENTS
42. WHAT ARE THE PARTS? UI COMPONENTS
43. WHAT ARE THE PARTS? PAGE TEMPLATES
44. WHAT ARE THE PARTS? LAYOUT SYSTEMS
45. WHAT ARE THE PARTS? INTERACTION PATTERNS
46. WHAT ARE THE PARTS? EDITORIAL GUIDELINES log in, log out Verbs (e.g. “Log into your Redgate ID”). Avoid other forms such as log on/off, sign in/out, sign off. login Noun (e.g. “I've forgotten my login details”). logos Make sure you use the right Redgate logo. The Redgate logo uses the curvature font. This font shouldn't be used elswhere under any circumstances.
47. WHAT ARE THE PARTS? EDITORIAL GUIDELINES log in, log out Verbs (e.g. “Log into your Redgate ID”). Avoid other forms such as log on/off, sign in/out, sign off. login Noun (e.g. “I've forgotten my login details”). logos Make sure you use the right Redgate logo. The Redgate logo uses the curvature font. This font shouldn't be used elswhere under any circumstances.
48. WHAT ARE THE PARTS? CODE ALONGSIDE EXAMPLE
49. DON’T FORGET TO DOCUMENT HOW DO YOU USE COLOUR VISUAL MESSAGING VISUAL DIFFERENTIATION VISUAL HIERARCHY ACCESSIBILITY L10N AND I18N to display messages and states to differentiate different objects, classes or contexts for navigation, information architecture show what works or fails and why explain what colours mean in different cultures, and their symbolics are
50. DON’T FORGET TO DOCUMENT HOW DO YOU USE COLOUR ACCESSIBILITY Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. PASS PASS FAIL FAIL
51. DON’T FORGET TO DOCUMENT HOW DO YOU USE COLOUR OF THE MEANING OF RED ‑ ‐
52. LOCALISATION AND INTERNATIONALISATION TEXT COLUMN WIDTH USE OF IMAGERY LINE HEIGHT CAPITALISATION not all languages occupy the same space on a layout take into account the culture when deciding on which imagery to use Asian script are usually taller English capitalises every word of a label, while French doesn’t
53. WHAT ARE THE PARTS? AND MORE… RESEARCH / USERS personas
 mental models
 clients PRACTICES accessibility
 performance
 SEO DESIGN TEMPLATES branding
 colour swatches
 layouts GOVERNANCE reviews
 audits PROCESS requests
 contributing UTILITIES converting
 helpers
54. GREAT DESIGN SYSTEMS ARE USABLE BY YOUR ENTIRE TEAM Mark Otto
55. PEOPLE TEAM MODELS medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
56. PEOPLE TEAM MODELS #1 SOLITARY #2 CENTRALISED #3 FEDERATED medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 by Nathan Curtis
57. HOW DO YOU MAINTAIN CONSISTENCY ACROSS ALL THE ORGANISATION? HOW DO YOU KEEP YOUR DESIGNS SYSTEM AGNOSTIC?
58. SALESFORCE LIGHTNING DESIGN SYSTEM lightningdesignsystem.com
59. SALESFORCE USING DESIGN TOKENS Default borderRadiusMedium fontSizeMedium
 fontFamilyRegular
 lineHeightButton spacingMedium defined by lineHeightButton Stop using hard coded values in your specifications
60. STORE YOUR TOKENS IN A JSON FILE SALESFORCE Design Tokens JSON file Sass
 Less
 Stylus
 JSON (iOS)
 XML (Android)
 Style Guide
 Colour Swatches etc. CONVERT YOUR TOKENS IN YOUR BUILD
61. SALESFORCE CONVERT YOUR TOKENS IN YOUR BUILD Design Tokens JSON file CSS : hex
 iOS : rgba
 Android : 8-digit hex
62. SALESFORCE CONVERT YOUR TOKENS IN YOUR BUILD Design Tokens JSON file CSS : rem/em/px
 iOS : pt
 Android : sp/dip
63. TAKE AWAY A DESIGN SYSTEM IS A PRODUCT PLAN IT WITH
 A ROADMAP HAVE A CLEAR VISION TO ALIGN ALL THE EFFORTS DO USER RESEARCH BRING EVERYBODY AROUND A
 SINGLE GOAL MAKE SURE YOU HAVE A TOTAL SUPPORT FROM THE TOP SINGLE SOURCE OF TRUTH SMALL TEAM MADE OF PASSIONATE LEADERS SERVES THE WHOLE ECOSYSTEM
64. TAKE AWAY A DESIGN SYSTEM IS A PRODUCT PLAN IT WITH
 A ROADMAP HAVE A CLEAR VISION TO ALIGN ALL THE EFFORTS DO USER RESEARCH BRING EVERYBODY AROUND A
 SINGLE GOAL MAKE SURE YOU HAVE A TOTAL SUPPORT FROM THE TOP SINGLE SOURCE OF TRUTH SMALL TEAM MADE OF PASSIONATE LEADERS SERVES THE WHOLE ECOSYSTEM
65. THANKS! @roessli
 cybmed.com about.me/davidroessli