Style Guides, Pattern Libraries and Code Standards

Slide 1

Slide 1 text

Style Guides, Pattern Libraries and Code Standards @anna_debenham Front-End Developer

Slide 2

Slide 2 text

@anna_debenham Front-End Developer Style Guides, Pattern Libraries and Code Standards

Slide 3

Slide 3 text

Susan Robertson on Editorially’s Style Guide “…all that historical mileage is documented so that everyone can see why they're doing it the way they're doing it and all the things they've thought about to get there.”

Slide 4

Slide 4 text

Types of Style Guide

Slide 5

Slide 5 text

Branding/Identity Guidelines Penguin Group

Slide 6

Slide 6 text

Print Guidelines NHS

Slide 7

Slide 7 text

http://simple.wikipedia.org/wiki/Deﬁbrillator

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Content/editorial guidelines Mailchimp

Slide 10

Slide 10 text

Coding Standards GitHub

Slide 11

Slide 11 text

Front-end style guides Yelp

Slide 12

Slide 12 text

One deliverable to rule them all

Slide 13

Slide 13 text

Exploration Build Design Interface Inventory Brad Frost’s “…a comprehensive collection of the bits and pieces that make up your interface.”

Slide 14

Slide 14 text

Brad Frost

Slide 15

Slide 15 text

Brad Frost • Global elements • Navigation • Image types • Icons • Forms • Buttons • Headings • Media Objects • Lists • Interactive Components • Media • 3rd Party Widgets • Advertising • Messaging • Colors • Animation

Slide 16

Slide 16 text

Exploration Build Design Style Tiles Samantha Warren’s “…a way to facilitate a conversation around options without necessarily designing a picture of what their website would look like.”

Slide 17

Slide 17 text

ﬂickr.com/photos/woordenaar/14308809322

Slide 18

Slide 18 text

The Examiner

Slide 19

Slide 19 text

The Examiner

Slide 20

Slide 20 text

The Examiner

Slide 21

Slide 21 text

The Examiner

Slide 22

Slide 22 text

The Examiner

Slide 23

Slide 23 text

The Examiner

Slide 24

Slide 24 text

The Examiner

Slide 25

Slide 25 text

The Examiner, Samantha Warren

Slide 26

Slide 26 text

Exploration Build Design Element Collages Dan Mall’s “…a collage of elements that some of those pieces I think captured their brand really well… we were able to have a good conversation about things like that.”

Slide 27

Slide 27 text

Reading Is Fundamental

Slide 28

Slide 28 text

Dan Mall on Radio Free Europe “…they were really interested in how their site looked across different devices and different screen sizes and just different ways   to access it…”

Slide 29

Slide 29 text

Clearleft

Slide 30

Slide 30 text

Code for America (Clearleft)

Slide 31

Slide 31 text

Code for America (Clearleft)

Slide 32

Slide 32 text

Code for America (Clearleft)

Slide 33

Slide 33 text

Exploration Build Design Style Prototype Jeremy Loyd’s “…They can speed up site production, and they give a client an exciting early look at design elements.”

Slide 34

Slide 34 text

sparkbox.github.io/style-prototype

Slide 35

Slide 35 text

Jeremy Loyd on Style Prototypes “…we would typically try to create a Style Prototype when site planning is still in the works.”

Slide 36

Slide 36 text

Exploration Build Design CSS Guidelines Harry Roberts’s “…all developers should strive for a degree of standardisation in their code.”

Slide 37

Slide 37 text

cssguidelin.es

Slide 38

Slide 38 text

cssguidelin.es

Slide 39

Slide 39 text

cssguidelin.es Instruction

Slide 40

Slide 40 text

cssguidelin.es Instruction reason

Slide 41

Slide 41 text

cssguidelin.es Evidence Instruction reason

Slide 42

Slide 42 text

Exploration Build Design Pattern Primer Jeremy Keith’s “…This idea of a pattern library has deﬁnitely been, I'd say, the most important development when it comes to front end deliverables.”

Slide 43

Slide 43 text

Exploration Build Design Pattern Primer Jeremy Keith’s “…This idea of a pattern library has deﬁnitely been, I'd say, the most important development when it comes to front end deliverables.”

Slide 44

Slide 44 text

Front-end Style Guide Pattern Library/Primer Content/Editorial Guidelines Code Standards

Slide 45

Slide 45 text

Natalie Downe’s Pattern Portfolio

Slide 46

Slide 46 text

Natalie Downe’s Pattern Portfolio

Slide 47

Slide 47 text

Jeremy Keith’s Pattern Primer

Slide 48

