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 Slide

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

    View Slide

  3. the patterns in an
    environment shape patterns
    of behavior

    [a horrible story about birds]

    View Slide

  4. “designing systems of
    components…
    -Stephen Hay


    View Slide

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

    View Slide

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


    View Slide

  7. a modular set of guidelines and
    components to improve

    consistency, efficiency,
    sustainability

    View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. Design Systems
    taking first steps

    View Slide

  14. 1. interface inventory

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. 2. organize your code.

    View Slide

  20. View Slide

  21. View Slide

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

    View Slide

  23. 3. create useful
    documentation.

    View Slide

  24. View Slide

  25. View Slide

  26. View Slide

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

    View Slide

  28. design shangri-la
    our innermost desires projected

    View Slide

  29. or glamorized reference
    docs?

    View Slide

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

    View Slide

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

    View Slide

  32. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. What are your system
    boundaries?

    View Slide

  38. page to page
    viewport to viewport
    across platforms
    across channels

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  45. “the chorus line hypothesis”

    View Slide

  46. Look left. Look right.

    View Slide

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

    View Slide

  48. systems
    require rules.

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

    View Slide

  49. imagine no rules.
    freedom vs. flexibility

    View Slide

  50. “we want drag and drop.”

    View Slide

  51. View Slide

  52. View Slide

  53. systems require rules.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  58. View Slide

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

    View Slide

  60. Ideation
    Modeling
    Mapping
    Refining

    View Slide

  61. Ideation

    View Slide

  62. ideation
    coming up with ideas
    iteration
    refining ideas

    View Slide

  63. Design Charrettes

    View Slide

  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

    View Slide

  65. Centerpoint

    the core patterns and behaviors that define
    your system.

    View Slide

  66. Inspiration Documents

    View Slide

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

    View Slide

  68. Sketching

    View Slide

  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)

    View Slide

  70. modeling

    (shaping the elements)

    View Slide

  71. Element Collages / Style Tiles

    View Slide

  72. Element Collages / Style Tiles

    View Slide

  73. Element Collages / Style Tiles

    View Slide

  74. Paper Prototypes

    View Slide

  75. Structured Content

    View Slide

  76. Content Patterns (templates)

    View Slide

  77. layout (pages)

    View Slide

  78. Navigational Patterns & Flows

    View Slide

  79. mapping

    (find the points of intersection)

    View Slide

  80. View Slide

  81. structured
    content objects
    feed the data
    model

    View Slide

  82. data model
    helps define
    patterns and
    components

    View Slide

  83. styleguide

    View Slide

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

    View Slide

  85. refining and iterating

    View Slide

  86. View Slide

  87. View Slide

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

    View Slide

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

    View Slide

  90. View Slide

  91. the story of Coyote
    and the Frybread.

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  96. Thanks!
    Dennis Kardys
    @dkardys #filive

    View Slide