Maintaining Central-Bank Solvency under New-Style Central Banking.pdf
Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
Transcript of Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
![Page 1: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/1.jpg)
a Living Style GuideBuilding & Maintaining
for a Post-Apocalyptic Web
@mjovel
![Page 2: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/2.jpg)
The opinions expressed here are those of the Presenter and do not necessarily reflect the positions of the Food & Drug Administration.
![Page 3: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/3.jpg)
![Page 4: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/4.jpg)
![Page 5: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/5.jpg)
![Page 6: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/6.jpg)
![Page 7: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/7.jpg)
![Page 8: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/8.jpg)
![Page 9: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/9.jpg)
![Page 10: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/10.jpg)
![Page 11: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/11.jpg)
![Page 12: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/12.jpg)
![Page 13: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/13.jpg)
![Page 14: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/14.jpg)
![Page 15: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/15.jpg)
![Page 16: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/16.jpg)
![Page 17: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/17.jpg)
![Page 18: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/18.jpg)
![Page 19: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/19.jpg)
![Page 20: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/20.jpg)
![Page 21: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/21.jpg)
![Page 22: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/22.jpg)
Department Department Department DepartmentDepartment DepartmentDepartment
Development UX/Design
Sub-DepartmentSub-Department
Delivering the Org Chart
![Page 23: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/23.jpg)
Web Staff IT Partner OrganizationsContractors
Department
SME
Delivering the Org Chart
![Page 24: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/24.jpg)
![Page 25: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/25.jpg)
![Page 26: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/26.jpg)
Enter the Design System
![Page 27: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/27.jpg)
“We’re not designing pages, we’re designing
systems of components” –Stephen Haye
![Page 29: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/29.jpg)
http://danielmall.com/articles/rif-element-collages/
![Page 30: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/30.jpg)
http://bradfrost.com/blog/post/atomic-web-design/
![Page 32: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/32.jpg)
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
![Page 33: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/33.jpg)
Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and
serve as the backbone of our design systems.
For example, a form label, input or button aren’t too useful by themselves, but combine them together as
a form and now they can actually do something together.
![Page 34: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/34.jpg)
Organisms are groups of molecules joined together to form a relatively complex, distinct section of an
interface.
For example, a masthead organism might consist of diverse components like a logo, primary navigation,
search form, and list of social media channels.
![Page 35: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/35.jpg)
Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we
start to see the design coming together and start seeing things like layout in action.
![Page 36: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/36.jpg)
Pages are specific instances of templates.
![Page 37: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/37.jpg)
![Page 38: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/38.jpg)
![Page 39: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/39.jpg)
![Page 40: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/40.jpg)
![Page 41: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/41.jpg)
![Page 42: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/42.jpg)
![Page 45: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/45.jpg)
A Successful Design System Will…
![Page 46: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/46.jpg)
Focus: allow the designer to focus clearly on the project at hand rather
then to be diverted by other distractions.
![Page 47: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/47.jpg)
Clarity: allow the designer to think clearly about our design beliefs as well
as the design constraints in place across the platform.
![Page 48: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/48.jpg)
Confidence: allow the designer to have complete confidence in what they are
designing and that it is inline with others in the team.
![Page 49: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/49.jpg)
Consistency: create consistency across the product which in turn will create a secure, familiar experience across the
platform.
![Page 50: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/50.jpg)
Efficiency: create understanding across teams, meaning less time wasted
concentrating on the less important details.
![Page 51: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/51.jpg)
What is in a Design System?
![Page 52: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/52.jpg)
TTypography IconsColor
MotionImageryTone Accessibility
508
Code
Design System
![Page 53: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/53.jpg)
Styleguide Creators
![Page 54: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/54.jpg)
Style Parsers
![Page 55: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/55.jpg)
http://warpspire.com/kss/
![Page 58: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/58.jpg)
Style Parsers
• Parses comments from css to generate documentation
• Liters your css with comments
![Page 59: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/59.jpg)
Static Generators
![Page 61: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/61.jpg)
Dynamic Style Guide Platforms
![Page 62: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/62.jpg)
http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
![Page 63: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/63.jpg)
Solidarity Model
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.gyrjkbffb
![Page 64: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/64.jpg)
Hyde
![Page 65: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/65.jpg)
![Page 66: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/66.jpg)
![Page 67: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/67.jpg)
Solidarity Model Problems
• Focused on creators product
• Doesn’t Scale
• Limited Time & Resource Commitment
![Page 68: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/68.jpg)
Centralized Model
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.gyrjkbffb
![Page 69: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/69.jpg)
Labcoat
![Page 70: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/70.jpg)
UI Inventory
![Page 71: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/71.jpg)
![Page 72: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/72.jpg)
Prioritize
![Page 73: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/73.jpg)
https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742#.6se46kibr
![Page 74: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/74.jpg)
https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742#.6se46kibr
![Page 75: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/75.jpg)
Centralized Model Benefits
• Dedicated team avoids single product bias
• Spread design system to many product lines
• Coordinate prioritization of patterns across many products and manage backlog
![Page 76: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/76.jpg)
Centralized Model Problems
• Lack of context of day to day product building
• Lack ability to foster active participation
• Lack of visibility with product teams
![Page 77: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/77.jpg)
Federated Model
https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0#.gyrjkbffb
![Page 78: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/78.jpg)
Federated Model Benefits
• Teams composed of various products reduces single product bias
• Creates evangelists within product teams
• Design system will more accurately reflect product needs.
![Page 79: Building & Maintaining A Living Style Guide for a Post Apocalyptic Web](https://reader031.fdocuments.in/reader031/viewer/2022030305/5876145c1a28ab306c8b6503/html5/thumbnails/79.jpg)
THANK YOU!