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

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. ALITTLEABOUTME
I’m a senior Interaction Designer at R/GA
I’m an Australian
I’m loving New York!
4

5. BACKIN2009
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. MY2010

7. 2011:
GOODBYETIMBUKTU,
HELLONEWYORK
What’s this “responsive web
design” thing you speak of?
7

8. SO,WHATDOESITTAKETOCREATEARESPONSIVEDESIGN?
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
RESPONSIVEWEBDESIGNVS
ADAPTIVEWEBDESIGN
“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…”
THISIS
RESPONSIVE
Aaron Gustafson, Adaptive Web Design
9

10. DOESTHISPROCESS
SOUNDFAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUAL
DESIGN
USER
RESEARCH
DEV
10
TEST

11. DOESTHISPROCESS
SOUNDFAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUAL
DESIGN
USER
RESEARCH
DEV
CONTENT
STRATEGY
11
TEST

12. DOESTHISPROCESS
SOUNDFAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUAL
DESIGN
USER
RESEARCH
DEV
CONTENT
STRATEGY
COPY
Lorem ipsum
Lorem ipsum
12
TEST

13. DOESTHISPROCESS
SOUNDFAMILIAR? PLANNING
AND STRATEGY
WIREFRAMES
VISUAL
DESIGN
USER
RESEARCH
DEV
Devs are lumped with too many
important design decisions
13
TEST

14. WHYCHANGEOURPROCESS?
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
WHYCHANGE
15

16. IFYOUDON’TCHANGE
16

17. RESPONSIVE PROCESS
(ALPHA)
17

18. FINANCIALADVISORS
RESPONSIVESITE
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
CASESTUDY
Current state: Think of the site like a Linkedin for Financial Advisors

19. FINANCIALADVISORS
RESPONSIVESITE
Business
Objectives
Increase the number of
prospects contacting
Advisors
Increase the number of
customer referring
Advisors
19
CASESTUDY
User
Goals
Prospects: Browse for
Advisors, make a selection,
contact Advisor
Existing clients: Get
market updates, login to
their financial accounts

20. SHOULDIGORESPONSIVEFORMYPROJECT
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. WHYWEWENT
RESPONSIVE
Client’s
Business
Objectives
22
CASESTUDY
Supporting
observed user
behavior
Facilitate
customer
referrals
To be future
friendly
Competitive
advantage
Building
expertise

23. OURAPPROACH
Mobile first (content first)
responsive web design
Focus on users and content first
before sketching mobile screens
23
CASESTUDY

24. USER
RESEARCH
CONTENT
STRATEGY
RWD
PROTOTYPE
WIREFRAME
VISUAL
DESIGN
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
RESPONSIVEPROCESS
CASESTUDY

25. 25
CASESTUDY
USER
RESEARCH
PERSONAS SCENARIOS

26. 26
CASESTUDY
CONTENT INFORMATION
ARCHITECTURE
CONTENT
REFERENCEDIAGRAMS

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
CONTENTINVENTORYANDPRIORITIZATION
CASESTUDY
27

28. CONTENTSTRATEGY:AUSEFULRULEOFTHUMB
“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. SHOULDWEHAVELESSCONTENTFOROURMOBILESITE?
29
TIPS

30. WIREFRAME
VISUAL
DESIGN
PROTOTYPE
TEST
SKETCH
ITERATIVE
DESIGNAND
DEVELOPMENT
CASESTUDY
30

31. Client check ins: 1
WIREFRAME
* Sketching and testing throughout
Start with:
31
STRATEGY
USER RESEARCH
CONTENT STRATEGY
ITERATIVEDESIGNANDDEVELOPMENTPROCESSBREAKDOWN
CASESTUDY

32. Client check ins: 1
WIREFRAME
2
VISUAL DESIGN
PROTOTYPE
WIREFRAME
* Sketching and testing throughout
Start with:
32
STRATEGY
USER RESEARCH
CONTENT STRATEGY
ITERATIVEDESIGNANDDEVELOPMENTPROCESSBREAKDOWN
CASESTUDY

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
ITERATIVEDESIGNANDDEVELOPMENTPROCESSBREAKDOWN
CASESTUDY

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
ITERATIVEDESIGNANDDEVELOPMENTPROCESSBREAKDOWN
CASESTUDY

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
ITERATIVEDESIGNANDDEVELOPMENTPROCESSBREAKDOWN
CASESTUDY

36. CASESTUDY
INTERACTION
DESIGN
SKETCH WIREFRAME PROTOTYPE
36

37. CASESTUDY
VISUAL
DESIGN
VISUAL
LANGUAGE
GRIDSAND
PROPORTIONS
37

38. 38

39. SPEED
IS A DESIGN
DECISION
39

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

41. RWDISSUES
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
KEEPINGPAGESBALANCED:THEPROBLEM
CASESTUDY
42

43. Content priority Two column layout, dynamic grid layout One column, fixed position side nav
KEEPINGPAGESBALANCED:SOLUTIONS
CASESTUDY
43

44. RWDISSUES
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:
LOWFIDELITY
CASESTUDY
45
Fast FocusCheap
[DEMO]

46. Testing visual
styles on
more devices
Something the
client can show
their boss
Treatment
of media
assets
PROTOTYPE:
HIGHFIDELITY
CASESTUDY
46

47. RESPONSIVE PROCESS
(BETA)
47

48. DESIGNINGINTEXT
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/
STYLETILESBYSAMANTHAWARREN
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
HTMLSTYLEGUIDES
50

51. DESIGNINGINTHEBROWSER
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
MYRESPONSIVEPROCESS
FORTHENEXTPROJECT

59. USER
RESEARCH
IA and content
reference diagram
CONTENT
STRATEGY
(depending on project context)
59
MYRESPONSIVEPROCESS
FORTHENEXTPROJECT

60. USER
RESEARCH
CONTENT
STRATEGY
DESIGN
IN TEXT
(depending on project context)
60
MYRESPONSIVEPROCESS
FORTHENEXTPROJECT

61. USER
RESEARCH
CONTENT
STRATEGY
DESIGN
IN TEXT SKETCH
VISUAL
STYLETIL.ES
CONVERT
TO HTML
(depending on project context)
61
MYRESPONSIVEPROCESS
FORTHENEXTPROJECT

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
MYRESPONSIVEPROCESS
FORTHENEXTPROJECT

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
MYRESPONSIVEPROCESS
FORTHENEXTPROJECT

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