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

Solving the Designer-Developer Divide - Big Design 2014

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.

Marcelo Somers

September 05, 2014
Tweet

More Decks by Marcelo Somers

Other Decks in Design

Transcript

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

    - Public Profile S3 - News Page S4 - Admin Area …
  2. #bigdhandoff S1 - Log In S2 - Public Profile S3

    - News Page S4 - Admin Area … A simple language for referring to screens 1. THE SCREEN INVENTORY
  3. #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
  4. #bigdhandoff It’s not quite a site map A simple visualization

    of how a user flows through the site 2. THE USER FLOW
  5. #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
  6. #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
  7. #bigdhandoff 3 DELIVERABLES 1. Screen Inventory 2. User Flow 3.

    Content Inventory these help define what we’re building!
  8. #bigdhandoff Sprint Planning Sprint Demo Development Retrospective DEVELOPMENT CYCLE PRODUCT

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

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

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

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

    layout. Start thinking standard, reusable, scalable components
  13. #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/
  14. #bigdhandoff DEVELOPERS LOVE IT DESIGNERS HATE IT “It’s quick and

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

    https://speakerdeck.com/mdo/build-your-own-bootstrap
  17. #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
  18. #bigdhandoff ELEMENTS OF A PATTERN LIBRARY THE BASICS Grid Typography

    Bu ons Tables Forms THE BASICS Grid Typography Bu ons Tables Forms
  19. #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
  20. #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
  21. #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
  22. #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
  23. #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
  24. #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
  25. #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
  26. #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
  27. #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
  28. #bigdhandoff AWESOME FEATURES Templating & Partials Precompilers (HAML -> HTML,

    Sass -> CSS, CoffeeScript -> JS) LiveReload Rubygems & Bundler Store data as JSON Deploy to GitHub Pages
  29. #bigdhandoff GIT SUBMODULES My Git Repo git  submodule  add  <repo>

     /path/to/directory   Another Git Repo Another Git Repo Another Git Repo
  30. #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
  31. #bigdhandoff GIT SUBMODULES My Pa ern Library (Git Repo) Stylesheets

    (Git Repo) git  submodule  add  … Microso .NET project Rails Project
  32. #bigdhandoff PER-PROJECT CONFIGURATION @function  image-­‐url($filename)  {      @return  url($image-­‐path

     +  '/'  +  $filename);   } ASSET URLs .div-­‐with-­‐background  {          background-­‐image:  image-­‐url(“file.jpg”);   }
  33. #bigdhandoff BIG IDEA #5 THE PROJECT HUB A single point

    of reference for everyone on the project
  34. #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