O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Design System 101

357 visualizações

Publicada em

The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.

Link of the event: https://bit.ly/2RwN4RF

The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.

This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.

Publicada em: Design
  • Seja o primeiro a comentar

Design System 101

  1. 1. Design System 101 By Mayank Dhawan December 01, 2018 By Mayank Dhawan
  2. 2. By Mayank Dhawan December 01, 2018
  3. 3. Make design easier, better and faster. By Mayank Dhawan December 01, 2018 DESIGN SYSTEM 101
  4. 4. 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA
  5. 5. 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it TODAY’S AGENDA
  6. 6. Ever baked a Cake? 1. Intro to Design Systems
  7. 7. WHAT YOU NEED… • Ingredients • Recipe • Oven (and stuff) 1. Intro to Design Systems
  8. 8. Blue Cake Shop 1. Intro to Design Systems
  9. 9. The Blue Cake 1. Intro to Design Systems
  10. 10. WHEN IT STARTED… 1. Intro to Design Systems
  11. 11. WHEN YOU GET MORE CUSTOMERS YIKES 1. Intro to Design Systems
  12. 12. THEN, YOU HIRE SOMEONE YIKESPHEW 1. Intro to Design Systems
  13. 13. OVER SOME TIME… 1. Intro to Design Systems
  14. 14. BUT GROWING BY HIRING MAY NOT BE A SUSTAINABLE SOLUTION. 1. Intro to Design Systems
  15. 15. UNTIL YOU DECIDE TO BE SMART 1. Intro to Design Systems
  16. 16. 1. Ingredients 2. Recipe 3. Assembly Process 4. The Story 5. Customer Service 6. And More… THEY WROTE THE BLUE BOOK! THE BLUE BOOK 1. Intro to Design Systems
  17. 17. BEFORE: THE BLUE BOOK 1. Intro to Design Systems Inconsistent. Slower. Not so Scaleable.
  18. 18. AFTER: THE BLUE BOOK 1. Intro to Design Systems
  19. 19. VOILA! 1. Intro to Design Systems Consistent. Faster. Better.
  20. 20. NOW, THEY CAN CREATE THESE. 1. Intro to Design Systems Different products. But from the same place.
  21. 21. This is what a Design System is for! 1. Intro to Design Systems
  22. 22. A Design System is a collection of reusable components governed by clear standards. These components can be assembled together to build any number of products. WHAT IS A DESIGN SYSTEM? 1. Intro to Design Systems
  23. 23. 1. Style Guide: Colours, Typography, Icons and Illustrations, etc 2. Component Library: Buttons, Forms, Menu, Navigation, etc 3. Content Guide: Principles, Common Definitions, Voice and Tone, etc 4. Patterns Guide: User and Business Flows, etc 5. Reference Site: Documentation and Best Practices to use it all correctly DESIGN SYSTEM CONSISTS OF 1. Intro to Design Systems
  24. 24. How can a Design System benefit you? WHAT DO YOU THINK? 1. Intro to Design Systems
  25. 25. THE BENEFITS • Help Scale • Consistency • Quicker Iterations • Get into Details • Design Awareness • More Empathy 1. Intro to Design Systems
  26. 26. COMMON DOUBTS • “Won’t it be too restricting?” • “I won’t be able to explore a new style” • “What if something doesn’t work?” 1. Intro to Design Systems
  27. 27. Some Examples 1. Intro to Design Systems
  28. 28. Duolingo Design
  29. 29. Duolingo Design
  30. 30. Duolingo Design
  31. 31. Duolingo DesignDuolingo Design
  32. 32. Shopify Polaris
  33. 33. Shopify Polaris
  34. 34. Shopify Polaris
  35. 35. Shopify Polaris Shopify Polaris
  36. 36. CHECKOUT • Duolingo • Polaris by Shopify • Material by Google • Lightning by Salesforce • Carbon by IBM • Atlassian Design System • And many more… 1. Intro to Design Systems
  37. 37. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  38. 38. PREPARING FOR IT • Making a List • Getting Buy-in • Forming a Team 2. Preparing for it
  39. 39. MAKING A LIST • Reflect back on your last few projects: Look at the past few projects you did. How hectic was it? Were some tasks repetitive or took more time than they should have? • Audit to identify the pain points: See what worked or didn’t. Was there something you really wanted to do like a new illustration or an animation? • Components, Principles or Workflow: Were the problems related to lack of clarity in decision making or some problem with the workflow? Or was it something like re-doing smaller tasks such as recreating the same button? 2. Preparing for it
  40. 40. PREPARING FOR IT ✓ Making a List • Getting Buy-in • Forming a Team 2. Preparing for it
  41. 41. GETTING BUY-IN • Getting people excited may not be easy • Identify what’s in it for them: Look for ways that can help them and not you • Talk 1-on-1: Talk to people you work with. Suggest them to onboard their team members. Seek advice • Look at other examples: Show them some existing examples or case studies • A quick test case: Do a short exercise where you create a design system for a small flow so that the solution is specific to you • Get the final approval: Get the buy-in from the key people first 2. Preparing for it
  42. 42. GETTING BUY-IN: EXAMPLE • If Developers spend 30 minutes a day on: • Rebuilding the same component • Re-checking the code standards • Waiting for a Designer to review, etc
 • Design System ROI: • 5 Developers, each charging INR 500/Hr • 2.5 hrs/week * 52 weeks * INR 500 * 5 = INR 3,25,000/year * UX Pin2. Preparing for it
  43. 43. PREPARING FOR IT ✓ Making a List ✓ Getting Buy-in • Forming a Team 2. Preparing for it
  44. 44. FORMING A TEAM • Designers to define the visual components of the system • Front-end Developers to create code • Product Managers to ensure alignment with customer and business needs • Researchers to help understand user needs • Quality Experts to ensure smooth functioning • Content Strategists to help with voice and tone, principles • Leaders (VP and Directors) to align the vision and allocate resources * DS Handbook PROMPT: Who all you need to create a Product. So, does a DS which is a Product 2. Preparing for it
  45. 45. FORMING A TEAM Team Models by Nathan Curtis Solitary Model Centralised Model Federal Model 2. Preparing for it
  46. 46. FORMING A TEAM Team Models by Nathan Curtis2. Preparing for it Solitary Model • PRO: Single person governs the system. Fast and scrappy • CON: The person becomes a bottleneck for changes or decisions Centralised Model • PRO: A dedicated team for the system. In-depth work • CON: May get disconnected with what’s really happening Federal Model • PRO: Key members from each team are involved • CON: Slower progress since everyone has their day-to-day work as well
  47. 47. PANTSUIT BY MINA MARKHAM A Solitary Model Example2. Preparing for it
  48. 48. HYBRID MODEL BY SALESFORCE By Jina Anne, Salesforce2. Preparing for it Using both Centralised and Federal Model
  49. 49. PREPARING FOR IT ✓ Making a List ✓ Getting Buy-in ✓ Forming a Team 2. Preparing for it
  50. 50. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  51. 51. START FROM ANYWHERE • Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own
  52. 52. CSS Stats Facebook
  53. 53. A slide deck with screenshots to show inconsistency in UI
  54. 54. START FROM ANYWHERE ✓ Do an Audit, first • Visual Design Inventory • Component Library • Principles 3. Creating your Own
  55. 55. VISUAL DESIGN INVENTORY Some of the fundamental elements are: • Colours: Brand and UI Palette, States, Data Viz., Hierarchy, Contrast • Typography: Fonts and Weights, Type Scale, Leading, Tracking, etc. • Spacing: Margins, Padding, Borders, Grid • Images: Icons, Illustrations, Images, File Formats • Visual Form: Material Quality such as Shadow, Elevation and Texture • Motion and Sound: Animation Properties, Sound Prompts, etc 3. Creating your Own
  56. 56. Send 3. Creating your Own ✓ Colours ✓ Typography ✓ Spacing ✓ Images ✓ Visual Form ✓ Motion and Sound EVEN FOR A SIMPLE BUTTON, THESE ATTRIBUTES ARE INVOLVED
  57. 57. START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory • Component Library • Principles 3. Creating your Own
  58. 58. COMPONENT LIBRARY Break the Components into: • Elements: Buttons, Icons (Stand-alone elements: Atoms) • Modules: Search, Menu, Form (Assembly of Elements: Molecules) • Regions: Left-hand Navigation, Header (Organisms) • Layouts: Product Page, Listing Page (Templates) 3. Creating your Own Pieces like: Buttons, Cards, Lists, etc Take stock of all the interface elements Don’t be disheartened with inconsistencies Screenshots, Sketch Inventory Terms by Brad Frost, Atomic Design
  59. 59. Atomic Design, Brad Frost
  60. 60. The Checklist by Nathan Curtis
  61. 61. An example of tracking progress
  62. 62. Big project into smaller sections
  63. 63. START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory ✓ Component Library • Principles 3. Creating your Own
  64. 64. PRINCIPLES • They are your “Guiding Light”: Helps articulate vision into words. Leads to better decision-making • Universal Principles: They are the principles that can work for many organisations such as “Cohesive Experience” • Explicit Principles: The principles that are specific to your organisation. Example: “Put Merchant First” by Shopify 3. Creating your Own
  65. 65. 3. Creating your Own Principles, Shopify Polaris UNIVERSAL • • • • • EXPLICIT • • • • • •
  66. 66. 3. Creating your Own Grow your Business Learn How We create Online Stores Learn How WHICH OPTION? REFER TO THE PRINCIPLE “PUT MERCHANT FIRST”
  67. 67. START FROM ANYWHERE ✓ Do an Audit, first ✓ Visual Design Inventory ✓ Component Library ✓ Principles 3. Creating your Own
  68. 68. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  69. 69. USING IT • Make it easy to Integrate and Use: Share a Sketch library to the design team. Or, code samples, Github libraries with developers. Help them integrate the system into their working files • Create Pilot Projects or Use Cases: Create test websites, widgets, tutorial videos, etc., to show them how to put the system in use. • Get People involved: People like to be a part of something. Appeal to their softer side and keep the system as opt-in and not mandatory. Introduce systems to new hires, have them use it and take feedback 4. Using it
  70. 70. Sketch Library
  71. 71. Lonely Planet: Use Case Widgets
  72. 72. Lonely Planet: Use Case Widgets
  73. 73. Design System Club: Merchandise Ideas
  74. 74. NEXT UP 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  75. 75. EVOLVING IT • Revisiting the System • Updating the System • Get into the Finer Details 5. Evolving it
  76. 76. REVISITING THE SYSTEM • Seek Feedback: From Contributors and Adopters • Governance: Revisit Team Models • Assess: Find things that break and iterate 5. Evolving it
  77. 77. UPDATING THE SYSTEM All at Once • Make multiple changes in a single update • But, have to wait for the next update 5. Evolving it Piece by Piece • Don’t have to wait for the entire system to update • But, you would need a set of dedicated people
  78. 78. GET INTO THE FINER DETAILS • Changes are inevitable: It is hard to do it well the first time • The V 1.0 is foundational: Principles will evolve • Go for the Long Run: Be technologically agnostic • Don’t stop Talking: It is meant for collaboration 5. Evolving it
  79. 79. EVOLVING IT ✓ Revisiting the System ✓ Updating the System ✓ Get into the Finer Details 5. Evolving it
  80. 80. TODAY’S AGENDA 1. Intro to Design Systems 2. Preparing for it 3. Creating your Own 4. Using it 5. Evolving it
  81. 81. WHAT WE LEARNED SO FAR ✓ What are Design Systems ✓ How to prepare for it ✓ How to create it ✓ How to implement it ✓ How to evolve it
  82. 82. mayankdhawan Workshop with UXGorilla and Design System 101 December 01, 2018 91springboard, Jhandewalan Extension, New Delhi
  83. 83. Thank you.

×