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.

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