Rwd process

www.presportal.ru is the biggest Russian knowledge bank about presentations. We publish best presentations.

Transcript

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 And yes, I’ll admit it. Back then, I was recommending 960px fixed width. Fixed width pixel designs were all the rage Desktop screens were getting larger Mobile users were visiting our sites 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. ADAPTIVE via Brad Frost RESPONSIVE WEB DESIGN VS ADAPTIVE WEB DESIGN “Adaptive web design is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, Adaptive web design is just another term for progressive enhancement…” THIS IS RESPONSIVE Aaron Gustafson, Adaptive Web Design 9
10. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY WIREFRAMES VISUAL DESIGN USER RESEARCH DEV 10 TEST
11. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY WIREFRAMES VISUAL DESIGN USER RESEARCH DEV CONTENT STRATEGY 11 TEST
12. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY WIREFRAMES VISUAL DESIGN USER RESEARCH DEV CONTENT STRATEGY COPY Lorem ipsum Lorem ipsum 12 TEST
13. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY WIREFRAMES VISUAL DESIGN USER RESEARCH DEV Devs are lumped with too many important design decisions 13 TEST
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. “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 WHY CHANGE 15
16. IF YOU DON’T CHANGE 16
17. RESPONSIVE PROCESS (ALPHA) 17
18. 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. 18 CASE STUDY Current state: Think of the site like a Linkedin for Financial Advisors
19. FINANCIAL ADVISORS RESPONSIVE SITE Business Objectives Increase the number of prospects contacting Advisors Increase the number of customer referring Advisors 19 CASE STUDY User Goals Prospects: Browse for Advisors, make a selection, contact Advisor Existing clients: Get market updates, login to their financial accounts
20. SHOULD I GO RESPONSIVE FOR MY PROJECT It depends… Project context Budget and timelines Skill set of your team Client expectations 20 TIPS
21. 21 TIPS Responsive web design may not be the best option right now for your project
22. WHY WE WENT RESPONSIVE Client’s Business Objectives 22 CASE STUDY Supporting observed user behavior Facilitate customer referrals To be future friendly Competitive advantage Building expertise
23. OUR APPROACH Mobile first (content first) responsive web design Focus on users and content first before sketching mobile screens 23 CASE STUDY
24. USER RESEARCH CONTENT STRATEGY RWD PROTOTYPE WIREFRAME VISUAL DESIGN PROTOTYPE TEST SKETCH Iterative design & development User Content Starting mobile first Prototype handover to client Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech 24 RESPONSIVE PROCESS CASE STUDY
25. 25 CASE STUDY USER RESEARCH PERSONAS SCENARIOS
26. 26 CASE STUDY CONTENT INFORMATION ARCHITECTURE CONTENT REFERENCE DIAGRAMS
27. Current website content Content inventory Mobile content reference diagram * Profile information had a separate content inventory Linear design: think of content devoid of an interface CONTENT INVENTORY AND PRIORITIZATION CASE STUDY 27
28. 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” 28 Kristina Halvorson, Content Strategy for the Web TIPS
29. SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE? 29 TIPS
30. WIREFRAME VISUAL DESIGN PROTOTYPE TEST SKETCH ITERATIVE DESIGN AND DEVELOPMENT CASE STUDY 30
31. Client check ins: 1 WIREFRAME * Sketching and testing throughout Start with: 31 STRATEGY USER RESEARCH CONTENT STRATEGY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN CASE STUDY
32. Client check ins: 1 WIREFRAME 2 VISUAL DESIGN PROTOTYPE WIREFRAME * Sketching and testing throughout Start with: 32 STRATEGY USER RESEARCH CONTENT STRATEGY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN CASE STUDY
33. Client check ins: 1 WIREFRAME 2 VISUAL DESIGN PROTOTYPE WIREFRAME * Sketching and testing throughout Start with: 33 3 VISUAL DESIGN PROTOTYPE WIREFRAME STRATEGY USER RESEARCH CONTENT STRATEGY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN CASE STUDY
34. Client check ins: 1 WIREFRAME 2 VISUAL DESIGN PROTOTYPE WIREFRAME * Sketching and testing throughout Start with: 34 4 PROTOTYPE VISUAL DESIGN 3 VISUAL DESIGN PROTOTYPE WIREFRAME STRATEGY USER RESEARCH CONTENT STRATEGY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN CASE STUDY
35. Client check ins: 1 WIREFRAME 2 VISUAL DESIGN PROTOTYPE WIREFRAME * Sketching and testing throughout Start with: 35 4 PROTOTYPE VISUAL DESIGN 5 RWD PROTOTYPE 3 VISUAL DESIGN PROTOTYPE WIREFRAME STRATEGY USER RESEARCH CONTENT STRATEGY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN CASE STUDY
36. CASE STUDY INTERACTION DESIGN SKETCH WIREFRAME PROTOTYPE 36
37. CASE STUDY VISUAL DESIGN VISUAL LANGUAGE GRIDS AND PROPORTIONS 37
39. SPEED IS A DESIGN DECISION 39
40. RWD ISSUES What screen sizes should I design? Start at 320px? Then what? TIPS 40
41. RWD ISSUES How do I select breakpoints? Breakpoints should be device agnostic Let page content determine your breakpoints 41 TIPS
42. Where an Advisor removes modules 5 and 9 Advisors can choose between 1 and 20 content modules KEEPING PAGES BALANCED: THE PROBLEM CASE STUDY 42
43. Content priority Two column layout, dynamic grid layout One column, fixed position side nav KEEPING PAGES BALANCED: SOLUTIONS CASE STUDY 43
44. RWD ISSUES Presenting responsive designs to clients On screen, with all layouts side by side Nothing beats placing the prototype in the client’s hands PROFILE PAGE TIPS 44
45. PROTOTYPE: LOW FIDELITY CASE STUDY 45 Fast Focus Cheap [DEMO]
46. Testing visual styles on more devices Something the client can show their boss Treatment of media assets PROTOTYPE: HIGH FIDELITY CASE STUDY 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. http://styletil.es/ STYLE TILES BY SAMANTHA WARREN 49
50. http://www.starbucks.com/static/reference/styleguide/ Starbucks style guide http://patternprimer.adactio.com/ Pattern Primer by Jeremy Keith Pea.rs by Simple Bits http://pea.rs/ Get started early Use throughout the project Add responsive patterns HTML STYLE GUIDES 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 Boulton’s, notes, thoughts and conclusions Responsive workflow - Responsive Summit, London 24 February 2012 http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow 1. Sketch 2. Prototype 3. Design 4. Iterate 5. Talk MARK BOULTON 54
55. http://www.slideshare.net/stephenhay/mobilism2012 Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012 STEPHEN HAY 1. Content inventory 2. Content reference wireframes 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 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. USER RESEARCH (depending on project context) 58 MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
59. USER RESEARCH IA and content reference diagram CONTENT STRATEGY (depending on project context) 59 MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
60. USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT (depending on project context) 60 MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
61. USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT SKETCH VISUAL STYLETIL.ES CONVERT TO HTML (depending on project context) 61 MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
62. Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT VISUAL STYLETIL.ES CONVERT TO HTML (depending on project context) WIREFRAME VISUAL DESIGN PROTOTYPE TEST SKETCH 62 MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
63. Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals HTML STYLE GUIDE RWD PROTOTYPE USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT VISUAL STYLETIL.ES CONVERT TO HTML (depending on project context) WIREFRAME VISUAL DESIGN PROTOTYPE TEST SKETCH 63 MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
64. RESPONSIVE RESOURCES 64
65. GETTING STARTED Read these books Start here http://www.alistapart.com/articles/responsive-web-design http://futurefriend.ly/ 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 PROCESS Stephan Hay’s Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012 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 RESOURCES As RWD evolves, so will our process 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/ @grigs @scottjehl @stephanhay @adactio @stephanierieger @bryanrieger @globalmoxie @wilto @rwd @beep @brad_frost @lukew and more: http://twitter.com/pkattera/rwd Stay up to date 67
68. THANKS @PKATTERA UXRAVE.COM 68