Solving the Designer-Developer Divide - Big Design 2014

Front end development has only gotten more complicated as we've introduced concepts like responsive design and animation. Gone are the days where a pixel perfect comp with red line annotations is sufficient for a developer to build a designer's vision.

In this session we'll dive into the concept of pattern-driven development, address what deliverables should look like, and discuss some ideas of how designers can better integrate with the development team.

Transcript

1. #bigdhandoff
   SOLVING THE
   Designer developer
   DIVIDE
   –
   h p://j.mp/bigdhandoff
   

   View Slide

2. @marcelosomers
   

   View Slide

3. #bigdhandoff
   HOW WE WORK
   is just as important
   AS THE QUALITY OF OUR WORK
   

   View Slide

4. http://gulfelitemag.com/wp-content/uploads/2013/12/Don-Draper-in-his-Office.jpg
   TRADITIONAL DESIGN IS
   TOO MUCH LIKE THIS…
   

   View Slide

5. #bigdhandoff
   Better
   ORGANIZATION &
   COLLABORATION
   earns you…
   • stakeholder buy-in
   • goodwill
   • repeat business
   • understanding
   

   View Slide

6. #bigdhandoff
   http://www.abookapart.com/products/responsive-web-design
   

   View Slide

7. #bigdhandoff
   5big ideas for how
   designers and developers
   can work be er together
   

   View Slide

8. #bigdhandoff
   BIG IDEA #1
   Design -DRIVEN SCOPE
   Designers visualize.
   Use design visualizations to define scope.
   

   View Slide

9. #bigdhandoff
   3NON-TRADITIONAL
   DELIVERABLES
   

   View Slide

10. #bigdhandoff
    1. THE SCREEN INVENTORY
    

    View Slide

11. #bigdhandoff
    1. THE SCREEN INVENTORY
    S1 - Log In
    S2 - Public Profile
    S3 - News Page
    S4 - Admin Area
    …
    

    View Slide

12. #bigdhandoff
    S1 - Log In
    S2 - Public Profile
    S3 - News Page
    S4 - Admin Area
    …
    A simple language
    for referring to
    screens
    1. THE SCREEN INVENTORY
    

    View Slide

13. #bigdhandoff
    S1 - Log In
    S2 - Public Profile
    S3 - News Page
    S4 - Admin Area
    …
    A simple language
    for referring to
    screens
    Design-named
    screens
    1. THE SCREEN INVENTORY
    

    View Slide

14. #bigdhandoff
    2. THE USER FLOW
    

    View Slide

15. #bigdhandoff
    It’s not quite a site map
    A simple visualization
    of how a user flows
    through the site
    2. THE USER FLOW
    

    View Slide

16. #bigdhandoff
    T H I N K T E C T U R E
    S1
    Log In
    S2
    Dashboard
    S3
    List of Models
    S4
    Model Details
    S5
    List of Reports
    S6
    Report Details
    S7
    List of Campaigns
    S8
    Campaign Details
    S9
    Campaign KPIs
    S10
    Campaign Comps
    TARGETBASE
    S11
    Multivariant
    Testing
    S12
    List of Helpdesk
    Requests
    S13
    Helpdesk Request
    Details
    S14
    List of Clients
    S15
    Client Details
    S16
    Claim Access
    S17
    List of Claims
    S18
    Claim Details
    S19
    User Management
    A D M I N I S T R AT I O N
    S20
    Client List
    S22
    Role/Claim Access
    Thinktecture
    Home Page
    S21
    Client Roles
    

    View Slide

17. #bigdhandoff
    3. THE CONTENT INVENTORY
    

    View Slide

18. #bigdhandoff
    Solving the
    Wireframe Problem
    3. THE CONTENT INVENTORY
    

    View Slide

19. #bigdhandoff
    Screen Description Goal Prioritized Content
    Home Page
    The first page
    when users
    arrive at the
    site
    Drive them to
    engage deeper
    with more of
    our content
    - Featured article
    - List of recent articles
    - Advertisements
    - Navigation
    

    View Slide

20. #bigdhandoff
    3 DELIVERABLES
    1. Screen Inventory
    2. User Flow
    3. Content Inventory
    these help define what we’re building!
    

    View Slide

