Design Systems

Transcript

1. Fake Friday.
2. renato. Design Systems
3. summary. definition and structure design small, build big get started hijack a project a change in perspective version control what why when how
4. what
5. it has been around and in many shapes book: The Timeless Way of Building — Christopher Alexander what
6. what
7. what
8. what
9. a library of visual artifacts what IT IS NOT
10. what a collection of reusable patterns and components with clear guides and best practices to ensure consistency and quality across experiences A DESIGN SYSTEM IS
11. what STRUCTURE color palette, typography, icons, grid, atoms, etc templates, modules, components, elements design, implementation, editorial, brand ui assets patterns rules styleguide
12. why
13. think of it as legos design small, build big why
14. “Design systems should help you design better and faster. Or maybe just better.” — Dan Mall why
15. is this enough? why
16. why
17. design driven development why talk: https://youtu.be/JjXnmhNW8Cs — Sara Vieira
18. when
19. “The way to get started is to quit talking and begin doing” — Walt Disney when
20. the team is just looking to do something new because they are excited or do not like existing patterns DO NOT START IT IF when
21. have you got the time? have you got the resources? hijack a project streamline your workflow share ideas with people when
22. is your company ready? when sell the outcome not the process focus on benefits http://v3.danielmall.com/articles/selling-design-systems — Dan Mall
23. when WHAT OTHERS HAVE DONE https://blog.intercom.com/ solving-fifty-shades-blue-built-design-system/ — Intercom https://atlassian.design/ — Atlassian https://solid.buzzfeed.com/ — BuzzFeed https://lightningdesignsystem.com/ — Salesforce https://airbnb.design/building-a-visual-language/ — Airbnb
24. how
25. talk to the people that are gonna be using it, find out what they need how
26. share ideas with other people weight it against several patterns break it over and over again rebuild how
27. get organized how how
28. mainte nance
29. mainte nance
30. at a scale get your team on the same page make the system easily accessible document new principles https://medium.muz.li/ building-design-systems-at-scale-86cfcd55127b — Tanner Christensen mainte nance
31. a change in perspective version control and storage kactus abstract zeroheight github https://github.com https://goabstract.com https://kactus.io https://zeroheight.com mainte nance
32. a change in perspective mainte nance version control and storage https://drive.google.com https://dropbox.com https://invisionapp.com/craft https://projects.invisionapp.com/dsm craft dropbox dsm drive
33. mainte nance trello jira https://www.atlassian.com/jira https://trello.com ticketing system keep priorities straight and avoid duplicates
34. mainte nance single source of truth storybook styleguidist https://storybook.js.org https://building.coursera.org/coursera-ui https://airbnb.io/react-dates https://react-styleguidist.js.org https://bokuweb.github.io/re-bulma https://joyent-ui-toolkit.now.sh/
35. color profile mainte nance Unmanaged color profile vs sRGB and P3 color profile https://sketchapp.com/docs/ other/color-management/
36. example
43. Recap
44. a collection of reusable components with clear guidelines design small, build big talk to the people that are gonna be using it version control single source of truth https://www.designsystems.com — by Figma https://dsconference.com — Finland Conf
45. thank you. renato. r@weareredlight.com