Design System.pdf
•
9 likes•3,135 views
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Report
Share
More Related Content
What's hot
What's hot (20)
Similar to Design System.pdf
Similar to Design System.pdf (20)
Recently uploaded
Recently uploaded (20)
Design System.pdf
- 1. Design System How it improves the process Design System How it improves the process
- 4. Companiesusing DSMs Material Design System Human Interface Guidelines Fluent Design System Atlassian Design System Uber Design System Polaris Design System
- 6. Consistency Developers are able to implement consistent UI much easier. They can think of the particular page as of the set of components.
- 7. Higher Standard Consistency makes the impression of higher quality. QA Specialists will easily monitor the implemented design with Design System documentation.
- 8. Better Communication with Dev Team Design System uses a specific naming convention in the project. When the developer and designer discuss the page, they will use the same names of the components.
- 9. Faster Design & Development Process We have already built component library of UI controls needed to implement. Now we just use them when the new feature requires to create a new page or modify the existing one.
- 10. Focus More on UX, Less on Visuals Using UI Library means we do not have to figure out every time what should be the appearance of the components on this page. We can focus more on better usability and delightful experiences.
- 12. Atomic Design Atom Molecules Organisms Templates Pages
- 13. Atom 1 Color Theme Selecting specific numbers of colors 2 Typography Creating a fixed number of text styles 3 Iconography Organise icons that will be used in the design 4 Grid Lower unit of measumenet for the design
- 14. Molecules They are groups of atoms that work as a single component with a single function Dropdown menu Radio buttons inside regular button Dropdown button Date picker Search component Blockquote Breadcrumb Card component Collapsible group item Input fields (with labels Media uploader Loading component Notification Pagination
- 17. Let’s Solve Together Atom Molecules Organisms
- 18. Templates They are combinations of multiple oraganismsi and have multiple functions. Pofile Sectio Multiple Listin Grids
- 19. Pages They are combinations of multiple oraganismsi and have multiple functions. Whole UI