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

Closing the Gaps with Digital Design Systems, R...

Closing the Gaps with Digital Design Systems, Ruhr Edition

Even though most of us understand that web visuals and code are often two sides of one coin, getting a bunch of designers and developers to work in unison on digital products can be surprisingly tricky. Especially on long running products.
Isn’t there something we can lean on for help? Enter: design systems!
This talk will provide a basic introduction to design systems and pattern libraries, focusing on how they can help us to bridge the gaps and optimise workflows within digital teams.

Liv Madsen

July 26, 2018
Tweet

More Decks by Liv Madsen

Other Decks in Technology

Transcript

  1. Design System Brand Digital Design Systems 9 @livmadsen https://medium.com/@NateBaldwin/anatomy-of-a-design-system-7a6b0677bf5 Anatomy

    of a Design System, as illustrated by Nate Baldwin Visual Design Language Design Principles Design Assets UI Kit (Living) Style Guide Content Strategy Voice & Tone UI Presentation Layer Documentation Processes Components Dev Standards deliberate & managed in a digital realm & format
  2. Digital Design Systems clear design principles, clear goals, shared vocabulary

    12 @livmadsen http://yayasan1m alaysia.org/wp-content/uploads/2015/08/bigstock-Key-to-success-24060560.jpg
  3. Digital Design Systems June 2017 Day 1: we shall need

    these 10 things 16 @livmadsen Gallery Fact card Video Branded header Text w/ image Product Header Large image Text w/o image Brief
  4. Digital Design Systems June 2017 and never shall we stray…

    17 @livmadsen Feature story Series Short formats Quote of the day Current atmosphere Questions on Love My salvation Brief 99 Questions Brief Roger Willemsen Brief Politics and society Top x lists Martenstein Großes Bild Deutschland karte Großes Bild Ich habe einen Traum Großes Bild Großes Bild Der Moment Image exploration Großes Bild Großes Bild Großes Bild Großes Bild Mega BU Brief Großes Bild Janosch Text w/ image Text w/ image Text w/ image Text w/ image Text w/ image Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Branded header Header Header Header Header Header Text w/o image Text w/o image Text w/o image Text w/o image Text w/o image Text w/o image Gallery Text w/ image Product Product Product Product Fact card Video Fact card Fact card Video
  5. edenspiekermann_ @livmadsen “Patterns are not dogma, they can change and

    adapt” — Claudina Sarahe https://www.clarityconf.com/deconstructing-web-systems-or-a-pattern-language-for-web-development
  6. @livmadsen functional, relatable names – by the team, for the

    team a design system is not for the product, it’s for the people who build the product
  7. 36 @livmadsen The One Source of Truth focus on what

    hits the user’s screen, the fruit of the whole team’s work: the coded interface
  8. …presenting fully baked Photoshop comps “is the most effective way

    to show your clients what their website will never look like.” – Stephen Hay (who clearly knows what he’s talking about) Digital Design Systems 37 @livmadsen http://atomicdesign.bradfrost.com/chapter-1/
  9. Digital Design Systems 39 @livmadsen from me to future me

    with love from: me to: future me with love
  10. @livmadsen SHOW ROOM WORK SPACE(S) TOOLBOX Bits and pieces you’ll

    need for building. Supplies the team. Present, convince and guide to use system. Guides the team. Setups to facilitate good workflows. Organises the team. loosely based on http://bradfrost.com/blog/post/the-workshop-and-the-storefront/
  11. @livmadsen Different teams can leverage different parts of the system

    to produce websites, apps, prototypes, campaigns, etc. all following the guidelines