DESIGN 2.0
 UNE ÉVOLUTION
CONCEPTUELLE ET
MÉTHODOLOGIQUE




   OgilvyOne Interactive. Intervenant: Jean-Christophe Carius...
Tour d'horizon
Une brève histoire du web2...
la version Bêta permanente
      jan. 1996      1997>1999        août 1999                  ...
Distinguer
le web informationnel
et le web audiovisuel
                                                                   ...
Distinguer
le web informationnel
et le web audiovisuel


Quelques exemples de créations web
de type informationnel en oppo...
Les standards web
au cœur du design internet


• Séparation du contenu
et de la présentation

• Mise en œuvres
des bonnes ...
2007 > 2010
Le web3.0 à l'horizon...


                                           Flickr + géolocalisation



• web1: dial...
Un nouveau
quot;Design processquot;
Le design internet:
         un design “orienté objet”.
 “Most people make the mistake of thinking design is what it looks...
En terme de design, un objet Internet se définit
selon 3 grands axes interdépendants:
le fond, la forme, la fonction.


   ...
Le design Web nécessite une démarche d’élaboration
pluri-disciplinaire et, par conséquent, des intervenants
aux profils “en...
3 types de profils “en T” correspondant aux
   3 tâches entrant dans l’élaboration du design
   d’un objet Internet.

     ...
Un processus de design pluri-disciplinaire et au-delà
du clivage traditionnel “conception/exécution”
Jonathan Ive, vice-pr...
Le design Internet est donc une démarche “intégrative”
de conception-réalisation, un processus de design
articulant le fon...
La réalité actuelle
 de l'objet web
Le modèle actuel de constitution
informatique d'une page Internet
Le réalité informatique d’une page Web dans ses trois
dimensions, fond, forme, fonction: 3 langages propres



  Forme    ...
Le fond existe dans sa réalité informatique comme un fichier
   XHTML constitué d’éléments informationnels, textes, liens,
...
Le forme existe dans sa réalité informatique comme un
      fichier CSS constitué de règles indiquant des valeurs aux
     ...
La fonction existe dans sa réalité informatique comme un fichier
       Javascript contenant le code des différentes foncti...
Au final, une page Web est donc, aujourd’hui, un ensemble d’éléments
informationnels structurés de façon arborescente en XH...
Tendances
de design
Le design fonctionnel
quot;Form follows functionquot;

                          Un dialogue permanent
                   ...
Amazon Diamonds Search



Les quot;interfaces richesquot;
La mise en scène formelle
de la fonctionnalité
                 ...
Web Based Applications
Une nouvelle génération de services
en ligne, simplifiés, collaboratifs et
nomades
                 ...
Design visuel:
Donner plus avec moins

                                       Interface explicite

La perfection est attei...
User-centric Design
Designer l'évidence

                                             Netvibes outil configurable


L'objet...
Stylisme et
Design interactif
Web Stylisme
Les feuilles de style en cascade


                                         CSS Zen Garden

CSS: le premier l...
quot;Web Design is 95% Typographyquot;



                                           Subtraction.com

L'importance de la d...
Signalétique de navigation
et esthétique de l'interactivité

                                         3 états de bouton


...
Layout design
Boîtes imbriquées et flux de boîtes


                                         emilychang.com


Le design du ...
Logique ouverte et modulaire
de présentation de l'information

                                          charte graphique ...
Formalisation du design et
des règles d'affichage dans
une charte graphique

                                        charte...
Design contextuel
Variabilité des conditions
de consultation
                                         zoom mal-voyants
Les...
Perspectives
immédiates
Les marques et
les nouveaux usages



Dans le sillage des environnements 2.0
des acteurs majeurs du web, les marques
visen...
Upcoming SlideShare
Loading in...5
×

Design Interactif2.0

