design process in the responsive age
Post on 27-Jan-2015
104 Views
Preview:
DESCRIPTION
TRANSCRIPT
Design process in the responsive ageA UX perspective
Pon Kattera Senior Interaction Designer R/GA@pkattera
14 June 2012: NYC Responsive Web Design Meetup
TONIGHTA 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 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
MY 2010
2011:GOODBYE TIMBUKTU,HELLO NEW YORK
What’s this “responsive web design” thing you speak of?
7
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
ADAPTIVE
via Brad Frost
RESPONSIVE WEB DESIGN VSADAPTIVE 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
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
10
TEST
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
CONTENTSTRATEGY
11
TEST
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
CONTENTSTRATEGY
COPY
Lorem ipsum
Lorem ipsum
12
TEST
DOES THIS PROCESS SOUND FAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUALDESIGN
USER RESEARCH
DEV
Devs are lumped with too many important design decisions
13
TEST
WHY CHANGE OUR PROCESS?
To increase efficiency
Save time and make money.
To design better websites
Design systems, not fixed pixel width interfaces.
14
“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
IF YOU DON’T CHANGE
16
RESPONSIVE PROCESS (ALPHA)
17
FINANCIAL ADVISORS RESPONSIVE SITEProject 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
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
SHOULD I GO RESPONSIVE FOR MY PROJECT
It depends…
Project context
Budget and timelines
Skill set of your team
Client expectations
20
TIPS
21
TIPS
Responsive web design may not be the
best option right now for your project
WHY WE WENTRESPONSIVE
Client’sBusiness Objectives
22
CASE STUDY
Supporting observed user behavior
Facilitate customer referrals
To be future friendly
Competitive advantage
Building expertise
OUR APPROACH
Mobile first (content first)responsive web design
Focus on users and content firstbefore sketching mobile screens
23
CASE STUDY
USER RESEARCH
CONTENTSTRATEGY
RWDPROTOTYPE
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
Iterative design & developmentUser Content
Starting mobile first
Prototype handover to client
Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech
24
RESPONSIVE PROCESSCASE STUDY
25
CASE STUDY
USERRESEARCH
PERSONAS SCENARIOS
26
CASE STUDY
CONTENT INFORMATIONARCHITECTURE
CONTENTREFERENCE DIAGRAMS
Current website content Content inventoryMobile content reference diagram
* Profile information had a separate content inventory Linear design: think of content devoid of an interface
CONTENT INVENTORY AND PRIORITIZATIONCASE STUDY
27
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
SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?
29
TIPS
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
ITERATIVE DESIGN AND DEVELOPMENT
CASE STUDY
30
Client check ins: 1
WIREFRAME
* Sketching and testing throughout
Start with:
31
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
32
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
33
3
VISUAL DESIGN
PROTOTYPE
WIREFRAME
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
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
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
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
STRATEGYUSER RESEARCH
CONTENT STRATEGY
ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWNCASE STUDY
CASE STUDY
INTERACTIONDESIGN
SKETCH WIREFRAME PROTOTYPE
36
CASE STUDY
VISUALDESIGN
VISUALLANGUAGE
GRIDS AND PROPORTIONS
37
38
SPEED IS A DESIGN DECISION
39
RWD ISSUES
What screen sizes should I design?
Start at 320px?
Then what?
TIPS
40
RWD ISSUES
How do I select breakpoints?
Breakpoints should be device agnostic
Let page content determine your breakpoints
41
TIPS
Where an Advisor removes modules 5 and 9
Advisors can choose between 1 and 20 content modules
KEEPING PAGES BALANCED: THE PROBLEMCASE STUDY
42
Content priority Two column layout, dynamic grid layout One column, fixed position side nav
KEEPING PAGES BALANCED: SOLUTIONSCASE STUDY
43
RWD ISSUESPresenting 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
PROTOTYPE:LOW FIDELITY
CASE STUDY
45
Fast FocusCheap
[DEMO]
Testing visual styles on more devices
Something the client can show their boss
Treatment of media assets
PROTOTYPE:HIGH FIDELITY
CASE STUDY
46
RESPONSIVE PROCESS (BETA)
47
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
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
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
STOP. COLLABORATE. AND LISTEN.
52
WHAT ARE OTHERS DOING?
53
Mark Boulton’s, notes, thoughts and conclusionsResponsive 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
MARKBOULTON
54
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
VILJAMISALMINEN
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
USER RESEARCH
(depending on project context)
58
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
USER RESEARCH
IA and content reference diagram
CONTENTSTRATEGY
(depending on project context)
59
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT
(depending on project context)
60
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT SKETCH
VISUALSTYLETIL.ES
CONVERT TO HTML
(depending on project context)
61
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT
VISUALSTYLETIL.ES
CONVERT TO HTML
(depending on project context)
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
62
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals
HTML STYLE GUIDE
RWDPROTOTYPE
USER RESEARCH
CONTENTSTRATEGY
DESIGN IN TEXT
VISUALSTYLETIL.ES
CONVERT TO HTML
(depending on project context)
WIREFRAME
VISUALDESIGN
PROTOTYPE
TEST
SKETCH
63
MY RESPONSIVE PROCESS FOR THE NEXT PROJECT
RESPONSIVE RESOURCES
64
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
RESPONSIVE PROCESS
Stephan Hay’s Responsive Design Workflowhttp://www.slideshare.net/stephenhay/mobilism2012
Viljami Salminen’s responsive workflowhttp://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 Agehttp://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Ben Callahan’s Hands-on Responsive Web Designhttps://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12
Yellow Pencil’s Responsive web design processhttp://responsiveprocess.com/
66
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
THANKS@PKATTERA UXRAVE.COM
68
top related