際際滷

際際滷Share a Scribd company logo
ink from the center. Design for the edge.




        Andrei Michael Herasimchuk

            @trenti    #foi11
What is art?
e personal expression of ideas
What is graphic design?
The communication from a designer to their audience
Logos


                  Speech
Speaker                           Audience


          Ethos              Pathos
Useful


            Object



Desirable               Usable
Useful/Logos


                  Object/Speech
Designer                            Customer


Desirable/Ethos              Usable/Pathos
What is interface design?
e conversation between a person and a product
Information


                Interface
Product                           User


      Graphic               Interaction
Content         Logos / Useful / Information




                                                                  Speech / Object

Speaker / Designer           Product                  Interface                               User               Audience




            Ethos / Desirable / Graphic   Aesthetic                     Behavior           Pathos / Usable / Interaction
How can we use this?
Currently, one might design a desktop application
en repurpose their work to create a web application version of it
Or one might create a rich internet application
en nd a way to cram as much of that existing design onto a cell phone
Or one might design only a mobile version
While ignoring all other platforms
Often wherever one starts the design process becomes
       the core de nition of the product itself
And in so doing, one designs themselves into a corner
How do you break that cycle?
4
2+2          Four

          4
Quattro        IV
e interface of any software product is
     an expression of its code
Content         Logos / Useful / Information




                                                                  Speech / Object

Speaker / Designer           Product                  Interface                               User               Audience




            Ethos / Desirable / Graphic   Aesthetic                     Behavior           Pathos / Usable / Interaction
Content




Aesthetic             Behavior
Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011
Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011
Content
<sta                    Mo
              ed_at> 5833346</id>                                            e!              SRg
   < creat            391                                       Grea t venu owal.la/c/4s
    <id>8   274256                                 erac tion.        http:/
                                                                             /g                         ce>
                                    rs o    f Int         ion  2011                         </a> </sour
    <text>            f F  rontie              In teract                         ">G owalla
          D ay 1 o Frontiers Of                                      ="no follow
          #foi1   1 @                                   .com /" rel
                                           //g  owalla
     </  text>            ref=   "h t t p : t e d >
                e><a h se</trunca
      <sourc ed>fal                              ed>
                at
      <trunc ed>false</f               avorit
                                             />
       <f avorit to_status_id
                     y_
       <i  n_repl to_user_id/> />
                   ly_                      ame
        < in_rep _to_screen_n et_count>
                  ply                      twe
        <in_re _count>1</re eeted>                                                  int>
         <ret  weet             se</   retw                              geo rss:po
                   et  ed>fal                               3111 1827</
         <retwe                                4306  21 11.
          <ge  o>              int  >43.76                                           int>
               < geo  rss:po                                              geo rss:po
                                                              3111 1827</
           </geo> ates>                           306 21 11.
           <co  ordin            int>   43.764
                <geo   rss:po
                                s>
                      dinate
            </coor                                    id>
                       >
             <place 21b6f591c4b              3ce8</                        me>
                  <id>   5              e</na   me>          ce</f ull_na                      json</
                                                                                                      url>
                                  enc                    ren                              ce8.
                  <nam   e>Flor lorence, Flo pe>                               6f5 91c4b3
                            na  me>F                a ce_ty           i d/521b
                   <full_ ype>city</pl r.com/1/geo/
                             _t                     te
                   <place p://api.twit
                             tt
                    <url>h tes/>
                              bu                                                     984
                    <attri g_box>                                         88  11.339 4
                     <b oundin :polygon>                      4 43 .72595 11.149650
                          <ge  orss               11. 149650 3.8354579
                               43.7   259588 1.339984 4
                                                  1
                                43.8  354579 n>
                                               ygo
                             /geor   ss:pol                          ry>
Behavior
Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011
Aesthetic
Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011
In order to design digital products across
 multiple devices successfully, one must
      de ne these core pieces rst

  Behavior
                                  Content
  Aesthetic
Behavior
            Content
Aesthetic




                 Desktop
Mobile

  Behavior
                        Content
  Aesthetic




                             Desktop


              Browser
Internet Appliance


Mobile                                       in Client

  Behavior
                                   Content
  Aesthetic




                                        Desktop


                   Browser
Internet Appliance


Mobile                                       in Client

  Behavior
                                   Content
  Aesthetic