Slide 48 text

Jeremy Keith on Clearleft’s Pattern Libraries “…We’ll also give you some pages, but these pages, they're not the deliverable; these pages are just examples of the pattern library in action.”

Slide 49

Slide 49 text

What they achieve

Slide 50

Slide 50 text

“…they publish 150 diﬀerent sites over sixty countries… so a strong style guide… was going to be really crucial to them.” Tackling complexity Dan Mall on Radio Free Europe

Slide 51

Slide 51 text

Starbucks

Slide 52

Slide 52 text

“QA uses it a lot… the front-end developers and the engineering teams all refer to it on a regular basis so it's actually really kind of crucial to our entire workﬂow…” Quality Assurance Federico Holgado Mailchimp’s Style Guide

Slide 53

Slide 53 text

Mailchimp

Slide 54

Slide 54 text

Tota11y

Slide 55

Slide 55 text

Tota11y

Slide 56

Slide 56 text

“I think when you're iterating quickly on an application… you abandon a module for something totally diﬀerent… so I was able to clean a lot of that up…” Reduced Redundancy Susan Robertson Built Editorially’s Style Guide

Slide 57

Slide 57 text

Chris Coyier’s CodePen

Slide 58

Slide 58 text

Chris Coyier’s CodePen “You think you just have a handful of button styles. Then you take an inventory.”

Slide 59

Slide 59 text

“There's not that extra step of getting approvals for a design comp and then having to come back and go, "Yeah, so I know we showed X in the design comp but it really came out kind of Y.” Realistic Representations Dave Olsen worked on Pattern Lab

Slide 60

Slide 60 text

“Marriott… is a huge organisation with tons of digital teams and they actually have a team of four or ﬁve people who are paid to maintain their standards…” Maintainability Susan Robertson Built Editorially’s Style Guide

Slide 61

Slide 61 text

Primer.io

Slide 62

Slide 62 text

“…some of these people have been jailed or have been hanged just for accessing their website. So we can't have a page loading in thirty seconds; that just can't ﬂy.” Performance Budget Dan Mall on Radio Free Europe

Slide 63

Slide 63 text

Lonely Planet

Slide 64

Slide 64 text

“…in twenty minutes, we had built a system that was responsive; it looked great on mobile and it was nice to look at.” Tool for Rapid Prototyping Federico Holgado on Mailchimp’s Style Guide

Slide 65

Slide 65 text

china.org.cn/china/2015-03/17/content_35077927.htm

Slide 66

Slide 66 text

Dan Mall on Element Collages “Don't rely heavily on a deliverable to solve this for you: rely on your listening skills to solve it for you.”

Slide 67

Slide 67 text

Jina worked on Salesforce’s style guide “Putting it oﬀ to the end or treating it as a separate thing is just asking for it to just sort of die on the vine or just become outdated and obsolete.”

Slide 68

Slide 68 text

A List Apart

Slide 69

Slide 69 text

How to make one

Slide 70

Slide 70 text

Code for America

Slide 71

Slide 71 text

Code for America

Slide 72

Slide 72 text

Code for America

Slide 73

Slide 73 text

Code for America

Slide 74

Slide 74 text

Code for America

Slide 75

Slide 75 text

Code for America

Slide 76

Slide 76 text

Code for America

Slide 77

Slide 77 text

/styles accordion.scss header.scss buttons.scss … header.html buttons.html accordion.html /patterns … HTML SCSS SCSS SCSS SCSS HTML HTML HTML

Slide 78

Slide 78 text

main.css /styles … /patterns … CSS HTML SCSS SCSS SCSS SCSS HTML HTML HTML header.html buttons.html accordion.html accordion.scss header.scss buttons.scss

Slide 79

Slide 79 text

main.css /styles … /patterns … CSS HTML SCSS SCSS SCSS SCSS HTML HTML HTML header.html buttons.html accordion.html CSS styleguide.css + accordion.scss header.scss buttons.scss

Slide 80

Slide 80 text

/patterns … HTML HTML HTML HTML click me click me item 1 item 2 item 3 Header header.html buttons.html accordion.html click me click me click me click me

Slide 81

Slide 81 text

click me click me item 1 item 2 item 3 Header click me click me click me click me AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ

Slide 82

Slide 82 text

click me click me Header click me click me click me click me AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ Header Header Header Header

Slide 83

Slide 83 text

item 1 item 2 item 3 Header click me click me click me click me click me click me

Slide 84

Slide 84 text

style.maban.co.uk

Slide 85

Slide 85 text

patternlab.io

Slide 86

Slide 86 text