21. #bigdhandoff
    BIG IDEA #2
    INTEGRATING WITH AGILE TEAMS
    A definition of ready
    vs.
    A definition of done
    

    View Slide

22. #bigdhandoff
    THE TYPICAL AGILE/SCRUM TEAM
    Sprint Planning
    Sprint Demo
    Development
    Retrospective
    

    View Slide

23. #bigdhandoff
    THE TYPICAL AGILE/SCRUM TEAM
    Sprint Planning
    Sprint Demo
    Development
    Retrospective
    DESIGN?
    

    View Slide

24. #bigdhandoff
    Sprint Planning
    Sprint Demo
    Development
    Retrospective
    DEVELOPMENT
    CYCLE
    PRODUCT
    DEFINITION
    - Stakeholders
    - Product Manager
    - Marketing
    - Design
    - BA
    

    View Slide

25. #bigdhandoff
    Sprint Planning
    Sprint Demo
    Development
    Retrospective
    DEVELOPMENT
    CYCLE
    PRODUCT
    DEFINITION
    - Stakeholders
    - Product Manager
    - Marketing
    - Design
    - BA
    STORIES READY
    FOR DEVELOPMENT
    

    View Slide

26. #bigdhandoff
    Sprint Planning
    Sprint Demo
    Development
    Retrospective
    DEVELOPMENT
    CYCLE
    PRODUCT
    DEFINITION
    - Stakeholders
    - Product Manager
    - Marketing
    - Design
    - BA
    STORIES READY
    FOR DEVELOPMENT
    

    View Slide

27. #bigdhandoff
    Sprint Planning
    Sprint Demo
    Development
    Retrospective
    DEVELOPMENT
    CYCLE
    PRODUCT
    DEFINITION
    - Stakeholders
    - Product Manager
    - Marketing
    - Design
    - BA
    STORIES READY
    FOR DEVELOPMENT
    STORIES DONE
    

    View Slide

28. #bigdhandoff
    BIG IDEA #3
    PATTERN-DRIVEN Design
    Stop thinking beautiful, custom layout.
    Start thinking standard, reusable, scalable components
    

    View Slide

29. #bigdhandoff
    RESPONSIVE KILLED
    THE PHOTOSHOP STAR
    

    View Slide

30. #bigdhandoff
    

    View Slide

31. Search
    Navigation
    Hero
    List of Links
    Highlight
    http://daverupert.com/2013/04/responsive-deliverables/
    

    View Slide

32. #bigdhandoff
    CONSISTENCY
    is
    GOOD USABILITY
    

    View Slide

33. #bigdhandoff
    Users should not have to
    wonder whether different
    words, situations, or actions
    mean the same thing.
    – Norman Nielsen Group
    “
    http://www.nngroup.com/articles/cross-channel-consistency/
    

    View Slide

34. #bigdhandoff
    CONSISTENCY
    is
    GOOD DEVELOPMENT
    

    View Slide

35. #bigdhandoff
    CONSISTENCY
    is
    GOOD DEVELOPMENT
    Maintainable code is flexible code!
    

    View Slide

36. #bigdhandoff
    BIG IDEA #4
    THE PATTERN LIBRARY
    A new deliverable for a responsive world
    

    View Slide

37. View Slide

38. #bigdhandoff
    DEVELOPERS LOVE IT
    DESIGNERS HATE IT
    

    View Slide

39. #bigdhandoff
    DEVELOPERS LOVE IT
    DESIGNERS HATE IT
    “It’s quick and easy to drop into
    my project. I know how to use it”
    

    View Slide

40. #bigdhandoff
    DEVELOPERS LOVE IT
    DESIGNERS HATE IT
    “It’s quick and easy to drop into
    my project. I know how to use it”
    “Stop pu ing me in a box! All the
    sites look the same! What
    happens…”
    

    View Slide

41. #bigdhandoff
    @mdo
    BYOB:
    Build your
    own Bootstrap!
    (creator of Bootstrap)
    https://speakerdeck.com/mdo/build-your-own-bootstrap
    

    View Slide

42. #bigdhandoff
    —
    “It’s quick and easy to drop into
    my project. I know how to use it”
    We can have a beautiful, custom
    design and I won’t feel constrained
    

    View Slide

