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

RWD Killed My Process

Ben Callahan
September 12, 2013

RWD Killed My Process

The deck from my presentation at @ConvergeFL in Jacksonville Florida on September 12, 2013.

Ben Callahan

September 12, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. Ben Callahan RWD KILLED MY PROCESS @bencallahan Thursday, September 12,

    13
  2. Thursday, September 12, 13

  3. Collaborative note-taking: http://bit.ly/1ejEfVD Thursday, September 12, 13

  4. LET’S JUMP IN! Thursday, September 12, 13

  5. Before RWD, we pretended like things were pretty simple. Thursday,

    September 12, 13
  6. 1024ish 768ish fixed width Thursday, September 12, 13

  7. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow Thursday, September 12, 13

  8. DESIGN FRONT-END BACK-END LAUNCH! THINK ABOUT USERS Linear Workflow Thursday,

    September 12, 13
  9. DESIGN FRONT-END BACK-END LAUNCH! Linear Workflow THINK ABOUT USERS THROW

    IN SOME CONTENT Thursday, September 12, 13
  10. Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH!

    Thursday, September 12, 13
  11. Why hello, RWD. Thursday, September 12, 13

  12. Why hello, RWD. Thursday, September 12, 13

  13. Linear Workflow Now with RWD! CONTENT UX DESIGN FRONT-END BACK-END

    LAUNCH! Thursday, September 12, 13
  14. Ditto! Now with RWD! Linear Workflow CONTENT UX DESIGN FRONT-END

    BACK-END LAUNCH! Me too! Thursday, September 12, 13
  15. This doesn’t work. Thursday, September 12, 13

  16. Linear Workflow Problem LAUNCH DESIGN FRONT END BACK END CONTENT

    DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Thursday, September 12, 13
  17. We need to invite others into the process Thursday, September

    12, 13
  18. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September

    12, 13
  19. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September

    12, 13
  20. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September

    12, 13
  21. CONTENT UX FRONT-END DESIGN BACK-END “1 Deliverable” Workflow Thursday, September

    12, 13
  22. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END Thursday, September 12, 13
  23. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END UX FRONT-END DESIGN LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Thursday, September 12, 13
  24. ND DESIGN So, how do we advance design through a

    “1 deliverable” workflow? Thursday, September 12, 13
  25. WEB DESIGNERS STILL USE PHOTOSHOP! Thursday, September 12, 13

  26. Dissecting Design PRODUCTIVITY TIME Thursday, September 12, 13

  27. Dissecting Design PRODUCTIVITY TIME Thursday, September 12, 13

  28. Dissecting Design PRODUCTIVITY TIME Thursday, September 12, 13

  29. Establish the Aesthetic DISSECTING DESIGN Thursday, September 12, 13

  30. Solve the Problem DISSECTING DESIGN Thursday, September 12, 13

  31. “I’ve been amazed at how often those outside the discipline

    of design assume that what designers do is decoration. Good design is problem solving.” @veen Thursday, September 12, 13
  32. Refine the Solution DISSECTING DESIGN Thursday, September 12, 13

  33. Thursday, September 12, 13

  34. Establish the Aesthetic DISSECTING DESIGN Thursday, September 12, 13

  35. DISSECTING DESIGN ‣ Style Comparisons ‣ Style Tiles ‣ Style

    Prototypes Establish the Aesthetic Thursday, September 12, 13
  36. Style Comparisons ESTABLISH THE AESTHETIC “I could create an illustration

    or a 3D rendering of what I want my new office to look like, but that doesn’t take advantage of his great ideas. It’s dictation, not collaboration. Instead, I show him a Pinterest board my wife and I created.” @danielmall http://danielmall.com/articles/the-post-psd-era/ Thursday, September 12, 13
  37. Style Comparisons ESTABLISH THE AESTHETIC Light vs Dark Thursday, September

    12, 13
  38. Style Comparisons ESTABLISH THE AESTHETIC Flat vs Textured Thursday, September

    12, 13
  39. Style Comparisons ESTABLISH THE AESTHETIC Illustration vs Photography Thursday, September

    12, 13
  40. Style Tiles ESTABLISH THE AESTHETIC Thursday, September 12, 13

  41. Style Tiles ESTABLISH THE AESTHETIC Thursday, September 12, 13

  42. Style Tiles ESTABLISH THE AESTHETIC Thursday, September 12, 13

  43. Style Prototypes ESTABLISH THE AESTHETIC Thursday, September 12, 13

  44. USE TOOLS YOU ARE COMFORTABLE WITH TO ESTABLISH THE AESTHETIC

    HOW TO DECIDE Thursday, September 12, 13
  45. Cool, so what happens next? Thursday, September 12, 13

  46. Solve the Problem DISSECTING DESIGN Thursday, September 12, 13

  47. DISSECTING DESIGN ‣ Static Design Tools ‣ Responsive Design Tools

    ‣ HTML/CSS Solve the Problem Thursday, September 12, 13
  48. Static Design Tools SOLVE THE PROBLEM Thursday, September 12, 13

  49. Static Design Tools SOLVE THE PROBLEM Thursday, September 12, 13

  50. Static Design Tools SOLVE THE PROBLEM Thursday, September 12, 13

  51. Responsive Design Tools SOLVE THE PROBLEM Thursday, September 12, 13

  52. SOLVE THE PROBLEM Responsive Design Tools Thursday, September 12, 13

  53. SOLVE THE PROBLEM Responsive Design Tools Thursday, September 12, 13

  54. HTML/CSS SOLVE THE PROBLEM Thursday, September 12, 13

  55. HTML/CSS SOLVE THE PROBLEM Thursday, September 12, 13

  56. HTML/CSS SOLVE THE PROBLEM Thursday, September 12, 13

  57. Layout vs Modules SOLVE THE PROBLEM Thursday, September 12, 13

  58. Layout vs Modules SOLVE THE PROBLEM Thursday, September 12, 13

  59. Layout vs Modules SOLVE THE PROBLEM Thursday, September 12, 13

  60. YOU BEST SOLVE PROBLEMS USING TOOLS YOU ARE FLUENT WITH

    HOW TO DECIDE Thursday, September 12, 13
  61. Thursday, September 12, 13

  62. SOLVE THE PROBLEM Thursday, September 12, 13

  63. Unconscious Incompetence SOLVE THE PROBLEM Thursday, September 12, 13

  64. Unconscious Incompetence Conscious Incompetence SOLVE THE PROBLEM Thursday, September 12,

    13
  65. Unconscious Incompetence Conscious Incompetence Conscious Competence SOLVE THE PROBLEM Thursday,

    September 12, 13
  66. Unconscious Incompetence Conscious Incompetence Conscious Competence Unconscious Competence SOLVE THE

    PROBLEM Thursday, September 12, 13
  67. Fluency SOLVE THE PROBLEM Thursday, September 12, 13

  68. Refine the Solution DISSECTING DESIGN Thursday, September 12, 13

  69. DISSECTING DESIGN ‣ Static Design Tools ‣ Design Pairing Refine

    the Solution Thursday, September 12, 13
  70. Don’t Use Static Design Tools REFINE THE SOLUTION LAUNCH DESIGN

    FRONT END BACK END CONTENT DECISIONS MADE DECISIONS MADE DECISIONS MADE DECISIONS MADE Thursday, September 12, 13
  71. Instead of static design hand-offs, consider design pairing REFINE THE

    SOLUTION Thursday, September 12, 13
  72. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13

  73. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13

  74. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13

  75. Design Pairing REFINE THE SOLUTION Thursday, September 12, 13

  76. Thursday, September 12, 13

  77. You don’t want to do the long tail more than

    once REFINE THE SOLUTION Thursday, September 12, 13
  78. The Switching Point REFINE THE SOLUTION Thursday, September 12, 13

  79. EFFICIENCY IS KEY WHEN REFINING A DESIGN SOLUTION HOW TO

    DECIDE Thursday, September 12, 13
  80. Establish Solve Refine ................. Comfort ....................... Fluency ................... Efficiency Guidelines

    for Selecting Tools Thursday, September 12, 13
  81. Establish Solve Refine ..... Style Prototype ......... Sketching + PSD

    .... In-Browser Pairing Tools we use at Sparkbox Thursday, September 12, 13
  82. Photo Credit: Jay Maisel Thursday, September 12, 13

  83. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Thursday, September 12, 13
  84. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Thursday, September 12, 13
  85. Group improvisation is a challenge. Aside from the weighty technical

    problem of collective coherent thinking, there is the very human, even social need for sympathy from all members to bend for the common result. Bill Evans Thursday, September 12, 13
  86. Group Improvisation Thursday, September 12, 13

  87. Group improvisation requires individuals on a team to... be skilled

    Thursday, September 12, 13
  88. Group improvisation requires individuals on a team to... be humble

    Thursday, September 12, 13
  89. Group improvisation requires individuals on a team to... be empathetic

    Thursday, September 12, 13
  90. Create guidelines instead of rigid process Thursday, September 12, 13

  91. The amount of process required is inversely proportionate to the

    skill and experience of your team. Thursday, September 12, 13
  92. Create the perfect, fully- documented, all-encompassing web design and development

    process. Or... Thursday, September 12, 13
  93. Chill out and develop our people. Thursday, September 12, 13

  94. Invest in people over process Thursday, September 12, 13

  95. THANKS! @bencallahan Thursday, September 12, 13