Design process inthe responsive ageA UX perspectivePon Kattera Senior Interaction Designer R/GA@pkattera                  ...
TONIGHTA little about meResponsive process (alpha)Responsive process (beta)Resources and tips getting startedQuestions    ...
TL;DROur job now is to create future friendly designsystems (not fixed pixel width interfaces).This requires a change in p...
A LITTLE ABOUT MEI’m a senior Interaction Designer at R/GAI’m an AustralianI’m loving New York!                           ...
BACK IN 2009Fixed width pixel designs were all the rageDesktop screens were getting largerMobile users were visiting our s...
MY 2010
2011:GOODBYE TIMBUKTU,HELLO NEW YORKWhat’s this “responsive webdesign” thing you speak of?                              7
SO, WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN?1. A flexible, grid based layout2. Flexible images and media, and3. Me...
RESPONSIVE WEB DESIGN VSADAPTIVE WEB DESIGN“Adaptive web design is about                                         ADAPTIVEc...
DOES THIS PROCESSSOUND FAMILIAR?      PLANNING                    AND STRATEGY                                     USER   ...
DOES THIS PROCESSSOUND FAMILIAR?      PLANNING                    AND STRATEGY                                            ...
DOES THIS PROCESSSOUND FAMILIAR?      PLANNING                    AND STRATEGY                                            ...
DOES THIS PROCESSSOUND FAMILIAR?      PLANNING                    AND STRATEGY                                     USER   ...
WHY CHANGE OUR PROCESS?To increase efficiencySave time and make money.To design better websitesDesign systems, not fixed p...
WHY CHANGE“RWD comes under criticism for notbeing commercially viable. It’s becauseit’s trying to be shoe-horned into anex...
IF YOU DON’T CHANGE                      16
RESPONSIVE PROCESS      (ALPHA)                     17
CASE STUDYFINANCIAL ADVISORSRESPONSIVE SITEProject Details:An existing Financial Advisors website thatincludes basic profi...
CASE STUDYFINANCIAL ADVISORS   Business                     Objectives                                              User  ...
TIPS       SHOULD I GO RESPONSIVE FOR MY PROJECT       It depends…       Project context       Budget and timelines       ...
TIPS       Responsive web design may not be the       best option right now for your project                              ...
CASE STUDYWHY WE WENT   Client’s              Business                             Supporting                             ...
CASE STUDY             OUR APPROACH             Mobile first (content first)             responsive web design            ...
CASE STUDYRESPONSIVE PROCESSUser          Content                      Iterative design & development            Prototype...
CASE STUDYUSER         PERSONAS   SCENARIOSRESEARCH                                    25
CASE STUDYCONTENT      INFORMATION    CONTENT             ARCHITECTURE   REFERENCE DIAGRAMS                               ...
CASE STUDYCONTENT INVENTORY AND PRIORITIZATION                                                                            ...
TIPS       CONTENT STRATEGY: A USEFUL RULE OF THUMB       “Generally speaking, your web content is useless       unless it...
TIPSSHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?                                                   29
CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT                         TEST                                    PROTOTYPE     ...
CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins:           1Start with:     STRATEGY  USER RE...
CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins:           1             2                   ...
CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins:           1             2               3   ...
CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins:           1             2               3   ...
CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins:           1             2               3   ...
CASE STUDYINTERACTION   SKETCH   WIREFRAME   PROTOTYPEDESIGN                                               36
CASE STUDYVISUAL       VISUAL     GRIDS ANDDESIGN       LANGUAGE   PROPORTIONS                                      37
38
SPEEDIS A DESIGNDECISION              39
TIPS       RWD ISSUES       What screen sizes should I design?       Start at 320px?       Then what?                     ...
TIPS       RWD ISSUES       How do I select breakpoints?       Breakpoints should be device agnostic       Let page conten...
CASE STUDYKEEPING PAGES BALANCED: THE PROBLEMAdvisors can choose between 1 and 20 content modules                         ...
CASE STUDYKEEPING PAGES BALANCED: SOLUTIONSContent priority       Two column layout, dynamic grid layout   One column, fix...
TIPS       RWD ISSUES       Presenting responsive designs to clients       On screen, with all layouts side by side       ...
CASE STUDY PROTOTYPE:     Cheap    Fast    Focus LOW FIDELITY                        [DEMO]                               ...
CASE STUDY PROTOTYPE:      Treatment                 of media                             Testing visual                  ...
RESPONSIVE PROCESS       (BETA)                     47
DESIGNING IN TEXTSimply, write down the contentfor each page in text form.The text should communicate theessence of the pa...
STYLE TILES BY SAMANTHA WARRENhttp://styletil.es/                                 49
HTML STYLE GUIDESGet started earlyUse throughout the projectAdd responsive patternsPattern Primer by Jeremy Keith      Pea...
DESIGNING IN THE BROWSERCreating elements and styles inHTML/CSS“The most important part here is to use a toolwhich doesn’t...
STOP.COLLABORATE.AND LISTEN.               52
WHAT ARE OTHERS DOING?                         53
MARK      1. SketchBOULTON   2. Prototype          3. Design          4. Iterate          5. Talk          Mark Boulton’s,...
STEPHEN   1. Content inventory          2. Content reference wireframesHAY       3. Design in text (structured content)   ...
VILJAMISALMINEN           Viljami Salminen, on responsive workflow, 28 May 2012           http://viljamis.com/blog/2012/re...
HOW WOULD I APPROACH A NEWRESPONSIVE PROJECT STARTING TODAY?                                     57
MY RESPONSIVE PROCESSFOR THE NEXT PROJECT(depending on project context)     USER   RESEARCH                               ...
MY RESPONSIVE PROCESSFOR THE NEXT PROJECT(depending on project context)     USER          CONTENT   RESEARCH        STRATE...
MY RESPONSIVE PROCESSFOR THE NEXT PROJECT(depending on project context)     USER          CONTENT       DESIGN   RESEARCH ...
MY RESPONSIVE PROCESSFOR THE NEXT PROJECT                                             VISUAL(depending on project context)...
MY RESPONSIVE PROCESSFOR THE NEXT PROJECT                                             VISUAL                TEST(depending...
HTML STYLE                                                                                   GUIDE                        ...
RESPONSIVE RESOURCES                       64
Start hereGETTING   http://www.alistapart.com/articles/responsive-web-designSTARTED   http://futurefriend.ly/          Rea...
RESPONSIVE   Stephan Hay’s Responsive Design Workflow             http://www.slideshare.net/stephenhay/mobilism2012PROCESS...
RESPONSIVE   As RWD evolves, so will our processRESOURCES    RESS: http://www.lukew.com/ff/entry.asp?1392             Resp...
THANKS@PKATTERAUXRAVE.COM             68
Upcoming SlideShare
Loading in...5
×

Design Process in the Responsive Age

96,960

Published on

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.

Published in: Technology, Business
13 Comments
360 Likes
Statistics
Notes
No Downloads
Views
Total Views
96,960
On Slideshare
0
From Embeds
0
Number of Embeds
60
Actions
Shares
0
Downloads
2,375
Comments
13
Likes
360
Embeds 0
No embeds

No notes for slide

Design Process in the Responsive Age

  1. 1. Design process inthe responsive ageA UX perspectivePon Kattera Senior Interaction Designer R/GA@pkattera 14 June 2012: NYC Responsive Web Design Meetup
  2. 2. TONIGHTA little about meResponsive process (alpha)Responsive process (beta)Resources and tips getting startedQuestions 2
  3. 3. TL;DROur job now is to create future friendly designsystems (not fixed pixel width interfaces).This requires a change in process. 3
  4. 4. A LITTLE ABOUT MEI’m a senior Interaction Designer at R/GAI’m an AustralianI’m loving New York! 4
  5. 5. BACK IN 2009Fixed width pixel designs were all the rageDesktop screens were getting largerMobile users were visiting our sitesAnd yes, I’ll admit it. Back then,I was recommending 960px fixed width. 5
  6. 6. MY 2010
  7. 7. 2011:GOODBYE TIMBUKTU,HELLO NEW YORKWhat’s this “responsive webdesign” thing you speak of? 7
  8. 8. SO, WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN?1. A flexible, grid based layout2. Flexible images and media, and3. Media QueriesEthan Marcotte, Responsive Web Design 8
  9. 9. RESPONSIVE WEB DESIGN VSADAPTIVE WEB DESIGN“Adaptive web design is about ADAPTIVEcreating interfaces that adapt tothe user’s capabilities (in terms ofboth form and function). To me,Adaptive web design is just THIS ISanother term for progressive RESPONSIVEenhancement…” Aaron Gustafson, Adaptive Web Design via Brad Frost 9
  10. 10. DOES THIS PROCESSSOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 10
  11. 11. DOES THIS PROCESSSOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 11
  12. 12. DOES THIS PROCESSSOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH Lorem ipsum WIREFRAMES Lorem ipsum COPY VISUAL DESIGN DEV TEST 12
  13. 13. DOES THIS PROCESSSOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN Devs are lumped with too many DEV important design decisions TEST 13
  14. 14. WHY CHANGE OUR PROCESS?To increase efficiencySave time and make money.To design better websitesDesign systems, not fixed pixel width interfaces. 14
  15. 15. WHY CHANGE“RWD comes under criticism for notbeing commercially viable. It’s becauseit’s trying to be shoe-horned into anexisting, fixed-canvas, inflexible process.”Mark Boulton, on responsive workflow 15
  16. 16. IF YOU DON’T CHANGE 16
  17. 17. RESPONSIVE PROCESS (ALPHA) 17
  18. 18. CASE STUDYFINANCIAL ADVISORSRESPONSIVE SITEProject Details:An existing Financial Advisors website thatincludes basic profile information, marketinfo and company news. Advisors updatetheir page via a CMS.The brief:Redesign the website to make Advisorsmore accessible and engaging to bothpotential and existing clients. Current state: Think of the site like a Linkedin for Financial Advisors 18
  19. 19. CASE STUDYFINANCIAL ADVISORS Business Objectives User GoalsRESPONSIVE 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. 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. 21. TIPS Responsive web design may not be the best option right now for your project 21
  22. 22. CASE STUDYWHY WE WENT Client’s Business Supporting observed user Facilitate customerRESPONSIVE Objectives behavior referrals To be future Competitive Building friendly advantage expertise 22
  23. 23. CASE STUDY OUR APPROACH Mobile first (content first) responsive web design Focus on users and content first before sketching mobile screens 23
  24. 24. CASE STUDYRESPONSIVE PROCESSUser Content Iterative design & development Prototype handover to clientPlanner, 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. 25. CASE STUDYUSER PERSONAS SCENARIOSRESEARCH 25
  26. 26. CASE STUDYCONTENT INFORMATION CONTENT ARCHITECTURE REFERENCE DIAGRAMS 26
  27. 27. CASE STUDYCONTENT INVENTORY AND PRIORITIZATION Mobile contentCurrent website content Content inventory reference diagram * Profile information had a separate content inventory Linear design: think of content devoid of an interface 27
  28. 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. 29. TIPSSHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE? 29
  30. 30. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT TEST PROTOTYPE SKETCH VISUAL DESIGN WIREFRAME 30
  31. 31. CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins: 1Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME* Sketching and testing throughout 31
  32. 32. CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins: 1 2 VISUAL DESIGNStart with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME PROTOTYPE* Sketching and testing throughout 32
  33. 33. CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins: 1 2 3 VISUAL DESIGN VISUAL DESIGNStart with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE* Sketching and testing throughout 33
  34. 34. CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins: 1 2 3 4 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGNStart with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE PROTOTYPE* Sketching and testing throughout 34
  35. 35. CASE STUDYITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNClient check ins: 1 2 3 4 5 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGNStart with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME RWD PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE* Sketching and testing throughout 35
  36. 36. CASE STUDYINTERACTION SKETCH WIREFRAME PROTOTYPEDESIGN 36
  37. 37. CASE STUDYVISUAL VISUAL GRIDS ANDDESIGN LANGUAGE PROPORTIONS 37
  38. 38. 38
  39. 39. SPEEDIS A DESIGNDECISION 39
  40. 40. TIPS RWD ISSUES What screen sizes should I design? Start at 320px? Then what? 40
  41. 41. TIPS RWD ISSUES How do I select breakpoints? Breakpoints should be device agnostic Let page content determine your breakpoints 41
  42. 42. CASE STUDYKEEPING PAGES BALANCED: THE PROBLEMAdvisors can choose between 1 and 20 content modules Where an Advisor removes modules 5 and 9 42
  43. 43. CASE STUDYKEEPING PAGES BALANCED: SOLUTIONSContent priority Two column layout, dynamic grid layout One column, fixed position side nav 43
  44. 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. 45. CASE STUDY PROTOTYPE: Cheap Fast Focus LOW FIDELITY [DEMO] 45
  46. 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. 47. RESPONSIVE PROCESS (BETA) 47
  48. 48. DESIGNING IN TEXTSimply, write down the contentfor each page in text form.The text should communicate theessence of the page.Tools like Markdown and Pandochelp convert text files to HTML. 48
  49. 49. STYLE TILES BY SAMANTHA WARRENhttp://styletil.es/ 49
  50. 50. HTML STYLE GUIDESGet started earlyUse throughout the projectAdd responsive patternsPattern Primer by Jeremy Keith Pea.rs by Simple Bits Starbucks style guidehttp://patternprimer.adactio.com/ http://pea.rs/ http://www.starbucks.com/static/reference/styleguide/ 50
  51. 51. DESIGNING IN THE BROWSERCreating elements and styles inHTML/CSS“The most important part here is to use a toolwhich doesn’t restrain your creativity. It can bethe browser, Photoshop, Fireworks, InDesign oranything else that feels right.”Viljami Salminen, on responsive workflow 51
  52. 52. STOP.COLLABORATE.AND LISTEN. 52
  53. 53. WHAT ARE OTHERS DOING? 53
  54. 54. MARK 1. SketchBOULTON 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. 55. STEPHEN 1. Content inventory 2. Content reference wireframesHAY 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. 56. VILJAMISALMINEN Viljami Salminen, on responsive workflow, 28 May 2012 http://viljamis.com/blog/2012/responsive-workflow/ 56
  57. 57. HOW WOULD I APPROACH A NEWRESPONSIVE PROJECT STARTING TODAY? 57
  58. 58. MY RESPONSIVE PROCESSFOR THE NEXT PROJECT(depending on project context) USER RESEARCH 58
  59. 59. MY RESPONSIVE PROCESSFOR THE NEXT PROJECT(depending on project context) USER CONTENT RESEARCH STRATEGY IA and content reference diagram 59
  60. 60. MY RESPONSIVE PROCESSFOR THE NEXT PROJECT(depending on project context) USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT 60
  61. 61. MY RESPONSIVE PROCESSFOR THE NEXT PROJECT VISUAL(depending on project context) STYLETIL.ES USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT SKETCH CONVERT TO HTML 61
  62. 62. MY RESPONSIVE PROCESSFOR 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. 63. HTML STYLE GUIDE RWD PROTOTYPEMY RESPONSIVE PROCESSFOR 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. 64. RESPONSIVE RESOURCES 64
  65. 65. Start hereGETTING http://www.alistapart.com/articles/responsive-web-designSTARTED 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. 66. RESPONSIVE Stephan Hay’s Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012PROCESS 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. 67. RESPONSIVE As RWD evolves, so will our processRESOURCES 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. 68. THANKS@PKATTERAUXRAVE.COM 68
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×