Designing Systems (Design Exchange Nottingham)

Designing Systems (Design Exchange Nottingham)

As our lives grow increasingly reliant on digital products, designers are asked to deliver coherent experiences across a multitude of platforms, all without sacrificing development efficiency and maintainability. To answer this need, our industry has looked to style guides, pattern libraries and front-end frameworks. Yet, without considering the audiences that will use them, they could do more harm than good.

0bce06bd06ee7a2c4f5500f25dcf7f18?s=128

Paul Robert Lloyd

August 10, 2016
Tweet

Transcript

  1. Designing Systems Theory, Practice, and the Unfortunate In-between @paulrobertlloyd Design

    Exchange Nottingham / 10 August 2016
  2. None
  3. None
  4. None
  5. None
  6. Photograph: © Willy Rizzo

  7. None
  8. Photograph: © Marcel Gautherot

  9. The Shock of the New: Trouble in Utopia
 BBC Television,

    1980
  10. None
  11. — Frank Pick, 1926 The future of London cannot be an

    accident like the past. If it is to hold together, to remain a workable, manageable unit, it must now be planned, be designed, be organised.
  12. None
  13. Photograph: © Alexander Baxevanis

  14. Magpie Studio

  15. None
  16. None
  17. — Frank Pick, 1916 The test of the goodness of a

    thing is its fitness for use. If it fails on this first test, no amount of ornamentation will make it any better; it will only make it more expensive, more foolish.
  18. What is a design system?

  19. Products Tools Foundations Principles

  20. Principles • User-centred • Applicable across organisation • Developed collaboratively

    Products Tools Foundations Principles Principles
  21. Foundations • Discipline-centred • Applicable within functional teams • Developed

    collaboratively Products Tools Foundations Principles Foundations
  22. Designers: brand identity guidelines

  23. Writers: editorial style guides

  24. Developers: Code styles/conventions editorconfig.org

  25. — Phil Karlton Shared vocabularies There are only two hard things

    in computer science: cache invalidation and naming things.
  26. 1. Cut up an interface into its component parts 2.

    Group similar components 3. Everyone comes up with a name for each group 4. Once everyone has thought of a name, reveal them! 5. Discuss
  27. Tools • Implementor-centred • Applicable to individuals and smaller teams

    • Enable rapid development of products Products Tools Foundations Principles Tools
  28. None
  29. Component libraries http://fractal.build

  30. Products • User-centred • Websites, native apps, signage, marketing, internal

    comms… Products Tools Foundations Principles Products
  31. Products Tools Foundations Principles Increasing susceptibility to change

  32. Principles Products

  33. Modular design Modularisation Variation Composition

  34. Component concerns Behaviour Presentation Structure Content Content

  35. ## Movie rating The average rating is 4 out of

    5 stars, from a total
 of [12 reviews](/reviews). ### Add your score Your name: [ ] Rating: ( ) 1 ( ) 2 ( ) 3 (•) 4 ( ) 5 [ ] Remember my details ( Submit rating )
  36. Component concerns Behaviour Presentation Structure Content Structure

  37. <meter value="4" min="0" max="5">4 out of 5 stars</meter>

  38. <section class="c-rating"> <h1 class="c-rating__title">Movie rating</h1> <span class="u-hidden">The average rating is</span>

    <meter class="c-rating__value" value="4" min="0" max="5"> 4 out of 5 stars </meter> <span class="u-hidden">from a total of</span> <a class="c-rating__reviews" href="/reviews/">12 reviews</a> </section>
  39. .c-[module-name] {…} .c-[module-name]__body {…} .c-[module-name]__header {…} .c-[module-name]__title {…} .c-[module-name]__main {…}

    .c-[module-name]__items {…} .c-[module-name]__item {…} .c-[module-name]__content {…} .s-prose {…} .c-[module-name]__footer {…}
  40. Component concerns Behaviour Presentation Structure Content Presentation

  41. // Colour palette $color-brand--crimson: #c00; $color-brand--mustard: #fc0; $color-neutral--darkest: #222; $color-neutral--darker:

    #444; $color-neutral--dark: #666; $color-neutral--mid: #888; $color-neutral--light: #bbb; $color-neutral--lighter: #ddd; $color-neutral--lightest: #eee;
  42. // Colour assignments $color-text: $color-neutral--darkest; $color-background--light: $color-neutral--darkest; $color-background--dark: $color-neutral—darkest; $color-link:

    $color-brand--crimson; $color-link--hover: darken($color-brand--crimson, 10%); $color-link--active: lighten($color-brand--crimson, 10%);
  43. // Colour map $colors: ( crimson: #c00, mustard: #fc0, neutral:

    ( darkest: #222; darker: #444; dark: #666; base: #888; light: #bbb; lighter: #ddd; lightest: #eee; ) ); // Helper @function color($name, $var: null) { @if ($var != null) { @return map-get(map-get($colors, $name), $var); } @else { @return map-get($colors, $name); } } // Usage example .c-module__title { color: color(neutral, darkest); }
  44. .c-module__title { font: bold 2em/1 Georgia, serif; margin-bottom: 1.5em; padding-top:

    0.75em; letter-spacing: 0.0025em; text-transform: uppercase; color: #222; } .c-module__title { @include typeset(title, 2); margin-bottom: ($baseline * 4); padding-top: ($baseline * 2); color: $color-text; }
  45. Guardian Style Sheets (GUSS) github.com/guardian/guss gs-span(3) fs-header(2) fs-headline(1) fs-data(3) gs-height(6)

    colour($c-feature-main)
  46. Component concerns Behaviour Presentation Structure Content Behaviour

  47. — Ethan Marcotte I’ve found that thinking about my design as

    existing in broad experience tiers – in layers – is one of the best ways of designing for the modern web.
  48. Modular design Variation Composition Modularisation

  49. Extensibility 2. Modify an existing component 1. Create a new

    component
  50. The container model next.theguardian.com/blog/container-model-blended-content

  51. None
  52. — Oliver Wendell Holmes Jr. I would not give a fig

    for the simplicity this side of complexity, but I would give my life for the simplicity on the other side of complexity.
  53. Modular design Composition Variation Modularisation

  54. None
  55. The wrong analogy? • Composite • Static • Encapsulated •

    Clear affordances • Separate concerns • Dynamic • Leaky • Difficult to reason with </>
  56. Bringing encapsulation to the web React facebook.github.io/react Web Components webcomponents.org

    BEM en.bem.info
  57. — Eliel Saarinen Always design a thing by considering it in

    its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
  58. None
  59. No system is or should be perfect

  60. Photograph: © Kirk Bauer

  61. None
  62. Design System
 Lifecycle Principles Tools Foundations Products

  63. Thank-you! Attribution, Non-Commercial, Share Alike @paulrobertlloyd / paulrobertlloyd.com