Design Systems by Mikkel Rom, Creuna Design Systems are pretty hyped these days, but what are Design Systems really and how can they help you and your team in your day-to-day job? I will talk about the problems that Design Systems can help you solve and how to easily get started. I will also talk about how to use it as a tool that improves collaboration with the designer, and how to help you enforce consistency across your entire UI Video (or most of it): https://www.facebook.com/filipbech/videos/10155488552362271/ Twitter: https://twitter.com/mikkelrom

1. Design Systems
ngAarhus October meetup
Mikkel Rom Engholm
Senior Frontend Developer, Creuna

2. 2 things you’re probably wondering
© Creuna
”Can I get the slides?”
”Can I ask a question?”

3. © Creuna
HTML + CSS only

4. Who am I?

5. Agenda
© Creuna
1. 4 problems
2. What is a design system?
3. How it solves the 4 problems
4. How to get started?

6. How do we
effectively build upon
an existing website?

7. Example

12. Nothing but
best guesses

13. 4 problems

14. Problem #1: Missing overview
© Creuna
• No idea about what’s available
• Tough onboarding/coming back to a project
• Hidden UI (e.g. log in to view page)

15. Problem #2:
Reusability
Photo by Ashim D’Silva on Unsplash

16. Problem #2: Reusability
© Creuna
Making components too specific and not reusable
Naming is hard So we end up doing this
Sketch – design tool
Or this
Userstory: ”As a stakeholder I would like to have a promotion banner for the front page”

17. Problem #3:
Inconsistency
Image courtesy: http://lootok.com

18. © Creuna
Problem #3: Inconsistency
Inconsistencies across
modules, pages and platforms
will affect the overall
User Experience

21. © Creuna
Problem #4: Communication
Organization
! "
#
$ Dev Team
Business
Editors

22. ! Slider
" Carousel
# Swiper
$ Product rotator
What do we call ”the thing”?

23. 1. Missing overview
2. Reusability
3. Inconsistency
4. Communication
Summary of the 4 problems

24. What is a
Design System?

25. System documentation
© Creuna

26. Palladio’s The Four Books of Architecture – 1570, Venice
Source: http://designsystemsbook.com/

27. The NASA Graphics Standards Manual - 1975
Source: https://standardsmanual.com/products/nasa-graphics-standards-manual

28. © Creuna
Component library
Pattern library UI library
UI kit
Style guide
Brand guidelines
Tone of voice
Documentation in Software Development

29. What are Design Systems?
Source: https://product-unicorn.com/design-systems-style-guides-all-those-libraries-what-the-hell-is-the-difference-4c2741193fdc

30. © Creuna Source: http://carbondesignsystem.com

31. © Creuna Source: http://carbondesignsystem.com
Colors Typography
Styles

32. © Creuna Source: http://carbondesignsystem.com/components/button/code
Components

33. © Creuna
Developers UX Design

34. © Creuna

35. ”Tiny Bootstraps,
for Every Client”
Dave Rupert
© Creuna Source: https://daverupert.com/2013/04/responsive-deliverables/

36. Documentation of:
1. Styles
2. Components
3. Design and UX decisions
4. Brand and content rules
Now we all know what a Design System is!

37. How it solves
the 4 problems

38. • Overview of all components and styles
• Easier onboarding
• No more hidden UI
How it solves the 4 problems
© Creuna
1 Missing overview
2 Reusability
3 Inconsistency
4 Communication

39. Creating UI components in isolation,
makes it reusable by default
How it solves the 4 problems
© Creuna
1 Missing overview
2 Reusability
3 Inconsistency
4 Communication !

40. • A Single Source of Truth
• Living documentation
• Create a component once and reuse it
How it solves the 4 problems
© Creuna
1 Missing overview
2 Reusability
3 Inconsistency
4 Communication

41. • A Single Source of Truth
• Everyone can use it for reference, everyone will
speak the same language
• Now everyone knows what a ”swiper” is, because
it’s in the system
How it solves the 4 problems
© Creuna
1 Missing overview
2 Reusability
3 Inconsistency
4 Communication

