This document discusses principles and best practices for collaboration within organizations. It addresses topics like establishing shared values and culture, defining roles and responsibilities across teams, implementing design systems for consistency, and emphasizing communication during the process of creating products and tools. The overall message is that collaborative work requires establishing discipline and guidelines while also allowing for flexibility and humanity between groups.
10. SPACES VS TABS SKETCH VS PHOTOSHOP GIF VS GIF
GRUNT VS GULP NPM VS YARN
FILE STRUCTURE
BEM VS SMACSS
FLAT VS SKEUOMORPHIC
ZEPLIN VS INVISION 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
26. 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
28. –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/
86. 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
92. https://flic.kr/p/cHPcBJ
DESIGN SYSTEM MAKERS
๏Have a birds-eye perspective of entire ecosystem
๏The ones responsible for maintaining the design system
๏Manage requests and approve changes
๏Work with users and business to make sure it’s addressing product needs
๏Need to establish a pattern-driven, cross-disciplinary workflow
93. https://flic.kr/p/KdvF6Z
DESIGN SYSTEM USERS
๏Provide an on-the-ground perspective focused on specific applications
๏May also be makers, separate development teams, junior-level developers,
partner agencies, external development shops, and/or other third-parties
๏Should coordinate with makers to make sure the system is addressing
their needs
๏May be widely distributed and process may be extremely waterfall
94.
95. DESIGN SYSTEM TEAM MAKEUP
๏Essentially a product team
๏UX designer(s)
๏Visual designer(s)
๏Frontend developer(s)
๏Product manager(s)
๏QA(s)
100. 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
104. "The main challenges are the existing thousands of
lines of code, acquisitions, and existing suite of
technologies that makes up a billion dollars a year.
We'd like to not lose that billion dollars."
105. "There's a lot of institutional knowledge here locked up
in people's heads. Slack channels are great, but it
becomes a scavenger hunt to find information about
how something's supposed to work."
106. "For a basic expand/collapse pattern, the devs spent 2
days going to different teams to find the code, then still
had to rebuild it themselves."
107. USER INTERVIEWS
๏ Round up a diverse group of stakeholders,users,and other
people who would impact/be impacted by a design system
๏ Talk about current workflow,pain points,hopes,fears,
dreams,frustrations,and other things that can influence
the success of the design project
๏ Latch onto poignant quotes and emerging themes
๏ Start shaping the story and key themes in preparation
for kickoff
114. PRIORITIES WORKSHOP
๏ Discuss emerging themes from interviews and introduce
potential principles and tactics
๏ Give each person 3 votes for principles they care most about
๏ Discuss principles.What won?What lost?Why?
๏ Give each person 3 votes for tactics/features they care most
about.
๏ Goal is to align around a set of shared principles and priorities
for the design system
117. DESIGN SYSTEM PROCESS PRINCIPLES
๏ Make the best thing the
easiest thing
๏ Design for “grab it quick”
efficiency
๏ Design for contribution
and community
๏ Crowd-proof the markup
๏ Fit the workflow
๏ Just enough documentation
๏ Technology agnostic
๏ Embed the brand in the code
๏ Consistent, not homogenous
๏ Opinionated defaults
๏ Make people smarter just
by using it
118. DESIGN SYSTEM PRODUCT PRINCIPLES
๏ Just enough interface
๏ Strong and direct
๏ Speed is a feature
๏ Adaptable density
๏ Safety always
๏ No tricks or stunts
๏ Recycle, reduce, reuse
162. The painter, when at a distance from the easel, can assess and analyze
the whole of the work from this vantage. He scrutinizes and listens,
chooses the next stroke to make, then approaches the canvas to do it.
Then, he steps back again to see what he’s done in relation to the
whole. It is a dance of switching contexts, a pitter-patter pacing across
the studio floor that produces a tight feedback loop between mark-
making and mark-assessing.
-Frank Chimero
http://read.shapeofdesignbook.com/chapter01.html