2,184

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,184
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
83
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Design Interactif2.0

  1. 1. DESIGN 2.0 UNE ÉVOLUTION CONCEPTUELLE ET MÉTHODOLOGIQUE OgilvyOne Interactive. Intervenant: Jean-Christophe Carius - Juillet 2007.
  2. 2. Tour d'horizon
  3. 3. Une brève histoire du web2... la version Bêta permanente jan. 1996 1997>1999 août 1999 jan. 2001 2003 fév. 2004 avril 2004 (web 2.0) déc. 2004 fév. 2005 mai 2005 aujourd'hui...
  4. 4. Distinguer le web informationnel et le web audiovisuel exemple de site web de type audiovisuel Quelques exemples de créations web de type audiovisuel en opposition aux sites internet de type informationnel. exemple de site web de type audiovisuel exemple de site web de type informationnel présentant de l'audiovisuel exemple de site web de type audiovisuel
  5. 5. Distinguer le web informationnel et le web audiovisuel Quelques exemples de créations web de type informationnel en opposition aux sites internet de type audiovisuel.
  6. 6. Les standards web au cœur du design internet • Séparation du contenu et de la présentation • Mise en œuvres des bonnes pratiques affichage avec les informations de présentation • Accessibilité • Compatibilité • Évolutivité • Modularité affichage sans les informations de présentation
  7. 7. 2007 > 2010 Le web3.0 à l'horizon... Flickr + géolocalisation • web1: dial-up 50k en moyenne • web2: 1Mb en moyenne • web3: 10Mb en permanence L'impact du web sur la société accroissement du nombre d'utilisateurs + augmentation de la bande passante + avènement de la couche sémantique = web 3.0 Un niveau de granularité marketing inédit
  8. 8. Un nouveau quot;Design processquot;
  9. 9. Le design internet: un design “orienté objet”. “Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” - Steve Jobs (“the Times”, 2003) “La plupart des gens font l’erreur de penser que le design c’est l’apparence. Ce n’est pas comme ça que nous concevons le design. Ce n’est pas simplement l’apparence et l’impression que cela fait. Le design, c’est comment ça marche.”
  10. 10. En terme de design, un objet Internet se définit selon 3 grands axes interdépendants: le fond, la forme, la fonction. Design interactif Réalisation informatique Fonction Forme Fond Architecture de l’information Les trois dimensions d’un objet Web
  11. 11. Le design Web nécessite une démarche d’élaboration pluri-disciplinaire et, par conséquent, des intervenants aux profils “en forme de T” (T-shaped people). T-shaped (TEE-shaypt) adj. Posséder une compétence ou une connaissance qui soit à la fois en profondeur et en largeur. Être “T-shaped” (en forme de T) signifie avoir un noyau de compétences et une connaissance approfondie dans un domaine (la tige du T), mais également un haut niveau de curiosité, de sensibilité et d’aptitudes permettant de se diversifier rapidement et d’atteindre une bonne compréhension générale d’autres domaines (la barre transversale du T).
  12. 12. 3 types de profils “en T” correspondant aux 3 tâches entrant dans l’élaboration du design d’un objet Internet. Forme Fonction Fond Architecte d’information Fond Fonction Forme Fond Forme Fonction Designer interactif Réalisateur informatique
  13. 13. Un processus de design pluri-disciplinaire et au-delà du clivage traditionnel “conception/exécution” Jonathan Ive, vice-président du design industriel d’Apple a confié au New-York Times que l’élément clé de l’Ipod n’était pas des éclairs de génie soudains, mais le processus de design. Son groupe de design a collaboré de façon étroite avec des fabricants et des ingénieurs, réglant et raffinant sans cesse le design. “Ce n’est pas sériel,” a t-il dit au Times. “Ce n’est pas une personne passant quelque chose à la personne suivante”. (...) “Les designers d’Apple passent 10 pour cent de leur temps à faire du design industriel traditionnel: arriver avec des idées, dessiner, faire des maquettes, faire du brainstorming,” dit-il. “Ils passent 90 pour cent de leur temps à travailler au niveau de la fabrication pour trouver comment implémenter leurs idées.” Architecture d’information Design interactif Réalisation informatique
  14. 14. Le design Internet est donc une démarche “intégrative” de conception-réalisation, un processus de design articulant le fond, la forme et la fonction dans un rapport étroit à la réalité informatique finale de l’objet. C’est une approche à triple vue dont chaque axe est développé en profondeur mais également en largeur, dans une connexion avec les deux autres.
  15. 15. La réalité actuelle de l'objet web
  16. 16. Le modèle actuel de constitution informatique d'une page Internet
  17. 17. Le réalité informatique d’une page Web dans ses trois dimensions, fond, forme, fonction: 3 langages propres Forme Fonction CSS Javascript XHTML Fond CSS XHTML Javascript
  18. 18. Le fond existe dans sa réalité informatique comme un fichier XHTML constitué d’éléments informationnels, textes, liens, URL d’images, de sons, de vidéos, organisés en arborescence et qualifiés par des balises sémantiques. XHTML
  19. 19. Le forme existe dans sa réalité informatique comme un fichier CSS constitué de règles indiquant des valeurs aux propriétés d’affichage et s’appliquant aux différents éléments de la page XHTML. CSS
  20. 20. La fonction existe dans sa réalité informatique comme un fichier Javascript contenant le code des différentes fonctions que l’on peut activer via les événements de la page (clic, passage de la souris, chargement...) et qui vont, dans la plupart des cas, modifier la forme et le fond des éléments de la page elle-même. Javascript
  21. 21. Au final, une page Web est donc, aujourd’hui, un ensemble d’éléments informationnels structurés de façon arborescente en XHTML, dont la présentation est déterminée par des règles CSS, et qui peuvent être modifiés à la volée par le biais de fonctions Javascript.
  22. 22. Tendances de design
  23. 23. Le design fonctionnel quot;Form follows functionquot; Un dialogue permanent et d'égal à égal entre forme et fonction qui permet d'élaborer des solutions innovantes et originales.
  24. 24. Amazon Diamonds Search Les quot;interfaces richesquot; La mise en scène formelle de la fonctionnalité interface version 1 Le rapport de conception forme/ fonction vise à offrir à l'utilisateur un outil de consultation qui soit le plus attirant possible et lui permette de comprendre et de s'approprier facilement l'interface. interface version 2 (cliquer sur quot;basic diamonds searchquot;) interface version 3
  25. 25. Web Based Applications Une nouvelle génération de services en ligne, simplifiés, collaboratifs et nomades Gestion d'images chez Flickr L'émergence d'un nouveau modèle de navigation et d'interface mélangeant les principes des applications classiques et la métaphore du quot;browsingquot; des pages internet. Spreadsheets chez Google Catalogue et panier chez Apparel
  26. 26. Design visuel: Donner plus avec moins Interface explicite La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever. - Antoine de Saint-Exupéry Design essentiel Un design concentré, clair et simple Une mise en avant du contenu Une pédagogie du fonctionnel Esthétique web2 appliquée à un site web1
  27. 27. User-centric Design Designer l'évidence Netvibes outil configurable L'objet web doit être considéré comme un objet de design industriel utilisable par le plus grand nombre. Interface de recherche dans Google maps Il s'agit de saisir et explorer les usages en mettant en avant les évidences de l'interaction homme-machine.
  28. 28. Stylisme et Design interactif
  29. 29. Web Stylisme Les feuilles de style en cascade CSS Zen Garden CSS: le premier langage informatique grand public de design graphique et de mise en page écran de l'information. CSS Awards CSS Awards
  30. 30. quot;Web Design is 95% Typographyquot; Subtraction.com L'importance de la dimension textuelle dans les sites informationnels donne à la typographie une importance primordiale dans la hiérarchisation des contenus et la clarté de la signalétique de navigation. The New York Times Typetester Filemagazine
  31. 31. Signalétique de navigation et esthétique de l'interactivité 3 états de bouton Le design d'interface possède une dimension signalétique répondant à des codes d'usages désormais établis et constituent en eux-mêmes les éléments fondamentaux de l'esthétique des design patterns éprouvés de l'interactivité des interfaces originales découlant de leur nature fondamentale
  32. 32. Layout design Boîtes imbriquées et flux de boîtes emilychang.com Le design du layout d'une page web consiste à composer hiérarchiquement et harmonieusement le jeu de boîtes de contenu qui se suivent ou s'imbriquent les unes dans les autres. Harpers Magazine Roger Black
  33. 33. Logique ouverte et modulaire de présentation de l'information charte graphique menu de navigation L'évolution permanente du contenu d'un site oblige à élaborer une logique de présentation basée sur des règles pré-établies d'affichage de gabarits et de composants. description agencement de boîte description agencement d'élément
  34. 34. Formalisation du design et des règles d'affichage dans une charte graphique charte graphique Talents.fr En formalisant le design dans un document, on valide avec précision la cohérence générale de la présentation et on oriente la description de l'interface vers sa nature finale: des règles de style CSS description styles texte
  35. 35. Design contextuel Variabilité des conditions de consultation zoom mal-voyants Les différents types de medias du web: • screen • print • aural • braille, embossed • projection • tty • tv • handheld aperçu avant impression design handheld
  36. 36. Perspectives immédiates
  37. 37. Les marques et les nouveaux usages Dans le sillage des environnements 2.0 des acteurs majeurs du web, les marques visent désormais à mettre en place sur la durée, des espaces de communication relationnelle au quotidien avec leurs consommateurs/utilisateurs. netvibes Univers
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×