SlideShare ist ein Scribd-Unternehmen logo
1 von 68
Downloaden Sie, um offline zu lesen
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 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. Back then,
I was recommending 960px fixed width.




                                              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
RESPONSIVE WEB DESIGN VS
ADAPTIVE WEB DESIGN
“Adaptive web design is about
                                         ADAPTIVE
creating interfaces that adapt to
the user’s capabilities (in terms of
both form and function). To me,
Adaptive web design is just               THIS IS
another term for progressive            RESPONSIVE
enhancement…”



 Aaron Gustafson, Adaptive Web Design        via Brad Frost


                                                              9
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            COPY

                                                              VISUAL
                                                              DESIGN



                                                                             DEV




                                                                                     TEST


                                                                                                       12
DOES THIS PROCESS
SOUND FAMILIAR?      PLANNING
                    AND STRATEGY


                                     USER
                                   RESEARCH



                                              WIREFRAMES



                                                           VISUAL
                                                           DESIGN

                                                                           Devs are lumped with too many
                                                                    DEV     important design decisions




                                                                          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
WHY CHANGE
“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




                                               15
IF YOU DON’T CHANGE




                      16
RESPONSIVE PROCESS
      (ALPHA)

                     17
CASE STUDY




FINANCIAL ADVISORS
RESPONSIVE SITE
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.


                                              Current state: Think of the site like a Linkedin for Financial Advisors




                                                                                                                        18
CASE STUDY




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




                                                                            19
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   Client’s
              Business
                             Supporting
                             observed user
                                             Facilitate
                                             customer
RESPONSIVE    Objectives     behavior        referrals




              To be future   Competitive     Building
              friendly       advantage       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          Content                      Iterative design & development            Prototype handover to client
Planner, UX   Planner, UX, Visual, Tech    UX, Visual, Tech                          UX, Visual, Tech




                                                     TEST

                                                                        PROTOTYPE



    USER           CONTENT                                                                           RWD
  RESEARCH         STRATEGY               SKETCH
                                                                                                  PROTOTYPE
                                                                            VISUAL
                                                                            DESIGN

                                                     WIREFRAME




                                                    Starting mobile first
                                                                                                                    24
CASE STUDY




USER         PERSONAS   SCENARIOS
RESEARCH




                                    25
CASE STUDY




CONTENT      INFORMATION    CONTENT
             ARCHITECTURE   REFERENCE DIAGRAMS




                                                 26
CASE STUDY

CONTENT INVENTORY AND PRIORITIZATION
                                                                                        Mobile content
Current website content        Content inventory                                        reference diagram




                               * Profile information had a separate content inventory   Linear design: think of content
                                                                                        devoid of an interface

                                                                                                                          27
TIPS




       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”




       Kristina Halvorson, Content Strategy for the Web




                                                               28
TIPS




SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?




                                                   29
CASE STUDY




 ITERATIVE
 DESIGN AND
 DEVELOPMENT
                         TEST

                                    PROTOTYPE




               SKETCH

                                     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   VISUAL DESIGN

Start with:


     STRATEGY
  USER RESEARCH
 CONTENT STRATEGY
                          WIREFRAME   WIREFRAME        WIREFRAME




                                       PROTOTYPE       PROTOTYPE


* Sketching and testing throughout                                    33
CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins:           1             2               3                4




                                      VISUAL DESIGN   VISUAL DESIGN   VISUAL DESIGN

Start with:


     STRATEGY
  USER RESEARCH
 CONTENT STRATEGY
                          WIREFRAME   WIREFRAME        WIREFRAME




                                       PROTOTYPE       PROTOTYPE       PROTOTYPE


* Sketching and testing throughout                                                    34
CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins:           1             2               3                4              5




                                      VISUAL DESIGN   VISUAL DESIGN   VISUAL DESIGN

Start with:


     STRATEGY
  USER RESEARCH
 CONTENT STRATEGY
                          WIREFRAME   WIREFRAME        WIREFRAME                      RWD PROTOTYPE




                                       PROTOTYPE       PROTOTYPE       PROTOTYPE


* Sketching and testing throughout                                                                    35
CASE STUDY




