'

Style Guide Best Practices at Beyond

Понравилась презентация – покажи это...





Слайд 0

STYLE GUIDES @brad_frost


Слайд 1


Слайд 2

Great news, team. We got the green light to redesign the homepage.


Слайд 3


Слайд 4

That’s great news, boss!


Слайд 5

Yeah, the current homepage is super ugly!


Слайд 6

Yeah and don’t even ask about the code quality lol.


Слайд 7

Exciting! It will be great to do things right this time.


Слайд 8

Yeah we’re going to use BEM…


Слайд 9

And the visuals will be clean and flat.


Слайд 10

Yeah and we’re definitely looking into React.js


Слайд 11

And maybe this will give us the chance to finally migrate to a new CMS.


Слайд 12

Grunt.


Слайд 13

Make it so.


Слайд 14

LATHER. RINSE. REPEAT.


Слайд 15


Слайд 16


Слайд 17


Слайд 18


Слайд 19


Слайд 20


Слайд 21


Слайд 22


Слайд 23


Слайд 24


Слайд 25


Слайд 26


Слайд 27


Слайд 28


Слайд 29

global


Слайд 30

north america


Слайд 31

latin america


Слайд 32

chile


Слайд 33

europe


Слайд 34

india


Слайд 35

australia


Слайд 36

china


Слайд 37

hong kong


Слайд 38

taiwan


Слайд 39


Слайд 40

huge jerk.


Слайд 41


Слайд 42


Слайд 43


Слайд 44


Слайд 45


Слайд 46


Слайд 47


Слайд 48

We don’t have time for cohesion and continuity!


Слайд 49

We’re too busy DISRUPTING!


Слайд 50

ONE BRAND


Слайд 51

PRODUCTS SERVICES FUNCTIONALITY FEATURES CONTENTMEDIUMSFORMA COUNTRIES CUSTOMERS LANGUAGES PEOPLE USER BROWSERS DEVICESENVIRONMENTS SCREENSIZESFORMFACTORSCONTEXT MORE


Слайд 52

STYLE GUIDES


Слайд 53


Слайд 54


Слайд 55

http://cargocollective.com/mcalkins/Walmart-brand-book-design


Слайд 56

brand.wvu.edu


Слайд 57


Слайд 58


Слайд 59


Слайд 60


Слайд 61


Слайд 62


Слайд 63


Слайд 64

https://frontify.com/


Слайд 65

BRAND STYLE GUIDES ๏ Purpose: establish guidelines for using core brand assets ๏ Audience: the entire organization, vendors and anyone making use of brand assets ๏ Can include: Logos, typography, color palette, file templates, assets, downloads, etc


Слайд 66


Слайд 67

https://www.google.com/design/spec/material-design/


Слайд 68


Слайд 69


Слайд 70


Слайд 71

http://www.lightningdesignsystem.com/


Слайд 72

DESIGN LANGUAGE GUIDELINES ๏ Purpose: establish a design language for cohesive user experience across a suite of products and services ๏ Audience: anyone creating user experiences for the organization, mostly designers ๏ Can include: design principles, brand overlap, aesthetics, ux principles, motion, etc


Слайд 73


Слайд 74

voiceandtone.com


Слайд 75


Слайд 76


Слайд 77


Слайд 78

styleguide.mailchimp.com


Слайд 79

VOICE AND TONE GUIDELINES ๏ Purpose: establish and encourage a cohesive, appropriate tone across the entire user experience ๏ Audience: content creators and editors, anyone writing copy for the brand ๏ Can include: interface copy, marketing, documentation, blog posts, legal, alerts, etc


Слайд 80


Слайд 81

http://www.economist.com/styleguide/


Слайд 82


Слайд 83


Слайд 84


Слайд 85

http://www.dal.ca/webteam/web_style_guide/writing_for_the_web.html


Слайд 86

WRITING STYLE GUIDES ๏ Purpose: establish and encourage a cohesive writing style across all properties ๏ Audience: content creators and editors, anyone writing copy for the brand ๏ Can include: grammar, proper content structure, general writing best practices


Слайд 87


Слайд 88


Слайд 89

CSS SYNTAX GUIDELINES code block .thisishowwedoit { }


Слайд 90

CSS SYNTAX GUIDELINES code block .this-is-how-we-do-it { }


Слайд 91

CSS SYNTAX GUIDELINES code block .thisIsHowWeDoIt { }


Слайд 92

CSS SYNTAX GUIDELINES code block .this__is__how__we__do—-it { }


Слайд 93

CSS SYNTAX GUIDELINES code block .- -...- - ..- - —— .. . ..—— — { }


Слайд 94

https://github.com/styleguide


Слайд 95

https://github.com/styleguide/javascript


Слайд 96

https://github.com/styleguide/javascript


Слайд 97

CODE STYLE GUIDES ๏ Purpose: establish code standards for teams to write more cohesive, efficient, and maintainable code ๏ Audience: front-end developers, back-end developers, 3rd party developers, summer interns, developers developers developers ๏ Can include: development principles, HTML structure guidelines, CSS architecture, syntax, best practices, JS style and best practices, backend language syntax and best practices


