Developing Design Systems: Patterns, Prototypes, and People (Dennis Kardys)
9 likes2,051 views
The document outlines the process of developing design systems, emphasizing the importance of patterns, components, and guidelines to promote consistency and efficiency. It describes a phased approach starting with an interface inventory, organizing code, and creating useful documentation while fostering collaborative ideation. The need for clear rules and principles is highlighted to ensure a living design system that adapts to user behavior and environment.
![the patterns in an
environment shape patterns
of behavior
[a horrible story about birds]](https://image.slidesharecdn.com/design-systems-filive-150616071906-lva1-app6892/85/Developing-Design-Systems-Patterns-Prototypes-and-People-Dennis-Kardys-3-320.jpg)
Developing Design Systems: Patterns, Prototypes, and People (Dennis Kardys)
- 1. Developing Design Systems Dennis Kardys @dkardys #FiLive PATTERNS, PROTOTYPES, AND PEOPLE
- 2. CC license: @matt_j https://flic.kr/p/fksgQJ
- 3. the patterns in an environment shape patterns of behavior [a horrible story about birds]
- 5. “stitching atoms, molecules, and organisms together to form templates and pages. -Brad Frost
- 6. “bootstrap style systems for every client… -Dave Rupert
- 7. a modular set of guidelines and components to improve consistency, efficiency, sustainability
- 13. Design Systems taking first steps
- 19. 2. organize your code.
- 22. CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, etc… Front End Frameworks and Preprocessors (Do Not Repeat Yourself—so, whatever works for you!)
- 27. image courtesy Dean Hochman: https://flic.kr/p/nXSUzA
- 28. design shangri-la our innermost desires projected
- 30. should not be static should not be incomplete can’t be a developer’s problem x x x
- 31. what does it mean to build a living design system?
- 33. Understanding Systems A set of interacting or interdependent components forming an integrated whole.
- 34. delineated by boundaries, surrounded and influenced by its environment, described by its structure and purpose, expressed in its functioning.
- 36. image courtesy Richard Hefner: https://flic.kr/p/quWY6H you can’t design interconnectivity when you are inside a silo
- 37. What are your system boundaries?
- 38. page to page viewport to viewport across platforms across channels
- 39. patterns are language. many expressions out of simple rules and structures.
- 40. each patterns we design foster patterns of behavior element + environment + experience
- 41. to the design/development/authoring teams: we need to generate behaviors, not specify behaviors.
- 42. Creating Rules photo CC license: @wanderlass https://flic.kr/p/97VZ2t
- 43. 1. avoid colliding with its immediate neighbors 2. be generally attracted to others of its kind 3. move in the same direction as the rest of the group. Flocking Logic
- 44. Each simply coordinates its movements with those of its neighbors. The 1 Simple Rule
- 45. “the chorus line hypothesis”
- 46. Look left. Look right.
- 47. the ultimate team skill is the ability to choreograph actions at a variety of scale. CC image: @melfoody - https://flic.kr/p/ea5DSh
- 48. systems require rules. with the right laws in place, order (rather than disorder) will increase over time.
- 49. imagine no rules. freedom vs. flexibility
- 50. “we want drag and drop.”
- 54. prescriptive specifying what you should do proscriptive identifying only what you should not.
- 55. system rules what the system permits and restricts you from doing.
- 56. editorial/design rules guidelines for how you should use different elements.
- 57. principles the rules the capture the system’s intent and purpose.
- 59. Weave it all together. how will you design without seams?
- 61. Ideation
- 62. ideation coming up with ideas iteration refining ideas
- 64. 1. Work with a blended group. 2. Generate the maximum number of ideas. 3. Alternate between solo and group ideation. 4. Surface conflict and build consenus. 5. Inspire DESIGN CHARRETTES
- 65. Centerpoint the core patterns and behaviors that define your system.
- 67. 1. A tool to provoke conversation. 2. Use it to answer YOUR questions. 3. Describe rationale not “design options”. VISUAL INSPIRATION
- 68. Sketching
- 69. 1. Show multiple sketches. 2. Make each sketch unique in concept. 3. Discuss viability of concept and direction. 4. Never let your stakeholder hold on to them. 5. Avoid iteration. SKETCHING (for presentations)
- 71. Element Collages / Style Tiles
- 72. Element Collages / Style Tiles
- 73. Element Collages / Style Tiles
- 74. Paper Prototypes
- 77. layout (pages)
- 78. Navigational Patterns & Flows
- 79. mapping (find the points of intersection)
- 81. structured content objects feed the data model
- 82. data model helps define patterns and components
- 83. styleguide
- 84. code content design image CC Nate Weigl https://flic.kr/p/7R8RqM
- 88. • purpose • intended behavior • examples of states • system or editorial rules • use cases • data source • performance requirements Documenting Patterns
- 89. stress testing too much content. too little content. poorly formatted image.
- 91. the story of Coyote and the Frybread.
- 94. image courtesy Richard Hefner: https://flic.kr/p/quWY6H
- 95. How can you extend your influence beyond your sphere?