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

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.

Paul Robert Lloyd

August 10, 2016
Tweet

More Decks by Paul Robert Lloyd

Other Decks in Design

Transcript

  1. Designing Systems
    Theory, Practice, and the Unfortunate In-between
    @paulrobertlloyd
    Design Exchange Nottingham / 10 August 2016

    View Slide

  2. View Slide

  3. View Slide

  4. View Slide

  5. View Slide

  6. Photograph: © Willy Rizzo

    View Slide

  7. View Slide

  8. Photograph: © Marcel Gautherot

    View Slide

  9. The Shock of the New: Trouble in Utopia

    BBC Television, 1980

    View Slide

  10. View Slide

  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.

    View Slide

  12. View Slide

  13. Photograph: © Alexander Baxevanis

    View Slide

  14. Magpie Studio

    View Slide

  15. View Slide

  16. View Slide

  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.

    View Slide

  18. What is a design system?

    View Slide

  19. Products
    Tools
    Foundations
    Principles

    View Slide

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

    View Slide

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

    View Slide

  22. Designers: brand identity guidelines

    View Slide

  23. Writers: editorial style guides

    View Slide

  24. Developers: Code styles/conventions
    editorconfig.org

    View Slide

  25. — Phil Karlton
    Shared vocabularies
    There are only two hard things in computer
    science: cache invalidation and naming things.

    View Slide

  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

    View Slide

  27. Tools
    • Implementor-centred
    • Applicable to individuals and
    smaller teams
    • Enable rapid development of
    products
    Products
    Tools
    Foundations
    Principles
    Tools

    View Slide

  28. View Slide

  29. Component libraries
    http://fractal.build

    View Slide

  30. Products
    • User-centred
    • Websites, native apps, signage,
    marketing, internal comms…
    Products
    Tools
    Foundations
    Principles
    Products

    View Slide

  31. Products
    Tools
    Foundations
    Principles Increasing susceptibility to change

    View Slide

  32. Principles Products

    View Slide

  33. Modular design
    Modularisation Variation Composition

    View Slide

  34. Component concerns
    Behaviour
    Presentation
    Structure
    Content
    Content

    View Slide

  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 )

    View Slide

  36. Component concerns
    Behaviour
    Presentation
    Structure
    Content
    Structure

    View Slide

  37. 4 out of 5 stars

    View Slide


  38. Movie rating
    The average rating is

    4 out of 5 stars

    from a total of
    12 reviews

    View Slide

  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 {…}

    View Slide

  40. Component concerns
    Behaviour
    Presentation
    Structure
    Content
    Presentation

    View Slide

  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;

    View Slide

  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%);

    View Slide

  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);
    }

    View Slide

  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;
    }

    View Slide

  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)

    View Slide

  46. Component concerns
    Behaviour
    Presentation
    Structure
    Content
    Behaviour

    View Slide

  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.

    View Slide

  48. Modular design
    Variation Composition
    Modularisation

    View Slide

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

    View Slide

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

    View Slide

  51. View Slide

  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.

    View Slide

  53. Modular design
    Composition
    Variation
    Modularisation

    View Slide

  54. View Slide

  55. The wrong analogy?
    • Composite
    • Static
    • Encapsulated
    • Clear affordances
    • Separate concerns
    • Dynamic
    • Leaky
    • Difficult to reason with
    >

    View Slide

  56. Bringing encapsulation to the web
    React
    facebook.github.io/react
    Web Components
    webcomponents.org
    BEM
    en.bem.info

    View Slide

  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.

    View Slide

  58. View Slide

  59. No system is or should be perfect

    View Slide

  60. Photograph: © Kirk Bauer

    View Slide

  61. View Slide

  62. Design System

    Lifecycle
    Principles
    Tools
    Foundations
    Products

    View Slide

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

    View Slide