INTERACTION   SKETCH   WIREFRAME   PROTOTYPE
DESIGN




                                               36
CASE STUDY




VISUAL       VISUAL     GRIDS AND
DESIGN       LANGUAGE   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, dynamic grid layout   One column, fixed position side nav




                                                                                                      43
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:     Cheap    Fast    Focus
 LOW FIDELITY


                        [DEMO]




                                         45
CASE STUDY




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




                                                                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
STYLE TILES BY SAMANTHA WARREN




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



                                                                                                                    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      1. Sketch
BOULTON   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   1. Content inventory
          2. Content reference wireframes
HAY       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          CONTENT
   RESEARCH        STRATEGY



                IA and content
              reference diagram




                                  59
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
(depending on project context)




     USER          CONTENT       DESIGN
   RESEARCH        STRATEGY      IN TEXT




                                           60
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
                                             VISUAL
(depending on project context)
                                           STYLETIL.ES




     USER          CONTENT       DESIGN
   RESEARCH        STRATEGY      IN TEXT                 SKETCH




                                            CONVERT
                                            TO HTML




                                                                  61
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
                                             VISUAL                TEST
(depending on project context)
                                           STYLETIL.ES
                                                                                 PROTOTYPE



     USER          CONTENT       DESIGN
   RESEARCH                      IN TEXT                 SKETCH
                   STRATEGY

                                                                                  VISUAL
                                                                                  DESIGN
                                            CONVERT               WIREFRAME
                                            TO HTML




                                                            Skipping formal reviews of mid-range
                                                             (e.g. tablet) wireframes and visuals
                                                                                                    62
HTML STYLE
                                                                                   GUIDE

                                                                                                       RWD
                                                                                                    PROTOTYPE
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
                                             VISUAL                TEST
(depending on project context)
                                           STYLETIL.ES
                                                                                 PROTOTYPE



     USER          CONTENT       DESIGN
   RESEARCH                      IN TEXT                 SKETCH
                   STRATEGY

                                                                                  VISUAL
                                                                                  DESIGN
                                            CONVERT               WIREFRAME
                                            TO HTML




                                                            Skipping formal reviews of mid-range
                                                             (e.g. tablet) wireframes and visuals
                                                                                                                63
RESPONSIVE RESOURCES

                       64
Start here
GETTING   http://www.alistapart.com/articles/responsive-web-design

STARTED   http://futurefriend.ly/



          Read these books




          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   Stephan Hay’s Responsive Design Workflow
             http://www.slideshare.net/stephenhay/mobilism2012
PROCESS      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
RESPONSIVE   As RWD evolves, so will our process

RESOURCES    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/



             Stay up to date
             @rwd              @grigs              @stephanierieger
             @beep             @scottjehl          @bryanrieger
             @brad_frost       @stephanhay         @globalmoxie
             @lukew            @adactio            @wilto

             and more: http://twitter.com/pkattera/rwd




                                                                                                                               67
THANKS
@PKATTERA
UXRAVE.COM

             68

Más contenido relacionado

Was ist angesagt?

The Art of Design & Design Thinking
The Art of Design & Design ThinkingThe Art of Design & Design Thinking
The Art of Design & Design ThinkingNancy Walkup
 
User Experience Design: A Primer for Marketers
User Experience Design: A Primer for MarketersUser Experience Design: A Primer for Marketers
User Experience Design: A Primer for MarketersJason Brush
 
Ux presentation - To get stakeholder buy in
Ux presentation - To get stakeholder buy inUx presentation - To get stakeholder buy in
Ux presentation - To get stakeholder buy inMal Nelder
 
Product Owner vs Product Manager
Product Owner vs Product ManagerProduct Owner vs Product Manager
Product Owner vs Product ManagerAgileSparks
 
Agile and Design Thinking at IBM
Agile and Design Thinking at IBMAgile and Design Thinking at IBM
Agile and Design Thinking at IBMuxpin
 
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXA Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXAnnie Wang
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb BaraaHarb
 