/*     Your standard form button.    :hover - Highlights when hovering.  :disabled - Dims the button when disabled.  .primary - Indicates button is the primary action.  .smaller - A smaller button    Styleguide 1.1     */ button { … }  button.primary,  button.primary:hover { … }  button.smaller { … }  button:hover { … }  button:disabled { … } KSS

Slide 87

Slide 87 text

Frontify

Slide 88

Slide 88 text

Typecast

Slide 89

Slide 89 text

What to include

Slide 90

Slide 90 text

Basic Elements Mapbox

Slide 91

Slide 91 text

Basic Elements Paul Lloyd’s Barebones

Slide 92

Slide 92 text

“…I fall into this trap all the time… I want to deliver everything.” Patterns Dan Mall worked on Radio Free Europe’s style guide

Slide 93

Slide 93 text

ﬂickr.com/photos/75905404@N00/7126147125

Slide 94

Slide 94 text

Markup Salesforce

Slide 95

Slide 95 text

Markup Salesforce

Slide 96

Slide 96 text

Markup South Tees Hospital

Slide 97

Slide 97 text

Markup South Tees Hospital

Slide 98

Slide 98 text

Styles Salesforce

Slide 99

Slide 99 text

Styles Salesforce

Slide 100

Slide 100 text

Extremes Code for America

Slide 101

Slide 101 text

Extremes Code for America

Slide 102

Slide 102 text

Extremes Code for America

Slide 103

Slide 103 text

Notes Wellcome Trust Intranet

Slide 104

Slide 104 text

Notes Wellcome Trust Intranet

Slide 105

Slide 105 text

Notes Wellcome Trust Intranet

Slide 106

Slide 106 text

Notes Wellcome Trust Intranet

Slide 107

Slide 107 text

Notes Wellcome Trust Intranet

Slide 108

Slide 108 text

Colour Swatches Code for America

Slide 109

Slide 109 text

Colour Swatches Code for America

Slide 110

Slide 110 text

Grids Mailchimp

Slide 111

Slide 111 text

Grids Starbucks

Slide 112

Slide 112 text

Grids Starbucks

Slide 113

Slide 113 text

Grids Starbucks

Slide 114

Slide 114 text

Interaction Salesforce

Slide 115

Slide 115 text

Interaction Google’s Material Design

Slide 116

Slide 116 text

Localisation University of Surrey

Slide 117

Slide 117 text

Localisation University of Surrey

Slide 118

Slide 118 text

Localisation University of Surrey

Slide 119

Slide 119 text

Navigation Code for America

Slide 120

Slide 120 text

Navigation Code for America

Slide 121

Slide 121 text

Living style guides

Slide 122

Slide 122 text

Jina https://twitter.com/jina/status/638850299172667392 “Zombie style guides — style guides that aren't maintained and part of your process.   they die and rot.   they eat your brains.”

Slide 123

Slide 123 text

Rizzo, by Lonely Planet

Slide 124

Slide 124 text

Lonely Planet

Slide 125

Slide 125 text

Lonely Planet

Slide 126

Slide 126 text

Ian Feather on Lonely Planet’s Style Guide “I've made two style guides before this one at Lonely Planet, both of which went out of date very rapidly and were never used ever again. This one doesn't go out of date and it means we don't need to actually maintain it.”

Slide 127

Slide 127 text

Next steps

Slide 128

Slide 128 text

“…you guys are going to live with it for a month or two and then we're going to come back and we're going to assess what worked and what didn't and help you ﬁx it.” Revisit Dan Mall worked on Radio Free Europe’s style guide

Slide 129

Slide 129 text

“…sharing was one part and the other part was we really just needed to keep ourselves honest…” Make it public Federico Holgado on Mailchimp’s Style Guide

Slide 130

Slide 130 text

“…when I saw it I thought it was beautiful and it's why I wanted to join this team.” Make it public Jina on Salesforce’s Style Guide

Slide 131

Slide 131 text

“…we have had people apply who've known about Rizzo, who've known about the style guide, and that's been a really nice thing…” Make it public Ian Feather on Lonely Planet’s Style Guide

Slide 132

Slide 132 text

“I think our standards for what a style guide needs to look like are based on all the ones that are public and all the ones that are public have designers behind them who wouldn't let them be public unless they were beautiful!” It doesn’t have to be pretty Susan Robertson built Editorially’s style guide

Slide 133

Slide 133 text

styleguides.io Thanks for listening! £2 podcast and transcripts e-book 300+ resources

Slide 134

Slide 134 text

styleguides.io Thanks for listening! £2 podcast and transcripts e-book 300+ resources