Professional Documents
Culture Documents
A UX perspective
Pon Kattera Senior Interaction Designer R/GA @pkattera
TONIGHT
A little about me Responsive process (alpha) Responsive process (beta) Resources and tips getting started Questions
TL;DR
Our job now is to create future friendly design systems (not fixed pixel width interfaces). This requires a change in process.
A LITTLE ABOUT ME
Im a senior Interaction Designer at R/GA Im an Australian Im loving New York!
BACK IN 2009
Fixed width pixel designs were all the rage Desktop screens were getting larger Mobile users were visiting our sites
And yes, Ill admit it. Back then, I was recommending 960px fixed width.
MY 2010
ADAPTIVE
THIS IS RESPONSIVE
USER RESEARCH
WIREFRAMES
VISUAL DESIGN
DEV
TEST
10
USER RESEARCH
WIREFRAMES
VISUAL DESIGN
DEV
TEST
11
COPY
DEV
TEST
12
USER RESEARCH
WIREFRAMES
VISUAL DESIGN Devs are lumped with too many important design decisions
DEV
TEST
13
14
WHY CHANGE
RWD comes under criticism for not being commercially viable. Its because its trying to be shoe-horned into an existing, fixed-canvas, inflexible process.
15
16
RESPONSIVE PROCESS
(ALPHA)
17
CASE STUDY
18
CASE STUDY
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, contact Advisor Existing clients: Get market updates, login to their financial accounts
19
TIPS
20
TIPS
Responsive web design may not be the best option right now for your project
21
CASE STUDY
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
CASE STUDY
RESPONSIVE PROCESS
User
Planner, UX
Content
Planner, UX, Visual, Tech
TEST PROTOTYPE
USER RESEARCH
CONTENT STRATEGY
RWD PROTOTYPE
CASE STUDY
USER RESEARCH
PERSONAS
SCENARIOS
25
CASE STUDY
CONTENT
INFORMATION ARCHITECTURE
26
CASE STUDY
TIPS
28
TIPS
29
CASE STUDY
TEST PROTOTYPE
30
CASE STUDY
31
CASE STUDY
VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME
32
CASE STUDY
VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME
VISUAL DESIGN
WIREFRAME
PROTOTYPE
33
CASE STUDY
VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME
VISUAL DESIGN
VISUAL DESIGN
WIREFRAME
PROTOTYPE
PROTOTYPE
34
CASE STUDY
VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME
VISUAL DESIGN
VISUAL DESIGN
WIREFRAME
RWD PROTOTYPE
PROTOTYPE
PROTOTYPE
35
CASE STUDY
INTERACTION DESIGN
SKETCH
WIREFRAME
PROTOTYPE
36
CASE STUDY
VISUAL DESIGN
VISUAL LANGUAGE
37
38
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
42
CASE STUDY
43
TIPS
RWD ISSUES
Presenting responsive designs to clients
On screen, with all layouts side by side
PROFILE PAGE
CASE STUDY
Cheap
Fast
Focus
[DEMO]
45
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://styletil.es/
49
http://patternprimer.adactio.com/
http://pea.rs/
http://www.starbucks.com/static/reference/styleguide/
50
MARK BOULTON
Mark Boultons, 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
56
57
58
CONTENT STRATEGY
59
CONTENT STRATEGY
DESIGN IN TEXT
60
VISUAL STYLETIL.ES
CONTENT STRATEGY
DESIGN IN TEXT
SKETCH
CONVERT TO HTML
61
VISUAL STYLETIL.ES
TEST PROTOTYPE
CONTENT STRATEGY
DESIGN IN TEXT
VISUAL STYLETIL.ES
TEST PROTOTYPE
CONTENT STRATEGY
DESIGN IN TEXT
RESPONSIVE RESOURCES
64
GETTING STARTED
Start here
http://www.alistapart.com/articles/responsive-web-design http://futurefriend.ly/
RESPONSIVE PROCESS
Stephan Hays Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012 Viljami Salminens responsive workflow http://viljamis.com/blog/2012/responsive-workflow/ Mark Boultons Responsive workflow notes from the Responsive Summit: http://www.markboulton.co.uk/journal/comments/responsive-summit-workflow Drew Clemens Design Process in the Responsive Age http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/ Ben Callahans Hands-on Responsive Web Design https://speakerdeck.com/u/bencallahan/p/hands-on-responsive-web-design?slide=12 Yellow Pencils Responsive web design process http://responsiveprocess.com/
66
RESPONSIVE RESOURCES
Stay up to date
@rwd @beep @brad_frost @lukew @grigs @scottjehl @stephanhay @adactio @stephanierieger @bryanrieger @globalmoxie @wilto
67
@PKATTERA UXRAVE.COM
68
THANKS