How to Manage a Platform Product by Yelp Product Manager
How to Manage a Platform Product by Yelp Product ManagerHow to Manage a Platform Product by Yelp Product Manager
How to Manage a Platform Product by Yelp Product ManagerProduct School
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
UX Research in the Agile Cycle
UX Research in the Agile CycleUX Research in the Agile Cycle
UX Research in the Agile Cycleuxpin
 
stanford-design-thinking-workbook-
stanford-design-thinking-workbook-stanford-design-thinking-workbook-
stanford-design-thinking-workbook-Rapid Reasoning
 
Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop]
Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop] Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop]
Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop] Kate Rutter
 

Was ist angesagt? (20)

What is UX?
What is UX?What is UX?
What is UX?
 
The Art of Design & Design Thinking
The Art of Design & Design ThinkingThe Art of Design & Design Thinking
The Art of Design & Design Thinking
 
User Experience Design: A Primer for Marketers
User Experience Design: A Primer for MarketersUser Experience Design: A Primer for Marketers
User Experience Design: A Primer for Marketers
 
Ux presentation - To get stakeholder buy in
Ux presentation - To get stakeholder buy inUx presentation - To get stakeholder buy in
Ux presentation - To get stakeholder buy in
 
Product Owner vs Product Manager
Product Owner vs Product ManagerProduct Owner vs Product Manager
Product Owner vs Product Manager
 
Agile and Design Thinking at IBM
Agile and Design Thinking at IBMAgile and Design Thinking at IBM
Agile and Design Thinking at IBM
 
Ux design process
Ux design processUx design process
Ux design process
 
Agile Office Spaces
Agile Office SpacesAgile Office Spaces
Agile Office Spaces
 
Developer Experience on AWS
Developer Experience on AWSDeveloper Experience on AWS
Developer Experience on AWS
 
A Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UXA Lean Design Process for Creating Awesome UX
A Lean Design Process for Creating Awesome UX
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb
 
User interface design
User interface designUser interface design
User interface design
 
How to Manage a Platform Product by Yelp Product Manager
How to Manage a Platform Product by Yelp Product ManagerHow to Manage a Platform Product by Yelp Product Manager
How to Manage a Platform Product by Yelp Product Manager
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
UX research
UX researchUX research
UX research
 
Lean UX
Lean UXLean UX
Lean UX
 
UX Research in the Agile Cycle
UX Research in the Agile CycleUX Research in the Agile Cycle
UX Research in the Agile Cycle
 
stanford-design-thinking-workbook-
stanford-design-thinking-workbook-stanford-design-thinking-workbook-
stanford-design-thinking-workbook-
 
Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop]
Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop] Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop]
Measure What Matters: Crafting UX Success Metrics [UX Lisbon 2019, workshop]
 
Design Thinking
Design ThinkingDesign Thinking
Design Thinking
 

Andere mochten auch

How To Find Clients
How To Find ClientsHow To Find Clients
How To Find ClientsChris Do
 
Wix web design tutorial
Wix web design tutorialWix web design tutorial
Wix web design tutorialwgraham1323
 
Intro word press training
Intro word press trainingIntro word press training
Intro word press trainingJennifer Lill
 
Design Thinking Process
Design Thinking ProcessDesign Thinking Process
Design Thinking ProcessHeyy Gus
 
The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical InterfaceJosh Clark
 

Andere mochten auch (7)

How To Find Clients
How To Find ClientsHow To Find Clients
How To Find Clients
 
Wix web design tutorial
Wix web design tutorialWix web design tutorial
Wix web design tutorial
 
Intro word press training
Intro word press trainingIntro word press training
Intro word press training
 
Design Thinking Process
Design Thinking ProcessDesign Thinking Process
Design Thinking Process
 
The Physical Interface
The Physical InterfaceThe Physical Interface
The Physical Interface
 
5 Type Of Architecture Design Process
5 Type Of Architecture Design Process 5 Type Of Architecture Design Process
5 Type Of Architecture Design Process
 
The AI Rush
The AI RushThe AI Rush
The AI Rush
 

Ähnlich wie Design Process in the Responsive Age

What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?Baris Erkol
 
User Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickUser Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickC4Media
 
Concept To Commercialisation Breastlight Case Study
Concept To Commercialisation   Breastlight Case StudyConcept To Commercialisation   Breastlight Case Study
Concept To Commercialisation Breastlight Case Studystuartkelly
 
