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

Web Design Process In a Responsive World

Ben Callahan
January 10, 2013

Web Design Process In a Responsive World

Slides from @drewtclemens and I's presentation at #codemash on January 10, 2013 in Sandusky, Ohio.

Ben Callahan

January 10, 2013
Tweet

More Decks by Ben Callahan

Other Decks in Design

Transcript

  1. WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN

    MINDSET Thursday, January 10, 13
  2. A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END

    LAUNCH! TH IN K A B O U T U SER S Thursday, January 10, 13
  3. A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END

    LAUNCH! TH IN K A B O U T U SER S TH R O W IN C O N TEN T Thursday, January 10, 13
  4. A SHIFT IN MINDSET Slightly Better Linear Workflow CONTENT UX

    DESIGN FRONT-END BACK-END LAUNCH! Thursday, January 10, 13
  5. A SHIFT IN MINDSET Linear Workflow CONTENT UX DESIGN FRONT-END

    BACK-END LAUNCH Now with RWD! Thursday, January 10, 13
  6. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ Thursday, January 10, 13
  7. Jakob Nielsen Says... ‣ Build a separate mobile site ‣

    Cut features ‣ Cut content http://www.nngroup.com/articles/mobile-site-vs-full-site/ PLEASE, NO. Thursday, January 10, 13
  8. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX DELIVERABLE

    DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE RELEASE RELEASE Thursday, January 10, 13
  9. A SHIFT IN MINDSET A Responsive Workflow ‣ Cons -

    Requires Change - May Conflict with Organizational Structure - Dependent on Team Make-up Thursday, January 10, 13
  10. A SHIFT IN MINDSET A Responsive Workflow ‣ Pros -

    Natural Decisions - Encourages Collaboration - Encourages Iteration - Better Results Thursday, January 10, 13
  11. WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN

    PROCESS Thursday, January 10, 13
  12. A SHIFT IN PROCESS A Process Myth Each client deliverable

    needs to look more like a final, beautiful end-product than the previous one. Thursday, January 10, 13
  13. A SHIFT IN PROCESS Which Results In Pushing toward nearly-designed

    wireframes quickly and completely designed comps soon after. (This sets up all sorts of unrealistic client expectations.) Thursday, January 10, 13
  14. A SHIFT IN PROCESS A Better Approach Deliverables that best

    serve the organization and prioritization of content and function across multiple resolutions. (Not deliverables made just to impress clients.) Thursday, January 10, 13
  15. A SHIFT IN PROCESS Our Deliverables ‣ Research Deliverables ‣

    Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
  16. A SHIFT IN PROCESS Let’s Focus On... ‣ Research Deliverables

    ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
  17. A SHIFT IN PROCESS Priority Deliverables ‣ Content Priority Prototypes

    - Takes the place of a traditional wireframe. - As much real content as you can. - Linear in nature, priority implied. - Possibly created in HTML, viewed in a browser. - Generated by content/UX people. Thursday, January 10, 13
  18. A SHIFT IN PROCESS Priority Deliverables ‣ Content Priority Examples

    - Non HTML examples • Smashing Article: Design Process In The Responsive Age • New Sparkbox site early efforts - HTML example • building.seesparkbox.com Thursday, January 10, 13
  19. A SHIFT IN PROCESS Style Deliverables ‣ Style Prototype -

    Like Style Tiles, but in the browser (styletil.es). - Very fast to build. - Accurate web typography. - Easy to show web interaction. - Client reviews in their browser of preference. Thursday, January 10, 13
  20. A SHIFT IN PROCESS Style Deliverables ‣ Style Prototype Examples

    - building.seesparkbox.com • new Sparkbox web style prototype - dressresponsively.com • dress responsively style prototype Thursday, January 10, 13
  21. A SHIFT IN PROCESS Use What The Project Needs ‣

    Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
  22. LINKS ‘N STUFF Join Us! seesparkbox.com/foundry @hearsparkbox If you really

    like this sort of thing... buildresponsively.com @brworkshop Thursday, January 10, 13