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
6. Photograph: © Willy Rizzo
8. Photograph: © Marcel Gautherot
9. The Shock of the New: Trouble in Utopia
 BBC Television, 1980
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.
13. Photograph: © Alexander Baxevanis
14. Magpie Studio
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
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
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
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.
59. No system is or should be perfect
60. Photograph: © Kirk Bauer
62. Design System
 Lifecycle Principles Tools Foundations Products
63. Thank-you! Attribution, Non-Commercial, Share Alike @paulrobertlloyd / paulrobertlloyd.com