Слайд 98


Слайд 99

http://walmartlabs.github.io/web-style-guide


Слайд 100


Слайд 101


Слайд 102


Слайд 103


Слайд 104


Слайд 105

PATTERN LIBRARIES ๏ Purpose: establish and maintain an effective interface design system to create consistent UIs, speed up production, and create a watering hole for the team ๏ Audience: anyone touching the project: designers, developers, project managers, product owners, etc ๏ Can include: global elements, typography, image types, lists, navigation, blocks, media, animations, literally anything you include in a UI


Слайд 106

styleguides.io


Слайд 107


Слайд 108


Слайд 109

MAKING PATTERN LIBRARIES HAPPEN


Слайд 110

$ELL IT.


Слайд 111

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion


Слайд 112

Consistency is one of the most powerful usability principles: when things always behave the same, users don't have to worry about what will happen. Instead, they know what will happen based on earlier experience. -Jakob Nielson http://www.nngroup.com/articles/top-10-mistakes-web-design/


Слайд 113

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production


Слайд 114

We just copied and pasted a pattern, changed a few things, and in twenty minutes we had built a system that was responsive; it looked great on mobile and it was nice to look at. [The status page] was one of those pages that not a lot of people will see. We call them the dark corners. -Federico Holgado http://styleguides.io/podcast/federico-holgado/


Слайд 115

By having a pattern you could actually use that's already 95% of the way there, it brings up the quality of everything so those dark corners actually aren't so dark any more. -Federico Holgado http://styleguides.io/podcast/federico-holgado/


Слайд 116

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow


Слайд 117

Mostly designers will come up with rough representations of where things might live without going into too much detail because there's no longer a need to do that work up front and we can just tweak it in the browser afterwards. -Ian Feather http://styleguides.io/podcast/ian-feather/


Слайд 118

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary


Слайд 119

It is the common ground that designers and developers are all seeking…and I find that a style guide is really effective at providing that common ground. -Lincoln Mongillo http://styleguides.io/podcast/lincoln-mongillo/


Слайд 120

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test


Слайд 121

Pattern libraries make what you change in production a lot more easy to manage over the long term; you're able to debug things more effectively. You have a view into how your code base is looking across a site versus having various artifacts show up across hundreds of pages. -Lincoln Mongillo http://styleguides.io/podcast/lincoln-mongillo/


Слайд 122

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference


Слайд 123

BENEFITS OF PATTERN LIBRARIES ๏ Promotes UI consistency and cohesion ๏ Faster production ๏ Better workflow ๏ Creates a shared vocabulary ๏ Easier to test ๏ Useful reference ๏ Future-friendly foundation


Слайд 124

SHOW, DON’T TELL.


Слайд 125

http://cssstats.com


Слайд 126


Слайд 127


Слайд 128

http://bradfrostweb.com/blog/post/interface-inventory


Слайд 129


Слайд 130


Слайд 131

1 ROUND UP THE TROOPS


Слайд 132


Слайд 133

2 PREPARE TO SCREENSHOT


Слайд 134

http://bradfrost.com/blog/post/conducting-an-interface-inventory/


Слайд 135

3 SCREENSHOT EXERCISE


Слайд 136

INTERFACE INVENTORY CATEGORIES ๏ Global ๏ Headings ๏ Image types ๏ Blocks ๏ Icons ๏ Lists ๏ Navigation ๏ 3rd party stuff ๏ Forms ๏ Advertising ๏ Buttons ๏ Messaging ๏ Interactive Components ๏ Animation ๏ Media ๏ Colors


Слайд 137


Слайд 138


Слайд 139

4 PRESENT FINDINGS


Слайд 140

http://www.pointswestav.com/wp-content/uploads/2011/04/Projector-meeting.jpg


Слайд 141


Слайд 142

5 REGROUP & NEXT STEPS


Слайд 143

INTERFACE INVENTORY ๏ Documents your interface design patterns ๏ Points out inconsistencies ๏ Helps get buy-in from organization ๏ Establishes scope of work ๏ Is the genesis of a shared vocabulary ๏ Lays the groundwork for a future pattern library


Слайд 144

AND IF THE BOSS STILL SAYS NO, DO IT ANYWAYS.


Слайд 145

IN ORDER TO MAKE THE WHOLE, YOU NEED TO MAKE THE PARTS.


Слайд 146

special thanks to Wolfram Nagel, SETU GmbH


Слайд 147

special thanks to Wolfram Nagel, SETU GmbH


Слайд 148

special thanks to Wolfram Nagel, SETU GmbH


Слайд 149

special thanks to Wolfram Nagel, SETU GmbH


Слайд 150

special thanks to Wolfram Nagel, SETU GmbH


Слайд 151

ATOMIC DESIGN


Слайд 152


Слайд 153


Слайд 154


Слайд 155


Слайд 156

SEARCH THE SITE ENTER KEYWORD SEARCH


Слайд 157

SEARCH THE SITE ENTER KEYWORD SEARCH


Слайд 158


Слайд 159


Слайд 160


Слайд 161


Слайд 162


Слайд 163


Слайд 164