Kiosk                                   Desktop


                   Browser
Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011
Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011
ere will be more devices  not fewer  in the
near future, and they will have larger surface areas
 while requiring more contexts to design within
e problems we will solve with product design will
become richer and more complex as our customers use
 multiple devices for the same products and services
e solutions of the future will require us to
master how to design with this approach
ink from the center. Design for the edge.



               Grazie
                 贈

More Related Content

Design from the center, Andrei Herasimchuk @ Frontiers of Interaction 2011

  • 1. ink from the center. Design for the edge. Andrei Michael Herasimchuk @trenti #foi11
  • 2. What is art? e personal expression of ideas
  • 3. What is graphic design? The communication from a designer to their audience
  • 4. Logos Speech Speaker Audience Ethos Pathos
  • 5. Useful Object Desirable Usable
  • 6. Useful/Logos Object/Speech Designer Customer Desirable/Ethos Usable/Pathos
  • 7. What is interface design? e conversation between a person and a product
  • 8. Information Interface Product User Graphic Interaction
  • 9. Content Logos / Useful / Information Speech / Object Speaker / Designer Product Interface User Audience Ethos / Desirable / Graphic Aesthetic Behavior Pathos / Usable / Interaction
  • 10. How can we use this?
  • 11. Currently, one might design a desktop application
  • 12. en repurpose their work to create a web application version of it
  • 13. Or one might create a rich internet application
  • 14. en nd a way to cram as much of that existing design onto a cell phone
  • 15. Or one might design only a mobile version
  • 16. While ignoring all other platforms
  • 17. Often wherever one starts the design process becomes the core de nition of the product itself
  • 18. And in so doing, one designs themselves into a corner
  • 19. How do you break that cycle?
  • 20. 4
  • 21. 2+2 Four 4 Quattro IV
  • 22. e interface of any software product is an expression of its code
  • 23. Content Logos / Useful / Information Speech / Object Speaker / Designer Product Interface User Audience Ethos / Desirable / Graphic Aesthetic Behavior Pathos / Usable / Interaction
  • 24. Content Aesthetic Behavior
  • 28. <sta Mo ed_at> 5833346</id> e! SRg < creat 391 Grea t venu owal.la/c/4s <id>8 274256 erac tion. http:/ /g ce> rs o f Int ion 2011 </a> </sour <text> f F rontie In teract ">G owalla D ay 1 o Frontiers Of ="no follow #foi1 1 @ .com /" rel //g owalla </ text> ref= "h t t p : t e d > e><a h se</trunca <sourc ed>fal ed> at <trunc ed>false</f avorit /> <f avorit to_status_id y_ <i n_repl to_user_id/> /> ly_ ame < in_rep _to_screen_n et_count> ply twe <in_re _count>1</re eeted> int> <ret weet se</ retw geo rss:po et ed>fal 3111 1827</ <retwe 4306 21 11. <ge o> int >43.76 int> < geo rss:po geo rss:po 3111 1827</ </geo> ates> 306 21 11. <co ordin int> 43.764 <geo rss:po s> dinate </coor id> > <place 21b6f591c4b 3ce8</ me> <id> 5 e</na me> ce</f ull_na json</ url> enc ren ce8. <nam e>Flor lorence, Flo pe> 6f5 91c4b3 na me>F a ce_ty i d/521b <full_ ype>city</pl r.com/1/geo/ _t te <place p://api.twit tt <url>h tes/> bu 984 <attri g_box> 88 11.339 4 <b oundin :polygon> 4 43 .72595 11.149650 <ge orss 11. 149650 3.8354579 43.7 259588 1.339984 4 1 43.8 354579 n> ygo /geor ss:pol ry>
  • 33. In order to design digital products across multiple devices successfully, one must de ne these core pieces rst Behavior Content Aesthetic
  • 34. Behavior Content Aesthetic Desktop
  • 35. Mobile Behavior Content Aesthetic Desktop Browser
  • 36. Internet Appliance Mobile in Client Behavior Content Aesthetic Desktop Browser
  • 37. Internet Appliance Mobile in Client Behavior Content Aesthetic Kiosk Desktop Browser
  • 40. ere will be more devices not fewer in the near future, and they will have larger surface areas while requiring more contexts to design within
  • 41. e problems we will solve with product design will become richer and more complex as our customers use multiple devices for the same products and services
  • 42. e solutions of the future will require us to master how to design with this approach
  • 43. ink from the center. Design for the edge. Grazie 贈