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

TONIGHT
A little about me Responsive process (alpha) Responsive process (beta) Resources and tips getting started Questions

2

TL;DR
Our job now is to create future friendly design systems (not fixed pixel width interfaces). This requires a change in process.

3

A LITTLE ABOUT ME I’m a senior Interaction Designer at R/GA I’m an Australian I’m loving New York! 4 .

Back then. 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. I was recommending 960px fixed width.

MY 2010 .

2011: GOODBYE TIMBUKTU. HELLO NEW YORK What’s this “responsive web design” thing you speak of? 7 .

grid based layout 2.SO. and 3. Flexible images and media. Media Queries Ethan Marcotte. A flexible. Responsive Web Design 8 . WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN? 1.

Adaptive Web Design via Brad Frost 9 . Adaptive web design is just another term for progressive enhancement…” ADAPTIVE THIS IS RESPONSIVE Aaron Gustafson.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.

DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 10 .

DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 11 .

DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH Lorem ipsum WIREFRAMES Lorem ipsum VISUAL DESIGN COPY DEV TEST 12 .

DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN Devs are lumped with too many important design decisions DEV TEST 13 .

not fixed pixel width interfaces. 14 . To design better websites Design systems.WHY CHANGE OUR PROCESS? To increase efficiency Save time and make money.

WHY CHANGE “RWD comes under criticism for not being commercially viable.” Mark Boulton. on responsive workflow 15 . It’s because it’s trying to be shoe-horned into an existing. inflexible process. fixed-canvas.

IF YOU DON’T CHANGE 16 .

RESPONSIVE PROCESS (ALPHA) 17 .

The brief: Redesign the website to make Advisors more accessible and engaging to both potential and existing clients. market info and company news. Current state: Think of the site like a Linkedin for Financial Advisors 18 .CASE STUDY FINANCIAL ADVISORS RESPONSIVE SITE Project Details: An existing Financial Advisors website that includes basic profile information. Advisors update their page via a CMS.

contact Advisor Existing clients: Get market updates. login to their financial accounts 19 . make a selection.CASE STUDY FINANCIAL ADVISORS RESPONSIVE SITE Business Objectives Increase the number of prospects contacting Advisors Increase the number of customer referring Advisors User Goals Prospects: Browse for Advisors.

TIPS SHOULD I GO RESPONSIVE FOR MY PROJECT It depends… Project context Budget and timelines Skill set of your team Client expectations 20 .

TIPS Responsive web design may not be the best option right now for your project 21 .

CASE STUDY WHY WE WENT RESPONSIVE Client’s Business Objectives Supporting observed user behavior Facilitate customer referrals To be future friendly Competitive advantage Building expertise 22 .

CASE STUDY OUR APPROACH Mobile first (content first) responsive web design Focus on users and content first before sketching mobile screens 23 .

Tech TEST PROTOTYPE USER RESEARCH CONTENT STRATEGY SKETCH VISUAL DESIGN WIREFRAME RWD PROTOTYPE Starting mobile first 24 . Tech Prototype handover to client UX.CASE STUDY RESPONSIVE PROCESS User Planner. Visual. UX Content Planner. UX. Tech Iterative design & development UX. Visual. Visual.

CASE STUDY USER RESEARCH PERSONAS SCENARIOS 25 .

CASE STUDY CONTENT INFORMATION ARCHITECTURE CONTENT REFERENCE DIAGRAMS 26 .

CASE STUDY CONTENT INVENTORY AND PRIORITIZATION 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 27 .

Supports a key business objective . your web content is useless unless it does one or both of the following: .TIPS CONTENT STRATEGY: A USEFUL RULE OF THUMB “Generally speaking. Content Strategy for the Web 28 .Supports a user (or customer) in completing a task” Kristina Halvorson.

TIPS SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE? 29 .

CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT SKETCH TEST PROTOTYPE VISUAL DESIGN WIREFRAME 30 .

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 .

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 .

CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME VISUAL DESIGN WIREFRAME PROTOTYPE * Sketching and testing throughout PROTOTYPE 33 .

CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME VISUAL DESIGN VISUAL DESIGN WIREFRAME PROTOTYPE * Sketching and testing throughout PROTOTYPE PROTOTYPE 34 .

CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 5 VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME VISUAL DESIGN VISUAL DESIGN WIREFRAME RWD PROTOTYPE PROTOTYPE * Sketching and testing throughout PROTOTYPE PROTOTYPE 35 .

CASE STUDY INTERACTION DESIGN SKETCH WIREFRAME PROTOTYPE 36 .

CASE STUDY VISUAL DESIGN VISUAL LANGUAGE GRIDS AND PROPORTIONS 37 .

38 .

