Slides by Tereza Novotná and Dávid Halász (both Red Hat) - Design Systems Meetup in September 2018.

1. COMPONENT-BASED DESIGN
SYSTEM AND DEVELOPMENT
Tereza Novotná
Dávid Halász
September 18
Brno
@CzechDSC

2. Dávid Halász
• Software Engineer @Red Hat
• Works on ManageIQ mostly in Ruby
• Used to be the maintainer of PatternFly
Sass
• Self-proclaimed JavaScript hater
• Passionate guitarist and ukulele player
@halaszdavid

3. Tereza Novotná
• Interaction Designer @RedHatUXD
• Oversees designs for ManageIQ, Foreman
and other projects
• Lived 7 years in North Carolina
• Loves working with people and bringing
human perspective to technology.
• Enjoys running and traveling
@terezanovotna_

4. @terezanovotna_ @halaszdavid

5. @halaszdavid
@terezanovotna_
Over 40 different products

6. @halaszdavid
@terezanovotna_
They all looked different

8. @terezanovotna_ @halaszdavid
2013

9. UXD

12. @halaszdavid
@terezanovotna_
Need of a design system

15. Modal Title
Field One
Field Two
Field Three
SaveCancel

16. Modal Title
Field One
Field Two
Field Three
SaveCancel

17. Modal Title
Field One
Field Two
Field Three
Save Cancel

18. @halaszdavid
@terezanovotna_
THE WHY?
• Improve consistency
• Increase usability
• Reduce time and cost to market
• Share best practices with the community

19. @halaszdavid
@terezanovotna_
What is a design system?

20. @halaszdavid
@terezanovotna_
Rules, constrains, and
principles implemented in
design and code.

23. @halaszdavid
@terezanovotna_
“Design system acts as a connective tissue that brings the
portfolio together.”

24. @halaszdavid
@terezanovotna_
Meet PatternFly

27. @halaszdavid
@terezanovotna_
The first success

31. @halaszdavid
@terezanovotna_
Frontend Libraries

32. @halaszdavid
@terezanovotna_
The problem was
that our engineers started using these libraries
and we didn’t have support,
so our engineers ignored PatternFly.

34. @halaszdavid
@terezanovotna_
INCONSISTENCY

35. @halaszdavid
@terezanovotna_
INCONSISTENCY

37. @halaszdavid
@terezanovotna_
We learned

38. @halaszdavid
@terezanovotna_
We need a universal solution

40. Modularity
We <3 Components

41. @halaszdavid
@terezanovotna_
• Remove any JavaScript from the core repo
• Split up PatternFly to very small components
• Each component acts as a mini-library
• Use only one framework to implement them -> React
• It can coexist with other frameworks to ease transition

42. @halaszdavid
@terezanovotna_
Bootstrap?

43. @halaszdavid
@terezanovotna_
We no longer need Bootstrap

46. Meet PatternFly Next
PF4

47. Atomic Components
Advanced Components
High-level
Components
CSS Styling and Grid System
Buttons
Input fields
Headings
Menu
Tree View
Form Groups
UXD
UXD
Engineering
Engineering
UXD

48. @halaszdavid
@terezanovotna_
This is how we
collaborate.

49. @halaszdavid
@terezanovotna_
It’s fun to work with each other.

50. 1
4
2
3
55
Font: Open Sans
Size: 14
Weight: Bold
Color: White
Markup
Color: FF00FF

51. @halaszdavid
@terezanovotna_
“Consistency is one of the most powerful usability
principles: when things always behave the same,
users don’t have to worry about what will happen.”
Jakob Nielsen

57. @halaszdavid
@terezanovotna_
UXD

59. @halaszdavid
@terezanovotna_
It’s fun to work with each other.

60. @halaszdavid
@terezanovotna_
Design + Engineer
teamwork

61. @halaszdavid
@terezanovotna_
“Systems are build to change.”

62. @halaszdavid
@terezanovotna_
Thank you.
👏

63. @halaszdavid
@terezanovotna_
Q&A
👏
Thank you.
Dávid Halász
dhalasz@redhat.com
@halaszdavid
Tereza Novotná
tnovotna@redhat.com
@terezanovotna_