SlideShare una empresa de Scribd logo
1 de 68
Descargar para leer sin conexión
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

Similar a 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
 

Similar a 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

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 

Último (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 

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