Design Systems In Websites & Apps

Slide 1

Slide 1 text

DESIGN SYSTEMS IN WEBSITES & APPS

Slide 2

Slide 2 text

Richard Saunders Senior UX Lead @rdsaunders

Slide 3

Slide 3 text

RESPONSIVE WEB DESIGN

Slide 4

Slide 4 text

Creating a great experience across multiple devices

Slide 5

Slide 5 text

We are dealing with a wide range of variables

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

1024px 768px

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Photoshop is impractical for responsive web design mockups

Slide 19

Slide 19 text

- making changes to multiple layouts   is time-consuming - fonts render diﬀerently between Photoshop and a web browser - diﬃcult to visualise animation and behaviour - usual comes before any content has been produced, and we rely on good old Lorem Ipsum, which make sense to no one.

Slide 20

Slide 20 text

Why not start the process with something we know?   Content is one variable we can be sure of.

Slide 21

Slide 21 text

Rather than trying to ﬁgure out what a site should look like as the major output of a design phase, focus instead on what a site should feel like. Dan Mall

Slide 22

Slide 22 text

http://styletil.es/

Slide 23

Slide 23 text

http://styletil.es/

Slide 24

Slide 24 text

http://styletil.es/

Slide 25

Slide 25 text

Content precedes design. Design in the absence of content is not design, it’s decoration. Jeﬀery Zeldman

Slide 26

Slide 26 text

http://danielmall.com/articles/rif-element-collages/ http://clearleft.com/thinks/visualdesignexplorations/

Slide 27

Slide 27 text

http://sparkbox.github.io/style-prototype/

Slide 28

Slide 28 text

RWD Recap - there are many variables to consider. We need to start with content; the variable that we know - using style prototypes early on in the process will save headaches down the line - we need to experience design on real devices and not printed on paper or in PDF format

Slide 29

Slide 29 text

Design is not just what it looks like and feels like, but also  how it works. Steve Jobs

Slide 30

Slide 30 text

FRONT-END STYLE GUIDES

Slide 31

Slide 31 text

a front-end style guide  deconstructs everything that makes up your digital product

Slide 32

Slide 32 text

http://serenbrands.co.uk/

Slide 33

Slide 33 text

http://serenbrands.co.uk/

Slide 34

Slide 34 text

http://voiceandtone.com/

Slide 35

Slide 35 text

http://www.theguardian.com/info/series/guardian-and-observer-style-guide

Slide 36

Slide 36 text

it gives an overview of what the product is made up of

Slide 37

Slide 37 text

https://www.gov.uk/service-manual/user-centred-design/resources/buttons.html

Slide 38

Slide 38 text

https://www.gov.uk/service-manual/user-centred-design/resources/colour-palettes.html

Slide 39

Slide 39 text

establishes a common language between designers and developers

Slide 40

Slide 40 text

http://style.codeforamerica.org/

Slide 41

Slide 41 text

http://style.codeforamerica.org/

Slide 42

Slide 42 text

helps create a centralised location for all design, prototyping and documentation

Slide 43

Slide 43 text

http://getbootstrap.com/components/#btn-dropdowns

Slide 44

Slide 44 text

IDENTIFY PATTERNS

Slide 45

Slide 45 text

Title / summary Content selector Tabbed layout Drop down menu with title / summary

Slide 46

Slide 46 text

Toggle with title / summary Number input with title / summary

Slide 47

Slide 47 text

BUILDING THE STYLE GUIDE

Slide 48

Slide 48 text

http://brettjankord.com/projects/style-guide-boilerplate/

Slide 49

Slide 49 text

http://warpspire.com/kss/

Slide 50

Slide 50 text

https://github.com/adactio/Pattern-Primer

Slide 51

Slide 51 text

A front-end style guide - it gives an overview of what the product is made up of - establishes a common language between designers and developers - helps create a centralised location for all design, prototyping and documentation

Slide 52

Slide 52 text

DESIGN SYSTEMS

Slide 53

Slide 53 text

Contensis R7.2

Slide 54

Slide 54 text

Contensis R8

Slide 55

Slide 55 text

sys-tem | ‘sistəm’ | noun A set of connected parts   forming a complex whole

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

a design system assembles rather than deconstructs

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

http://getbootstrap.com/ http://foundation.zurb.com/

Slide 63

Slide 63 text

We’re not designing pages. We’re designing systems of components. Stephen Hay

Slide 64

Slide 64 text

Elements

Slide 65

Slide 65 text

T table tbody thead tfoot tr td th track time title textarea I i ins input img iframe M meta menu map mark meter ! ! ! A a abbr article aside address audio area N noscript nav B b br body bdi bdo base blockquote button O output ol optgroup option object C caption colgroup col canvas command code cite S span summary select source style script samp s small strong section sub sup H hr h1 h2 h3 h4 h5 h6 hgroup header html head P p pre progress param D dl dt dd div dfn details datalist del V video var L legend label li link R ruby rt F footer figure figcaption form fieldset ! ! Q q E embed em ! ! ! U u ul K kbd keygen HTML ELEMENTS

Slide 66

Slide 66 text

Label Label

Slide 67

Slide 67 text

Components

Slide 68

Slide 68 text

Date Picker Component Button Input Start Date Label

Slide 69

Slide 69 text

Filter Bar Component Select Drop Down Filter Label Filter Actions (Standard Icon Button) Date Picker Component

Slide 70

Slide 70 text

Modules

Slide 71

Slide 71 text

Content Schedule Module Filter / Query Component Rules Component

Slide 72

Slide 72 text

Modules Components Elements

Slide 73

Slide 73 text

http://bradfrostweb.com/blog/post/atomic-web-design/

Slide 74

Slide 74 text

WHY DESIGN SYSTEMS

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

Danger DANGER Danger Danger Positive Good Positive positive This Not this

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

The beneﬁts of a front-end style guide - overview of everything that makes up your product - establishes a common design language - central location for design, prototyping and documentation

Slide 79

Slide 79 text

APPLYING DESIGN SYSTEMS

Slide 80

Slide 80 text

http://bem.info/ http://smacss.com/

Slide 81

Slide 81 text

http://sass-lang.com

Slide 82

Slide 82 text

http://patternlab.io

Slide 83

Slide 83 text

EXAMPLE DESIGN SYSTEMS

Slide 84

Slide 84 text

http://getbootstrap.com/components/#alerts

Slide 85

Slide 85 text

http://stuffandnonsense.co.uk/blog/about/rock-hammer-a-curated-responsive-project-library

Slide 86

Slide 86 text

https://ux.mailchimp.com/patterns/

Slide 87

Slide 87 text

Create tiny Bootstraps for every client. Dave Rupert project

Slide 88

Slide 88 text

Responsive Web Design is hard, with a range of variables. Our tools and processes need to adapt with the changing landscape

Slide 89

Slide 89 text

Front-end Style Guides help you and your team better understand the digital products you make

Slide 90

Slide 90 text

Design Systems allow us to reﬁne and refactor the building blocks of our digital products