Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Design process in
the responsive age
A UX perspective

Pon Kattera Senior Interaction Designer R/GA
@pkattera




        ...
TONIGHT
A little about me
Responsive process (alpha)
Responsive process (beta)
Resources and tips getting started
Question...
TL;DR
Our job now is to create future friendly design
systems (not fixed pixel width interfaces).

This requires a change ...
A LITTLE ABOUT ME
I’m a senior Interaction Designer at R/GA
I’m an Australian
I’m loving New York!




                   ...
BACK IN 2009
Fixed width pixel designs were all the rage

Desktop screens were getting larger
Mobile users were visiting o...
MY 2010
2011:
GOODBYE TIMBUKTU,
HELLO NEW YORK

What’s this “responsive web
design” thing you speak of?




                      ...
SO, WHAT DOES IT TAKE TO CREATE A RESPONSIVE DESIGN?

1. A flexible, grid based layout
2. Flexible images and media, and
3...
RESPONSIVE WEB DESIGN VS
ADAPTIVE WEB DESIGN
“Adaptive web design is about
                                         ADAPTI...
DOES THIS PROCESS
SOUND FAMILIAR?      PLANNING
                    AND STRATEGY


                                     US...
DOES THIS PROCESS
SOUND FAMILIAR?      PLANNING
                    AND STRATEGY
                                         ...
DOES THIS PROCESS
SOUND FAMILIAR?      PLANNING
                    AND STRATEGY
                                         ...
DOES THIS PROCESS
SOUND FAMILIAR?      PLANNING
                    AND STRATEGY


                                     US...
WHY CHANGE OUR PROCESS?
To increase efficiency
Save time and make money.

To design better websites
Design systems, not fi...
WHY CHANGE
“RWD comes under criticism for not
being commercially viable. It’s because
it’s trying to be shoe-horned into a...
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 ba...
CASE STUDY




FINANCIAL ADVISORS   Business
                     Objectives
                                             ...
TIPS




       SHOULD I GO RESPONSIVE FOR MY PROJECT
       It depends…
       Project context
       Budget and timeline...
TIPS




       Responsive web design may not be the
       best option right now for your project




                   ...
CASE STUDY




WHY WE WENT   Client’s
              Business
                             Supporting
                     ...
CASE STUDY




             OUR APPROACH

             Mobile first (content first)
             responsive web design

  ...
CASE STUDY

RESPONSIVE PROCESS
User          Content                      Iterative design & development            Protot...
CASE STUDY




USER         PERSONAS   SCENARIOS
RESEARCH




                                    25
CASE STUDY




CONTENT      INFORMATION    CONTENT
             ARCHITECTURE   REFERENCE DIAGRAMS




                    ...
CASE STUDY

CONTENT INVENTORY AND PRIORITIZATION
                                                                         ...
TIPS




       CONTENT STRATEGY: A USEFUL RULE OF THUMB
       “Generally speaking, your web content is useless
       un...
TIPS




SHOULD WE HAVE LESS CONTENT FOR OUR MOBILE SITE?




                                                   29
CASE STUDY




 ITERATIVE
 DESIGN AND
 DEVELOPMENT
                         TEST

                                    PROT...
CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins:           1




Start with:


     STRATE...
CASE STUDY

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




           ...
CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins:           1             2               3...
CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins:           1             2               3...
CASE STUDY

ITERATIVE DESIGN AND DEVELOPMENT PROCESS BREAKDOWN
Client check ins:           1             2               3...
CASE STUDY




INTERACTION   SKETCH   WIREFRAME   PROTOTYPE
DESIGN




                                               36
CASE STUDY




VISUAL       VISUAL     GRIDS AND
DESIGN       LANGUAGE   PROPORTIONS




                                 ...
38
SPEED
IS A DESIGN
DECISION
              39
TIPS




       RWD ISSUES

       What screen sizes should I design?

       Start at 320px?
       Then what?




      ...
TIPS




       RWD ISSUES

       How do I select breakpoints?

       Breakpoints should be device agnostic
       Let p...
CASE STUDY

KEEPING PAGES BALANCED: THE PROBLEM
Advisors can choose between 1 and 20 content modules




                 ...
CASE STUDY

KEEPING PAGES BALANCED: SOLUTIONS
Content priority       Two column layout, dynamic grid layout   One column, ...
TIPS




       RWD ISSUES
       Presenting responsive designs to clients
       On screen, with all layouts side by side...
CASE STUDY




 PROTOTYPE:     Cheap    Fast    Focus
 LOW FIDELITY


                        [DEMO]




                 ...
CASE STUDY




 PROTOTYPE:      Treatment
                 of media
                             Testing visual
          ...
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 th...
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   ...
DESIGNING IN THE BROWSER

Creating elements and styles in
HTML/CSS

“The most important part here is to use a tool
which d...
STOP.
COLLABORATE.
AND LISTEN.
               52
WHAT ARE OTHERS DOING?

                         53
MARK      1. Sketch
BOULTON   2. Prototype
          3. Design
          4. Iterate
          5. Talk




          Mark B...
STEPHEN   1. Content inventory
          2. Content reference wireframes
HAY       3. Design in text (structured content)
...
VILJAMI
SALMINEN




           Viljami Salminen, on responsive workflow, 28 May 2012
           http://viljamis.com/blog/...
