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
Tweet

More Decks by Dennis Kardys

Other Decks in Design

Transcript

  1. Developing

    Design Systems 

    Dennis Kardys @dkardys #FiLive

    PATTERNS, PROTOTYPES, AND PEOPLE

    View full-size slide

  2. CC license: @matt_j https://flic.kr/p/fksgQJ

    View full-size slide

  3. the patterns in an
    environment shape patterns
    of behavior

    [a horrible story about birds]

    View full-size slide

  4. “designing systems of
    components…
    -Stephen Hay


    View full-size slide

  5. “stitching atoms, molecules,
    and organisms together to
    form templates and pages.
    -Brad Frost

    View full-size slide

  6. “bootstrap style systems
    for every client…
    -Dave Rupert


    View full-size slide

  7. a modular set of guidelines and
    components to improve

    consistency, efficiency,
    sustainability

    View full-size slide

  8. Design Systems
    taking first steps

    View full-size slide

  9. 1. interface inventory

    View full-size slide

  10. 2. organize your code.

    View full-size slide

  11. 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!)

    View full-size slide

  12. 3. create useful
    documentation.

    View full-size slide

  13. image courtesy Dean Hochman: https://flic.kr/p/nXSUzA

    View full-size slide

  14. design shangri-la
    our innermost desires projected

    View full-size slide

  15. or glamorized reference
    docs?

    View full-size slide

  16. should not be static
    should not be incomplete
    can’t be a developer’s problem
    x
    x
    x

    View full-size slide

  17. what does it mean to build
    a living design system?

    View full-size slide

  18. Understanding Systems
    A set of interacting or interdependent components
    forming an integrated whole.

    View full-size slide

  19. delineated by boundaries, surrounded and
    influenced by its environment, described by its
    structure and purpose, expressed in its functioning.

    View full-size slide

  20. http://blog.noupsi.de/post/44607342301/open-judge

    View full-size slide

  21. image courtesy Richard Hefner: https://flic.kr/p/quWY6H
    you can’t design
    interconnectivity when
    you are inside a silo

    View full-size slide

  22. What are your system
    boundaries?

    View full-size slide

  23. page to page
    viewport to viewport
    across platforms
    across channels

    View full-size slide

  24. patterns are language.
    many expressions out of simple rules and structures.

    View full-size slide

  25. each patterns we design
    foster patterns of behavior
    element + environment + experience

    View full-size slide

  26. to the design/development/authoring teams:
    we need to generate
    behaviors, not specify
    behaviors.

    View full-size slide

  27. Creating Rules
    photo CC license: @wanderlass https://flic.kr/p/97VZ2t

    View full-size slide

  28. 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

    View full-size slide

  29. Each simply coordinates its movements with
    those of its neighbors.
    The 1 Simple Rule

    View full-size slide

  30. “the chorus line hypothesis”

    View full-size slide

  31. Look left. Look right.

    View full-size slide

  32. the ultimate team skill is the
    ability to choreograph actions at a
    variety of scale.
    CC image: @melfoody - https://flic.kr/p/ea5DSh

    View full-size slide

  33. systems
    require rules.

    with the right laws in place, order (rather than
    disorder) will increase over time.

    View full-size slide

  34. imagine no rules.
    freedom vs. flexibility

    View full-size slide

  35. “we want drag and drop.”

    View full-size slide

  36. systems require rules.

    View full-size slide

  37. prescriptive
    specifying what you should do
    proscriptive
    identifying only what you should not.

    View full-size slide

  38. system rules
    what the system permits and restricts
    you from doing.

    View full-size slide

  39. editorial/design rules
    guidelines for how you should use
    different elements.

    View full-size slide

  40. principles
    the rules the capture the system’s intent
    and purpose.

    View full-size slide

  41. Weave it all together.
    how will you design without seams?

    View full-size slide

  42. Ideation
    Modeling
    Mapping
    Refining

    View full-size slide

  43. ideation
    coming up with ideas
    iteration
    refining ideas

    View full-size slide

  44. Design Charrettes

    View full-size slide

  45. 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

    View full-size slide

  46. Centerpoint

    the core patterns and behaviors that define
    your system.

    View full-size slide

  47. Inspiration Documents

    View full-size slide

  48. 1. A tool to provoke conversation.
    2. Use it to answer YOUR questions.
    3. Describe rationale not “design options”.
    VISUAL INSPIRATION

    View full-size slide

  49. 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)

    View full-size slide

  50. modeling

    (shaping the elements)

    View full-size slide

  51. Element Collages / Style Tiles

    View full-size slide

  52. Element Collages / Style Tiles

    View full-size slide

  53. Element Collages / Style Tiles

    View full-size slide

  54. Paper Prototypes

    View full-size slide

  55. Structured Content

    View full-size slide

  56. Content Patterns (templates)

    View full-size slide

  57. layout (pages)

    View full-size slide

  58. Navigational Patterns & Flows

    View full-size slide

  59. mapping

    (find the points of intersection)

    View full-size slide

  60. structured
    content objects
    feed the data
    model

    View full-size slide

  61. data model
    helps define
    patterns and
    components

    View full-size slide

  62. code
    content
    design
    image CC Nate Weigl https://flic.kr/p/7R8RqM

    View full-size slide

  63. refining and iterating

    View full-size slide

  64. • purpose
    • intended behavior
    • examples of states
    • system or editorial rules
    • use cases
    • data source
    • performance requirements
    Documenting Patterns

    View full-size slide

  65. stress testing
    too much content. too little content. poorly formatted image.

    View full-size slide

  66. the story of Coyote
    and the Frybread.

    View full-size slide

  67. http://www.flickr.com/photos/thaths/6200904390/

    View full-size slide

  68. http://blog.noupsi.de/post/44607342301/open-judge

    View full-size slide

  69. image courtesy Richard Hefner: https://flic.kr/p/quWY6H

    View full-size slide

  70. How can you extend
    your influence beyond
    your sphere?

    View full-size slide

  71. Thanks!
    Dennis Kardys
    @dkardys #filive

    View full-size slide