Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Solving the Designer-Developer Divide - Big Design 2014

9fa239b3154a0169d99ab7bf1422dd12?s=47 Marcelo Somers
September 05, 2014

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.

9fa239b3154a0169d99ab7bf1422dd12?s=128

Marcelo Somers

September 05, 2014
Tweet

Transcript

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

  2. @marcelosomers

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

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

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

    • goodwill • repeat business • understanding
  6. #bigdhandoff http://www.abookapart.com/products/responsive-web-design

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

    be er together
  8. #bigdhandoff BIG IDEA #1 Design -DRIVEN SCOPE Designers visualize. Use

    design visualizations to define scope.
  9. #bigdhandoff 3NON-TRADITIONAL DELIVERABLES

  10. #bigdhandoff 1. THE SCREEN INVENTORY

  11. #bigdhandoff 1. THE SCREEN INVENTORY S1 - Log In S2

    - Public Profile S3 - News Page S4 - Admin Area …
  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
  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
  14. #bigdhandoff 2. THE USER FLOW

  15. #bigdhandoff It’s not quite a site map A simple visualization

    of how a user flows through the site 2. THE USER FLOW
  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
  17. #bigdhandoff 3. THE CONTENT INVENTORY

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

  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
  20. #bigdhandoff 3 DELIVERABLES 1. Screen Inventory 2. User Flow 3.

    Content Inventory these help define what we’re building!
  21. #bigdhandoff BIG IDEA #2 INTEGRATING WITH AGILE TEAMS A definition

    of ready vs. A definition of done
  22. #bigdhandoff THE TYPICAL AGILE/SCRUM TEAM Sprint Planning Sprint Demo Development

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

    Retrospective DESIGN?
  24. #bigdhandoff Sprint Planning Sprint Demo Development Retrospective DEVELOPMENT CYCLE PRODUCT

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

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

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

    DEFINITION - Stakeholders - Product Manager - Marketing - Design - BA STORIES READY FOR DEVELOPMENT STORIES DONE
  28. #bigdhandoff BIG IDEA #3 PATTERN-DRIVEN Design Stop thinking beautiful, custom

    layout. Start thinking standard, reusable, scalable components
  29. #bigdhandoff RESPONSIVE KILLED THE PHOTOSHOP STAR

  30. #bigdhandoff

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

  32. #bigdhandoff CONSISTENCY is GOOD USABILITY

  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/
  34. #bigdhandoff CONSISTENCY is GOOD DEVELOPMENT

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

  36. #bigdhandoff BIG IDEA #4 THE PATTERN LIBRARY A new deliverable

    for a responsive world
  37. None
  38. #bigdhandoff DEVELOPERS LOVE IT DESIGNERS HATE IT

  39. #bigdhandoff DEVELOPERS LOVE IT DESIGNERS HATE IT “It’s quick and

    easy to drop into my project. I know how to use it”
  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…”
  41. #bigdhandoff @mdo BYOB: Build your own Bootstrap! (creator of Bootstrap)

    https://speakerdeck.com/mdo/build-your-own-bootstrap
  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
  43. #bigdhandoff PRINCIPLES Custom Modular Re-Usable

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

    best fit your project.
  45. #bigdhandoff PRINCIPLES Modular Everything you build should be a re-usable

    component
  46. #bigdhandoff PRINCIPLES Re-Usable Your styles should be able to be

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

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

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

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

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

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

  53. #bigdhandoff THE RESPONSIVE DESIGN DELIVERABLE

  54. None
  55. None
  56. None
  57. #bigdhandoff Seriously though, developers love this stuff

  58. None
  59. #bigdhandoff HOW?

  60. #bigdhandoff ELEMENTS OF A PATTERN LIBRARY THE BASICS Grid Typography

    Bu ons Tables Forms THE BASICS Grid Typography Bu ons Tables Forms
  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
  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
  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
  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
  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
  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
  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
  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
  69. None
  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
  71. None
  72. #bigdhandoff Let’s pull this all together…

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

  75. http://middlemanapp.com/

  76. #bigdhandoff AWESOME FEATURES Templating & Partials Precompilers (HAML -> HTML,

    Sass -> CSS, CoffeeScript -> JS) LiveReload Rubygems & Bundler Store data as JSON Deploy to GitHub Pages
  77. #bigdhandoff ORGANIZING IT layout.erb components.html.erb _bu ons.erb _forms.erb

  78. #bigdhandoff SHARING

  79. #bigdhandoff SOME COOL TRICKS

  80. #bigdhandoff CUSTOM ICONS

  81. http://fontcustom.com/

  82. #bigdhandoff fontcustom  compile

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

    Git Repo Another Git Repo
  84. #bigdhandoff GIT SUBMODULES My Git Repo git  submodule  add  <repo>

     /path/to/directory   Another Git Repo Another Git Repo Another Git Repo
  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
  86. #bigdhandoff GIT SUBMODULES Stylesheets (Git Repo)

  87. #bigdhandoff GIT SUBMODULES My Pa ern Library (Git Repo) Stylesheets

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

    (Git Repo) git  submodule  add  … Microso .NET project Rails Project
  89. #bigdhandoff PER-PROJECT CONFIGURATION

  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”);   }
  91. #bigdhandoff PER-PROJECT CONFIGURATION Only include your documentation styles in your

    pa ern library!
  92. #bigdhandoff STEAL RELENTLESSLY!

  93. #bigdhandoff BIG IDEA #5 THE PROJECT HUB A single point

    of reference for everyone on the project
  94. #bigdhandoff Screen list + assets (comps, wireframes, etc. links recent

    updates A TYPICAL PROJECT HUB…
  95. None
  96. #bigdhandoff PROJECT HUBS IN MIDDLEMAN /data/designs.json

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

    • goodwill • repeat business • understanding
  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
  99. #bigdhandoff THANK YOU! h p://j.mp/bigdhandoff @marcelosomers h p://marcelosomers.com