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

More Decks by Paul Robert Lloyd

Other Decks in Design


  1. — 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.
  2. — 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.
  3. Foundations • Discipline-centred • Applicable within functional teams • Developed

    collaboratively Products Tools Foundations Principles Foundations
  4. — Phil Karlton Shared vocabularies There are only two hard things

    in computer science: cache invalidation and naming things.
  5. 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
  6. Tools • Implementor-centred • Applicable to individuals and smaller teams

    • Enable rapid development of products Products Tools Foundations Principles Tools
  7. Products • User-centred • Websites, native apps, signage, marketing, internal

    comms… Products Tools Foundations Principles Products
  8. ## 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 )
  9. <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>
  10. .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 {…}
  11. // 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;
  12. // 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%);
  13. // 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); }
  14. .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; }
  15. — 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.
  16. — 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.
  17. The wrong analogy? • Composite • Static • Encapsulated •

    Clear affordances • Separate concerns • Dynamic • Leaky • Difficult to reason with </>
  18. — 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.