SPEED IS A DESIGN DECISION 39 .

TIPS RWD ISSUES What screen sizes should I design? Start at 320px? Then what? 40 .

TIPS RWD ISSUES How do I select breakpoints? Breakpoints should be device agnostic Let page content determine your breakpoints 41 .

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 .

CASE STUDY KEEPING PAGES BALANCED: SOLUTIONS Content priority Two column layout. fixed position side nav 43 . dynamic grid layout One column.

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 .

CASE STUDY PROTOTYPE: LOW FIDELITY Cheap Fast Focus [DEMO] 45 .

CASE STUDY PROTOTYPE: HIGH FIDELITY Treatment of media assets Testing visual styles on more devices Something the client can show their boss 46 .

RESPONSIVE PROCESS (BETA) 47 .

The text should communicate the essence of the page. 48 . write down the content for each page in text form. Tools like Markdown and Pandoc help convert text files to HTML.DESIGNING IN TEXT Simply.

es/ 49 .STYLE TILES BY SAMANTHA WARREN http://styletil.

starbucks.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.rs/ http://www.com/static/reference/styleguide/ 50 .com/ http://pea.

” Viljami Salminen. Photoshop. InDesign or anything else that feels right. Fireworks.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. on responsive workflow 51 . It can be the browser.

COLLABORATE.STOP. AND LISTEN. 52 .

WHAT ARE OTHERS DOING? 53 .

MARK BOULTON

1. Sketch 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

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
Stephen Hay, responsive design workflow Mobilsm Amsterdam, 11 May 2012
http://www.slideshare.net/stephenhay/mobilism2012

55

VILJAMI SALMINEN

Viljami Salminen, on responsive workflow, 28 May 2012
http://viljamis.com/blog/2012/responsive-workflow/

56

HOW WOULD I APPROACH A NEW RESPONSIVE PROJECT STARTING TODAY? 57 .

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH 58 .

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH CONTENT STRATEGY IA and content reference diagram 59 .

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH CONTENT STRATEGY DESIGN IN TEXT 60 .

MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH VISUAL STYLETIL.ES CONTENT STRATEGY DESIGN IN TEXT SKETCH CONVERT TO HTML 61 .

tablet) wireframes and visuals 62 .g.ES TEST PROTOTYPE CONTENT STRATEGY DESIGN IN TEXT SKETCH VISUAL DESIGN CONVERT TO HTML WIREFRAME Skipping formal reviews of mid-range (e.MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH VISUAL STYLETIL.

HTML STYLE GUIDE RWD PROTOTYPE MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH VISUAL STYLETIL.ES TEST PROTOTYPE CONTENT STRATEGY DESIGN IN TEXT SKETCH VISUAL DESIGN CONVERT TO HTML WIREFRAME Skipping formal reviews of mid-range (e. tablet) wireframes and visuals 63 .g.

RESPONSIVE RESOURCES 64 .

html5rocks.alistapart.ly/ Read these books Get knee deep in code http://www.com/tutorials/build-responsive-site-week-designing-responsively-part-1 65 .GETTING STARTED Start here http://www.com/en/mobile/responsivedesign/ http://www.com/articles/responsive-web-design http://futurefriend.netmagazine.

com/u/bencallahan/p/hands-on-responsive-web-design?slide=12 Yellow Pencil’s Responsive web design process http://responsiveprocess.uk/journal/comments/responsive-summit-workflow Drew Clemen’s Design Process in the Responsive Age http://uxdesign.RESPONSIVE PROCESS Stephan Hay’s Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012 Viljami Salminen’s responsive workflow http://viljamis.co.com/2012/05/30/design-process-responsive-age/ Ben Callahan’s Hands-on Responsive Web Design https://speakerdeck.com/ 66 .smashingmagazine.markboulton.com/blog/2012/responsive-workflow/ Mark Boulton’s Responsive workflow notes from the Responsive Summit: http://www.

alistapart.netmagazine.com/news/css4-media-queries-tackle-touch-121980 Optimizing for Retina Screens: http://bradfrostweb.lukew. so will our process RESS: http://www.com/blog/mobile/hi-res-optimization/ Stay up to date @rwd @beep @brad_frost @lukew @grigs @scottjehl @stephanhay @adactio @stephanierieger @bryanrieger @globalmoxie @wilto and more: http://twitter.RESPONSIVE RESOURCES As RWD evolves.com/pkattera/rwd 67 .com/ff/entry.com/articles/responsive-images-and-web-standards-at-the-turning-point/ CSS4 media queries to tackle touch: http://www.asp?1392 Responsive images: http://www.

@PKATTERA UXRAVE.COM 68 THANKS .

Sign up to vote on this title
UsefulNot useful