43. #bigdhandoff
    PRINCIPLES
    Custom
    Modular
    Re-Usable
    

    View Slide

44. #bigdhandoff
    PRINCIPLES
    Custom
    Pick your framework, technologies and
    dependencies to best fit your project.
    

    View Slide

45. #bigdhandoff
    PRINCIPLES
    Modular
    Everything you build should
    be a re-usable component
    

    View Slide

46. #bigdhandoff
    PRINCIPLES
    Re-Usable
    Your styles should be able to be implemented
    easily in different projects
    

    View Slide

47. #bigdhandoff
    ATOMIC DESIGN
    http://bradfrostweb.com/blog/post/atomic-web-design/
    (by Brad Frost)
    

    View Slide

48. #bigdhandoff
    ATOMS
    http://bradfrostweb.com/blog/post/atomic-web-design/
    

    View Slide

49. #bigdhandoff
    MOLECULES
    http://bradfrostweb.com/blog/post/atomic-web-design/
    

    View Slide

50. #bigdhandoff
    ORGANISMS
    http://bradfrostweb.com/blog/post/atomic-web-design/
    

    View Slide

51. #bigdhandoff
    TEMPLATES
    http://bradfrostweb.com/blog/post/atomic-web-design/
    

    View Slide

52. #bigdhandoff
    PAGES
    http://bradfrostweb.com/blog/post/atomic-web-design/
    

    View Slide

53. #bigdhandoff
    THE
    RESPONSIVE DESIGN
    DELIVERABLE
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. #bigdhandoff
    Seriously though,
    developers love this stuff
    

    View Slide

58. View Slide

59. #bigdhandoff
    HOW?
    

    View Slide

60. #bigdhandoff
    ELEMENTS OF A PATTERN LIBRARY
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    

    View Slide

61. #bigdhandoff
    ELEMENTS OF A PATTERN LIBRARY
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    COMPONENTS
    The various
    custom
    components
    that make up
    your project’s
    design
    

    View Slide

62. #bigdhandoff
    ELEMENTS OF A PATTERN LIBRARY
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    COMPONENTS
    The various
    custom
    components
    that make up
    your project’s
    design
    JAVASCRIPT
    Documentation
    for user-facing
    interactions
    

    View Slide

63. #bigdhandoff
    ELEMENTS OF A PATTERN LIBRARY
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    THE BASICS
    Grid
    Typography
    Bu ons
    Tables
    Forms
    COMPONENTS
    The various
    custom
    components
    that make up
    your project’s
    design
    JAVASCRIPT
    Documentation
    for user-facing
    interactions
    TEMPLATES
    Full HTML
    for pages
    

    View Slide

64. #bigdhandoff
    A SINGLE ELEMENT
    My Sweet Component
    An explanation of how my sweet component should be implemented, what it’s used for, any funny
    quirks about it, and anything else a developer might need to know.
    A functional example of the component in use
    The code snippet
    

    View Slide

65. #bigdhandoff
    A SINGLE ELEMENT
    My Sweet Component
    An explanation of how my sweet component should be implemented, what it’s used for, any funny
    quirks about it, and anything else a developer might need to know.
    A functional example of the component in use
    The code snippet
    The Component Name
    

    View Slide

66. #bigdhandoff
    A SINGLE ELEMENT
    My Sweet Component
    An explanation of how my sweet component should be implemented, what it’s used for, any funny
    quirks about it, and anything else a developer might need to know.
    A functional example of the component in use
    The code snippet
    The Component Description
    

    View Slide

67. #bigdhandoff
    A SINGLE ELEMENT
    My Sweet Component
    An explanation of how my sweet component should be implemented, what it’s used for, any funny
    quirks about it, and anything else a developer might need to know.
    A functional example of the component in use
    The code snippet
    The Component Itself
    

    View Slide

68. #bigdhandoff
    A SINGLE ELEMENT
    My Sweet Component
    An explanation of how my sweet component should be implemented, what it’s used for, any funny
    quirks about it, and anything else a developer might need to know.
    A functional example of the component in use
    The code snippet
    How to implement it
    

    View Slide

69. View Slide

70. #bigdhandoff
    ORGANIZING OUR LIBRARY
    TABLE OF CONTENTS
    A Major Component/Area
    A sub-component
    A sub-component
    A sub-component
    A Major Component/Area
    A sub-component
    A sub-component
    A sub-component
    

    View Slide

