Web Design Process In a Responsive World

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

Transcript

1. @bencallahan @drewtclemens WEB DESIGN PROCESS IN A RESPONSIVE WORLD Thursday, January 10, 13
2. WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN MINDSET Thursday, January 10, 13
3. Where we’ve been. Thursday, January 10, 13
4. A SHIFT IN MINDSET Traditional Linear Workflow DESIGN FRONT-END BACK-END LAUNCH! Thursday, January 10, 13
5. 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
6. 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
7. A SHIFT IN MINDSET Slightly Better Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH! Thursday, January 10, 13
8. What happens when you throw RWD into this process? Thursday, January 10, 13
9. A SHIFT IN MINDSET Linear Workflow CONTENT UX DESIGN FRONT-END BACK-END LAUNCH Now with RWD! Thursday, January 10, 13
10. This doesn’t work. Thursday, January 10, 13
11. (example: seesparkbox.com) Thursday, January 10, 13
12. 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
13. 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
14. We need to invite others into the process. Thursday, January 10, 13
15. A SHIFT IN MINDSET A Responsive Workflow Thursday, January 10, 13
16. Disciplines BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13
17. Collaborative Timeline Thursday, January 10, 13
18. Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13
19. Differing Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13
20. Life Cycle BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13
21. Phased Release BACK-END FRONT-END DESIGN C O NTENT UX DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE DELIVERABLE RELEASE RELEASE Thursday, January 10, 13
22. A SHIFT IN MINDSET A Responsive Workflow ‣ Cons - Requires Change - May Conflict with Organizational Structure - Dependent on Team Make-up Thursday, January 10, 13
23. A SHIFT IN MINDSET A Responsive Workflow ‣ Pros - Natural Decisions - Encourages Collaboration - Encourages Iteration - Better Results Thursday, January 10, 13
24. BACK-END FRONT-END DESIGN C O NTENT UX Thursday, January 10, 13
25. What happens when you invite others into the process? Thursday, January 10, 13
26. The quality as a whole improves. Thursday, January 10, 13
27. (example: m.people.com) Thursday, January 10, 13
28. So, how do we actually do this? Thursday, January 10, 13
29. WEB DESIGN PROCESS IN A RESPONSIVE WORLD A SHIFT IN PROCESS Thursday, January 10, 13
30. 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
31. 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
32. 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
33. A SHIFT IN PROCESS Our Deliverables ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
34. A SHIFT IN PROCESS Let’s Focus On... ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
35. 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
36. 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
37. 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
38. 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
39. A SHIFT IN PROCESS Use What The Project Needs ‣ Research Deliverables ‣ Content Deliverables ‣ Priority Deliverables ‣ Style Deliverables ‣ Functional Deliverables Thursday, January 10, 13
40. WEB DESIGN PROCESS IN A RESPONSIVE WORLD LET’S DISCUSS Thursday, January 10, 13
41. LINKS ‘N STUFF Join Us! seesparkbox.com/foundry @hearsparkbox If you really like this sort of thing... buildresponsively.com @brworkshop Thursday, January 10, 13
42. THANKS! @hearsparkbox info@heysparkbox.com Thursday, January 10, 13