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
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
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
57. #bigdhandoff Seriously though, developers love this stuff
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
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
72. #bigdhandoff Let’s pull this all together…
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…
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