Hello Design System

A very basic introduction to Design System from UI Designer's perspective. What is Design System, Why Design System, and easy step How to Build Design System.

Transcript

1. Hello Design System Aryodwin UI/UX Designer @Tanijoy Cartenz x Tanijoy Friday Sharing Session Sharing is Caring A Very Basic Introduction
2. What is Design System What kind of species is it? “Design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” - Marco Suarez, Designbetter.co by InVision
3. What is Design System What kind of species is it? Design Library Code Library Documentation, build product faster and easier “Collection of reusable components, in the form of (for designer), (for developer), plus which make us ” - Aryo, Bukan Professor
4. What is Design System What kind of species is it? Design Library Hello, this is my anatomy *it’s a very basic anatomy. Could be different depending each Company Code Library Online Documentation
5. Design Library
6. Code Library
7. Online Documentation
8. Why Design System Why do I have to believe it? Because this problem will attacks you: 1. Lack of consistentcy 2. Almighty Stakeholder want us to build product faster :”)
9. Lack of consistentcy
10. “They” want us to build product faster Companies could do 1 of 3 things: 1. Hire more people 2. Design faster 3. Create solutions that work for multiple problems
11. Why Design System Why do I have to believe it? Design System will gives you this: 1. Design easier & faster 2. Iterate Faster 3. Well documented, delegate easier 4. More consistentcy
12. Design Easier Faster Let’s Try! This is Demo Session, Anyone wanna be a volunteer? Raise your hands!!!! VS Design System Design Manually
13. Iterate Faster <Showing Demo>
14. Delegate Easier
15. More Consis- tency
16. Okay, I belive in Design System. So How?
17. How to Build Gather Define Organize
18. Your Compo- ponent Gather 1
19. And List Gather Button Tabs Pagination 1
20. True Style Define Tipography 2
21. True Style Define Color 2
22. True Style Define Shadow (if necessary) 2
23. True Style Define Button (After) Button (Before) 2
24. True Style Define Tabs (After) Tabs (Before) 2
25. Structure Organize 3 <show the demo>
26. Structure Organize Atomic Design Method 3
28. Rezise- able Organize Ensure your component is resizeable 3
29. And.. Ta da! Design Library Ready to Serve!
30. Thank you ;)