Слайд 165


Слайд 166


Слайд 167


Слайд 168


Слайд 169


Слайд 170


Слайд 171

ABSTRACT CONCRETE


Слайд 172

ABSTRACT CONCRETE CREATORS CLIENTS


Слайд 173

REFERENCE BUILD REVIEW


Слайд 174


Слайд 175

DAVE OLSEN @dmolsen


Слайд 176

WHAT PATTERN LAB IS ๏ A design system builder ๏ Your comprehensive interface design system ๏ A style guide starter kit ๏ A design toolkit (viewport resizer and other tools)


Слайд 177


Слайд 178


Слайд 179


Слайд 180


Слайд 181

https://mustache.github.io/


Слайд 182


Слайд 183

MOLECULE GUTS code block <div class="block block-post"> <a href="{{ url }}"> <div class="b-img"> {{> atoms-thumb }} </div> <h3 class="b-title">{{ headline }}</h3> <p class="b-excerpt">{{ excerpt }}</p> </a> </div>


Слайд 184

BASIC INCLUDE code block {{> molecules-block-post }}


Слайд 185


Слайд 186


Слайд 187

ORGANISM GUTS code block <header role="banner"> {{> atoms-logo }} {{> molecules-primary-nav }} {{> molecules-search }} </header>


Слайд 188

ORGANISM INCLUDE code block {{> organisms-header }}


Слайд 189


Слайд 190


Слайд 191


Слайд 192

TEMPLATE GUTS {{> organisms-header }} code block <main role="main"> {{# hero }} {{> molecules-hero-video }} {{/ hero }} <section> {{# experience }} {{> organisms-story-feature }} {{/ experience }} </section> <section> {{# factoid-advertising }} {{> organisms-factoid }} {{/ factoid-advertising }}


Слайд 193


Слайд 194

CONTENT STRUCTURE ACTUAL CONTENT


Слайд 195


Слайд 196


Слайд 197


Слайд 198

PIPING IN REAL CONTENT { code block "title" : "Time Inc.", "bodyClass": "home", "hero" : { "headline": "Moving People" "img": { "src": "/images/hero_beyonce.jpg", "alt": "Beyonce" } }


Слайд 199

patternlab.io


Слайд 200


Слайд 201


Слайд 202


Слайд 203


Слайд 204


Слайд 205


Слайд 206


Слайд 207


Слайд 208


Слайд 209


Слайд 210


Слайд 211


Слайд 212


Слайд 213


Слайд 214


Слайд 215

http://trentwalton.com/2011/07/14/content-choreography/


Слайд 216


Слайд 217

…OR DID THEY?


Слайд 218


Слайд 219

design & website development


Слайд 220

design & development style guide website


Слайд 221

design & development website style guide


Слайд 222

design & development website style guide


Слайд 223

design & design system website development style guide


Слайд 224

design & development design system website style guide


Слайд 225

A style guide is an artifact of design process. A design system is a living, funded product with a roadmap & backlog, serving an ecosystem. -Nathan Curtis https://twitter.com/nathanacurtis/status/656829204235972608


Слайд 226

MAKE IT MAINTAINABLE


Слайд 227

YOU SEEK THE HOLY GRAIL.


Слайд 228

http://rizzo.lonelyplanet.com/


Слайд 229

Pattern API design & development design system website style guide


Слайд 230

Grunt copy CSS, JS, Patterns design & development pattern lab website style guide


Слайд 231

MAKE IT CROSSDISCIPLINARY


Слайд 232


Слайд 233


Слайд 234

MAKE IT APPROACHABLE


Слайд 235

http://www.yelp.com/styleguide


Слайд 236

http://purple.herokuapp.com


Слайд 237

http://ux.mailchimp.com/patterns/


Слайд 238

MAKE IT VISIBLE


Слайд 239

When you place style guides behind constraints, teams either take an outrageously long time to get access, or they never get access. -Nathan Curtis http://styleguides.io/podcast/nathan-curtis


Слайд 240

http://www.starbucks.com/static/reference/styleguide/ http://www.starbucks.com/static/reference/styleguide/


Слайд 241

styleguides.io/examples.html


Слайд 242


Слайд 243

When I saw Salesforce’s style guide I thought it was beautiful and it's why I wanted to join this team. -Jina Bolton styleguides.io/podcast/jina-bolton


Слайд 244

MAKE IT AGNOSTIC


Слайд 245


Слайд 246


Слайд 247


Слайд 248

WARNING: NAMING THINGS IS REALLY FREAKING HARD. https://www.flickr.com/photos/131260238@N08/


Слайд 249


Слайд 250


Слайд 251

MAKE IT CONTEXTUAL


Слайд 252


Слайд 253

MAKE IT LAST


Слайд 254

http://www.google.com/design/spec/whats-new/whats-new.html


Слайд 255


Слайд 256

https://flic.kr/p/5YnE4z


Слайд 257


Слайд 258

atomicdesign.bradfrost.com


Слайд 259

LY N O !! ! 10 $ atomicdesign.bradfrost.com


Слайд 260

THANKS! @brad_frost


Слайд 261


×

HTML:





Ссылка: