UI Components by Design: Bridging the Designer-Developer Gap

Slide 1

Slide 1 text

UI Components by Design Bridging the Designer Developer Gap Angelina Cole & Ryan Oglesby ThoughtWorks

Slide 2

Slide 2 text

Hi, I’m Ryan. I’m a Hi, I’m Angelina. I’m a Designer. Developer.

Slide 3

Slide 3 text

Designer. Developer.

Slide 4

Slide 4 text

Mental Technological OrganizaAonal misalignment

Slide 5

Slide 5 text

1. The gap is bad.  2. How did we bridge it?

Slide 6

Slide 6 text

1. The gap is bad.  2. How did we bridge it?

Slide 7

Slide 7 text

Two designers One product owner No developers!

Slide 8

Slide 8 text

One designer One product owner 30+ developers! OFFSHORE

Slide 9

Slide 9 text

“That’s not what designers do.”

Slide 10

Slide 10 text

SeparaAon of Design and Development

Slide 11

Slide 11 text

Design without developers results in miscommunicaAon, misunderstanding, and rework.

Slide 12

Slide 12 text

“There must be a library for that.” - Every developer

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Development can’t “solve” design with only a technical soluAon; it’s not a technical problem.

Slide 15

Slide 15 text

Designer. Developer. Style guides Bootstrap

Slide 16

Slide 16 text

Designer. Developer.

Slide 17

Slide 17 text

1. The gap is bad.  2. How did we bridge it?

Slide 18

Slide 18 text

Design, build, and scale a front-end soluFon for a 70+ person, mulA-team, mulA-applicaAon, 4+ year enterprise project.

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Designer. Developer.

Slide 23

Slide 23 text

ConAnuous Design TradiAonal Design

Slide 24

Slide 24 text

UI Components by Design DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UX DESIGNERS ANALYSTS STAKEHOLDERS DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD

Slide 25

Slide 25 text

DESIGN

Slide 26

Slide 26 text

COMPONENT An independent, reusable unit of your applica/on.

Slide 27

Slide 27 text

DESIGN

Slide 28

Slide 28 text

FoundaAon Components ApplicaAon Components DESIGN

Slide 29

Slide 29 text

UI Components by Design DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UX DESIGNERS UI DEVELOPERS

Slide 30

Slide 30 text

already exists already exists already exists build it! build it! FoundaAon Components ISOLATE

Slide 31

Slide 31 text

DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design UX DESIGNERS UI DEVELOPERS

Slide 32

Slide 32 text

Does this appear on the top of the screen or the bo]om? Does it meet accessibility standards? What colors can it accept? Does it have any transiAons? What does this do on mobile? Does it have a loading spinner? When does it Ame out? Can it appear like a link? Does it have a hover? What do errors look like? What size is appropriate? Is the text sentence case or Atle case? Is the touch area large enough? What’s the tab order? What are the alignment rules? ELABORATE

Slide 33

Slide 33 text

DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design UX DESIGNERS UI DEVELOPERS

Slide 34

Slide 34 text

BUILD class Button extends React.Component { render() { const className = this.props.primary ? "primary-button" : "secondary-button"; return ( {this.props.children} ); } }

Slide 35

Slide 35 text

DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design UX DESIGNERS UI DEVELOPERS APPLICATION DEVELOPERS

Slide 36

Slide 36 text

class Cart extends React.Component { render() { return ( Your Cart Order Total {this.props.orderTotal} Checkout Continue shopping ); } } INTEGRATE

Slide 37

Slide 37 text

INTEGRATE ApplicaAon Focus Component Focus LEARN DESIGN ISOLATE ELABORATE BUILD

Slide 38

Slide 38 text

UI COMPONENTS BY DESIGN Uni0ng design and development with a shared language of components.

Slide 39

Slide 39 text

Slide 40

Slide 40 text

A Component Library

Slide 41

Slide 41 text

When building a component library…

Slide 42

Slide 42 text

STANDARDIZE THE TECH STACK. When building a component library…

Slide 43

Slide 43 text

EMPHASIZE THE BUSINESS VALUE. When building a component library…

Slide 44

Slide 44 text

“The UI Component Library is the expression of the visual and interac7on design of the product.   It enables teams to build consistent interfaces quickly. ApplicaBon developers focus on implemen7ng complex business logic.”

Slide 45

Slide 45 text

DELIGHT YOUR CUSTOMERS. When building a component library…

Slide 46

Slide 46 text

CUSTOMERS. Write awesome docs h]ps:/ /react-styleguidist.js.org DELIGHT YOUR CUSTOMERS

Slide 47

Slide 47 text

$ npm publish $ npm install @myCompany/foundation-components Streamline distribuAon DELIGHT YOUR CUSTOMERS

Slide 48

Slide 48 text

Over communicate DELIGHT YOUR CUSTOMERS

Slide 49

Slide 49 text

Component all the things @mixin layout-horizontally { … } @mixin layout-vertically { … } h1 { … } h2 { … } .small-font { … } .bold-font { … } .button__primary { … } .button__primary--disabled { … } .button__seccondary { … } DELIGHT YOUR CUSTOMERS

Slide 50

Slide 50 text

DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design

Slide 51

Slide 51 text

Designer. Developer. Style guides Bootstrap

Slide 52

Slide 52 text

Ask yourself What can I do in my current organizaAon? Where do designers sit? Where do developers sit? Who is in the room when your work starts? When do problems come up? How do you know when work is ﬁnished?

Slide 53

Slide 53 text

Ask yourself Designers: Can I bring developers into my process? Is there space to chat as I make things? Developers: Can I involve designers in the development work that I do? Grab your designer/developer friend & get them involved!

Slide 54

Slide 54 text

Designer. Developer. If you only do one thing… Work together.

Slide 55

Slide 55 text

Thanks!

Slide 56

Slide 56 text

Angelina Cole @uxangelina h]p:/ /angelinamcole.com Ryan Oglesby @ryanoglesby08 h]p:/ /ryanogles.by ThoughtWorks h]ps:/ /www.thoughtworks.com