Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Developing Design Systems: Patterns, Prototypes, and People

Developing Design Systems: Patterns, Prototypes, and People

You've heard the talk about how we should be designing systems not pages, and how taking a modular, component driven approach to design is key. All true, but developing design systems is hard, messy work. Too often scalability and modularity become afterthoughts in the design proces ”evidenced as pages featuring combinations of almost, but not quite, identical components are passed on to the front end designer to sort out. But scalable, component-based design is not just a single person's responsibility. To get everyone onboard we need to bake system-thinking into the entire design process. In this talk we'll dissect what constitutes a design system, and look at different prototyping techniques that can be used to prepare, present, and bullet-proof one. We'll also tackle challenges like: how to remain creative and ideate when taking a modular approach to design, how to define and document system rules, and how to stay organized. Front-end engineer and experience designer alike, you should come away from this session with a fresh take on patterns and prototyping, along with practical examples for how they can supercharge team collaboration.

Dennis Kardys

June 16, 2015

More Decks by Dennis Kardys

Other Decks in Design


  1. 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!)
  2. delineated by boundaries, surrounded and influenced by its environment, described

    by its structure and purpose, expressed in its functioning.
  3. 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
  4. the ultimate team skill is the ability to choreograph actions

    at a variety of scale. CC image: @melfoody - https://flic.kr/p/ea5DSh
  5. systems require rules.
 with the right laws in place, order

    (rather than disorder) will increase over time.
  6. 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
  7. 1. A tool to provoke conversation. 2. Use it to

    answer YOUR questions. 3. Describe rationale not “design options”. VISUAL INSPIRATION
  8. 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)
  9. • purpose • intended behavior • examples of states •

    system or editorial rules • use cases • data source • performance requirements Documenting Patterns