HOW WOULD I APPROACH A NEW
RESPONSIVE PROJECT STARTING TODAY?



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




     USER
   RESEARCH




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




     USER          CONTENT
   RESEARCH      ...
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
(depending on project context)




     USER          CONTENT       DESIGN
   R...
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
                                             VISUAL
(depending on project conte...
MY RESPONSIVE PROCESS
FOR THE NEXT PROJECT
                                             VISUAL                TEST
(depend...
HTML STYLE
                                                                                   GUIDE

                     ...
RESPONSIVE RESOURCES

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

STARTED   http://futurefriend.ly/



      ...
RESPONSIVE   Stephan Hay’s Responsive Design Workflow
             http://www.slideshare.net/stephenhay/mobilism2012
PROCE...
RESPONSIVE   As RWD evolves, so will our process

RESOURCES    RESS: http://www.lukew.com/ff/entry.asp?1392
             R...
THANKS
@PKATTERA
UXRAVE.COM

             68
Nächste SlideShare
Wird geladen in …5
×

von

Design Process in the Responsive Age Slide 1 Design Process in the Responsive Age Slide 2 Design Process in the Responsive Age Slide 3 Design Process in the Responsive Age Slide 4 Design Process in the Responsive Age Slide 5 Design Process in the Responsive Age Slide 6 Design Process in the Responsive Age Slide 7 Design Process in the Responsive Age Slide 8 Design Process in the Responsive Age Slide 9 Design Process in the Responsive Age Slide 10 Design Process in the Responsive Age Slide 11 Design Process in the Responsive Age Slide 12 Design Process in the Responsive Age Slide 13 Design Process in the Responsive Age Slide 14 Design Process in the Responsive Age Slide 15 Design Process in the Responsive Age Slide 16 Design Process in the Responsive Age Slide 17 Design Process in the Responsive Age Slide 18 Design Process in the Responsive Age Slide 19 Design Process in the Responsive Age Slide 20 Design Process in the Responsive Age Slide 21 Design Process in the Responsive Age Slide 22 Design Process in the Responsive Age Slide 23 Design Process in the Responsive Age Slide 24 Design Process in the Responsive Age Slide 25 Design Process in the Responsive Age Slide 26 Design Process in the Responsive Age Slide 27 Design Process in the Responsive Age Slide 28 Design Process in the Responsive Age Slide 29 Design Process in the Responsive Age Slide 30 Design Process in the Responsive Age Slide 31 Design Process in the Responsive Age Slide 32 Design Process in the Responsive Age Slide 33 Design Process in the Responsive Age Slide 34 Design Process in the Responsive Age Slide 35 Design Process in the Responsive Age Slide 36 Design Process in the Responsive Age Slide 37 Design Process in the Responsive Age Slide 38 Design Process in the Responsive Age Slide 39 Design Process in the Responsive Age Slide 40 Design Process in the Responsive Age Slide 41 Design Process in the Responsive Age Slide 42 Design Process in the Responsive Age Slide 43 Design Process in the Responsive Age Slide 44 Design Process in the Responsive Age Slide 45 Design Process in the Responsive Age Slide 46 Design Process in the Responsive Age Slide 47 Design Process in the Responsive Age Slide 48 Design Process in the Responsive Age Slide 49 Design Process in the Responsive Age Slide 50 Design Process in the Responsive Age Slide 51 Design Process in the Responsive Age Slide 52 Design Process in the Responsive Age Slide 53 Design Process in the Responsive Age Slide 54 Design Process in the Responsive Age Slide 55 Design Process in the Responsive Age Slide 56 Design Process in the Responsive Age Slide 57 Design Process in the Responsive Age Slide 58 Design Process in the Responsive Age Slide 59 Design Process in the Responsive Age Slide 60 Design Process in the Responsive Age Slide 61 Design Process in the Responsive Age Slide 62 Design Process in the Responsive Age Slide 63 Design Process in the Responsive Age Slide 64 Design Process in the Responsive Age Slide 65 Design Process in the Responsive Age Slide 66 Design Process in the Responsive Age Slide 67 Design Process in the Responsive Age Slide 68
Nächste SlideShare
How To Find Clients
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

407 Gefällt mir

Teilen

Herunterladen, um offline zu lesen

CASE STUDY CONTENT INVENTORY AND Design Process in the Responsive Age

Herunterladen, um offline zu lesen

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

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen
  • SarahSawyer17

    Nov. 28, 2021
  • Nic_Kirmse

    Feb. 5, 2019
  • mvale

    Feb. 1, 2019
  • moctapka

    Oct. 29, 2018
  • STEVENHERE

    May. 13, 2018
  • rradermacher

    May. 11, 2018
  • MelissaLandry3

    Oct. 8, 2017
  • by1927

    Sep. 29, 2017
  • bharatpotdar

    Jul. 20, 2017
  • nagarajansivanadipatham

    Jul. 13, 2017
  • sakshiinfoway

    Jun. 27, 2017
  • NimrodDvir1

    Jun. 16, 2017
  • JittipolSantiyanont

    May. 31, 2017
  • korzzus

    May. 30, 2017
  • AlexanderMeinhardt1

    May. 27, 2017
  • letitiawang1

    Mar. 8, 2017
  • wearenois3

    Mar. 6, 2017
  • williammdavis

    Feb. 19, 2017
  • JosephOHara

    Feb. 16, 2017
  • PhilippUnruh1

    Feb. 14, 2017

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

Aufrufe

Aufrufe insgesamt

168.618

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

26.792

Befehle

Downloads

2.817

Geteilt

0

Kommentare

0

Likes

407

×