Let's Work Together!

LET'S WORK TOGETHER! @brad_frost

OUR WORK IS DONE
WITH OTHER PEOPLE FOR OTHER PEOPLE

SLACK GIF

HOW DO WE WORK WITH

  EACH OTHER?

HOW DO WE TALK TO

  EACH OTHER?

HOW DO WE COORDINATE WITH

  EACH OTHER?

HOW DO WE COLLABORATE WITH

  EACH OTHER?

30,000 WEBSITES!!!!!!

SPACES VS TABS SKETCH VS PHOTOSHOP GIF VS GIF GRUNT VS GULP NPM VS YARN FILE STRUCTURE BEM VS SMACSS FLAT VS SKEUOMORPHIC AXURE VS INDESIGN REACT VS VUE PROGRESSIVE ENHANCEMENT VS SINGLE PAGE APPS ANGULAR VS EMBER NATIVE VS WEB SVG VS ICON FONTS WORDPRESS VS DRUPAL PHP VS RUBY VS NODE VS PYTHON SASS VS LESS

complete chaos stifling rigidity

PRINCIPLES AND GUIDELINES

  discipline team teams department company

company  discipline team teams department

marketing sales engineering digital hr customer   support r&d accounting management administration

  principles & guidelines marketing sales engineering digital hr customer   support r&d accounting management administration

MISSION

https://www.charitywater.org/about/mission.php

COMPANY VALUES

ZAPPOS 10 CORE VALUES ๏ Deliver WOW Through Service ๏ Embrace and Drive Change ๏ Create Fun and A Little Weirdness ๏ Be Adventurous, Creative, and Open-Minded ๏ Pursue Growth and Learning ๏ Build Open and Honest Relationships With Communication ๏ Build a Positive Team and   Family Spirit ๏ Do More With Less ๏ Be Passionate and Determined ๏ Be Humble https://www.zapposinsights.com/about/core-values

CULTURE

–Chris Edmonds An organizational constitution specifies your team’s purpose, values and behaviors, strategies, and goals.   It creates “liberating rules” that help leaders and team members understand exactly how they are expected to treat each other and their customers. http://thecultureengine.com/

department  discipline team teams company

management public relations research digital social creative services analysis cmo vp assistants

  principles & guidelines management public relations research digital social creative services analysis cmo vp assistants

BRAND GUIDELINES

https://design.ubuntu.com/brand/

VOICE AND TONE GUIDELINES

voiceandtone.com

teams  discipline team department company

team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8

SPECIAL SNOWFLAKE SYNDROME

team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8

  principles & guidelines team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8

DESIGN SYSTEMS

A DESIGN SYSTEM IS THE STORY   OF HOW YOUR ORGANIZATION
DESIGNS AND BUILDS PRODUCTS

https://lightningdesignsystem.com/

https://material.io/guidelines/

http://carbondesignsystem.com/

https://designsystem.digital.gov/

DESIGN SYSTEMS ๏ Purpose: define how design and development gets done at the organization
๏ Audience: anyone creating digital user experiences for the organization ๏ Can include: design principles, ux guidelines, development guidelines, ui components, page templates, user flows, processes (contributing, etc), tools, code repositories, voice and tone, writing guidelines, resources, etc

team  discipline teams department company

backend content frontend ux visual manager frontend backend ux qa

  principles & guidelines backend content frontend ux visual manager frontend backend ux qa

  discipline team teams department company

frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend

  principles & guidelines frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend

CODE STYLE GUIDES

code block .thisishowwedoit { } CSS SYNTAX GUIDELINES

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

code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES

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

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

https://github.com/styleguide

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

  discipline team teams department company

  discipline team teams department company design systems

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & results

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/

https://18f.gsa.gov/2017/10/03/building-a-large-scale-design-system/

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & results ๏ Faster production = roll out more features & iterations faster than ever

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

By having a pattern you could 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/

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & results ๏ Faster production = roll out more features & iterations faster than ever ๏ Higher-quality production = teams can focus on higher-level tasks

Once we get past the tedium of building the same thing over and over again we can focus our energy on more worthwhile tasks like accessibility, performance, and iteration. We can work on the fun stuff rather than the tedious things. -Micah Godbolt

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & results ๏ Faster production = roll out more features & iterations faster than ever ๏ Higher-quality production = teams can focus on higher-level tasks ๏ Shared vocabulary = more time collaborating & less time in meetings

It is 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/

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & $$$$$ ๏ Faster production = roll out more features & iterations faster than ever ๏ Higher-quality production = teams can focus on higher-level tasks ๏ Shared vocabulary = more time collaborating & less time in meetings ๏ Easier to test = more responsive, performant, and accessible experiences

A design system makes what you change in production a lot more easy to manage over the long term; you're able to debug things more effectively. You're able to 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/

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & $$$$$ ๏ Faster production = roll out more features & iterations faster than ever ๏ Higher-quality production = teams can focus on higher-level tasks ๏ Shared vocabulary = more time collaborating & less time in meetings ๏ Easier to test = more responsive, performant, and accessible experiences ๏ Useful reference = an essential resource and hub for best practices

BENEFITS OF DESIGN SYSTEMS ๏ Promotes UI consistency & cohesion = more conversions & $$$$$ ๏ Faster production = roll out more features & iterations faster than ever ๏ Higher-quality production = teams can focus on higher-level tasks ๏ Shared vocabulary = more time collaborating & less time in meetings ๏ Easier to test = more responsive, performant, and accessible experiences ๏ Useful reference = an essential resource and hub for best practices ๏ Future-friendly foundation = modify, extend, & improve upon over time

MINIMUM VIABLE ARTIFACTS

COMPLEX NAVIGATION DEATH TO THE WATERFALL

INFORMATION ARCHITECTURE VISUAL DESIGN DEVELOPMENT

comp production

http://bradfrost.com/blog/post/development-is-design/

UX DESIGN VISUAL DESIGN DEVELOPMENT

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

whiteboard sketch working product that tool you've spent 7 years mastering

https://airbnb.design/sketching-interfaces/

COLLABORATION AND COMMUNICATION OVER DELIVERABLES

COLLABORATION AND COMMUNICATION OVER PROCESS

The Design System informs our Product Design. Our Product Design informs the Design System. -Jina Anne https://medium.com/salesforce-ux/the-salesforce-team-model-for-scaling-a-design-system-d89c2a2d404b

design system product product product product product product product product

complete chaos stifling rigidity

  discipline team teams department company

http://link.com http://atomicdesign.bradfrost.com/

THANK YOU! @brad_frost bradfrost.com

Let's Work Together!

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75