Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@marcelosomers

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

#bigdhandoff 3NON-TRADITIONAL DELIVERABLES

Slide 10

Slide 10 text

#bigdhandoff 1. THE SCREEN INVENTORY

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

#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

Slide 14

Slide 14 text

#bigdhandoff 2. THE USER FLOW

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

#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

Slide 17

Slide 17 text

#bigdhandoff 3. THE CONTENT INVENTORY

Slide 18

Slide 18 text

#bigdhandoff Solving the Wireframe Problem 3. THE CONTENT INVENTORY

Slide 19

Slide 19 text

#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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

#bigdhandoff RESPONSIVE KILLED THE PHOTOSHOP STAR

Slide 30

Slide 30 text

#bigdhandoff

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

#bigdhandoff CONSISTENCY is GOOD USABILITY

Slide 33

Slide 33 text

#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/

Slide 34

Slide 34 text

#bigdhandoff CONSISTENCY is GOOD DEVELOPMENT

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

#bigdhandoff DEVELOPERS LOVE IT DESIGNERS HATE IT

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

#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…”

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

#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

Slide 43

Slide 43 text

#bigdhandoff PRINCIPLES Custom Modular Re-Usable

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

#bigdhandoff THE RESPONSIVE DESIGN DELIVERABLE

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

#bigdhandoff Seriously though, developers love this stuff

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

#bigdhandoff HOW?

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

#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

Slide 62

Slide 62 text

#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

Slide 63

Slide 63 text

#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

Slide 64

Slide 64 text

#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

Slide 65

Slide 65 text

#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

Slide 66

Slide 66 text

#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

Slide 67

Slide 67 text

#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

Slide 68

Slide 68 text

#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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

#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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

#bigdhandoff Let’s pull this all together…

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

http://middlemanapp.com/

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

#bigdhandoff SHARING

Slide 79

Slide 79 text

#bigdhandoff SOME COOL TRICKS

Slide 80

Slide 80 text

#bigdhandoff CUSTOM ICONS

Slide 81

Slide 81 text

http://fontcustom.com/

Slide 82

Slide 82 text

#bigdhandoff fontcustom  compile

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

#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

Slide 86

Slide 86 text

#bigdhandoff GIT SUBMODULES Stylesheets (Git Repo)

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

#bigdhandoff PER-PROJECT CONFIGURATION

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

#bigdhandoff STEAL RELENTLESSLY!

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

#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

Slide 99

Slide 99 text

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