User Experience & Lean Startup
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean StartupLane Goldstone
 
Great Web Design = Leads & Sales
Great Web Design = Leads & SalesGreat Web Design = Leads & Sales
Great Web Design = Leads & SalesBayshore Solutions
 
Getting Mileage Out of Your Dashboard - Net Gain 7.0
Getting Mileage Out of Your Dashboard - Net Gain 7.0Getting Mileage Out of Your Dashboard - Net Gain 7.0
Getting Mileage Out of Your Dashboard - Net Gain 7.0Delvinia
 
Sage Research & Design Introduction
Sage Research & Design IntroductionSage Research & Design Introduction
Sage Research & Design Introductiontexasanna
 
The Stream Process™ for Defining Projects
The Stream Process™ for Defining ProjectsThe Stream Process™ for Defining Projects
The Stream Process™ for Defining ProjectsOneSpring LLC
 
Process in the Age of Digital Innovation
Process in the Age of Digital InnovationProcess in the Age of Digital Innovation
Process in the Age of Digital InnovationCharles Duncan jr.
 
10 Things to know about experience design
10 Things to know about experience design10 Things to know about experience design
10 Things to know about experience designAynne Valencia
 
SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...
SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...
SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...SAS Institute India Pvt. Ltd
 
Pull | Experience Design
Pull | Experience DesignPull | Experience Design
Pull | Experience DesignDavid Moskovic
 
User Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickUser Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickLane Goldstone
 
Conversion Conference - What's in YOUR toolkit?
Conversion Conference - What's in YOUR toolkit?Conversion Conference - What's in YOUR toolkit?
Conversion Conference - What's in YOUR toolkit?Craig Sullivan
 
CIID Final project report
CIID Final project reportCIID Final project report
CIID Final project reporteilidh dickson
 

Ähnlich wie Design Process in the Responsive Age (20)

Akendi
AkendiAkendi
Akendi
 
What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?
 
User Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickUser Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty Stick
 
Concept To Commercialisation Breastlight Case Study
Concept To Commercialisation   Breastlight Case StudyConcept To Commercialisation   Breastlight Case Study
Concept To Commercialisation Breastlight Case Study
 
User Experience & Lean Startup
User Experience & Lean StartupUser Experience & Lean Startup
User Experience & Lean Startup
 
Great Web Design = Leads & Sales
Great Web Design = Leads & SalesGreat Web Design = Leads & Sales
Great Web Design = Leads & Sales
 
Getting Mileage Out of Your Dashboard - Net Gain 7.0
Getting Mileage Out of Your Dashboard - Net Gain 7.0Getting Mileage Out of Your Dashboard - Net Gain 7.0
Getting Mileage Out of Your Dashboard - Net Gain 7.0
 
Ethnography for Philly CHI
Ethnography for Philly CHIEthnography for Philly CHI
Ethnography for Philly CHI
 
Sage Research & Design Introduction
Sage Research & Design IntroductionSage Research & Design Introduction
Sage Research & Design Introduction
 
What Is Dfss
What Is DfssWhat Is Dfss
What Is Dfss
 
The Stream Process™ for Defining Projects
The Stream Process™ for Defining ProjectsThe Stream Process™ for Defining Projects
The Stream Process™ for Defining Projects
 
Process in the Age of Digital Innovation
Process in the Age of Digital InnovationProcess in the Age of Digital Innovation
Process in the Age of Digital Innovation
 
10 Things to know about experience design
10 Things to know about experience design10 Things to know about experience design
10 Things to know about experience design
 
6th Wave member Trento Health & Well Being Territorial Lab
6th Wave member Trento Health & Well Being Territorial Lab6th Wave member Trento Health & Well Being Territorial Lab
6th Wave member Trento Health & Well Being Territorial Lab
 
SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...
SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...
SAS Forum India: Delivering forward-looking insights to drive breakthrough bu...
 
Pull | Experience Design
Pull | Experience DesignPull | Experience Design
Pull | Experience Design
 
User Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty StickUser Experience - More Than Just a Pretty Stick
User Experience - More Than Just a Pretty Stick
 
