Working Together with Principles and Guidelines
•
2 j'aime•1,149 vues
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.
Recommandé
Recommandé
Contenu connexe
Similaire à Working Together with Principles and Guidelines
Similaire à Working Together with Principles and Guidelines (20)
Plus de Aquent
Plus de Aquent (20)
Dernier
Dernier (20)
Working Together with Principles and Guidelines
- 4. OUR WORK IS DONE WITH OTHER PEOPLE FOR OTHER PEOPLE
- 5. SLACK GIF
- 6. HOW DO WE WORK WITH EACH OTHER?
- 7. HOW DO WE TALK TO EACH OTHER?
- 8. HOW DO WE COORDINATE WITH EACH OTHER?
- 9. HOW DO WE COLLABORATE WITH EACH OTHER?
- 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
- 13. complete chaos stifling rigidity
- 18. marketing sales engineering digital hr customer support r&d accounting management administration
- 19. marketing sales engineering digital hr customer support r&d accounting management administration
- 21. marketing sales engineering digital hr customer support r&d accounting management administration
- 23. MISSION
- 25. COMPANY VALUES
- 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
- 27. CULTURE
- 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/
- 30. management public relations research digital social creative services analysis cmo vp assistants
- 31. management public relations research digital social creative services analysis cmo vp assistants
- 32. management public relations research digital social creative services analysis cmo vp assistants
- 33. principles & guidelines management public relations research digital social creative services analysis cmo vp assistants
- 34. BRAND GUIDELINES
- 45. voiceandtone.com
- 49. team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- 50. team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- 52. team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- 53. principles & guidelines team 1 team 2 team 3 team 4 team 5 team 7 team 6 team 9 team 10 team 8
- 54. DESIGN SYSTEMS!
- 55. A DESIGN SYSTEM IS THE STORY OF HOW YOUR ORGANIZATION DESIGNS AND BUILDS PRODUCTS
- 79. code block .thisishowwedoit { } CSS SYNTAX GUIDELINES
- 80. code block .this-is-how-we-do-it { } CSS SYNTAX GUIDELINES
- 81. code block .thisIsHowWeDoIt { } CSS SYNTAX GUIDELINES
- 82. code block .this__is__how__we__do—-it { } CSS SYNTAX GUIDELINES
- 83. code block .- -...- - ..- - —— .. . ..—— — { } CSS SYNTAX GUIDELINES
- 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
- 87. MAKING DESIGN SYSTEMS HAPPEN
- 88. WHO'S MAKING THE DESIGN SYSTEM?
- 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
- 95. DESIGN SYSTEM TEAM MAKEUP ๏Essentially a product team ๏UX designer(s) ๏Visual designer(s) ๏Frontend developer(s) ๏Product manager(s) ๏QA(s)
- 97. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 CENTRALIZED
- 98. https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0 FEDERATED
- 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
- 102. RESEARCH & USER INTERVIEWS
- 103. "You can probably carbon date our UIs based on the design."
- 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
- 108. KICKOFF WORKSHOP
- 109. PRIORITIES EXERCISE
- 113. ]
- 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
- 115. DESIGN PRINCIPLES
- 116. PROCESS PRODUCT
- 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
- 119. PREPARING TO CREATE
- 128. comp production
- 129. THERE IS NO SUBSTITUTE FOR HUMAN COMMUNICATION AND COLLABORATION
- 138. whiteboard sketch working product that tool you've spent 7 years mastering
- 139. >
- 142. COLLABORATION AND COMMUNICATION OVER DELIVERABLES
- 143. CREATING
- 144. ATOMIC DESIGN
- 149. ENTER KEYWORD SEARCH THE SITE SEARCH
- 150. ENTER KEYWORD SEARCH THE SITE SEARCH
- 161. ABSTRACT CONCRETE
- 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
- 163. SYSTEM PRODUCT
- 165. complete chaos stifling rigidity