Embed Size (px)
Citation preview
DESIGN 2.0 UNE ÉVOLUTION
CONCEPTUELLE ET MÉTHODOLOGIQUE
OgilvyOne Interactive. Intervenant: Jean-Christophe Carius - Juillet 2007.
Tour d'horizon
jan. 1996 août 19991997>1999 jan. 2001
2003 fév. 2004 avril 2004 (web 2.0) déc. 2004
fév. 2005 mai 2005 aujourd'hui...
Une brève histoire du web2... la version Bêta permanente
exemple de site web de type audiovisuel
exemple de site web de type audiovisuel
exemple de site web de type audiovisuel
Distinguer le web informationnel et le web audiovisuel
Quelques exemples de créations web de type audiovisuel en opposition aux sites internet de type informationnel.
exemple de site web de type informationnel présentant de l'audiovisuel
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.
Les standards web au cœur du design internet
affichage avec les informations de présentation
affichage sans les informations de présentation
• Séparation du contenu et de la présentation
• Mise en œuvres des bonnes pratiques
• Accessibilité• Compatibilité• Évolutivité• Modularité
2007 > 2010Le web3.0 à l'horizon...
accroissement du nombre d'utilisateurs+ augmentation de la bande passante+ avènement de la couche sémantique= web 3.0
• web1: dial-up 50k en moyenne• web2: 1Mb en moyenne• web3: 10Mb en permanence
Flickr + géolocalisation
L'impact du web sur la société
Un niveau de granularité marketing inédit
Un nouveau "Design process"
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.”
Les trois dimensions d’un objet Web
En terme de design, un objet Internet se définit selon 3 grands axes interdépendants: le fond, la forme, la fonction.
Fond
Forme Fonction
Architecture de l’information
Réalisation informatiqueDesign interactif
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).
Designer interactif
Forme
Fond
FondForme
Fonction
Réalisateur informatique
3 types de profils “en T” correspondant aux 3 tâches entrant dans l’élaboration du design d’un objet Internet.
Architecte d’information
Fond
Forme
Fonction
Fonction
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.”
Réalisation informatiqueDesign interactif
Architecture d’information
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.
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
XHTML
CSS
Javascript
Fond
Forme Fonction
CSS Javascript
XHTML
XHTML
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.
CSS
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.
Javascript
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.
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.
Tendances de design
Un dialogue permanent et d'égal à égal entre forme et fonction qui permet d'élaborer des solutions innovantes et originales.
Le design fonctionnel"Form follows function"
Amazon Diamonds Search
Les "interfaces riches"La mise en scène formelle de la fonctionnalité
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 1
interface version 2 (cliquer sur "basic diamonds search")
interface version 3
Web Based ApplicationsUne nouvelle génération de services en ligne, simplifiés, collaboratifs et nomades
L'émergence d'un nouveau modèle de navigation et d'interface mélangeant les principes des applications classiques et la métaphore du "browsing" des pages internet.
Gestion d'images chez Flickr
Spreadsheets chez Google
Catalogue et panier chez Apparel
Design visuel: Donner plus avec moins
La perfection est atteinte non quand il ne reste rien à ajouter, mais quand il ne reste rien à enlever.- Antoine de Saint-Exupéry
Un design concentré, clair et simpleUne mise en avant du contenuUne pédagogie du fonctionnel
Interface explicite
Design essentiel
Esthétique web2 appliquée à un site web1
User-centric DesignDesigner l'évidence
L'objet web doit être considéré comme un objet de design industriel utilisable par le plus grand nombre.
Netvibes outil configurable
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.
Stylisme et Design interactif
Web Stylisme Les feuilles de style en cascade
CSS: le premier langage informatique grand public de design graphique et de mise en page écran de l'information.
CSS Zen Garden
CSS Awards
CSS Awards
"Web Design is 95% Typography"
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.
Subtraction.com
The New York Times
FilemagazineTypetester
Signalétique de navigationet esthétique de l'interactivité
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 de l'interactivité
3 états de bouton
des design patterns éprouvés
des interfaces originales découlant de leur nature fondamentale
Layout designBoîtes imbriquées et flux de boîtes
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.
emilychang.com
Harpers Magazine
Roger Black
Logique ouverte et modulaire de présentation de l'information
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.
charte graphique menu de navigation
description agencement de boîte
description agencement d'élément
Formalisation du design et des règles d'affichage dans une charte graphique
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
charte graphique Talents.fr
description styles texte
Design contextuelVariabilité des conditions de consultation
Les différents types de medias du web: • screen• print• aural• braille, embossed• projection• tty• tv• handheld
zoom mal-voyants
aperçu avant impression
design handheld
Perspectivesimmédiates
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
