UI Components by Design: Bridging the Designer-Developer Gap

UI Components by Design: Bridging the Designer-Developer Gap

Presented at the Chicago Coder Conference 2017

------------------------------------

Abstract:
Even in an agile environment, the transition between design work and development work has been un-collaborative. Designers design a thing. Developers build a thing. And in the middle… a 1-way hand-off that lacks consideration for both crafts. We can do better. Ryan and Angelina share their challenges and insights in trying to break down that wall, learned from experiences on a large-scale, integrated UX design and UI development team. From strategies for building a purposeful team structure to technical considerations in implementing a library of UI components, you’ll hear relatable experiences and practical tips to create a more enjoyable, collaborative, and productive space for design and development.

Fd8e3ace64d471302758efb64e1eb0aa?s=128

Ryan Oglesby

June 26, 2017
Tweet

Transcript

  1. UI Components by Design Bridging the Designer Developer Gap Angelina

    Cole & Ryan Oglesby ThoughtWorks
  2. Hi, I’m Ryan. I’m a Hi, I’m Angelina. I’m a

    Designer. Developer.
  3. Designer. Developer.

  4. Mental Technological OrganizaAonal misalignment

  5. 1. The gap is bad.
 2. How did we bridge

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

    it?
  7. Two designers One product owner No developers!

  8. One designer One product owner 30+ developers! OFFSHORE

  9. “That’s not what designers do.”

  10. SeparaAon of Design and Development

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

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

  13. None
  14. Development can’t “solve” design with only a technical soluAon; it’s

    not a technical problem.
  15. Designer. Developer. Style guides Bootstrap

  16. Designer. Developer.

  17. 1. The gap is bad.
 2. How did we bridge

    it?
  18. Design, build, and scale a front-end soluFon for a 70+

    person, mulA-team, mulA-applicaAon, 4+ year enterprise project.
  19. None
  20. None
  21. None
  22. Designer. Developer.

  23. ConAnuous Design TradiAonal Design

  24. UI Components by Design DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD

    UX DESIGNERS ANALYSTS STAKEHOLDERS DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD
  25. DESIGN

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

  27. DESIGN

  28. FoundaAon Components ApplicaAon Components DESIGN

  29. UI Components by Design DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD

    UX DESIGNERS UI DEVELOPERS
  30. already exists already exists already exists build it! build it!

    FoundaAon Components ISOLATE
  31. DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design

    UX DESIGNERS UI DEVELOPERS
  32. 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
  33. DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design

    UX DESIGNERS UI DEVELOPERS
  34. BUILD class Button extends React.Component { render() { const className

    = this.props.primary ? "primary-button" : "secondary-button"; return ( <button className={className} onClick={this.props.onClick}> {this.props.children} </button> ); } }
  35. DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design

    UX DESIGNERS UI DEVELOPERS APPLICATION DEVELOPERS
  36. class Cart extends React.Component { render() { return ( <form>

    <Heading>Your Cart</Heading> <CartItems /> <Inline> <BodyText>Order Total</BodyText> <Currency>{this.props.orderTotal}</Currency> <Button primary onClick={this.props.doCheckout}> Checkout </Button> </Inline> <Link>Continue shopping</Link> </form> ); } } INTEGRATE
  37. INTEGRATE ApplicaAon Focus Component Focus LEARN DESIGN ISOLATE ELABORATE BUILD

  38. UI COMPONENTS BY DESIGN Uni0ng design and development with a

    shared language of components.
  39. <Button /> <InputField /> <Dropdown /> <MultiChoice /> <Icon />

    <Link /> <ResponsiveDrawer /> <Address /> <Currency /> <MaskedData /> <Grid /> <BusyIndicator /> <PagedResults />
  40. <Button /> <InputField /> <Dropdown /> <MultiChoice /> <Icon />

    <Link /> <ResponsiveDrawer /> <Address /> <Currency /> <MaskedData /> <Grid /> <BusyIndicator /> <PagedResults /> A Component Library
  41. When building a component library…

  42. STANDARDIZE THE TECH STACK. When building a component library…

  43. EMPHASIZE THE BUSINESS VALUE. When building a component library…

  44. “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.”
  45. DELIGHT YOUR CUSTOMERS. When building a component library…

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

  47. $ npm publish $ npm install @myCompany/foundation-components Streamline distribuAon DELIGHT

    YOUR CUSTOMERS
  48. Over communicate DELIGHT YOUR CUSTOMERS

  49. Component all the things @mixin layout-horizontally { … } @mixin

    layout-vertically { … } h1 { … } h2 { … } .small-font { … } .bold-font { … } .button__primary { … } .button__primary--disabled { … } .button__seccondary { … } <Heading /> <SubHeading /> <BodyText small /> <BodyText bold /> <Button /> <Button disabled /> <Button secondary /> <HorizontalLayout /> <VerticalLayout /> DELIGHT YOUR CUSTOMERS
  50. <Button /> <InputField /> <Dropdown /> <MultiChoice /> <Icon />

    <Link /> <ResponsiveDrawer /> <Address /> <Currency /> <MaskedData /> <Grid /> <BusyIndicator /> <PagedResults /> DESIGN ISOLATE ELABORATE INTEGRATE LEARN BUILD UI Components by Design
  51. Designer. Developer. Style guides Bootstrap

  52. 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 finished?
  53. 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!
  54. Designer. Developer. If you only do one thing… Work together.

  55. Thanks!

  56. Angelina Cole @uxangelina h]p:/ /angelinamcole.com Ryan Oglesby @ryanoglesby08 h]p:/ /ryanogles.by

    ThoughtWorks h]ps:/ /www.thoughtworks.com