Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Let's Work Together

955 views

Published on

Brad Frost's slides from his Atomic Design presentation in NYC.

Published in: Design
  • Be the first to comment

Let's Work Together

  1. 1. LET'S WORK TOGETHER!@brad_frost
  2. 2. OUR WORK IS DONE WITH OTHER PEOPLE FOR OTHER PEOPLE
  3. 3. SLACK GIF
  4. 4. HOW DO WE WORK WITH 
 EACH OTHER?
  5. 5. HOW DO WE TALK TO 
 EACH OTHER?
  6. 6. HOW DO WE COORDINATE WITH 
 EACH OTHER?
  7. 7. HOW DO WE COLLABORATE WITH 
 EACH OTHER?
  8. 8. SPACES VS TABS SKETCH VS PHOTOSHOP GIF VS GIF GRUNT VS GULP NPM VS YARN FILE STRUCTURE BEM VS SMACSS FLAT VS SKEUOMORPHIC ZEPLIN VS INVISION REACT VS VUE PROGRESSIVE ENHANCEMENT VS SINGLE PAGE APPS ANGULAR VS EMBER NATIVE VS WEB SVG VS ICON FONTS WORDPRESS VS DRUPAL PHP VS RUBY VS NODE VS PYTHON SASS VS LESS
  9. 9. complete chaos stifling rigidity
  10. 10. PRINCIPLES AND GUIDELINES
  11. 11. 
 discipline team teams department company
  12. 12. 
 discipline team teams department company
  13. 13. marketing sales engineering digital hr customer
 support r&d accounting management administration
  14. 14. marketing sales engineering digital hr customer
 support r&d accounting management administration
  15. 15. marketing sales engineering digital hr customer
 support r&d accounting management administration
  16. 16. 
 principles & guidelines marketing sales engineering digital hr customer
 support r&d accounting management administration
  17. 17. MISSION
  18. 18. https://www.charitywater.org/about/mission.php
  19. 19. COMPANY VALUES
  20. 20. ZAPPOS 10 CORE VALUES ๏ Deliver WOW Through Service ๏ Embrace and Drive Change ๏ Create Fun and A Little Weirdness ๏ Be Adventurous, Creative, and Open-Minded ๏ Pursue Growth and Learning ๏ Build Open and Honest Relationships With Communication ๏ Build a Positive Team and 
 Family Spirit ๏ Do More With Less ๏ Be Passionate and Determined ๏ Be Humble https://www.zapposinsights.com/about/core-values
  21. 21. CULTURE
  22. 22. –Chris Edmonds An organizational constitution specifies your team’s purpose, values and behaviors, strategies, and goals. 
 It creates “liberating rules” that help leaders and team members understand exactly how they are expected to treat each other and their customers. http://thecultureengine.com/
  23. 23. 
 discipline team teams department company
  24. 24. management public relations research digital social creative services analysis cmo vp assistants
  25. 25. management public relations research digital social creative services analysis cmo vp assistants
  26. 26. management public relations research digital social creative services analysis cmo vp assistants
  27. 27. 
 principles & guidelines management public relations research digital social creative services analysis cmo vp assistants
  28. 28. BRAND GUIDELINES
  29. 29. https://design.ubuntu.com/brand/
  30. 30. VOICE AND TONE GUIDELINES
  31. 31. voiceandtone.com
  32. 32. 
 discipline team teams department company
  33. 33. team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
  34. 34. team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
  35. 35. SPECIAL SNOWFLAKE SYNDROME
  36. 36. team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
  37. 37. 
 principles & guidelines team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
  38. 38. DESIGN SYSTEMS!
  39. 39. A DESIGN SYSTEM IS THE STORY 
 OF HOW YOUR ORGANIZATION DESIGNS AND BUILDS PRODUCTS
  40. 40. https://material.io/guidelines/
  41. 41. https://lightningdesignsystem.com/
  42. 42. http://carbondesignsystem.com/
  43. 43. 
 discipline team teams department company
  44. 44. backend content frontend ux visual manager frontend backend ux qa
  45. 45. backend content frontend ux visual manager frontend backend ux qa
  46. 46. backend content frontend ux visual manager frontend backend ux qa
  47. 47. 
 principles & guidelines backend content frontend ux visual manager frontend backend ux qa
  48. 48. 
 discipline team teams department company
  49. 49. frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
  50. 50. frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
  51. 51. frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
  52. 52. 
 principles & guidelines frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
  53. 53. CODE STYLE GUIDES
  54. 54. code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
  55. 55. code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
  56. 56. code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
  57. 57. code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
  58. 58. code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
  59. 59. https://github.com/styleguide
  60. 60. 
 discipline team teams department company design systems
  61. 61. BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & $$$$$ ๏ Faster production = roll out more features & iterations faster than ever ๏ Higher-quality production = teams can focus on higher-level tasks ๏ Shared vocabulary = more time collaborating & less time in meetings ๏ Easier to test = more responsive, performant, and accessible experiences ๏ Useful reference = an essential resource and hub for best practices ๏ Future-friendly foundation = modify, extend, & improve upon over time
  62. 62. MAKING DESIGN SYSTEMS HAPPEN
  63. 63. WHO'S MAKING THE DESIGN SYSTEM?
  64. 64. https://flic.kr/p/cHPcBJ
  65. 65. https://flic.kr/p/KdvF6Z
  66. 66. https://flic.kr/p/cHPcBJ DESIGN SYSTEM MAKERS ๏Have a birds-eye perspective of entire ecosystem ๏The ones responsible for maintaining the design system ๏Manage requests and approve changes ๏Work with users and business to make sure it’s addressing product needs ๏Need to establish a pattern-driven, cross-disciplinary workflow
  67. 67. https://flic.kr/p/KdvF6Z DESIGN SYSTEM USERS ๏Provide an on-the-ground perspective focused on specific applications ๏May also be makers, separate development teams, junior-level developers, partner agencies, external development shops, and/or other third-parties ๏Should coordinate with makers to make sure the system is addressing their needs ๏May be widely distributed and process may be extremely waterfall
  68. 68. DESIGN SYSTEM TEAM MAKEUP ๏Essentially a product team ๏UX designer(s) ๏Visual designer(s) ๏Frontend developer(s) ๏Product manager(s) ๏QA(s)
  69. 69. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 CENTRALIZED
  70. 70. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 FEDERATED
  71. 71. https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b CYCLICAL
  72. 72. The Design System informs our Product Design. Our Product Design informs the Design System. -Jina Anne https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b
  73. 73. design systemproduct product product product product product product product
  74. 74. RESEARCH & USER INTERVIEWS
  75. 75. "You can probably carbon date our UIs 
 based on the design."
  76. 76. "The main challenges are the existing thousands of lines of code, acquisitions, and existing suite of technologies that makes up a billion dollars a year. We'd like to not lose that billion dollars."
  77. 77. "There's a lot of institutional knowledge here locked up in people's heads. Slack channels are great, but it becomes a scavenger hunt to find information about how something's supposed to work."
  78. 78. "For a basic expand/collapse pattern, the devs spent 2 days going to different teams to find the code, then still had to rebuild it themselves."
  79. 79. USER INTERVIEWS ๏ Round up a diverse group of stakeholders,users,and other people who would impact/be impacted by a design system ๏ Talk about current workflow,pain points,hopes,fears, dreams,frustrations,and other things that can influence the success of the design project ๏ Latch onto poignant quotes and emerging themes ๏ Start shaping the story and key themes in preparation 
 for kickoff
  80. 80. KICKOFF WORKSHOP
  81. 81. PRIORITIES EXERCISE
  82. 82. ]
  83. 83. PRIORITIES WORKSHOP ๏ Discuss emerging themes from interviews and introduce potential principles and tactics ๏ Give each person 3 votes for principles they care most about ๏ Discuss principles.What won?What lost?Why? ๏ Give each person 3 votes for tactics/features they care most about. ๏ Goal is to align around a set of shared principles and priorities for the design system
  84. 84. DESIGN PRINCIPLES
  85. 85. PROCESS PRODUCT
  86. 86. DESIGN SYSTEM PROCESS PRINCIPLES ๏ Make the best thing the 
 easiest thing ๏ Design for “grab it quick” efficiency ๏ Design for contribution 
 and community ๏ Crowd-proof the markup ๏ Fit the workflow ๏ Just enough documentation ๏ Technology agnostic ๏ Embed the brand in the code ๏ Consistent, not homogenous ๏ Opinionated defaults ๏ Make people smarter just 
 by using it
  87. 87. DESIGN SYSTEM PRODUCT PRINCIPLES ๏ Just enough interface ๏ Strong and direct ๏ Speed is a feature ๏ Adaptable density ๏ Safety always ๏ No tricks or stunts ๏ Recycle, reduce, reuse
  88. 88. PREPARING TO CREATE
  89. 89. INTRADISCIPLINARY INTERDISCIPLINARY
  90. 90. https://blog.sketchapp.com/introducing-libraries-and-smooth-corners-in-sketch-47-2abc5dfc1fb3
  91. 91. https://www.figma.com/
  92. 92. https://www.invisionapp.com/studio
  93. 93. https://github.com/bradfrost/frontend-guidelines-questionnaire
  94. 94. INTRADISCIPLINARY INTERDISCIPLINARY
  95. 95. comp production
  96. 96. THERE IS NO SUBSTITUTE FOR HUMAN COMMUNICATION AND COLLABORATION
  97. 97. MINIMUM VIABLE ARTIFACTS
  98. 98. http://trentwalton.com/2011/07/14/content-choreography/
  99. 99. whiteboard sketch working product that tool you've spent 7 years mastering
  100. 100. >
  101. 101. https://airbnb.design/sketching-interfaces/
  102. 102. http://danmall.me/articles/designer-developer-workflow/
  103. 103. COLLABORATION AND COMMUNICATION OVER DELIVERABLES
  104. 104. CREATING
  105. 105. ATOMIC DESIGN
  106. 106. ENTER KEYWORD SEARCH THE SITE SEARCH
  107. 107. ENTER KEYWORD SEARCH THE SITE SEARCH
  108. 108. ABSTRACT CONCRETE
  109. 109. The painter, when at a distance from the easel, can assess and analyze the whole of the work from this vantage. He scrutinizes and listens, chooses the next stroke to make, then approaches the canvas to do it. Then, he steps back again to see what he’s done in relation to the whole. It is a dance of switching contexts, a pitter-patter pacing across the studio floor that produces a tight feedback loop between mark- making and mark-assessing. -Frank Chimero http://read.shapeofdesignbook.com/chapter01.html
  110. 110. SYSTEM PRODUCT
  111. 111. complete chaos stifling rigidity
  112. 112. 
 discipline team teams department company
  113. 113. humanity 
 discipline team teams department company
  114. 114. THANK YOU!@brad_frost bradfrost.com

×