A presentation at DigitalGov Youtube Series by Brad Frost
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
marketing sales engineering digital hr customer support r&d accounting management administration
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
management public relations research digital social creative services analysis cmo vp assistants
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
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
backend content frontend ux visual manager frontend backend ux qa
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
frontend frontend frontend frontend frontend frontend frontend frontend frontend frontend
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
UX DESIGN VISUAL DESIGN DEVELOPMENT
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
Nobody works alone in a vacuum, and successful work hinges on how well a team communicates and collaborates with each other. This talk will explore many methods, tools, and techniques teams use to produce great web experiences. How do front-end development teams make sure they write clean and consistent code together? How do designers ensure colors, typography, and other design elements are used correctly? What deliverables should be created in an effective web design process? How are decisions communicated with the team, stakeholders, and the broader organization? There are no “right” answers to these questions, but this talk will cover some important principles and helpful tactics to help your team make great work together.
The following resources were mentioned during the presentation or are useful additional information.
Join Brad Frost as he talks about design systems and the role they play in creating a successful, collaborative structure for modern organizations.
This talk will cover how a well crafted design system can help your organization
Focus your mission Be more productive Collaborate across multiple teams Craft principles and guidelines Get more work in front of users This talk is open to anyone in government.
Atomic Design details all that goes into creating and maintaining robust design systems, allowing you to roll out higher quality, more consistent UIs faster than ever before. This book introduces a methodology for thinking of our UIs as thoughtful hierarchies, discusses the qualities of effective pattern libraries, and showcases techniques to transform your team's design and development workflow.
Here’s what was said about this presentation on social media.
for free. You
can too.