COMPONENT-BASED DESIGN SYSTEM AND DEVELOPMENT Tereza Novotn April 8, - - PowerPoint PPT Presentation

▶
component based design system and development
SMART_READER_LITE
LIVE PREVIEW

COMPONENT-BASED DESIGN SYSTEM AND DEVELOPMENT Tereza Novotn April 8, - - PowerPoint PPT Presentation

Jan 11, 2024 322 likes •947 views

COMPONENT-BASED DESIGN SYSTEM AND DEVELOPMENT Tereza Novotn April 8, 2019 Dvid Halsz Gothenburg, Sweden Dvid Halsz Software Engineer @Red Hat Works on ManageIQ mostly in Ruby Used to be the maintainer of PatternFly Sass

slide-1
SLIDE 1

COMPONENT-BASED DESIGN SYSTEM AND DEVELOPMENT

Tereza Novotná Dávid Halász

April 8, 2019 Gothenburg, Sweden

slide-2
SLIDE 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

slide-3
SLIDE 3

Tereza Novotná

  • Interaction Designer @RedHatUXD
  • Oversees designs for ManageIQ, Foreman,

Insights

  • Lived 7 years in North Carolina
  • Loves working with people and bringing

human perspective to technology.

  • Enjoys running and traveling

@terezanvtn

slide-4
SLIDE 4

@terezanovotna_ @halaszdavid

slide-5
SLIDE 5

@terezanvtn @halaszdavid

Over 40 different products

slide-6
SLIDE 6

@terezanvtn @halaszdavid

They all looked different

slide-7
SLIDE 7
slide-8
SLIDE 8

@terezanvtn @halaszdavid

2013

slide-9
SLIDE 9

UXD

slide-10
SLIDE 10
slide-11
SLIDE 11
slide-12
SLIDE 12

@terezanvtn @halaszdavid

Need of a design system

slide-13
SLIDE 13

Modal Title

  • Field One

Field Two Field Three Save Cancel

slide-14
SLIDE 14

Modal Title

  • Field One

Field Two Field Three Save Cancel

slide-15
SLIDE 15

Modal Title

  • Field One

Field Two Field Three Save Cancel

slide-16
SLIDE 16

@terezanvtn @halaszdavid

THE WHY?

  • Improve consistency
  • Increase usability
  • Reduce time and cost to market
  • Share the best practices with the community
slide-17
SLIDE 17

@terezanvtn @halaszdavid

What is a design system?

slide-18
SLIDE 18

@terezanvtn @halaszdavid

Rules, constrains, and principles implemented in design and code.

slide-19
SLIDE 19
slide-20
SLIDE 20
slide-21
SLIDE 21

@terezanvtn @halaszdavid

“Design system acts as a connective tissue that brings the portfolio together.”

slide-22
SLIDE 22

@terezanvtn @halaszdavid

Meet PatternFly

slide-23
SLIDE 23
slide-24
SLIDE 24
slide-25
SLIDE 25

@terezanvtn @halaszdavid

The first success

slide-26
SLIDE 26
slide-27
SLIDE 27
slide-28
SLIDE 28
slide-29
SLIDE 29

@terezanvtn @halaszdavid

Frontend Libraries

slide-30
SLIDE 30

@terezanvtn @halaszdavid

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

slide-31
SLIDE 31
slide-32
SLIDE 32

@terezanvtn @halaszdavid

INCONSISTENCY

slide-33
SLIDE 33

@terezanvtn @halaszdavid

INCONSISTENCY

slide-34
SLIDE 34
slide-35
SLIDE 35

@terezanvtn @halaszdavid

We learned

slide-36
SLIDE 36

@terezanvtn @halaszdavid

We need a universal solution

slide-37
SLIDE 37
slide-38
SLIDE 38

components components components

slide-39
SLIDE 39

@terezanvtn @halaszdavid

  • 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
slide-40
SLIDE 40

@terezanvtn @halaszdavid

Bootstrap?

slide-41
SLIDE 41

@terezanvtn @halaszdavid

We no longer need Bootstrap

slide-42
SLIDE 42
slide-43
SLIDE 43
slide-44
SLIDE 44

Meet PatternFly Next

PF4

slide-45
SLIDE 45

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

slide-46
SLIDE 46

@terezanvtn @halaszdavid

This is how we collaborate.

slide-47
SLIDE 47

@terezanvtn @halaszdavid

It’s fun to work with each other.

slide-48
SLIDE 48

1 4 2 3 55

Font: Open Sans Size: 14 Weight: Bold Color: White Markup Color: FF00FF

slide-49
SLIDE 49

@terezanvtn @halaszdavid

“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

slide-50
SLIDE 50
slide-51
SLIDE 51
slide-52
SLIDE 52
slide-53
SLIDE 53
slide-54
SLIDE 54
slide-55
SLIDE 55

@terezanvtn @halaszdavid

UXD

slide-56
SLIDE 56
slide-57
SLIDE 57

@terezanvtn @halaszdavid

It’s fun to work with each other.

slide-58
SLIDE 58

@terezanvtn @halaszdavid

Design + Engineer teamwork

slide-59
SLIDE 59

@terezanvtn @halaszdavid

“Systems are build to change.”

slide-60
SLIDE 60

@terezanvtn @halaszdavid

Tack så mycket!

👐

slide-61
SLIDE 61

@terezanvtn @halaszdavid

Q&A

👐

Thank you.

Dávid Halász dhalasz@redhat.com @halaszdavid Tereza Novotná tnovotna@redhat.com @terezanvtn