Design System General Knowledge

Transcript

1. UX Episode 3 Design System 8 July 2022
2. We acknowledge the Traditional Owners of country throughout Australia and recognise their continuing connection to land, waters and culture. We pay respect to their Elders past, present and emerging. 2
3. Intro Daniel Wang Focus Design framework and capability (GEL) Design processes and tools Design operations 3 Design Practice Lead
4. Agenda • Where is Design System coming from • What is Design System • Why we need a Design System • Who should be involved • Who are the consumers of Design System • The future of Design System • AEMO’s Design System 4
5. 5 Where is a Design System coming from?
7. 7 https://i0.wp.com/thecrazy1.com/wp-content/uploads/2016/12/3.jpg?resize=768%2C433&ssl=1
8. 8 https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d074d027-881a-488f-8ae3-2757275f895d/this-is-the-web-2-opt.png
9. 9 https://atomicdesign.bradfrost.com/images/content/lego-4.png
10. 10 Atomic Design methodology
11. 11 Atoms Organisms Molecules
12. 12 • Homepage • Dashboard • Section Landing • Search Results • Detail Page • Special Pages (Login, 404, empty state) Templates
13. 13 Page
14. 14 What is a Design System?
15. A Design System is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. A Design System is the single source of truth which collects rules, principles, assets, constraints and best practices that will allow the teams to design, realize and develop a digital product. 15
16. 16 https://assets.website-files.com/5cb09a0317edca4b17c1d245/5cf0e1cee5cc996306a6a571_1.png
17. 17 Examples
30. 30 Benefits of having a Design System
31. 31 Scale design Design consistency Make testing easier Creates a shared language Prototype faster Iterate more quickly Build in accessibility and usability Benefits of having a Design System
32. 32 Who should be involved?
35. 35 Centralized Federated
36. 36 Who are the users of Design System?
38. 38 Future of Design Systems
42. 42 AEMO’s Design System
43. 43 Global Experience Language
45. 46 https://www.ai-maxtools.com/application/files/thumbnails/small/4115/2512/8006/Cavemen-Cartoon-600px_v520_.jpg
46. Questions 47