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

Workflow on RWD Projects

Ben Callahan
April 07, 2014

Workflow on RWD Projects

Deck from my full day workshop at UX Immersion, 2014, in Denver, CO.

Ben Callahan

April 07, 2014
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. Me too! Ditto! Old Linear Workflow Now with RWD! CONTENT

    UX DESIGN FRONT-END BACK-END LAUNCH!
  2. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE CONTENT UX FRONT-END DESIGN BACK-END
  3. Style Comparisons “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/
  4. LAUNCH DESIGN FRONT END BACK END CONTENT DECISIONS MADE DECISIONS

    MADE DECISIONS MADE DECISIONS MADE Refine in code.
  5. 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
  6. 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
  7. 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
  8. Fostering Humility “Fail without the fear of failure.” Mark Boulton

    http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit
  9. ‣ Listen, then talk. ‣ It’s about the work. ‣

    It’s a conversation. ‣ It’s public. ‣ What’s said in a critique, stays in a critique. Fostering Humility http://www.markboulton.co.uk/journal/it-s-not-working-for-me-crit
  10. Fostering Humility “What a fun read—an exciting time to be

    part of the Sparkbox team!” ! “You constantly remind me that signing on to work at Sparkbox was the right thing to do.” ! “Thanks for this. I love reading your thoughtful emails—seriously.” ! “Thanks. I don’t think many people get these kinds of thoughtful emails from bosses. Much appreciated.” Talk About Successes
  11. The Empathetic Web Maker Content User
 Experience User
 Interface CMS

    Gap Analysis
 Information Architecture Content Priority Wireframe
 Usability Test Heuristic Evaluation Visual Design
 Typography
 Illustration Content Modeling
 Management Workflow
 Content Governance Semantic Markup (HTML) Interaction Layer
 (JS) Style
 (CSS) Ruby
 PHP
 .NET Design Develop Empathy
  12. 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
  13. 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
  14. The rigidity of your process should be inversely proportional to

    the level of fluency, humility, and empathy demonstrated by your team.
  15. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Poor work • Frustrated team • Doubt in leadership • Great work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  16. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Poor work • Frustrated team • Doubt in leadership • Great work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  17. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Poor work • Frustrated team • Doubt in leadership • Great work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  18. Collaboration is a balance between freedom and accountability. “Without the

    possibility of failure, there is no possibility for real success. You have to introduce real risk for something really good to happen.” ! Ben Sidran
  19. People who work 
 in the business. People who work

    
 on the business. Fostering Collaboration
  20. Frame the Project “Problem solving is actually some of the

    most valuable work that we do for our clients. Taking our technology expertise and coupling it with their business expertise allows us to really think outside the box for profitable solutions. We’ve found that creative solutions often come when a third party looks at a problem from outside normal day-to-day operations.” Rob Harr
  21. Inexperienced Experienced Rigid Process Group Improvisation • Missed deadlines •

    Blown budgets • Trouble shipping • Frustrated team • Doubt in leadership • Average work • Meet deadlines • Sense that there’s a better way • Average work • Culture of trust • Regular innovation • Timeless work
  22. LESSONS LEARNED Testing ‣ You must test on real devices

    ‣ Do your development in a webkit browser ‣ Build libraries of your patterns
  23. LESSONS LEARNED Pricing ‣ As much as 100% more, initially

    ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more
  24. LESSONS LEARNED Pricing ‣ As much as 100% more, initially

    ‣ Likely to be 50% more, soon after ‣ Probably never less than 25% more COMPARED TO WHAT?
  25. LESSONS LEARNED Pricing ‣ Testing (labs & time) ‣ Fewer

    patterns ‣ Project management ‣ Learning curve ‣ Maintenance ‣ Content strategy
  26. Performance ‣ Optimize or cut out images ‣ Decrease the

    number of requests ‣ Gzip if you can ‣ Concat and minify CSS/JS ‣ Load CSS at the top ‣ Load JS at the bottom ‣ Follow @souders on Twitter
  27. Congratulations! In celebration of all your hard work and discipline,

    as a reward for all the risk you’ve taken to reach this point, we’re quite pleased to present you with…YOUR CONTENT! ! Keep up the good work! ! ~ The Management
  28. A Taxonomy ‣ Trigger Indicators ‣ Trigger (reveal) Patterns !

    ‣ Interaction Indicators ‣ Interaction Patterns
  29. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  30. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
  31. Trigger Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  32. Trigger Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover
  33. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/
  34. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO.
  35. viewport width input method context low bandwidth no bandwidth available

    light location history state of mind intent viewport height right content speed user preference cross-width consistency Web Design
  36. Web Design viewport width input method context low bandwidth no

    bandwidth available light location history state of mind intent viewport height right content speed user preference cross-width consistency
  37. The Responsive Mindset ! “The truly responsive design web designer

    wasn’t born until after the launch of the iPhone. We haven’t seen his or her work yet.” ! Andy Clarke ! http://the-pastry-box-project.net/andy-clarke/2012-april-8/
  38. There are many problems left to solve. ! We’ll solve

    them much faster if we solve them together.