71. View Slide

72. #bigdhandoff
    Let’s pull this all together…
    

    View Slide

73. View Slide

74. #bigdhandoff
    EVEN MORE
    PRACTICAL…
    Ok, now I’m getting prescriptive!
    

    View Slide

75. http://middlemanapp.com/
    

    View Slide

76. #bigdhandoff
    AWESOME FEATURES
    Templating & Partials
    Precompilers (HAML -> HTML, Sass -> CSS, CoffeeScript -> JS)
    LiveReload
    Rubygems & Bundler
    Store data as JSON
    Deploy to GitHub Pages
    

    View Slide

77. #bigdhandoff
    ORGANIZING IT
    layout.erb
    components.html.erb
    _bu ons.erb
    _forms.erb
    

    View Slide

78. #bigdhandoff
    SHARING
    

    View Slide

79. #bigdhandoff
    SOME COOL TRICKS
    

    View Slide

80. #bigdhandoff
    CUSTOM ICONS
    

    View Slide

81. http://fontcustom.com/
    

    View Slide

82. #bigdhandoff
    fontcustom  compile
    

    View Slide

83. #bigdhandoff
    GIT SUBMODULES
    My Git Repo
    Another Git Repo Another Git Repo Another Git Repo
    

    View Slide

84. #bigdhandoff
    GIT SUBMODULES
    My Git Repo
    git  submodule  add    /path/to/directory  
    Another Git Repo Another Git Repo Another Git Repo
    

    View Slide

85. #bigdhandoff
    GIT SUBMODULES
    My Git Repo
    Another Git Repo Another Git Repo Another Git Repo
    - Submodule now exists as a folder within your main Git repo
    - You can run independent git  pull/git  push on submodules
    - The parent repo tracks if the general commit state of the submodules changed
    

    View Slide

86. #bigdhandoff
    GIT SUBMODULES
    Stylesheets (Git Repo)
    

    View Slide

87. #bigdhandoff
    GIT SUBMODULES
    My Pa ern Library (Git Repo)
    Stylesheets (Git Repo)
    git  submodule  add  …
    

    View Slide

88. #bigdhandoff
    GIT SUBMODULES
    My Pa ern Library (Git Repo)
    Stylesheets (Git Repo)
    git  submodule  add  …
    Microso .NET project Rails Project
    

    View Slide

89. #bigdhandoff
    PER-PROJECT CONFIGURATION
    

    View Slide

90. #bigdhandoff
    PER-PROJECT CONFIGURATION
    @function  image-­‐url($filename)  {  
       @return  url($image-­‐path  +  '/'  +  $filename);  
    }
    ASSET URLs
    .div-­‐with-­‐background  {  
           background-­‐image:  image-­‐url(“file.jpg”);  
    }
    

    View Slide

91. #bigdhandoff
    PER-PROJECT CONFIGURATION
    Only include your documentation styles
    in your pa ern library!
    

    View Slide

92. #bigdhandoff
    STEAL RELENTLESSLY!
    

    View Slide

93. #bigdhandoff
    BIG IDEA #5
    THE PROJECT HUB
    A single point of reference for everyone on the project
    

    View Slide

94. #bigdhandoff
    Screen list + assets (comps,
    wireframes, etc.
    links
    recent updates
    A TYPICAL PROJECT HUB…
    

    View Slide

95. View Slide

96. #bigdhandoff
    PROJECT HUBS IN MIDDLEMAN
    /data/designs.json
    

    View Slide

97. #bigdhandoff
    Better
    ORGANIZATION &
    COLLABORATION
    earns you…
    • stakeholder buy-in
    • goodwill
    • repeat business
    • understanding
    

    View Slide

98. #bigdhandoff
    BEING A BETTER DESIGN CITIZEN…
    1. Use design visualizations to help drive scope
    2. Integrate with Agile through “Product
    Definition Teams”
    3. Stop thinking in custom layouts
    4. Build a Pa ern Library
    5. Communicate through a Project Hub
    

    View Slide

99. #bigdhandoff
    THANK YOU!
    h p://j.mp/bigdhandoff
    @marcelosomers
    h p://marcelosomers.com
    

    View Slide