Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (10)
Similar to Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
Similar to Building & Maintaining A Living Style Guide for a Post Apocalyptic Web (20)
Recently uploaded
Recently uploaded (20)
Building & Maintaining A Living Style Guide for a Post Apocalyptic Web
- 1. a Living Style Guide Building & Maintaining for a Post-Apocalyptic Web @mjovel
- 2. The opinions expressed here are those of the Presenter and do not necessarily reflect the positions of the Food & Drug Administration.
- 22. Department Department Department DepartmentDepartment DepartmentDepartment Development UX/Design Sub-DepartmentSub-Department Delivering the Org Chart
- 23. Web Staff IT Partner OrganizationsContractors Department SME Delivering the Org Chart
- 26. Enter the Design System
- 27. “We’re not designing pages, we’re designing systems of components” –Stephen Haye
- 32. 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.
- 33. 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.
- 34. 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.
- 35. 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.
- 36. Pages are specific instances of templates.
- 45. A Successful Design System Will…
- 46. Focus: allow the designer to focus clearly on the project at hand rather then to be diverted by other distractions.
- 47. Clarity: allow the designer to think clearly about our design beliefs as well as the design constraints in place across the platform.
- 48. Confidence: allow the designer to have complete confidence in what they are designing and that it is inline with others in the team.
- 49. Consistency: create consistency across the product which in turn will create a secure, familiar experience across the platform.
- 50. Efficiency: create understanding across teams, meaning less time wasted concentrating on the less important details.
- 51. What is in a Design System?
- 54. Style Parsers
- 58. Style Parsers • Parses comments from css to generate documentation • Liters your css with comments
- 61. Dynamic Style Guide Platforms
- 64. Hyde
- 67. Solidarity Model Problems • Focused on creators product • Doesn’t Scale • Limited Time & Resource Commitment
- 69. Labcoat
- 70. UI Inventory
- 72. Prioritize
- 75. 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
- 76. Centralized Model Problems • Lack of context of day to day product building • Lack ability to foster active participation • Lack of visibility with product teams
- 78. 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.
- 79. THANK YOU!