You are on page 1of 68

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 .

5 . I’ll admit it. I was recommending 960px fixed width.BACK IN 2009 Fixed width pixel designs were all the rage Desktop screens were getting larger Mobile users were visiting our sites And yes. Back then.

MY 2010 .

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

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

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

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 .

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

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

IF YOU DON’T CHANGE 16 .

RESPONSIVE PROCESS (ALPHA) 17 .

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

contact Advisor Existing clients: Get market updates. login to their financial accounts 19 .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. make a selection.

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 .

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

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 .

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

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 .

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

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. write down the content for each page in text form.DESIGNING IN TEXT Simply. 48 . Tools like Markdown and Pandoc help convert text files to HTML.

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

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

” 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. It can be the browser. on responsive workflow 51 .

AND LISTEN. 52 . COLLABORATE.STOP.

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 .

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 62 .g.

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

RESPONSIVE RESOURCES 64 .

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

co.markboulton.slideshare.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.uk/journal/comments/responsive-summit-workflow Drew Clemen’s Design Process in the Responsive Age http://uxdesign.net/stephenhay/mobilism2012 Viljami Salminen’s responsive workflow http://viljamis.smashingmagazine.RESPONSIVE PROCESS Stephan Hay’s Responsive Design Workflow http://www.com/ 66 .com/blog/2012/responsive-workflow/ Mark Boulton’s Responsive workflow notes from the Responsive Summit: http://www.

com/articles/responsive-images-and-web-standards-at-the-turning-point/ CSS4 media queries to tackle touch: http://www.alistapart.asp?1392 Responsive images: http://www.com/ff/entry.com/news/css4-media-queries-tackle-touch-121980 Optimizing for Retina Screens: http://bradfrostweb. so will our process RESS: http://www.com/pkattera/rwd 67 .RESPONSIVE RESOURCES As RWD evolves.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.netmagazine.lukew.

@PKATTERA UXRAVE.COM 68 THANKS .