Successfully reported this slideshow.

Design Process in the Responsive Age

405

Share

Loading in …3
×
1 of 68
1 of 68

Design Process in the Responsive Age

405

Share

Download to read offline

New approaches for designing in the responsive age. These slides are from a presentation I did at the NYC Responsive Web Design Meetup on 14 June.

It includes a responsive case study from my work at R/GA and a look at new techniques responsive designers are using around the world to improve their workflow.

Huge thanks to @brad_frost, @laurenbugeja and Michael Barrish.

New approaches for designing in the responsive age. These slides are from a presentation I did at the NYC Responsive Web Design Meetup on 14 June.

It includes a responsive case study from my work at R/GA and a look at new techniques responsive designers are using around the world to improve their workflow.

Huge thanks to @brad_frost, @laurenbugeja and Michael Barrish.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Design Process in the Responsive Age

  1. Design process in the responsive age A UX perspective Pon Kattera Senior Interaction Designer R/GA @pkattera 14 June 2012: NYC Responsive Web Design Meetup
  2. TONIGHT A little about me Responsive process (alpha) Responsive process (beta) Resources and tips getting started Questions 2
  3. TL;DR Our job now is to create future friendly design systems (not fixed pixel width interfaces). This requires a change in process. 3
  4. A LITTLE ABOUT ME I’m a senior Interaction Designer at R/GA I’m an Australian I’m loving New York! 4
  5. BACK IN 2009 Fixed width pixel designs were all the rage Desktop screens were getting larger Mobile users were visiting our sites And yes, I’ll admit it. Back then, I was recommending 960px fixed width. 5
  6. MY 2010
  7. 2011: GOODBYE TIMBUKTU, HELLO NEW YORK What’s this “responsive web design” thing you speak of? 7
  8. SO, WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN? 1. A flexible, grid based layout 2. Flexible images and media, and 3. Media Queries Ethan Marcotte, Responsive Web Design 8
  9. RESPONSIVE WEB DESIGN VS ADAPTIVE WEB DESIGN “Adaptive web design is about ADAPTIVE creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, Adaptive web design is just THIS IS another term for progressive RESPONSIVE enhancement…” Aaron Gustafson, Adaptive Web Design via Brad Frost 9
  10. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 10
  11. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 11
  12. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH Lorem ipsum WIREFRAMES Lorem ipsum COPY VISUAL DESIGN DEV TEST 12
  13. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN Devs are lumped with too many DEV important design decisions TEST 13
  14. WHY CHANGE OUR PROCESS? To increase efficiency Save time and make money. To design better websites Design systems, not fixed pixel width interfaces. 14
  15. WHY CHANGE “RWD comes under criticism for not being commercially viable. It’s because it’s trying to be shoe-horned into an existing, fixed-canvas, inflexible process.” Mark Boulton, on responsive workflow 15
  16. IF YOU DON’T CHANGE 16
  17. RESPONSIVE PROCESS (ALPHA) 17
  18. CASE STUDY FINANCIAL ADVISORS RESPONSIVE SITE Project Details: An existing Financial Advisors website that includes basic profile information, market info and company news. Advisors update their page via a CMS. The brief: Redesign the website to make Advisors more accessible and engaging to both potential and existing clients. Current state: Think of the site like a Linkedin for Financial Advisors 18
  19. CASE STUDY FINANCIAL ADVISORS Business Objectives User Goals RESPONSIVE SITE Increase the number of Prospects: Browse for prospects contacting Advisors, make a selection, Advisors contact Advisor Increase the number of Existing clients: Get customer referring market updates, login to Advisors their financial accounts 19
  20. TIPS SHOULD I GO RESPONSIVE FOR MY PROJECT It depends… Project context Budget and timelines Skill set of your team Client expectations 20
  21. TIPS Responsive web design may not be the best option right now for your project 21
  22. CASE STUDY WHY WE WENT Client’s Business Supporting observed user Facilitate customer RESPONSIVE Objectives behavior referrals To be future Competitive Building friendly advantage expertise 22
  23. CASE STUDY OUR APPROACH Mobile first (content first) responsive web design Focus on users and content first before sketching mobile screens 23
  24. CASE STUDY RESPONSIVE PROCESS User Content Iterative design & development Prototype handover to client Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech TEST PROTOTYPE USER CONTENT RWD RESEARCH STRATEGY SKETCH PROTOTYPE VISUAL DESIGN WIREFRAME Starting mobile first 24
  25. CASE STUDY USER PERSONAS SCENARIOS RESEARCH 25
  26. CASE STUDY CONTENT INFORMATION CONTENT ARCHITECTURE REFERENCE DIAGRAMS 26
  27. CASE STUDY CONTENT INVENTORY AND PRIORITIZATION Mobile content Current website content Content inventory reference diagram * Profile information had a separate content inventory Linear design: think of content devoid of an interface 27
  28. TIPS CONTENT STRATEGY: A USEFUL RULE OF THUMB “Generally speaking, your web content is useless unless it does one or both of the following: - Supports a key business objective - Supports a user (or customer) in completing a task” Kristina Halvorson, Content Strategy for the Web 28
  29. TIPS SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE? 29
  30. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT TEST PROTOTYPE SKETCH VISUAL DESIGN WIREFRAME 30
  31. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME * Sketching and testing throughout 31
  32. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME PROTOTYPE * Sketching and testing throughout 32
  33. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE * Sketching and testing throughout 33
  34. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE PROTOTYPE * Sketching and testing throughout 34
  35. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 5 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME RWD PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE * Sketching and testing throughout 35
  36. CASE STUDY INTERACTION SKETCH WIREFRAME PROTOTYPE DESIGN 36
  37. CASE STUDY VISUAL VISUAL GRIDS AND DESIGN LANGUAGE PROPORTIONS 37
  38. 38
  39. SPEED IS A DESIGN DECISION 39
  40. TIPS RWD ISSUES What screen sizes should I design? Start at 320px? Then what? 40
  41. TIPS RWD ISSUES How do I select breakpoints? Breakpoints should be device agnostic Let page content determine your breakpoints 41
  42. CASE STUDY KEEPING PAGES BALANCED: THE PROBLEM Advisors can choose between 1 and 20 content modules Where an Advisor removes modules 5 and 9 42
  43. CASE STUDY KEEPING PAGES BALANCED: SOLUTIONS Content priority Two column layout, dynamic grid layout One column, fixed position side nav 43
  44. TIPS RWD ISSUES Presenting responsive designs to clients On screen, with all layouts side by side PROFILE PAGE Nothing beats placing the prototype in the client’s hands 44
  45. CASE STUDY PROTOTYPE: Cheap Fast Focus LOW FIDELITY [DEMO] 45
  46. CASE STUDY PROTOTYPE: Treatment of media Testing visual styles on Something the client can show HIGH FIDELITY assets more devices their boss 46
  47. RESPONSIVE PROCESS (BETA) 47
  48. DESIGNING IN TEXT Simply, write down the content for each page in text form. The text should communicate the essence of the page. Tools like Markdown and Pandoc help convert text files to HTML. 48
  49. STYLE TILES BY SAMANTHA WARREN http://styletil.es/ 49
  50. HTML STYLE GUIDES Get started early Use throughout the project Add responsive patterns Pattern Primer by Jeremy Keith Pea.rs by Simple Bits Starbucks style guide http://patternprimer.adactio.com/ http://pea.rs/ http://www.starbucks.com/static/reference/styleguide/ 50
  51. DESIGNING IN THE BROWSER Creating elements and styles in HTML/CSS “The most important part here is to use a tool which doesn’t restrain your creativity. It can be the browser, Photoshop, Fireworks, InDesign or anything else that feels right.” Viljami Salminen, on responsive workflow 51
  52. STOP. COLLABORATE. AND LISTEN. 52
  53. WHAT ARE OTHERS DOING? 53
  54. MARK 1. Sketch BOULTON 2. Prototype 3. Design 4. Iterate 5. Talk Mark Boulton’s, notes, thoughts and conclusions Responsive workflow - Responsive Summit, London 24 February 2012 http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow 54
  55. STEPHEN 1. Content inventory 2. Content reference wireframes HAY 3. Design in text (structured content) 4. Linear design 5. Break point graph 6. Design for various breakpoints 7. HTML design prototype 8. Present prototype screenshots 9. Present prototype after revision 10. Document for production Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012 http://www.slideshare.net/stephenhay/mobilism2012 55
  56. VILJAMI SALMINEN Viljami Salminen, on responsive workflow, 28 May 2012 http://viljamis.com/blog/2012/responsive-workflow/ 56
  57. HOW WOULD I APPROACH A NEW RESPONSIVE PROJECT STARTING TODAY? 57
  58. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH 58
  59. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER CONTENT RESEARCH STRATEGY IA and content reference diagram 59
  60. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT 60
  61. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT VISUAL (depending on project context) STYLETIL.ES USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT SKETCH CONVERT TO HTML 61
  62. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT VISUAL TEST (depending on project context) STYLETIL.ES PROTOTYPE USER CONTENT DESIGN RESEARCH IN TEXT SKETCH STRATEGY VISUAL DESIGN CONVERT WIREFRAME TO HTML Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals 62
  63. HTML STYLE GUIDE RWD PROTOTYPE MY RESPONSIVE PROCESS FOR THE NEXT PROJECT VISUAL TEST (depending on project context) STYLETIL.ES PROTOTYPE USER CONTENT DESIGN RESEARCH IN TEXT SKETCH STRATEGY VISUAL DESIGN CONVERT WIREFRAME TO HTML Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals 63
  64. RESPONSIVE RESOURCES 64
  65. Start here GETTING http://www.alistapart.com/articles/responsive-web-design STARTED http://futurefriend.ly/ Read these books Get knee deep in code http://www.html5rocks.com/en/mobile/responsivedesign/ http://www.netmagazine.com/tutorials/build-responsive-site-week-designing-responsively-part-1 65
  66. RESPONSIVE Stephan Hay’s Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012 PROCESS Viljami Salminen’s responsive workflow http://viljamis.com/blog/2012/responsive-workflow/ Mark Boulton’s Responsive workflow notes from the Responsive Summit: http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow Drew Clemen’s Design Process in the Responsive Age http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Ben Callahan’s Hands-on Responsive Web Design https://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12 Yellow Pencil’s Responsive web design process http://responsiveprocess.com/ 66
  67. RESPONSIVE As RWD evolves, so will our process RESOURCES RESS: http://www.lukew.com/ff/entry.asp?1392 Responsive images: http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/ CSS4 media queries to tackle touch: http://www.netmagazine.com/news/css4-media-queries-tackle-touch-121980 Optimizing for Retina Screens: http://bradfrostweb.com/blog/mobile/hi-res-optimization/ Stay up to date @rwd @grigs @stephanierieger @beep @scottjehl @bryanrieger @brad_frost @stephanhay @globalmoxie @lukew @adactio @wilto and more: http://twitter.com/pkattera/rwd 67
  68. THANKS @PKATTERA UXRAVE.COM 68

×