42. Should I use a
Design System?

43. Should I use a Design System?
© Creuna

44. “Every project that you do should
be a design systems project.”
Dan Mall
© Creuna Source: https://blog.prototypr.io/why-every-project-should-be-a-design-systems-project-9adeae141088

45. Still need to convince your
client/boss/organization?
© Creuna Source: http://bradfrost.com/blog/post/interface-inventory/

46. Exercise: Interface Inventory – The steps
© Creuna Source: http://bradfrost.com/blog/post/interface-inventory/
1. Go through your website and find
similar elements
2. Screenshot it
3. Categorize it
4. Present it

47. Exercise: Interface Inventory
© Creuna Source: http://bradfrost.com/blog/post/interface-inventory/

48. ”A Design System isn’t a Project.
It’s a Product, Serving Products”
Nathan Curtis
© Creuna Source: https://medium.com/eightshapes-llc/a-design-system-isn-t-a-project-it-s-a-product-serving-products-74dcfffef935

49. How to get started?

50. How to get started?
© Creuna

51. How to get started?
© Creuna
https://fractal.build/
npm install --save @frctl/fractal

52. Why Fractal?
© Creuna
• Framework agnostic
• Choose your own template-engine (hbs, nunjucks, mustache, custom)
• Context data (static data or Promises)
• Variants
• Component status
• Documentation (markdown)
• Customizable theme
• Export to static HTML.

53. Fractal examples
© Creuna
https://github.com/mikkelrom/fractal-examples

54. The United States government
© Creuna

55. EuroStar
© Creuna

56. What about my
JS components?

57. Fractal supports everything!
© Creuna
But if Fractal is not for you…

58. Storybook
© Creuna https://storybook.js.org/
4.0.alpha

59. Storybook
© Creuna
Needs to be setup via JavaScript

60. VueDS.com
© Creuna
https://vueds.com/

61. Example: VMWare Clarity Design System
© Creuna
https://vmware.github.io/clarity/

62. What about
the process?

63. This <thing> is not in the system, is that on purpose?
New conversations with the designer
© Creuna
• Heading
• Spacing
• Color
• Button variant

64. Outputs:
1. Use the System as it is
2. Adapt System to your needs, and
then use it
3. Go outside the System
The Design System Decision Tree (mainly for designers)
© Creuna Source: https://medium.com/s/story/the-design-system-decision-tree-edba9abdb83b

65. Recommendations

66. Make sure the Design System is visible to anyone in the organization via
a public URL (behind login if needed).
Recommendations
© Creuna
Start small. Begin with colors, typography and buttons and extend from
there.
Workflow is important. Start in fractal (or whatever tool), and then copy
the HTML to the real project.
If you don’t, you will go out of sync in no time (Murphy's law!)
Talk about it. Use it.
Convince your stakeholders about the need for a design system

67. Bonus

68. Quality testing on component level
© Creuna
BackstopJS
Visual Regression Testing
https://github.com/garris/BackstopJS
Cypress.io
Test runner
End-To-End Testing, Unit Testing (+ more)
https://www.cypress.io/
These work really well with a design system

69. Want more Design Systems?
© Creuna
Resources for the design systems community
https://design.systems/
Design Systems Handbook
https://www.designbetter.co/design-systems-handbook
Digital Design: Creating Design Systems for Easier, Better &
Faster Design – Dan Mall
https://www.skillshare.com/classes/Digital-Design-Creating-
Design-Systems-for-Easier-Better-Faster-Design/1463075607
Design System articles by Nathan Curtis
https://medium.com/@nathanacurtis
Real life examples
http://styleguides.io/
http://designsystemsbook.com/

70. Questions?

71. thank you!
Mikkel Rom Engholm, Senior Frontend Developer
Twitter: @mikkelrom
aarhus oslo gothenburg stockholm helsinki oulu
creuna.dk @creuna_dk #creuna