Conversion Conference - What's in YOUR toolkit?
Conversion Conference - What's in YOUR toolkit?Conversion Conference - What's in YOUR toolkit?
Conversion Conference - What's in YOUR toolkit?
 
IBM design thinking @LeanUXNYC
IBM design thinking @LeanUXNYCIBM design thinking @LeanUXNYC
IBM design thinking @LeanUXNYC
 
CIID Final project report
CIID Final project reportCIID Final project report
CIID Final project report
 

Último

Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsDianaGray10
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 

Último (20)

Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Automation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projectsAutomation Ops Series: Session 2 - Governance for UiPath projects
Automation Ops Series: Session 2 - Governance for UiPath projects
 
Planetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile BrochurePlanetek Italia Srl - Corporate Profile Brochure
Planetek Italia Srl - Corporate Profile Brochure
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 

Design Process in the Responsive Age

  • 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. A LITTLE ABOUT ME I’m a senior Interaction Designer at R/GA I’m an Australian I’m loving New York! 4
  • 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. Back then, I was recommending 960px fixed width. 5
  • 7. 2011: GOODBYE TIMBUKTU, HELLO NEW YORK What’s this “responsive web design” thing you speak of? 7
  • 8. 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
  • 9. RESPONSIVE WEB DESIGN VS ADAPTIVE WEB DESIGN “Adaptive web design is about ADAPTIVE creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, Adaptive web design is just THIS IS another term for progressive RESPONSIVE enhancement…” Aaron Gustafson, Adaptive Web Design via Brad Frost 9
  • 10. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 10
  • 11. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN DEV TEST 11
  • 12. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY CONTENT STRATEGY USER RESEARCH Lorem ipsum WIREFRAMES Lorem ipsum COPY VISUAL DESIGN DEV TEST 12
  • 13. DOES THIS PROCESS SOUND FAMILIAR? PLANNING AND STRATEGY USER RESEARCH WIREFRAMES VISUAL DESIGN Devs are lumped with too many DEV important design decisions TEST 13
  • 14. WHY CHANGE OUR PROCESS? To increase efficiency Save time and make money. To design better websites Design systems, not fixed pixel width interfaces. 14
  • 15. WHY CHANGE “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 15
  • 16. IF YOU DON’T CHANGE 16
  • 17. RESPONSIVE PROCESS (ALPHA) 17
  • 18. CASE STUDY FINANCIAL ADVISORS RESPONSIVE SITE 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. Current state: Think of the site like a Linkedin for Financial Advisors 18
  • 19. CASE STUDY FINANCIAL ADVISORS Business Objectives User Goals RESPONSIVE SITE Increase the number of Prospects: Browse for prospects contacting Advisors, make a selection, Advisors contact Advisor Increase the number of Existing clients: Get customer referring market updates, login to Advisors their financial accounts 19
  • 20. TIPS SHOULD I GO RESPONSIVE FOR MY PROJECT It depends… Project context Budget and timelines Skill set of your team Client expectations 20
  • 21. TIPS Responsive web design may not be the best option right now for your project 21
  • 22. CASE STUDY WHY WE WENT Client’s Business Supporting observed user Facilitate customer RESPONSIVE Objectives behavior referrals To be future Competitive Building friendly advantage expertise 22
  • 23. CASE STUDY OUR APPROACH Mobile first (content first) responsive web design Focus on users and content first before sketching mobile screens 23
  • 24. CASE STUDY RESPONSIVE PROCESS User Content Iterative design & development Prototype handover to client Planner, UX Planner, UX, Visual, Tech UX, Visual, Tech UX, Visual, Tech TEST PROTOTYPE USER CONTENT RWD RESEARCH STRATEGY SKETCH PROTOTYPE VISUAL DESIGN WIREFRAME Starting mobile first 24
  • 25. CASE STUDY USER PERSONAS SCENARIOS RESEARCH 25
  • 26. CASE STUDY CONTENT INFORMATION CONTENT ARCHITECTURE REFERENCE DIAGRAMS 26
  • 27. CASE STUDY CONTENT INVENTORY AND PRIORITIZATION Mobile content Current website content Content inventory reference diagram * Profile information had a separate content inventory Linear design: think of content devoid of an interface 27
  • 28. TIPS 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” Kristina Halvorson, Content Strategy for the Web 28
  • 29. TIPS SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE? 29
  • 30. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT TEST PROTOTYPE SKETCH VISUAL DESIGN WIREFRAME 30
  • 31. 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
  • 32. 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
  • 33. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE * Sketching and testing throughout 33
  • 34. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME PROTOTYPE PROTOTYPE PROTOTYPE * Sketching and testing throughout 34
  • 35. CASE STUDY ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN Client check ins: 1 2 3 4 5 VISUAL DESIGN VISUAL DESIGN VISUAL DESIGN Start with: STRATEGY USER RESEARCH CONTENT STRATEGY WIREFRAME WIREFRAME WIREFRAME RWD PROTOTYPE PROTOTYPE PROTOTYPE PROTOTYPE * Sketching and testing throughout 35
  • 36. CASE STUDY INTERACTION SKETCH WIREFRAME PROTOTYPE DESIGN 36
  • 37. CASE STUDY VISUAL VISUAL GRIDS AND DESIGN LANGUAGE PROPORTIONS 37
  • 38. 38
  • 40. TIPS RWD ISSUES What screen sizes should I design? Start at 320px? Then what? 40
  • 41. TIPS RWD ISSUES How do I select breakpoints? Breakpoints should be device agnostic Let page content determine your breakpoints 41
  • 42. 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
  • 43. CASE STUDY KEEPING PAGES BALANCED: SOLUTIONS Content priority Two column layout, dynamic grid layout One column, fixed position side nav 43
  • 44. 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
  • 45. CASE STUDY PROTOTYPE: Cheap Fast Focus LOW FIDELITY [DEMO] 45
  • 46. CASE STUDY PROTOTYPE: Treatment of media Testing visual styles on Something the client can show HIGH FIDELITY assets more devices their boss 46
  • 47. RESPONSIVE PROCESS (BETA) 47
  • 48. 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
  • 49. STYLE TILES BY SAMANTHA WARREN http://styletil.es/ 49
  • 50. 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.com/ http://pea.rs/ http://www.starbucks.com/static/reference/styleguide/ 50
  • 51. 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
  • 53. WHAT ARE OTHERS DOING? 53
  • 54. MARK 1. Sketch BOULTON 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
  • 55. STEPHEN 1. Content inventory 2. Content reference wireframes HAY 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
  • 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. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER RESEARCH 58
  • 59. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER CONTENT RESEARCH STRATEGY IA and content reference diagram 59
  • 60. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT (depending on project context) USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT 60
  • 61. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT VISUAL (depending on project context) STYLETIL.ES USER CONTENT DESIGN RESEARCH STRATEGY IN TEXT SKETCH CONVERT TO HTML 61
  • 62. MY RESPONSIVE PROCESS FOR THE NEXT PROJECT VISUAL TEST (depending on project context) STYLETIL.ES PROTOTYPE USER CONTENT DESIGN RESEARCH IN TEXT SKETCH STRATEGY VISUAL DESIGN CONVERT WIREFRAME TO HTML Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals 62
  • 63. HTML STYLE GUIDE RWD PROTOTYPE MY RESPONSIVE PROCESS FOR THE NEXT PROJECT VISUAL TEST (depending on project context) STYLETIL.ES PROTOTYPE USER CONTENT DESIGN RESEARCH IN TEXT SKETCH STRATEGY VISUAL DESIGN CONVERT WIREFRAME TO HTML Skipping formal reviews of mid-range (e.g. tablet) wireframes and visuals 63
  • 65. Start here GETTING http://www.alistapart.com/articles/responsive-web-design STARTED http://futurefriend.ly/ Read these books 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 Stephan Hay’s Responsive Design Workflow http://www.slideshare.net/stephenhay/mobilism2012 PROCESS 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 As RWD evolves, so will our process RESOURCES 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/ Stay up to date @rwd @grigs @stephanierieger @beep @scottjehl @bryanrieger @brad_frost @stephanhay @globalmoxie @lukew @adactio @wilto and more: http://twitter.com/pkattera/rwd 67