Samedi

Webdesign Passé, Présent et… Présent

Au mois de Novembre dernier, j’étais invité au Québec lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda. Ce fut l’occasion de créer un échange autour de ce qu’est le Webdesign. Pour ceux qui n’ont pas pu assister à la conférence, vous en trouverez une transcription ci-dessous.
Sur demande le document Powerpoint peut aussi être disponible au téléchargement.

WEBDESIGN, PASSE, PRESENT ET… PRESENT

| View

Bonjour,

Je m’appelle Benoit Duverneuil. Je suis ce qu’on appelle dans le jargon Internet un évangéliste Web et consultant. J’interviens donc régulièrement auprès de professionnels, d’entreprises et de grandes marques, d’Universités et de centres de formations, ainsi qu’auprès de collectivités pour expliquer les enjeux, les usages, les technologies, et les services utilisant l’Internet et les nouvelles technologies. J’accompagne donc différents types d’organisations dans leur stratégie Internet. J’interviens plus particulièrement dans le domaine des usages Web et Multimédia depuis 1998. Je suis aussi passionné par tout ce qui touche à la création numérique quelle qu’elle soit. J’ai notamment, depuis 1997, largement prêché en faveur du WebDesign, du Net Art et du Multimédia.

Cette présentation est la version longue issue d’une conférence, en Novembre 2007, que j’ai donnée à l’occasion du 3ème Festival de Webdesign de Rouyn-Noranda. Si vous vous posez la question, Rouyn est une ville d’Abitibi-Temiscamingue, située au Québec. Comme de nombreux territoires souffrant d’un faible nombre d’infrastructures de transport, Rouyn-Noranda a parié sur les Nouvelles Technologies pour accélérer son développement économique. Ce pari se matérialise par un certain nombre d’initiatives et d’organisations comme le département multimédia de l’UQAT, l’Université du Québec en Abitibi-Temiscamingue qui accueillait ce troisième Festival International de Webdesign.

Cette présentation est diffusée sous une licence Creative Commons qui vous autorise à la télécharger, à la modifier à votre guise et à la re-diffuser aux tiers de votre choix.

La présentation est titrée Webdesign, Passé, Présent et Présent. On m’a effectivement demandé de faire une présentation générale de ce qu’est le Webdesign. J’ai choisi de traiter ce sujet sous un angle chronologique. Cependant, comme vous le verrez plus tard dans la présentation, je m’attarde essentiellement sur les 10 dernières années et cela pour plusieurs raisons.

D’abord parce que les 10 dernières années, à travers la création du Web, ont été un formidable terrain d’expérimentations tous azimuts et qu’il y a déjà énormément de choses à dire sans se projeter dans le futur.
Ensuite, comme beaucoup de technologies, d’usages innovants, voir même de pratiques artistiques, il est commun de voir qu’il s’écoule souvent plusieurs années entre la découverte, les premières expérimentations et la reconnaissance, la vulgarisation et l’appropriation. On est donc face à des cycles récurrents pendant lesquels plusieurs années peuvent s’écouler. Sur une courte histoire comme celle de l’Internet et du Webdesign, le phénomène prend encore plus d’importance.

Enfin, en tant qu’entrepreneur, de consultant et passionné par les nouvelles technologies, on me demande très souvent quel est mon avis sur les tendances à venir, sur les usages et technologies qui feront la une demain. Pour être très honnête, je considère que ce genre de prédictions sont plutôt risquées et inutiles. Risquées car l’évolution de l’Internet et telle qu’il est presque impossible de dire de quoi demain sera fait. Si c’était le cas, nous ne serions pas en train de nous interroger sur les définitions de l’existant, nous serions plutôt en train d’investir ou de créer des organisations pour anticiper un futur retour sur investissement. Inutile car l’histoire récente des nouvelles technologies, son cycle extrêmement court de transformation et de développement rendent le présent et le passé bien plus intéressant à explorer. Lors d’un évènement international consacré au Webdesign, un journaliste a posé la fameuse question à Joshua Davis, Webdesigner et artiste reconnu de la petite planète du Web créatif. Il a répondu que le futur ne l’intéressai absolument pas, parce qu’il y a tant de champs des possibles inexplorés aujourd’hui avec les technologies et services Web et multimédia à notre disposition. Je me range totalement du même avis.

Qu’est-ce qu’un Webdesigner?
Difficile encore aujourd’hui de répondre à cela. Plus de questions que de réponses.
D’ailleurs dès que l’on touche à question du design et de sa définition, tout se complique. Ce n’est pas une difficulté spécifique au Webdesign.

In a room full of top software designers, if any two of them agree, that’s a majority. (Bill Curtis)

Webdesigners ?
La définition est d’autant plus compliquée que les contours du Webdesign restent très flous, que les métiers et les techniques qui sont censés s’y rapporter sont en permanente évolution. Par exemple, aujourd’hui, des architectes de l’nformation, des Flasheurs, ou encore des directeurs artistiques vont se considérer et s’auto-proclamer Webdesigners. Pour autant, cela est sujet à débat puisque les uns ne considèrent pas forcément les autres en tant que tels. De plus, on observe un certain phénomène d’acculturation. Par exemple, les webmasters d’hier se font parfois aujourd’hui appeler Webdesigners ou Directeurs Artistiques Interactifs car comme nous sommes face à un marché où l’innovation et la compétition sont des éléments très importants, où les cycles de renouvellement sont très forts, on essaye de se donner un titre plus en phase avec les modes et les tendances.
Enfin, il y a une typologie de professionnels qui se sont approprier le titre de Webdesigners mais qui ne sont ni capables d’en définir les rôles et responsabilités, ni d’en préciser les critères de différenciation. Ils font de la création Web et sont donc Webdesigners.
Tout cela ne facilite donc pas les tentatives de définition du Webdesign et de ses métiers.

Wikipédia France
Etant moi-même bien en peine de pouvoir donner du sens à ces pratiques que je pense pourtant connaître et côtoyer au quotidien depuis déjà quelques années, je me suis dit que la meilleure chose à faire était de comparer les différentes définitions du Webdesign. Par exemple, je me suis attardé sur Wikipédia puisque via l’écriture collaborative, on pouvait espérer y trouver une définition qui propose une certaine représentativité. Et pourtant les résultats furent très surprenants. D’abord, la définition française introduit le Webdesign comme l’une des étapes de la conception d’un site Web. Pire, le Webdesign est réduit à une forme visuelle qu’on rajoute à un site Web. On est clairement face à une définition qui s’inspire du design print et pas de l’expérience et de l’environnement si particulier dans lequel s’inscrit le Webdesign. En Anglais, la définition est toute autre, mais n’en est pas plus claire pour autant. D’abord, on nous parle de process de création et d’exécution pour ensuite glisser vers les contenus et les langages d’écriture pour le Web.
Cela n’est ni évident, ni satisfaisant. C’est également troublant puisque non-seulement c’est un nouvel exemple de la faiblesse d’un outil collaboratif comme Wikipédia mais surtout on nous fournit des explications autant farfelues que différentes du Webdesign.

Une preuve supplémentaire avec les définitions du Webdesign via les pages non-francophones de Wikipédia.
Par exemple, en Espagne, on nous explique justement que le Webdesign n’est pas un modèle de conception, mais au contraire que le Webdesign est beaucoup plus riche puisqu’il prend en compte de très nombreux facteurs comme la navigation, l’interactivité…

En Allemagne, l’approche est différente puisqu’elle se concentre d’abord sur de la conception et du développement. Elle se focalise également sur les utilisateurs. Deuxième élément intéressant, il est question de conception d’interfaces. Enfin, on en fait rapidement une histoire de langages informatiques avec HTML et XHTML mais en rajoutant toutefois CSS et les fameuses feuilles de style qui est sont très utilisés par les Webdesigners aujourd’hui.

En Italie, on a une vision à la fois pragmatique et mercantile de la chose. D’abord, il s’agit simplement du design du Web, et ensuite du business de la création de sites Web.

Au Portugal, la définition est un peu plus intéressante. C’est une des rares qui présente le Webdesign comme une extension du design traditionnel. On fait enfin le lien entre design pour le Web et design au sens connu du terme. La définition réduit par contre le Webdesign à la création de sites et de brochures électroniques. Enfin, et cela rejoint ce qu’on disait au début, c’est-à-dire la multiplication des métiers et des compétences qui peuvent se ranger dans le large tiroir du Webdesign. On nous parle donc de multidisciplinarité.

Enfin, la plus surprenante définition est celle de Wikipédia Russie puisque le Webdesign s’arrête à la réalisation de sites Web et à la configuration de serveur.

Si toutes ces définitions ajoutaient les unes aux autres confirment qu’il est aujourd’hui bien difficile et audacieux de vouloir donner une définition du Webdesign, on peut approximativement identifier les multiples éléments qui composent son environnement. Il est donc question de programmation, de conception, d’interfaces, de contenus multimédia, d’expérience utilisateur… etc.

Pour tenter d’aller plus loin dans la définition du Webdesign, je vous propose de garder ces éléments à l’esprit, et de vous embarquer avec moi dans un petit voyage dans le passé. Un voyage qui n’est autre qu’une expérience personnelle du Webdesign. Vous avez donc le droit de ne pas être d’accord avec mes observations, notamment parce que vous pouvez avoir une expérience du design Web totalement différente. Ce que je mets en avant également dans ce récit, ce sont toutes ces technologies, usages et services, inventés il y a déjà quelques années et qui ne deviennent réalité qu’aujourd’hui ou qui le seront peut-être demain. Tout n’est finalement qu’une histoire de cycles et une fois encore, il est intéressant d’observer combien le futur est déjà présent dans notre actuel espace-temps ou même dans notre passé. C’est donc une sorte de retour vers le futur que je vous propose.

1963 - IVAN SUTHERLAND
SketchPad, développé par Ivan Sutherland au début des années 60 et publié dans sa thèse de doctorat en 1963, est considéré comme la première interface graphique. Développé au MIT Lincoln Laboratory, c’est le premier système à utiliser un écran cathodique et un crayon optique pour permettre l’édition graphique de dessins techniques. Bien plus tard, en 1983, Ben Shneiderman appellera ce type d’interactions avec des objets représentés à l’écran “manipulations directes“, par contraste avec l’utilisation systématique, jusqu’au début des années 80, de langages de commandes obligeant à mémoriser les noms des commandes et objets.
De nombreux concepts fondamentaux des interfaces graphiques ont pour origine SketchPad: Désignation directe des objets à l’écran, retour d’information immédiat sous forme de lignes élastiques, placement des segments d’une figure par contraintes (parallèle, angle droit…), zoom avant et arrière sur le dessin avec un facteur de 2000, etc. Même au niveau de la mise en œuvre, les concepts sont étonnamment modernes: représentation des objets graphiques en mémoire, résolution de contraintes, système de rendu graphique.
Sutherland développe SketchPad sur le TX-2, l’un des rares ordinateurs de l’époque utilisable en ligne: Jusqu’à la fin des années 70, la grande majorité des ordinateurs sont utilisés de façon non interactive, en traitement par lots (”batch“).
Pour moi, c’est une date importante car c’est vraiment à partir de là que le graphique design sur écran connecté commence à se développer. Bien-sûr, il n’est pas encore question de Webdesign mais c’est un évènement précurseur de ce qui se développera quelques années plus tard.

1973 - XEROX ALTO ET SUPERPAINT
Mars 1973. Le premier prototype de la station de travail Xerox Alto démarre pour la première fois. La station de travail conçue au XEROX PARC utilise le langage orienté objet SmallTalk, une interface graphique, une souris et peut être mise en réseau via Ethernet. Bien qu’on le cite comme étant le premier ordinateur personnel, il y a d’autres machines qui sont aussi candidates au titre, et le Xerox Alto fut un outil de recherche de Xerox, pas un produit commercial.
Le Xerox-Alto contient le programme Superpaint qui est à la fois un logiciel de dessin en couleur et aussi le premier logiciel d’effets vidéo numériques !
Là encore, c’est un ancêtre du Webdesign moderne, les fondamentaux, les outils et le concept existent déjà.

Photoshop n’est pas, loin s’en faut, le plus ancien logiciel d’imagerie numérique. Auparavant il y eut, entre autres, SuperPaint qui, comme son nom l’indique, permettait la création d’images complexes, associant, comme le fera Photoshop, des éléments en mode point (pixels) et d’autres en mode courbe, c’est-à-dire, en jargon d’images 3D, des splines. Il est amusant de voir que finalement l’interface de logiciels comme Photoshop qu’on utilise beaucoup aujourd’hui en Webdesign est très proche des premières versions de Superpaint comme ici avec cette capture d’écran sur un Macintosh.

1973 – MURIEL COOPER
Muriel Cooper est sans nul doute l’une des personnalités les plus importantes et les plus influentes de l’histoire du design et du design interactif. A la fois, enseignante-chercheuse et designer, son travaille influença le design interactif et le design d’information moderne.
Elle est aussi l’une des co-fondatrice du MIT Media Lab où elle enseigna le design média interactif en qualité de directrice du Visible Language Workshop. Je ne saurais que trop peu vous conseiller ses écrits, ils sont fondamentaux dans l’histoire de la création Web et numérique.

1982 - MINITEL
Entre 1970 et 1978 la France met au point le protocole de communication du minitel qui anticipe dans les années 80 sur le réseau Web. C’est aussi la naissance du modèle économique Kiosque qui marquera durablement son empreinte sur les modèles économiques de services en ligne. Le Minitel, ce fut jusqu’à 6 millions de terminaux et 20.000 services actifs en 1990.
Malheureusement, le minitel restera quasi-exclusivement franco-français et disparaitra avec l’avènement de l’Internet.

Basé sur l’échange de données analogiques via le téléphone, celui-ci n’autorise aucune nuance pour l’affichage des images. 120 caractères par seconde et 960 cases dont chacune ne peut contenir qu’un seul caractère, une seule « couleur » ou plutôt nuance de gris, et un seul fond.
Nous sommes loin du PostScript et du WYSIWYG qui va déferler à la fin des années 80. L’expression télématique va donner lieu à un style graphique minimaliste qui n’est pas sans rappeler l’expression des jeux vidéos de l’époque (Pong, Atari etc.) mais aussi bien la typographie russe des années 20. Le signe bitmap vient de naître et nous rappelle une fois de plus que bien souvent la technologie est à l’origine des inventions du design graphique. De nombreux graphistes et typographes vont trouver là un mode d’expression des plus intéressants…

1988
Introduit par Bell Canada en 1988, Alextel, contrairement à l’expérience française du Minitel, n’a pas connu le succès escompté: seulement 20000 appareils furent distribués dans la région de Montréal avant que la compagnie ne déclare forfait. Néanmoins, ce terminal offrait avant l’heure un intéressant aperçu de quelques-unes des possibilités qui assureront, quelques années plus tard (vers 1994), le succès phénoménal de l’Internet: forums de discussion (bbs), clavardage (chat)…

80’s - Compuserve
Compuserve est un prestataire fondé en 1976 qui utilise son propre réseau. Il était au départ incompatible avec le protocole TCP / IP. En 1979, CompuServe est devenue la première entreprise à proposer le courrier électronique et le support technique pour les utilisateurs de PC. La société a battu de nouveaux records en 1980 en devenant le premier service en ligne à proposer le chat en temps réel grâce à son logiciel CB Simulator. Il n’était pas inhabituel au début des années 80 de devoir débourser 30$ par heure pour se connecter à CompuServe. En conséquence, la société était surnommée CompuSpend (spend signifie dépenser) ou Compu$erve. Au milieu des années 80, CompuServe était le service en ligne le plus important. Des comptes pouvaient être achetés dans la plupart des magasins informatiques américains (une boîte avec un guide d’instruction et un compte d’essai) ; la notoriété de ce service était très importante. Au début des années 90, CompuServe compte des centaines de milliers d’utilisateurs qui visitent ses milliers de forums modérés, ancêtres de Usenet, puis des forums de discussions d’aujourd’hui. Parmi ces forums, certains dédiés au support client de sociétés de matériel ou de logiciels informatiques. En 1992, CompuServe héberge le premier dispositif de courrier électronique WYSIWYG connu et les posts de forums. Des polices d’écritures, des couleurs et des émoticônes étaient codés sur du texte 7 bits basé sur les messages via les logiciels de navigation de CompuServe NavCIS, utilisables avec les systèmes DOS et le premier Windows 3.1. Une petite révolution dans le monde du design Web.

1984 – MACINTOSH
Pour la plupart des MacFans, le Macintosh est né en 1984. Pour d’autres, il a en fait était créé en 1979 par Jef Raskin.
Courant 1979, un peu plus d’un an après son arrivée chez Apple, il se voit confier le projet “Annie“, visant à créer une machine bon-marché destinée à concurrencer les consoles de jeu. A la même époque, le désormais célébrissime et incontournable Steve Jobs et son équipe travaillent sur le Lisa, un autre projet plutôt orienté sur le marché des entreprises.

Raskin préfère se tourner vers le grand public sans toutefois négliger les capacités techniques de la machine avec 64 ko de mémoire vive, un port pour le modem et un pour l’imprimante, un lecteur de disquettes 200 ko, les langages Basic et Forth en mémoire morte… Ce qui à l’époque est une véritable petite machine de guerre. Et surtout, Raskin implémente des logiciels très simples à utiliser!
L’idée du projet Macintosh, dont le nom officiel aurait bien pu être Apple V, n’est pas franchement du goût de Steve Jobs. Il dénigre le Macintosh à chaque réunion et devient l’un des principaux opposants de Raskin… jusqu’au moment où il découvre le vrai potentiel de la machine et change complètement d’avis. Il finit donc même par en revendiquer la paternité !
Pour créer les premiers prototypes de Macintosh, Jef Raskin fait appel à Bill Atkinson de l’équipe Lisa. Peu de temps après, Steve Jobs rejoint l’équipe Macintosh après son éviction de la tête du projet Lisa. Peu à peu, Steve Jobs récupère la direction du projet, ce qui provoquera la démission de Raskin le 1 mars 1982.
Finalement, avec deux ans de retard, Apple présente le Macintosh le 24 janvier 1984.
Le lancement du Macintosh est annoncé par le spot “1984“, basé sur le roman du même nom, écrit par Georges Orwell.

Le Macintosh a tout pour plaire aux utilisateurs : un design innovant, très compact, un écran de haute qualité, et deux logiciels de qualité inclus avec la machine dont McPaint. Programmeur hors pair, Bill Atkinson a conçu la partie graphique du système MacOS du Macintosh d’Apple, baptisée QuickDraw. Pour en démontrer les possibilités, Bill Atkinson a écrit un programme de dessin, MacPaint, qui était fourni gratuitement lors de l’achat des premiers Macintosh. MacPaint est un outil de dessin, extrêmement facile à utiliser, et dont tous les logiciels modernes comportant des fonctions de dessin ou d’illustration sont les héritiers. Aujourd’hui Bill Atkinson a complètement arrêté l’informatique pour se consacrer pleinement à sa seconde passion, la photographie.

Autre grande nouveauté pour le grand-public, la souris qui permet de commander l’ordinateur en cliquant ou en déplaçant des icônes à l’écran. Toute l’utilisation reposant sur des métaphores (la corbeille, les dossiers, le bureau…), le Macintosh révolutionne l’utilisation de l’ordinateur et permet enfin à n’importe qui de comprendre en quelques minutes toutes les bases de l’utilisation de l’ordinateur.

1989 - INTERNET
En 1989, il travaille au CERN, qui est alors connecté à Internet. Berners-Lee vit là l’opportunité de lier le principe d’hypertexte avec Internet. Il déclara plus tard : « Je n’eu qu’à prendre le principe d’hypertexte et à le lier avec le principe du TCP et du DNS et alors – boum ! – ce fut le World Wide Web ! ».
À partir de 1990, il développe les trois principales technologies du Web : les adresses Web, le Hypertext Transfer Protocol (HTTP) et l’Hypertext Markup Language (HTML).

Il développe le premier navigateur Web et éditeur Web (dénommé WorldWideWeb et développé sur NeXTSTEP) et le premier serveur HTTP, le CERN httpd. Il travaille avec Robert Cailliau et quelques autres personnes du CERN qu’on a malheureusement tendance à oublier quand on présente la création de l’Internet.

1990 – PREMIER NAVIGATEUR
Le premier navigateur-éditeur date de 1990. Développé en deux mois, il s’appelait WorldWideWeb (plus tard rebaptisé Nexus), et fut développé en Objective C sur NeXT. On pouvait complètement indiquer les contenus, les liens hypertextes prenaient donc du sens, c’était le début du Web sémantique. En quelque sorte, le Web 2.0, voir le Web 3.0 sont inventés en 1990.

1987 - 1990 - PHOTOSHOP
Le logiciel incontournable des Webdesigners, Photoshop, a été imaginé en 1987 par un étudiant de l’université de Michigan: Thomas Knoll. Thomas Knoll préparait à l’époque un doctorat en “Computer vision“. Pendant son temps libre, il programmait une petite application d’affichage d’images en niveaux de gris sur son Mac Plus, le “Display“. Après quelques mois de travail, l’application finit par accepter la couleur. Rapidement, John Knoll, son frère, se joint au projet. John travaille à ILM (Industrial Light and Magic, la société de George Lucas spécialisée dans les effets spéciaux), et comprend rapidement le potentiel commercial de l’application pour le marché professionnel. Après quelques temps, ils baptisent enfin le programme du nom de “Photoshop“. Pour rentabiliser rapidement l’application et la diffuser sur le marché, ils vont ensuite se rapprocher de différents investisseurs, dont la société Adobe qui signe un accord avec les frères Knoll en Avril 1989.

Au début, le programme était considéré comme un outil de manipulation et de retouche d’images numérisées à partir d’un scanner. A l’époque, un scanner était un investissement relativement couteux plutôt réservé aux professionnels. La première version, même si dans la forme n’a pas beaucoup évolué possède moins d’un quart des fonctionnalités disponibles sur les versions d’aujourd’hui. Les menus déroulants, la barre d’outils, les fenêtres flottantes sont déjà là. Les outils sont ceux que nous connaissons aujourd’hui, et toutes leurs icônes nous sont familières.

The most powerful designs are always the result of a continuous process of simplification and refinement. (Kevin Mullet)

Parmi les pionniers qui ont marqué l’histoire du design graphique pour le Web, on trouve plusieurs enseignants-chercheurs du MIT, dont la simplicité et l’utilisation de la programmation pour faciliter la compréhension et l’intégration avec les contenus est le thème favori.

1991 - JOHN MAEDA
C’est le cas notamment avec John Madea, qui dirige le département Aesthetics and Computing Group du MIT. Il est lui-même un ancien élève de Muriel Cooper. On va le voir, il y a en fait tout une lignée de spécialistes et d’experts de très haut-niveau dans le sillon de Muriel Cooper.
L’approche de John Maeda est autant intéressante que révolutionnaire. Pour lui, l’ordinateur est à considérer comme un outil quelconque, comme un médium à part entière, un « matériau d’expression » pour reprendre ses mots.
A partir de 1994, ses expériences font la part belle à la typographie ; un système de représentation plus familier et donc apte à séduire un public élargi. John Maeda utilise le Web pour enrichir et dynamiser la lecture. Le résultat est souvent saisissant, les lettres s’animent au gré du sens qui s’en dégage et l’internaute est souvent associer via les actions de ses mains sur le clavier ou en utilisant la souris.
Il a également mis au point une méthode d’apprentissage de la programmation nommée design by numbers qui est le titre d’un livre, ainsi que d’un programme éponyme. Cette méthode s’adresse particulièrement aux non-informaticiens que sont souvent les designers graphiques. Par ses théories et ses travaux en matière de programmation, il invente les bases de ce qui sera plus tard le Processing.

John Maeda est l’auteur de plusieurs ouvrages incontournables sur le design interactif comme Creative Code, Maeda@Media, et Design by Numbers.
Dans son ouvrage The Laws of Simplicity, il développe 10 règles fondamentales de la simplicité qui trouvent évidemment tout leur sens dans le design Web.
Réduire, organiser, économiser le temps, apprendre, accentuer la différence, cerner le contexte, stimuler l’émotion, gagner la confiance, accepter l’échec et viser l’unité.
Son étude actuelle, “Simplicity” (lancée en janvier 2005), découle d’une prise de conscience : la technologie doit s’adapter à l’humain, et non l’inverse. Il se concentre donc sur la simplification à outrance des interfaces. Son objectif est de développer des technologies plus proches des sensations humaines afin d’éviter toute frustration et de générer une meilleure compréhension et interaction avec les contenus.

Pour illustrer son travail de création graphique et de simplification, j’ai choisit la couverture du numéro du 9 septembre de Key, le supplément immobilier du New York Times, qu’il a réalisé. Le résultat final va certainement vous paraître très complexe et aller à l’encontre de ce que je viens d’exposer, pourtant sa méthodologie et les outils employés pour parvenir à cette représentation de la crise américaine des subprimes vont dans le sens de la simplification. En effet, à partir de représentation graphique simple et à l’aide de logiciels de programmation, il a pu compiler les couches graphiques et matérialiser les connexions entre les villes de la carte en quelques clics. Sans cette approche, il aurait été presque impossible ou en tous cas très fastidieux de créer une œuvre semblable. L’ensemble du processus est d’ailleurs décortiqué sur le site du New-York Times.

1993 – VIRTOOLS
En 1993, apparaît sur le marché une start-up française prometteuse qui propose une solution de création 3D temps réel pour le Web: Virtools. Le soft permet de prototyper, développer et déployer des applications 3D interactives sur Internet. Virtools est aujourd’hui une filiale du Groupe Dassault Systèmes avec près de 5700 collaborateurs et possède des bureaux à Paris et Montréal. Virtools Dev est un logiciel facile d’utilisation qui permet de réduire considérablement les temps de développement d’applications 3D temps réel. Il est très utilisé dans le milieu du jeu vidéo, de la réalité virtuelle et du multimédia en général. Editeur indépendant de logiciels depuis 1999, Virtools est devenu le leader des solutions de développement de contenu interactif riche en 3D.
Après deux ans de travail, les ingénieurs de Dassault System ont réalisé une impressionnante démo, proposant différentes hypothèses quant à la construction des pyramides égyptiennes. La démo diffusée en 2007 tourne en temps réel sous Virtools avec des rendus très impressionnants. Cela ouvre de belles perspectives quant à l’avenir de la 3D pour le Web.

1993 – 1994 – MARC ANDREESSEN, MOSAIC ET NETSCAPE NAVIGATOR
Marc Andreessen est tout just diplomé qu’il déménage en Californie pour travailler pour une entreprise Hi-Tech où il rencontre Jim Clark, le fondateur de l’entreprise Silicon Graphics. A l’époque, Marc Andreessen vient de terminer une nouvelle version de son navigateur Web “Mosaïc“, avec l’aide de son collègue Eric Bina. Jim Clarck comprend rapidement les capacités commerciales de Mosaïc et propose de développer une société autour du produit. Rapidement, Mosaic Communication Corporation voit le jour à Mountain View en Californie. L’Université d’Illinois dans laquelle Mosaïc a été développé par Andreessen contraint la jeune entreprise à changer de nom. Ainsi va donc naître Netscape Communications avec son produit phare, le navigateur Netscape Navigator.
A l’époque, le navigateur est disponible gratuitement sur le Web et remporte rapidement un succès gigantesque.
En 1995, c’est l’explosion. Le monde de la finance découvre le Web et les mécanismes de valorisation qui seront synonymes de l’un des plus importants crash boursier de l’histoire quelques années plus tard. Marc Andreessen devient célèbre et fait même la couverture du Time Magazine. Il est l’image même de la bulle Internet et de cette nouvelle génération de gamins de vingt ans, jeunes, high-tech, ambitieux et pesant déjà plusieurs millions ou milliards de dollars.
Le succès de Netscape attire l’attention de Microsoft qui achète le code source de Mosaïc de la société Spyglass sponsorisée par l’Université d’Illinois pour le modifier et sortir son propre navigateur, Internet Explorer. En 1999, Netscape est acheté par AOL. Depuis, Marc Andreessen n’a pas quitté le devant de la scène Web. Il est devenu CEO d’AOL avant de créer de nouvelles entreprises et services Web innovants. Il est par exemple derrière les succès de Digg.com, Twitter et Ning.

Netscape Navigator après avoir disparu de la surface avec la concurrence acharnée d’Internet Explorer et plus tard de Mozilla Firefox est à nouveau disponible gratuitement pour les nostalgiques comme moi. En fait, le navigateur est une sorte d’add-on sur une base de Mozilla Firefox. Ce qui est passionnant avec Mosaïc et Netscape Navigator, c’est que le grand public et les designers Web de l’époque ont enfin accès à des navigateurs permettant d’afficher facilement du texte et des images.
Quand on regarde ces copies d’écrans des deux navigateurs, c’est assez fascinant de voir qu’encore une fois, les outils n’ont pas tellement changés depuis leur création.

LES DEBUTS DE LA CREATION WEB
Après les expérimentations, l’apparition du Web, et la démocratisation des outils, on assiste véritablement à la naissance du graphisme Web. Et dès le début, nous sommes face à des approches très conflictuelles. D’abord entre deux mondes qui ne se comprennent pas, celui du print et celui du Web. Puis entre des métiers, les développeurs et informaticiens d’un côté, les artistes et graphistes de l’autre. Et enfin, entre les tenants de telles ou telles technologies ou méthodologies de conception. Et malheureusement ces conflits perdurent encore aujourd’hui et nuisent au développement de l’industrie, à sa reconnaissance et sa compréhension.

Idée reçue n°1 Webdesign = Print pour le Web
Par exemple, dans la famille des idées reçues, de nombreux Webdesigners ont débuté avec l’idée que le design web consistait à simplement transposer le design print sur un écran d’ordinateur et plus particulièrement sur un canal de diffusion comme le Web. Donc, dans ce schéma, le webdesigner n’est ni plus ni moins considéré que comme un infographiste.
Aujourd’hui, les choses sont un peu différentes. L’univers, les méthodes et les outils des designers se sont considérablement enrichis avec l’apport de l’animation, de la programmation…

Idéé reçue n°2 Les webdesigners travaillent seulement sur Photoshop
Souvent les designers reçoivent les wireframes déjà prêts. C’est encore un process identique à celui de la presse.
Brand values, mood, essences…. Impossibles de donner du sens et de développer une expérience utilisateur avec des wireframes.
Il y a actuellement un plébiscite pour permettre aux Webdesigners de travailler avec Xhtml plutot qu’avec Photoshop pour tout de suite créer dans le navigateur. Cela peut permettre rapidement de créer un prototype en CSS. Cela peut aider les clients et les spécialistes d’intelligence artificielle à comprendre l’interaction et les plus-values que le design peut apporter et de mieux communiquer avec les techniciens et donc aussi de gagner un temps précieux.
Il est donc urgent et nécessaire de définir des process dédiés au design web.
Il est également important d’intégrer le langage de la programmation dans le travail des designers. Au moins en rajoutant des markups qui vont guider les développeurs. Ces incompréhensions sont essentiellement dûs à l’influence des process du print et de la guerre des clans qu’entretiennent certains développeurs et graphistes.

1994 – W3C
Depuis les premières heures du Web, les principaux fabricants de navigateurs ont tenté de se créer un public captif en créant des extensions HTML propriétaires, restituées uniquement par leurs produits respectifs. Le Web s’est ainsi divisé en deux camps : MSIE et Netscape. Pour que leurs sites soient accessibles aux deux principaux navigateurs, les développeurs Web ne pouvaient opter que pour des choix aussi insatisfaisants les uns que les autres. Comme par exemple n’utiliser qu’une syntaxe commune aux deux navigateurs, et se retrouver avec un site très pauvre, se démarquant peu de la concurrence. Ou encore, ne s’adresser qu’à l’une des deux entreprises et sacrifier ainsi une grande partie de son audience et de sa clientèle potentielle. Et enfin, faire deux versions du même site, au prix d’un travail bien plus important et forcément plus coûteux.
La concurrence entre Netscape et Microsoft a donc mené à une balkanisation du Web, allant complètement à l’encontre de son ambition initiale.

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
Le Word Wide Web Consortium est fondé par Tim Berners-Lee après avoir quitté l’organisme européen pour la recherche nucléaire, le CERN en octobre 1991. Il a été fondé au MIT/LCS (Massachusets Institute of Technology/ Laboratory for Computer Science) avec l’aide de l’organisme de défense américain DARPA - qui est pionnier de l’Internet - et la Commission Européenne. En octobre 2007 on compte 16 bureaux du W3C dans les différentes régions du monde.

Les standards du Web sont un ensemble de technologies et de protocoles utilisés sur le Web définis par le W3C sous forme de recommandations.
La tâche de proposition, définition et d’acceptation de nouveaux standards du Web (ou d’amélioration de standards déjà existants) est confiée au W3C.

On considère souvent à juste titre que nous n’en sommes qu’aux premiers balbutiements de l’Internet. L’avènement de XML, les Web services, l’apparition de nouveaux terminaux d’Accès au Web (PDA, téléphones mobiles, etc), le Web sémantique sont autant de micro-révolutions qui promettent de nouveaux usages. Mais tout cela ne sera rendu possible que si les fondations du Web sont solides. Après un démarrage chaotique, voire anarchique du Web, les normes du W3C autorisent désormais une vision à long terme de son développement.

Principalement, les standards du Web favorisent une accessibilité universelle aux contenus, la production de contenus Web à moindre coût, de tirer profit de la technologie XML, un contrôle qualité optimisé du travail fourni par les prestataires, une réduction considérable du volume des documents, un référencement plus efficace dans les moteurs de recherche, la pérennité des documents et une rétro-compatibilité avec les anciens navigateurs.

Les standards du Web et le W3C sont aujourd’hui pleinement identifiés et reconnus par les Webdesigners. Cela dit, ils peuvent dans certains cas présenter des contraintes fortes à la réalisation d’interfaces innovantes ou hors-normes.

1994 - CSS
CSS = Cascading Style Sheet
Le CSS permet de styliser les contenus HTML
1994, différentes expérimentations de développement de langages pour feuilles de styles sont menées.
- “Stylesheet Proposal” de Pei Wei,
- “Stylesheets for HTML” de Robert Raisch (O’Reilly)
- “Cascading HTML Style Sheets” (CHSS) d’Håkon Wium Lie.
En octobre 1994, le premier véritable brouillon est publié.
En 1996, le Cascading Style Sheets est né de la collaboration entre Håkon Lie et Bert Bos.

1994 - LE DEUXIEME MONDE
Le Deuxième Monde est un jeu vidéo qui a été créée par Canal+ Multimedia et paru en 1994.
Il permettait aux joueurs d’évoluer, par le biais de leur avatar, dans une reconstitution de Paris en 3D ; formant ainsi une communauté virtuelle. D’abord présenté sur un CD payant avec un moteur réalisé par Cryo, le jeu a été fin 1997 converti en VRML.
La première version du 2ème Monde, sur cd-rom, a connu environ 20.000 inscrits. Quand à la seconde, elle fonctionnait en tant que service offert aux internautes du site web de CANAL+. Il y avait plus de 200.000 inscrits dans cette base. Cette première tentative offrait et offre toujours des perspectives intéressantes pour le développement du Webdesign au-delà de la manière classique dont on imagine la navigation sur le Web.

1994 – QR CODE
L’Asie a quelques années d’avance. Le Japon, où cette technologie innovante est née à la fin 2000, compte aujourd’hui plus de 50 millions de téléphones portables équipés.
Ces codes figurent dans toutes sortes de publications, sur tous les sites web, et de plus en plus sur les cartes de visite de professionnels. On en est presque à ne plus utiliser un service portable (avec adresse URL) s’il n’y a pas de QRcode immédiatement disponible.
Le développement du phénomène ne va pas s’arrêter là puisque l’adoption quasi-universelle de lecteurs QRCode préinstallés sur tous les nouveaux portables sortis récemment sur le marché Japonais devrait démultiplier les usages.

En Europe et aux USA, c’est le même principe. Grâce au MobileTag, vous pourrez accéder à la version mobile de n’importe quel article.
Pour pouvoir utiliser MobileTag, vous devez tout d’abord télécharger l’application à partir du site Web www.mobiletag.com.
Quels usages pour cette technologie ? Et bien, ils sont multiples. Par exemple:
- La presse: à coté d’une photo ou d’un article, le Tag permet d’accéder à des pages interactives en relation avec l’article.
- Abribus / Panneaux publicitaires: Le Tag permet d’accéder aux informations de la ville (plan, itinéraire, temps de trajet), ou à une vidéo présentant un produit.
- Les commerces: Sur un article, le Tag permet d’obtenir une réduction ou des informations complémentaires,
D’autres systèmes du même genre existent comme Hotscan, ActivePrint et le Shotcode.
Ils constituent autant de challenges et d’opportunités pour les Webdesigners qui peuvent désormais sortir du cadre réducteur du browser et établir des ponts entre les supports onlines et offlines.

1995 – JAVASCRIPT
JavaScript est un langage de programmation de scripts principalement utilisé pour les pages web interactives. Le langage est créé en 1995 par Brendan Eich, pour le compte de Netscape Communications Corporation (rappellez-vous, Marc Andreessen), qui s’est inspiré de nombreux langages, notamment du Java mais en simplifiant la syntaxe pour les débutants. JavaScript s’appelait à l’origine LiveScript. En décembre 1995, Sun et Netscape annoncent la sortie de JavaScript. En mars 1996, Netscape met en œuvre le moteur JavaScript dans son navigateur web Netscape Navigator 2.0. Le succès de ce navigateur contribue à l’adoption rapide de JavaScript dans le développement Web orienté client. Du code JavaScript peut être intégré directement au sein des pages web, pour y être exécuté sur le poste client. C’est alors le navigateur web qui prend en charge l’exécution de ces petits bouts de programmes appelés scripts.
Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l’interface DOM fournie par le navigateur (on parle parfois d’HTML dynamique). Il est aussi utilisé pour réaliser des services dynamiques, pas toujours très utiles mais parfois simplement à but esthétique.

1996 – MACROMEDIA SHOCKWAVE
Macromedia Director est né en 1986 sous le nom “Video Works“. Ses auteurs étaient une équipe de programmeurs de jeux chez Bally-Midway à Chicago.
Au début des années 1990, VideoWorks, devenu Macromind puis Macromedia Director, s’est imposé comme la référence en matière d’outils de création de cd-roms.
C’est sous Director qu’ont été crées la plupart des classiques du cd-roms chez les éditeurs Voyager ou Montparnasse Multimédia. Le jeu Myst a aussi été crée sous Director.
Les fichiers Director créés peuvent être inclus dans une page Web pour un usage sur Internet lorsqu’ils sont convertis au format Shockwave. Les visiteurs d’un site en Shockwave doivent utiliser un navigateur équipé du plug-in Shockwave. C’est une nouvelle étape de l’introduction de la 3D temps réel sur le Web.

Dans le domaine de la création de CD-Rom, Director est de plus en plus concurrencé par son petit frère Flash.
Director reste très utilisé dans la recherche, en tant qu’éditeur d’algorithme pour le prototypage, ou en tant que contrôleur de robotique, par exemple en chirurgie.
Shockwave reste le plugin le plus utilisé pour la 3D sur internet (cartographie, maquettes et jeux à petit budget).

1996 – FUTURE SPLASH ANIMATOR
Flash s’est d’abord appelé FutureSplash Animator. Il est né en 1996. Son créateur, Jonathan Gay avait travaillé sur l’adaptation à Postscript d’un programme de dessin, Superpaint. Mais Illustrator, Freehand ou Canvas avaient déjà saturé le marché à la fin des années 80. Puis il s’est orienté vers l’écriture d’un logiciel d’animation. Détail amusant, Jonathan Gay a tenté de vendre sa technologie à Adobe fin 1995. Mais son PDG, John Warnock, n’a pas été convaincu… Disney a été l’un des premiers gros utilisateurs de FutureSplash. A cette époque, Macromedia travaillait aussi pour Disney et a dû apprendre à collaborer avec l’équipe de Jonathan Gay. C’est ainsi, presque par hasard, que la rencontre s’est effectuée. Macromedia a racheté FutureSplash en 1996, le rebaptisant Flash 1. A l’époque, le lecteur pesait 186 ko.
La version “Flash 2” et le format SWF voient le jour dans la foulée. En utilisant les propriétés mathématiques des courbes vectorielles, Flash permet la publication de contenus graphiques légers moyennant le téléchargement du plug-in. Le logiciel devient un éditeur Web complet qui permet de créer des graphismes, de les animer, de les intégrer en tant qu’éléments d’interfaces interactives et de générer le code HTML nécessaire au support du SWF dans un navigateur.
C’est donc une innovation fondamentale, d’ordre technologique qui est à l’origine du logiciel. Celui-ci, connaîtra ensuite des évolutions qui à chaque fois seront qualifiées de la même façon. C’est ainsi que SWF se situe dans une perspective historique où chaque mise à jour fait référence à l’environnement Web de son époque.
Aujourd’hui, Flash n’est plus seulement un logiciel d’animation et de dessin vectoriel. Au fur et à mesure des versions, Macromedia a fait évoluer son produit vers un éditeur de contenus “pluri-media” et c’est bien-sûr un outil extrêmement familier des Webdesigners.

1998 – THE REMEDI PROJECT
The Remedi Project est la 1ère galerie interactive pour Web designers. Développée par Josh Ulm, cette plateforme est 100% Flash. A l’époque plusieurs artistes et designers Web y présentent leurs travaux en simultané avec des expositions organisées dans des galeries de San Francisco. Depuis 2002, le site n’est plus mis à jour mais il reste disponible à la visite.

1998 – JOE CARTOON
Joe Cartoon est le nom d’une série en Flash d’animés interactifs lancée en 1997 par son créateur Joe Shields. Joe Shields a commencé ses réalisations en tant qu’individuel et ses premières créations comme “Gerbil in a microwave” ou “Frog in a blender” ont, à l’époque fait le tour du monde de la planète Web. C’était la première fois qu’une seule personne produisait, et diffusait de manière aussi massive du contenu de divertissement animé. Joe Cartoon a ensuite rejoint le groupe Atom Films, une communauté de contenus Flash avant de redevenir indépendant en 2006.

Sous le pseudo de Joe Cartoon, il a créé une foultitude d’animations qui se terminent toujours par l’explosion ou la perforation du héros, souvent un animal. Ses grenouilles au mixeur, ou son poisson à électrocuter dans un bocal, ont fait le tour de la toile. Aujourd’hui, sur le site Web officiel Frog in a blender a été vu plus de 111 millions de fois.

Designers talk and think a lot like science fiction writers do, except in a much less melodramatic and histrionic way. (Bruce Sterling)

1999 – IE5 + FLASH
Sortie de IE5 qui intègre le Flash Player. 100 millions d’utilisateurs ont le lecteur Flash installé. C’est le début de la reconnaissance pour Flash et aussi le début d’une incroyable production de contenus animés pour le Web.

1999 – YUGO NAKAMURA
Né en 1970 à Nara au Japon, Yugo Nakamura a fait des études en génie civil, paysage et architecture à l’Université de Tokyo. Il a travaillé quelques années comme ingénieur, avant d’entreprendre l’apprentissage du logiciel Flash, ainsi que d’autres logiciels de design interactif. En 2000, il devient directeur artistique d’interfaces chez Business Architects Inc., où il travaille sur des projets de sites Web et de cédéroms. Le site Ecotonoah, où les internautes qui alimentent un arbre virtuel contribuent à l’amélioration de l’environnement, est l’un de ses derniers projets commandité par l’entreprise NEC. Ses nombreuses expérimentations interactives personnelles sont à consulter sur Yugop.com.
Designer d’interfaces, Yugo Nakamura développe des applications uniques et crée des environnements Web alternatifs. Dans ses créations, l’exploration des espaces, des textures, des formes et des volumes réserve une place prépondérante à l’interactivité.
Yugo Nakamura a également contribué au développement de la communauté de créateurs Web utilisant la programmation sous Flash. Ses travaux réalisés en utilisant Action Script sont ainsi souvent cités en exemple.

1999 - I-MODE
L’I-mode est un produit né des laboratoires japonais de NTT DoCoMo et inventé par Takeshi Natsuno, suite à la constatation de l’échec des appareils WAP première génération, mais surtout à une bonne compréhension de celui-ci et à une réponse au-delà des attentes des utilisateurs.
Le langage utilisé pour les sites mobiles est une version modifiée d’HTML, appelée I-HTML (pour I-mode HTML) basé lui-même sur du C-HTML. Ce langage diffère sur les points suivants :
- Il ne contient pas les balises HTML pour écrire en gras et en italique ou en souligné ;
- Le Javascript n’est pas géré ;
- Les feuilles de style CSS ne sont pas supportées ;
- Des attributs concernant les téléphones mobiles sont ajoutés dans certaines balises, par exemple afin d’associer un lien à une touche du téléphone ;
- Des balises d’affichage d’image locale, appelées Emoji, sont ajoutées (pour l’affichage d’un smiley par exemple) ;
- Un nombre limité de protocoles peuvent être utilisés dans les liens (http, https, tel, sms, etc.)
Les deux fonctions principales de l’I-mode sont la consultation de services et la messagerie électronique.
La consultation de services se fait sur des sites Web adaptés à la taille d’un écran de téléphone mobile. Ces sites peuvent être scindés en deux groupes: Les sites payants et les sites gratuits.
Des milliers de services Web mobiles sont lancés dès la première année du lancement de l’I-Mode au Japon.

2000 - FLASHFORWARD
On commence à véritablement prendre au sérieux la création Web. Macromédia Flash et l’animation vectorielle est alors sous les feux des projecteurs. Une communauté mondiale de jeune créateurs émerge et ressent rapidement le besoin d’échanger, de partager ses bonnes pratiques, de montrer ses réalisations. Cela se matérialise notamment par l’événement Flashforward, organisé pour la première fois à San Francisco. Le succès est au-delà des attentes des organisateurs. Des files d’attente sans fin se forme dans tout le quartier où se déroule l’événement et même de faux tickets sont édités. Plus de 4000 créateurs s’y retrouvent. Aujourd’hui, les Flashforwards font partis des événements installés et reconnus par la communauté de créateur Web.

2000 – LOOKANDFEEL.COM
Des sites présentant des innovations en matière de navigation commencent à faire leur apparition, boostés par le succès de Flash et de la programmation Action Script chez les Webdesigners. Parmi ceux-là, on note le site www.lookandfeel.com qui invente justement la technique du même nom. Suivront d’autres techniques et effets qui renforcent l’expérience utilisateur, utilisant des éléments cognitifs comme le mouvement, le son, l’interaction avec la souris ou le clavier…etc.

DEVELOPPEMENT ET WEBDESIGN
Personne ne sait comment fonctionne les voitures d’aujourd’hui.
Les deux seuls critères d’achats sont l’esthétique et les usages proposés. Pour les amateurs de techniques, la consommation à la rigueur.
Le Webdesigner est comme le mécanicien d’aujourd’hui. Il est le seul à connaître vraiment ce qu’il y a sous le capot et cela va rester sous le capot.
Par nature, beaucoup de designers Web sont réfractaires à la programmation.
Pourtant, le début des années 2000 fut riche en démonstrations.
De nombreux artistes, designers, graphistes se sont appropriés les techniques du développement informatique pour apporter une valeur ajoutée à leurs projets.

| View

1998 – 2000 – JOSHUA DAVIS
Basé à New York, Joshua Davis est un artiste et designer renommé. Travaillant aussi bien pour des entreprises que des collectionneurs ou des institutions, il utilise l’ordinateur comme média pour des créations uniques.
Après des études au Pratt Institute à Brooklyn, où il étudie l’histoire de l’art et l’illustration, Joshua Davis se tourne vers le Webdesign.
Sa connaissance des langages de scripts lui permettront de créer un art ou le hasard de la création se mélange avec la logique de la programmation, à la manière de Jackson Pollock qui ne touche plus la toile et laisse dégouliner la peinture.
Joshua Davis et son travail sont devenu très influent dans le monde du graphisme et du Webdesign au début des années 2000. Ses tatouages et sa réputation de “rockstar” du Webdesign y ont autant contribué que ses réalisations.

Joshua Davis s’est fait une spécialité de ces programmes générateurs d’éléments graphiques aléatoires, inspirés par la théorie du chaos, et conçues à base d’algorithmes. Ils viennent chercher des dessins et graphismes au sein d’une base de données de façon aléatoire pour composer et afficher des motifs irrémédiablement uniques. Sa réalisation la plus complexe ne comportait pas moins de 170 000 calques générés dans Illustrator.

2001 - PRAYSTATION
Aujourd’hui, ses œuvres interactives ont été exposées au Design Museum de Londres au MOMA de New York ou encore au Centre Pompidou à Paris. En 2001, avec Praystation, il a obtenu la plus haute récompense internationale dans le domaine de l’art et de la conception numérique, le Prix Ars Electronica Golden Nica, dans la catégorie “Net Excellence“. Depuis, il voyage dans le monde entier pour intervenir dans le cadre de conférences et d’ateliers, et enseigne à la School of Visual Arts.
Le travail de Joshua Davis, Praystation, allait emprunter dans sa première version l’imagerie type des jeux vidéo. Il les assemblait de manière à créer de nouvelles relations et faire émerger un nouveau sens qui pouvait, à certains égards, poser un regard critique sur la culture du jeu en général. Davis allait ensuite se pencher sur l’exploration des structures navigationnelles du jeu, sur les sons et les animations. Il procédait de cette façon à une déconstruction de l’interface du jeu et donc à une réflexion sur ses procédés opérationnels.

ONCE UPON A FOREST
Once upon a Forest est une sorte de recueil d’expérimentations en graphisme et programmation composé d’images, de jeu de couleurs, de tons et de géométrie. Le travail porte également sur les environnements sonores. Ils influencent largement la perception des animations, créant finalement de véritables ambiances. Le tout est en vectoriel. On peut donc exporter en PostScript, puis l’ouvrir dans Illustrator. Une nouvelle fois, le site de Joshua Davis est salué autant par les créatifs Web, que les geeks et les revues culturelles.

2001 – ECHARPE COMMUNICANTE
L’écharpe communicante de France Telecom, sur un concept de Yacine Aït Kaci et Naziha Mestaoui, est destinée aux professionnels en déplacement. Elle fut présentée au Musée d’Art Moderne de New-York (MOMA) dans le cadre de l’exposition “Workspheres: designing the Workplace of tomorrow“, consacrée aux futurs outils et environnements de travail à l’ère informationnelle.
L’écharpe surmonte une veste qui dissimule dans ses doublures le mini clavier d’un micro et un GSM éclatés.
Visionner des films téléchargés sur internet, surfer sur ses sites préférés, envoyer des e-mails ou diffuser instantanément des photos depuis l’endroit où l’on se trouve constituent également ses principales valeurs ajoutées. A terme, l’écharpe devait constituer à elle seule un véritable bureau portatif, aussi discret qu’élégant: En l’a portant, chacun restera connecté à son réseau d’entreprise, accèdera à ses fichiers, son intranet…
Après avoir proposé le premier blouson-téléphone, les chercheurs de France Télécom franchissent donc une nouvelle étape dans leur réflexion pour proposer de nouveaux services haut-débit en mobilité. En introduisant l’image dans le vêtement, ils réalisent un pas supplémentaire vers la notion de connection continue, gage d’une réelle autonomie.

2001 - TONGSVILLE
Site Anglais connu notamment pour ces interactions générées au hasard et son scrolling vertical. Beau, drôle, interactif et très novateur, ce site vous propose de visiter une attachante bourgade du nom de Tongsville. Pour s’y rendre, il faut emprunter le train. Le trajet ne dure qu’une poignée de secondes, le temps que se charge la page principale et l’occasion de contempler une étonnante animation, réalisée en Flash comme d’ailleurs l’ensemble du site. Première surprise en arrivant dans l’unique rue de Tongsville, ici la navigation se fait à l’horizontale, un curseur permettant de se promener de gauche à droite dans cette ville aux allures de décor de cinéma. Les bâtiments de la ville hébergent les différentes rubriques du site, ainsi il faut cliquer sur le marchand de journaux pour accéder aux dernières nouvelles, sur la façade de la banque pour participer au forum, ou encore sur la décharge publique pour contacter l’éditeur du site. On a le sentiment en visitant ce site qu’il s’agit d’une fenêtre ouverte sur un autre monde, une ville lilliputienne qui continuerait à exister une fois le navigateur refermé. Et pourtant, aussi surprenant que cela puisse paraître, la Tongsville n’est rien d’autre qu’une vitrine commerciale, celle d’Hammer&Tong, une société de production vidéo, primée à maintes reprises pour la qualité de ses clips. H&T a ainsi souhaité proposer une expérience différente en guise de plaquette sur le web. Le site a évidemment depuis fait beaucoup d’émules.

2001 – 2Advanced
2Advanced est le site d’une agence Web américaine. 2Advanced Studios fut créé en 1999 par Eric Jordan, Tony Novak and John Carroll. Spécialisés dans le multimédia, leurs sites et leurs créations sont une source d’inspiration inépuisable pour grand nombre de webdesigners. En quelques années, ils sont devenus les îcones de la création d’interfaces Full-Flash (c’est-à-dire 100% realisées avec le logiciel Flash) et de l’animation 2D/3D. Leur premier site a été créé en combinant Macromedia Flash 5, Macromedia FreeHand, et Swift3D. Une micro-révolution visuelle dans le monde du Webdesign. Aujourd’hui, c’est la version 5 du célèbre site que vous pouvez décourir sur www.2dvanced.com.

Idée reçues n°3 - HTML Versus Flash
Contenus contre réalité?
C’est en tous cas ce qu’on a bien voulu nous faire croire et qu’on essaye toujours de nous faire croire.
Ce conflit d’approches est l’un des plus virulents dans les communautés de créateurs Web. D’un côté les pro-HTML, de l’autre les pro-FLASH et au milieu quelques webdesigners que l’on presse de choisir leur camps. Précédemment, nous avons parlé de l’opposition développeurs/graphistes. Ce faux-débat en est une parfaite illustration.

Flash est devenu l’un des programmes les plus populaires pour ajouter des animations et des objets interactifs à une page Web.
Flash est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo.
Peu de contraintes et de développement pour obtenir les premiers résultats. Si l’on devait définir Flash en une phrase, ce serait “La créativité d’abord!” La principale utilisation de Flash (questions d’accessibilité mise à part) réside dans les concepts graphiques et animés que l’on peut developper.
Rappelons tout de meme que si ce logiciel s’adresse a priori d’abord a des graphistes, les Action Scripts offrent de nombreuses possibilités mais difficiles à maîtriser.

HTML/CSS/Javascript sont des technologies et des langages qui favorisent davantage les contenus.

En fait, il est clair que chaque langage, technologie, approche possède ses qualités et ses faiblesses. Le tout est de bien les identifier pour faire le meilleur choix en fonction de ses besoins, des contenus et des cibles. Dans certains cas, cela peut-être l’utilisation d’un seul outil comme de plusieurs d’entre-eux

Exemple avec Flash
Le site de présentation d’une voiture de sport.
Les objectifs sont de renforcer l’image de la marque, de délivrer une expérience immersive à l’utilisateur, et de mettre en place une stratégie virale à court-terme.
Flash s’impose naturellement dans ce genre de projet puisque :
• L’expérience de marque est essentielle,
• Les utilisateurs sont ouverts à une découverte assistée,
• La cible est restreinte.

Exemple avec HTML et standards
Le site d’un journal quotidien
• Le référencement est une priorité
• Gestion de bases de données, très important nombre de contenus.
• Hiérarchisation des liens sur de multiples et complexes niveaux / bouton de retour / etc.
• Les utilisateurs veulent pouvoir copier/coller les contenus
• L’expérience de la marque se construit dans sa capacité à délivrer des contenus de qualité

HTML+FLASH
CONTENUS+CRÉATIVITÉ
Aujourd’hui, certains sites combinent efficacement les technologies et langages autrefois opposés.
Le concept, les idées et l’audience doivent déterminer le projet et les contenus. Les outils et langages ne sont que les moyens utilisés pour parvenir à ces objectifs.

Exemple de combinaison
Le site d’une organisation non-gouvernementale.
La majeure partie du site s’appuie sur du HTML et une feuille de style CSS, mais des éléments Flash viennent renforcer l’image de la marque et délivrer une expérience utilisateur supplémentaire. Les éléments Flash sont intégrés dans une frame elle-même adaptée aux standards du Web, et utilisent des données XML.

ll y a une conviction pernicieuse qui veut que les sites adhérant aux standards du Web et d’accessibilité soient laids, visuellement inintéressants ou disposant d’une navigation primaire. Contrairement à la croyance populaire, Flash n’est pas entièrement inaccessible, et du XHTML mal écrit peut par contre rendre un site complètement inaccessible.

Recognizing the need is the primary condition for design. (Charles Eames)

Encore une fois, comme dans tous projets Web, l’analyse des besoins est essentielle et doit précéder n’importe-quel choix.
Les Webdesigners ont justement la chance d’avoir le choix entre plusieurs outils, entre plusieurs alternatives. Je trouve dommage de s’en priver pour des raisons qui semblent d’un autre âge.

2000 – TEAM CHMAN
Team Chman est une agence Web française qui devient rapidement reconnue dans le monde entier grâce à leur produit principal: Banja. Il s’agit d’un jeu entièrement réalisé en Flash et disponible sur Internet sous le format d’épisodes interactifs.
Team cHmAn a aussi initié une démarche artistique événementielle afin de mieux faire connaître l’ébullition créative qui s’épanouissait à l’époque sur le web, en rassemblant des artistes numériques renommés aux styles et influences variés. Il s’agissait de mettre en place un espace de rencontre et de découverte offline privilégiant les relations humaines et offrant à des talents reconnus sur le Web la possibilité de se confronter aux différents publics. Tout cela se déroulait sur la base d’un concept événementiel particulier: “24h pour créer, 24h pour échanger”. Lors de la première édition, le Team Chman invente un concept, qui depuis, a fait de nombreux émules dans le monde entier, y compris ici à Rouy-Noranda. Le concept original de la Webjam était le suivant : 10 artistes sont conviés à créer une animation à partir de sources audio, vidéo, photographiques qui leurs sont fournies par l’intermédiaire du site web de l’événement. Chaque artiste disposait de seulement 24 heures pour livrer sa création. Les webjams sont par excellence les manifestations sur lesquels se retrouvent les webdesigners du monde entier. Que ce soit sur les VectorLounge du Team Chman, le Festival de Webdesign de Rouyn-Noranda, le WIF que j’ai conçu et développé en France dès 2002, le Flash Festival, ou encore Cre824 aux USA dont je m’occupe aujourd’hui, le succès est toujours au rendez-vous.

When I am working on a problem, I never think about beauty. I think only of how to solve the problem. But when I have finished, if the solution is not beautiful, I know it is wrong. (R Buckminster Fuller)

Evidemment pendant ces démonstrations en 24heures non-stop, les standards sont peu favorisés. Les Webdesigners sont pour beaucoup des artistes et profitent de ces démonstrations pour laisser libre court à leur imagination, privilégiant les outils d’animation, l’interactivité et l’esthétisme.

2000-2002 – CSS1
Les principaux navigateurs supportent CSS1
CSS 1 est disponible sur IE5 (MAC), IE6 (Windows), Opera & Mozilla Firefox.
Les notions d’accessibilité et d’usabilité commencent à apparaître et à se démocratiser.

DEVELOPPEMENT DES STANDARDS
- HTML 3.0 avec le W3C
- HTML 3.2
- HTML 4.0.1
- XHTML 1.0
- Languages alternatifs (WAP, XHTML BASIC…)
- CSS 1
- CSS 2
- ECMAScript (JavaScript / JScript)

Cela va bien-sûr favoriser l’adoption des standards par les webdesigners mais cela va aussi générer de nouvelles approches conflictuelles comme par exemple les partisans des tables ou des font tags plutôt que de feuilles de style.

2002 – TOKYOPLASTIC.COM
Le site d’animation Tokyoplastic.com remporte des prix dans le monde entier et devient culte pour toute une génération de créatifs Web.
Le design est minimaliste, épuré, uniquement réalisé en noir, rouge et blanc. L’interface est entièrement animée. Chaque clic et déplacement dans un sous menu nous plonge dans une courte animation mettant en scène de petites figurines aux allures de geisha et des plantes carnivores. Le site est très vaste et offre de nombreuses petites animations à découvrir, une musique également très simple contribue parfaitement à l’ambiance zen du site. Malgré la profusion d’animations, le site reste assez fluide et rapide à exécuter. A découvrir et à redécouvrir !

2002 - BD4D
Premiers rassemblements et réseaux d’envergure nationaux et internationaux pour la communauté des Webdesigners.
BD4D sont des évènements qui ont vu le jour à Londres grâce à Ryan Shelton et Ryan Carson début 2002. L’objectif était de rassembler quelques acteurs du Webdesign au cours d’une soirée animée. Tour à tour une dizaine de créatifs présentent leurs projets au reste de l’assemblée. Les États-Unis ont repris l’initiative comme à Chattanooga grâce à l’agence Tubatomic, puis ensuite d’autres pays. Plutôt que d’avoir des manifestations éparses dans plusieurs pays, il semblait plus intéressant de s’afficher sous un même nom: BD4D.

2002 – WEB CREDIBILITY
C’est dans le cadre du projet Stanford WEB Credibility Research qu’un guide comportant 10 règles permettant d’établir la crédibilité d’un site Web a été élaboré. C’était un Double défi:
- Pour les annonceurs il y a nécessité d’être crédible sur le Web.
- Pour les usagers, trouvez l’information crédible est essentiel.
La rédaction de ce guide s’est appuyée sur 3 années de recherche auxquelles ont participé 4,500 personnes. Les documents de recherche qui ont permis d’arriver à ces résultats sont accessibles sur le site du projet.
Voici dans l’ordre ces dix premières règles et leur description :

01. Offrez des moyens simples de vérifier l’exactitude de l’information sur votre site
La crédibilité d’un site peut être améliorée lorsque les informations que vous diffusez sont appuyées par d’autres sources (citations, références, sources du matériel) surtout si vous proposez des liens vers ces « preuves ». Même si les gens ne suivent pas les liens proposés, vous aurez démontré votre confiance en votre contenu.

02. Montrez qu’il existe une organisation réelle derrière votre site
Démontrer que votre site sert une organisation légitime augmentera sa crédibilité. Le moyen le plus simple d’y parvenir est de lister les adresses physiques des places d’affaires. D’autres éléments peuvent aussi contribuer comme, par exemple, afficher une photo de votre bureau ou mentionner votre adhésion à une chambre de commerce.

03. Mettez l’expertise de votre organisation en valeur dans le contenu et les services offerts
Avez-vous des experts dans votre équipe ? Vos collaborateurs ou vos fournisseurs ont-ils une bonne notoriété ? Assurez-vous de le mentionner. Êtes-vous affiliés à une organisation respectée ? Dites-le clairement. Inversement, n’offrez aucun lien vers des sites externes qui ne sont pas crédibles. Votre site perdrait en crédibilité.

04. Montrez que derrière votre site, il y a des personnes honnêtes et fiables
Le premier objectif de cette règle est de démontrer qu’il y a des personnes réelles derrière votre site et dans votre organisation. Ensuite, trouvez des moyens de démontrer leur fiabilité à travers des images et dans le texte. Par exemple, certains sites présentent une biographie de leurs employés qui parle de la famille et des intérêts personnels.

05. Faites en sorte qu’il soit facile de vous contacter
Un moyen simple d’augmenter la crédibilité d’un site est d’afficher clairement vos coordonnées : téléphone, adresse physique et adresse de courrier électronique.

06. Privilégiez un design offrant un look professionnel ou approprié aux objectifs du site
Les gens évaluent rapidement un site par son design graphique uniquement. Au moment de concevoir votre site, portez attention à la mise en page, à la typographie, aux images, aux problématiques de consistance, etc. Évidemment, tous les sites ne gagnent pas en crédibilité en adoptant un look similaire à celui d’IBM.com. Le design graphique doit être cohérent avec les objectifs du site.

07. Rendez votre site facile d’utilisation — et utile
Ici, deux règles sont regroupées. Les résultats de recherche démontrent que les sites gagnent en crédibilité en étant à la fois faciles à utiliser et utiles. Certains opérateurs de sites oublient les utilisateurs lorsqu’ils servent leur propre égo corporatif ou qu’ils essaient de montrer ce qu’ils savent faire d’amusant avec les technologies Web.

08. Mettez régulièrement votre site à jour ou montrez au moins qu’il a été révisé récemment
Les gens accordent plus de crédibilité aux sites dont le contenu a été révisé ou mis-à-jour récemment.

09. Faites un usage restreint de tout contenu promotionnel
Si possible, évitez les publicités sur votre site. Si vous devez intégrer des publicités, distinguez clairement le contenu publicitaire du contenu du site. Évitez les publicités pop-up à moins que vous soyez indifférent au fait d’ennuyer les utilisateurs et de perdre en crédibilité. Adoptez un style d’écriture clair, direct et sincère.

10. Évitez les erreurs en tous genres si petites soient-elles
Les erreurs typographiques et les liens brisés affectent la crédibilité d’un site plus que la plupart des gens pourraient le croire. Il est aussi important de maintenir votre site en ligne et fonctionnel.

2002 - THEBAN MAPPING PROJECT
Le site du Theban Mapping project, un projet américain de création d’une base de données archéologiques sur la région de Luxor, propose une vraie visite virtuelle d’une des zones archéologiques les plus importantes au monde : La Vallée des Rois. Une soixantaine de sites et/ou tombeaux sont répertoriés sur une carte. Chacun d’entre eux dispose d’une vidéo, d’une fiche extrêmement riche et détaillée et de photos.

Avec l’aide d’une technique de digitalisation au laser, l’intérieur des tombes a été totalement recréé. L’emploi de Javascript et Flash permet de visiter les lieux de manière réaliste et instructive. C’est vraiment très impressionnant, cela donne une autre perspective de ce que l’on peut créer en matière d’expériences éducatives avec le Webdesign.

Technical skill is mastery of complexity, while creativity is mastery of simplicity. (E Christopher Zeeman)

Comme le dit Zeeman, le contrôle de la simplicité est plus qu’important en matière de créativité. C’est aussi dans ce cadre que va se développer Processing.

2002 – PROCESSING
Processing est un environnement Open Source multiplateforme pour la programmation d’événements multimédia interactifs et génératifs. Créé par Benjamin Fry et Casey Reas, il est le prolongement de l’environnement de programmation graphique développé par John Maeda au MIT MediaLab dans son ouvrage Design by numbers. Ben Fry et Casey Reas sont eux-même d’ex-étudiants de John Maeda de l’Aesthetics & Computation Group du MIT.
Processing est tout particulièrement adapté à la création plastique et graphique interactive. Le logiciel fonctionne sur Mac, Windows et Linux, car il est basé sur la plateforme Java.

Depuis son lancement en 2002, une véritable communauté s’est développée autour de Processing, considérant le code comme support de création et de pratique artistique.
Processing possède un moteur d’affichage 2D/3D performant et permet la création de programmes visuels interactifs ou génératifs. De nombreux codes-source sont partagés par leurs auteurs, constituant ainsi une documentation variée et conviviale, propice à des expériences de toute nature.
Le projet de départ, Processing, permet de créer des programmes interactifs et génératifs auxquels s’ajoutent trois projets annexes, basés chacun sur la philosophie et la technologie de départ : Wiring et Arduino ouvrent Processing à l’électronique et à la robotique ; alors que Processing Mobile permet aux artistes de créer des programmes pour leurs téléphones portables.
Processing a reçu le prix Golden Nica à Ars Electronica 2005 dans la catégorie NetVision. Je vous conseille de jeter un œil attentif à cet événement chaque année car vous pouvez être presque sûr que les projets récompensés seront sous les feux des projecteurs les années suivantes.
Pour conclure, Processing est vraiment le chaînon manquant entre graphisme et développement.

2002 - XHTML Friends Network
En 2002, plusieurs personnes talentueuses comme Tantek Celik, Matthew Mulleweg et Eric Meyer ont commencé à travailler ensemble au sein d’un groupe répondant au nom d’HTML Friends Network (XFN). Une bonne partie de leurs travaux est disponible sur le Global Multimedia Protocol Group (http://gmpg.org). L’objectif principal de ce groupe est de “connecter les personnes à travers une simplicité incrémentale“. Cette idée de supplément de sémantique simple et incrémentale est devenue plus tard la base de ce qu’on appelle les Microformats et qu’il me semble important de développer un plus tard dans cette présentation.
Imaginez que votre navigateur vous permette d’ajouter des coordonnées publiées sur une page web en un clic dans votre carnet d’adresses Outlook ou GMail. Imaginez que Google propose les mêmes services que les sites d’annonces immobilières, d’offres d’emploi et les comparateurs de prix réunis au sein d’un seul moteur de recherche. Imaginez enfin qu’il ne faille qu’un clic pour ajouter tous les détails logistiques de votre séjour en vacances (dates, hôtels, billets d’avion et de train…) dans l’agenda de votre PDA. Ces scénarios ne sont plus de la science-fiction ! C’est ce que permettent les microformats. Ils permettent aux Webdesigners de rendre leurs créations et leurs contenus intelligents, c’est un retour au Web 1.0 de Tim Berners-Lee tel qu’il l’avait initialement imaginé. Quand on regarde de près les évolutions du Web 2.0, on peut d’ors-et déjà prédire des débats animés pour poser les bases d’un éventuel “Web 3.0” Le Web 3.0 sera-t-il davantage 1.0 que 2.0? La question est posée!

2003 - CSS Zen Garden
- Les outils de blogging deviennent plus conformes au Web sémantique en intégrant du (X)HTML
- Les Webdesigners s’approprient les CSS et redécouvrent le web sémantique avec le (X)HTML

CSS Zen Garden est une resource en ligne très importante. Le but du site est de montrer ce qu’il est possible de faire avec un design basé sur l’utilisation du CSS.

L’un des objectifs majeurs de CSS est de proposer une stylisation indépendante de la structure du document. HTML, par exemple, ne décrit que l’architecture interne, tandis que CSS décrit tous les aspects de la présentation. Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l’architecture d’un document.

Ainsi, les avantages des feuilles de style sont multiples :
- La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
- La conception d’un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d’être plus efficace.
- Dans le cas d’un site Web, la présentation est uniformisée : les documents (pages HTML) font références aux mêmes feuilles de styles. Cette caractéristique permet aussi une rapide remise en forme de l’aspect visuel.
- Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l’impression et une pour la lecture à l’écran. Certains navigateurs Web permettent au visiteur de choisir un style parmi plusieurs.
- Enfin, le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balise ni d’attribut de présentation.

La « cascade » est la combinaison de différentes sources de styles appliquées à un même document, selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner:

- Par origine des styles, issus de l’agent utilisateur, de l’auteur et de l’utilisateur. La priorité supérieure accordée aux styles de l’utilisateur est un des facteurs principaux de l’accessibilité des documents présentés à l’aide de CSS.
- Par média: une feuille de style générique peut s’appliquer à plusieurs media de restitution (affichage à l’écran, impression, projection) et être combinée avec des feuilles propres à chaque media.
- Selon l’architecture d’un ensemble de documents Web: une feuille de style générique peut s’appliquer à la totalité des pages d’un site Web, être combinée avec des feuilles propres à chaque rubrique de celui-ci, ainsi qu’avec des styles propres à telle ou telle page.
- Ou bien, selon l’architecture des feuilles elles-mêmes: une feuille de style externe au document peut être combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le compose (styles “en ligne“). Une feuille de style peut également importer une ou plusieurs autres feuilles externes.

Much of the Web is like an anthill built by ants on LSD. (Jakob Nielsen)

En 2002, face au développement des standards, on assiste à une veritable guerre des religions pendant laquelle de nombreux gourous du W3C ou spécialistes des standards n’hésites pas à critiquer haut-et-fort tout ce qui ne respecte pas les standards du Web. Evidemment, les habitués des technologies Flash, de l’animation et des sites esthétiques furent les premiers visés et je pense personnellement que cette approche conflictuelle n’a pas du tout aidé à la compréhension et à la bonne utilisation des standards.

2003 – FLASH COMMUNICATION SERVER
Macromedia lance The Flash Video Gallery, une vitrine technologique qui met en avant les grandes marques qui innovent en utilisant Flash Communication Server et Flash Media Server pour distribuer des contenus vidéo.

2003 – RED BULL
La boisson énergétique Red Bull propose une expérience interactive totalement immersive avec redbullcopilot.com. Multiples possibilités de paramétrage, 9 angles de caméra, animation vectorielle, contrôles audio…etc. C’est très gourmand en bande-passante mais en 2003, cela reste un site événement anticipant sur les réalisations futures avec la démocratisation du haut-débit.

2003 – SECOND LIFE
Dans la foulée de l’explosion des blogs, de MySpace et des podcasts, Second Life et son univers virtuel est annoncé comme un Web dans le Web. Pour les Webdesigners, ce genre de tentatives ouvre la porte sur de nouvelles possibilités.
Créé en 2003 et popularisé en 2006, Second Life repose sur un concept baptisé “Metavers” défini dès 1992 par Neil Stephenson dans son roman Snow Crash. A la différence d’un simple jeu vidéo en 3D, le metavers c’est à dire “méta-univers” est un monde créé artificiellement par un programme informatique et hébergeant une communauté d’utilisateurs présents sous forme d’avatars pouvant interagir entre eux ou avec des agents informatiques.

Malgré l’échec du Deuxième Monde début 2002, le principe sera repris par de nombreuses sociétés dont Linden Labs. Créée en 1999, la société lance officiellement Second Life en 2003, avant de connaître la consécration médiatique à l’automne 2006 en atteignant son premier million de membres. Comme pour le Deuxième Monde, SecondLife permet à chaque utilisateur d’être représenté par un avatar personnalisable, d’aménager son environnement mais surtout, et c’est sans doute sa principale nouveauté, d’acheter ou de vendre des objets et surtout des terrains. Initialement totalement vierge, ce territoire virtuel est confié aux “résidents” (les utilisateurs du programme). La principale originalité de Second Life consiste en effet à permettre à chaque utilisateur d’acquérir et/ou de créer du contenu (des bâtiments, véhicules, vêtements pour les avatars, etc.) et de le partager avec le reste de la communauté.
L’univers de Second Life est donc totalement conçu par sa communauté et limité uniquement par l’imagination des “résidents” ou presque. On y trouve des reproductions de lieux réels, des lieux imaginaires librement inspirés de la réalité passée ou future, voire des espaces totalement fantasques… Des industriels se sont également installés dans Second Life afin d’assurer la promotion de leur marque (comme IBM, Dell ou Amazon), de même que des administrations ou des universités. Reposant sur les créations des utilisateurs, Second Life reconnaît les droits des créateurs de contenu. Chaque utilisateur est juridiquement considéré comme l’auteur de ses créations et peut donc gérer ses droits patrimoniaux, c’est-à-dire commercialiser ses créations. Il n’était pas surprenant de voir il y a quelques mois des clients demander à leurs webdesigners ou agences de créer des représentations graphiques pour Second Life.

2003 – DESIGNING WITH WEB STANDARDS
Jeffrey Zeldman est webevangelist et auteur. Il dirige aussi un studio Web, “Happy Cog”. En 2003, il relance la polémique autour des standards Web en publiant “Designing With Web Standards“. Zeldman a aussi participé à la création du groupe The Web Standards Project qui regroupe des webdesigners professionnels qui se sont donnés pour mission d’encourager l’usage des standards et des recommandations du W3C.
Dans son ouvrage et ses interventions, il tend à démontrer que les sites respectant les standards du Web ne sont pas forcément inesthétiques ou non-adaptés au travail des designers Web. Ses livres et sites Web ont aussi participés à la promotion des concepts d’usabilité et d’accessibilité des sites Web grâce à l’utilisation accrue d’XHTML et de CSS.

2003 – ENCRE ET PAPIER ELECTRONIQUES
Le papier électronique également appelée papiel, e-paper, ou encre électronique, est une technique d’affichage sur support souple (papier ou plastique), modifiable électroniquement, et cherchant à imiter l’apparence d’une feuille imprimée.
Après avoir annoncé qu’il commercialiserait dès la fin de l’année 2003 le premier écran conçu avec le savoir-faire de l’américain E-Ink spécialisé dans l’encre électronique, Philips annonce dans une revue scientifique une autre technologie qui apporte la couleur et la possibilité d’afficher de la vidéo. Des avancées majeures qui achèvent de concrétiser le potentiel énorme de cette nouvelle technologie appelée à bouleverser son marché.

Comment ça marche ?
Dans un papier électronique ou “smart paper“, l’encre est insérée dans un sandwich de plastique lors de la fabrication. Ensuite, cette “encre“, le plus souvent des particules placées dans un liquide, remonte à la surface et devient visible ou invisible à la demande, le tout contrôlé par une batterie de composants transparents. Mais ce dispositif est limité à l’affichage en niveaux de gris. Pour la couleur, il fallait aller plus loin. C’est pourquoi les laboratoires de Philips travaillent depuis une dizaine d’années sur un principe appelé “électromouillage“.
Le principe est très simple et peut être utilisé pour l’affichage: chaque point est formé d’un petit réservoir contenant de l’eau et une goutte d’huile colorée. En appliquant un champ électrique, l’huile se comprime sur un bord, laissant apparaître le fond blanc du réservoir, et s’étale pour montrer sa couleur quand le champ est coupé. Le contrôle précis de la tension électrique permet d’agir sur l’intensité de la couleur.
Ce système n’apporterait rien de spectaculaire s’il n’était capable de produire facilement de la couleur et, surtout, d’afficher de la vidéo, ce qui est techniquement le cas aujourd’hui.

Tout cela est fort intéressant mais, quels sont les apports du point de vue de l’utilisateur final?
Tout d’abord, une bien meilleure lisibilité dans toutes les conditions, et ensuite une consommation d’énergie radicalement réduite. Plus simple qu’un écran à cristaux liquides, le procédé absorbe moins d’énergie et restitue quatre fois plus de lumière, notamment parce que la couleur est obtenue par la teinte de l’huile et non par des filtres teintés comme ceux des écrans plats. Tout comme la feuille de papier classique, la lisibilité est excellente car, au lieu de devoir apporter de la lumière pour créer l’effet de contraste comme les dispositifs habituels de rétro-éclairage, c’est la lumière ambiante qui est, en quelque sorte, recyclée… Non seulement le contraste est meilleur tout en étant obtenu de manière plus naturelle mais la lisibilité est également supérieure car elle n’est pas limitée par l’angle de vision, handicap traditionnel des écrans à cristaux liquides.
Enfin, autre avantage critique: L’économie d’énergie. Avec le papier électronique la consommation électrique est négligeable. La différence essentielle avec les écrans classiques c’est qu’aucune énergie n’est utilisée pour maintenir un affichage statique. Seule la modification de l’affichage (comme la vidéo) consomme du courant. Enfin, dernier atout, la souplesse de ces nouveaux écrans permet de réaliser des appareils moins fragiles, encore plus “tout-terrain”. On peut même envisager des écrans fixés sur la manche de votre veste.

Aujourd’hui, Gyricon, une filiale de Xerox et E-Ink commercialisent déjà différents types de panneaux de signalisation. E-Ink fournit également à Philips son “papier” monochrome, qui va d’abord le transformer en écran de téléphones et d’assistants numériques. Les écrans à “électromouillage” offrant couleur et vidéo, devraient être commercialisés dans quelques années. Suivant le support (verre ou plastique), l’écran sera rigide ou flexible. L’épaisseur du dispositif est aujourd’hui équivalente à un cheveu et demi. Verra-t-on prochainement des “posters électroniques” capables d’afficher la télévision comme dans le film Minority Report? Décidemment, il n’y a pas de quoi s’inquiéter outre-mesure pour le marché du Webdesign, puisqu’évidemment, ces supports pourront être connectés au Web. Cela concerne tout ce qui aujourd’hui est appelé le “Pervasive Computing“: des machines élémentaires limitées à des tâches basiques mais capables d’envoyer les résultats sur un réseau (comme une simple étiquette qui communique ses données et son statut en permanence, les fameuses “étiquettes actives” à base de RFID qui commencent à être expérimentées ici et là). On aura ainsi reproduit le schéma de l’Internet: Un réseau doté de nœuds individuellement peu intelligents mais qui, reliés par millions, produisent des résultats remarquables.

2002 – 2007 – MOTION DESIGN
Présent à l’origine sur le Web, le motion design qui associe design, animation, vidéo et effets visuels, trouve de nombreuses applications en broadcast, cinéma, vidéo et, désormais, en publicité.
De nombreuses grandes marques utilise le Motion Design de façon percutante dans leur communication et campagnes marketing pour se distinguer en proposant des expériences visuelles avant-gardistes.
En 2002, le Studio Tubatomic reçoit le prix Apple de l’année pour une série animée sur le Web basée sur des techniques de Motion Design.

En la matière, l’image fonctionne mieux que n’importe-quelle description. Donc, je vous propose de consulter le demo reel de Pierre Magnol de l’agence Kurtz-Media sur www.kurtzmedia.com.

Great design will not sell an inferior product, but it will enable a great product to achieve its maximum potential. (Thomas Watson Jr)

Evidemment, si le design Web et ses innovations sont importantes pour toute marque qui compte mieux toucher sa cible, il est bien évident que le concept du design qui fait vendre est complètement dépassé. Par contre, c’est un plus avéré dans la stratégie marketing d’une marque, d’un produit ou d’un service.

2004 – FLASH LITE
Flash Lite 1.1 devient disponibles sur les téléphones portables de dernière génération et accélère le développement des contenus interactifs sur mobiles.
Les nouvelles fonctions de connectivité réseau permettent aux contenus Flash de faire des requêtes dynamiques auprès des serveurs et de mettre toute la puissance des applications Internet dynamiques à la portée des téléphones mobiles. De nouvelles commandes permettent aux développeurs de créer des contenus Flash qui peuvent accéder aux fonctions spécifiques des téléphones, telles que l’envoi de messages multimédia, la numérotation, la vérification de l’état du réseau ou des batteries…

2004 – SWFOBJECT
La méthode FlashObject aussi connue sous le nom “Flash Satay“, est le résultat de nombreuses discussions initiées par Geoff Stearns, developpeur Flash.
FlashObject est une méthode pour intégrer du Flash dans un site web en lui permettant de rester compatible avec tous les navigateurs et les standards du Web.
La partie OBJECT assure la compatibilité avec certains navigateurs (dont Internet Explorer) et la partie EMBED assure la compatibilité avec d’autres navigateurs (dont Mozilla/Firefox).

2004 – VODAFONE FUTURE SITE
L’agence interactive North Kingdom remporte de multiples récompenses pour l’expérience interactive “Vodafone Future Site“. Le constructeur de technologies de communication propose ici sa vision de la mobilité: Une expérience virtuelle des usages des média mobiles de demain et un magazine dédié aux tendances et à l’influence des technologies mobiles sur la création contemporaine. Un site très innovant sur un axe Corporate traditionnellement conservateur.

2004 - LE TSUNAMI WEB 2.0
Plus qu’un concept marketing, plus qu’une évolution technologique… C’est une révolution des usages! Dans la mouvance du phénomène, on constate le développement de nouveaux usages et formats, des contenus plus facilement générés par les utilisateurs qu’auparant, la démocratisation des services Web qui existaient évidemment déjà à l’ère du 1.0, l’explosion des réseaux sociaux, le développement de la taxonomy et l’apparition de l’intelligence artificielle sur le Web avec des applications et des contenus interagissant seuls (ce qui est d’ailleurs davantage du Web 1.0 pour certains).

Parmi les supports et les usages nouveaux, le blogging, les réseaux sociaux, les podcasts et videocasts sont les plus significatifs. La localisation géographique est présente partout et en temps réel. La géo-localisation développe les capacités d’interactions des interfaces Web.

Tendances graphiques ≠ Design 2.0
Attention de ne pas confondre! On a beaucoup parlé sur la blogosphere de Design 2.0 en y associant des recettes toutes faites: Un peu d’Ajax, des typos en corps de caractère 48, des boutons en volume…. Le concept est dans la façon originale que le service trouve pour interagir avec ses utilisateurs. Ce n’est certainement pas du design, mais des tendances graphiques et esthétiques.
Ces tendances Web 2.0 sont, par exemple:
- Angles arrondis,
- Couleurs pastels et fluorescentes
- Polices de caractère de grande taille. Verdana, Arial et Georgia restent les principales polices utilisées.
- Glossy: Influence des écrans plats, fonds sombres, effets de miroir et de transparence.
- Epuration de l’espace graphique. L’influence de Google, un maximum de blanc, la recherche du minimalisme.
- Système de tag. Approche du clouding.
- Approche “design – friendly“.

Rien de tout cela ne peut être qualifié de design 2.0.

DESIGN 2.0
Le Design 2.0 pourrait se traduire par la création d’interfaces interactives davantage persuasives.
Pour moi, le Web 2.0, c’est la possibilité de repousser les barrières de l’interaction grâce à une approche du design qui permet de faciliter et d’inciter la participation de l’internaute. Il faut aller au-delà des apparances esthétiques. Qu’est-ce que finalement le Web 2.0 ? Quel sens a-t-il pour l’internaute ? Quel impact, quel rôle peut-il jouer d’un point de vue sociétal, technologique, culturel… ?

Par exemple, citons quelques tendances récentes en matière de design 2.0:
- Aider l’internaute à mieux comprendre l’application et son fonctionnement.
- Prendre en compte la vie privé des utilisateurs.
- Prendre en compte les différentes origines des internautes et par conséquence les langages utilisés.
- Montrer l’activité sur un site (dernière news – dernier commentaires, vidéo du jour…)… Les possibilités sont nombreuses.
Le Web 2.0, même si on se trompe souvent de débat avec les tendances graphiques du moment a permit de redonner de la visibilité et de la crédibilité au Webdesign.

Je vous laisse d’ailleurs méditer sur cette citation de Chip Rosenthal :
I’m not schooled in the science of human factors, but I suspect surprise is not an element of a robust user interface. (Chip Rosenthal)

2004 - MICROFORMATS
Les microformats ont été annoncés pour la première fois en 2004 lors d’une O’Reilly ETech conference.

Les Microformats font qu’il est facile tant pour vous que pour quiconque de partager et de réutiliser les données dans vos pages Web et les contenus quelque part sur le réseau. Par exemple, faire vivre un carnet d’adresses, explorer des relations sociales, partager des critiques, taguer des contenus ou publier et découvrir des événements.
Les Microformats sont de petits morceaux de code HTML qui représentent des personnes, desévénements, des mots-clés… dans les pages Web.
Les “Design patterns” donnent aux auteurs de Microformats un vocabulaire pour exprimer leurs idées de manière cohérente avec ce qui a déjà été produit.
En ajoutant des Microformats, il est possible d’extraire la donnée à partir du HTML dans n’importe quel format désiré par l’utilisateur (même ceux que vous pensez comme peu importants ou que vous ne connaissez pas). C’est de la donnée ouverte.

La base technique du web 3.0
Les Microformats sont la base technique du “Web 3.0“, une nouvelle approche pragmatique du Web sémantique. Concrètement, les Microformats sont des “tags” qu’on insèrent dans le code des pages Web pour préciser le contenu des balises HTML. Ces tags n’apparaissent pas à l’écran car leur rôle est uniquement d’indiquer le type de données structurées que contiennent les éléments HTML. Ils ne sont pas lus par des humains, mais par des logiciels (navigateurs et moteurs de recherche).

Les navigateurs de nouvelle génération (Internet Explorer 8 et Firefox 3) supportent nativement les Microformats. Ils peuvent ainsi repérer immédiatement un objet/adresse via le tag “hCard“, un CV via “hResume“, l’évaluation d’un produit via “hReview“, etc. Ils sont ainsi capables de “passer” cet objet aux divers logiciels clients: Carnet d’adresses, agenda, etc.

Un outil au service du design.
Les Microformats permettent de donner du sens à certaines composantes d’un site internet et de donner du sens à des objets, à de l’information… C’est donc une forme de design.

LES MICROFORMATS SONT:
• Une façon de penser les données,
• Un concept ancien,
• Des principes de design pour les formats,
• Des ajouts d’information dans le code HTML,
• Ce sont des attributs de classe comme le CSS mais ils s’agit de créer des méta-données, pas de styliser le contenu,
• Adaptés aux comportements actuels et aux modèles d’usages,
• Un ensemble de formats de données standards simples et ouverts…

LES MICROFORMATS NE SONT PAS:
• Un nouveau langage, compatibilité avec HTML 4.01 et le XHTML,
• Une approche complètement nouvelle qui jette ce qui fonctionne aujourd’hui,
• Infiniment extensibles et ouverts sans fins…

LES PRINCIPES DES MICROFORMATS:
• Résoudre un problème spécifique,
• Démarrer aussi simple que possible,
• Un design d’abord conçu pour les humains, ensuite pour les machines,
• Réutilisation de briques provenant de standards largement adoptés,
• Modularité, facilité d’insertion,
• Permettre et encourager le développement décentralisé des contenus et services.

En ajoutant des microformats à votre code HTML, la page elle-même devient l’API.
En tordant légèrement un gabarit HTML, beaucoup de sites peuvent créer des millions de comportements Microformats en quelques minutes.

Des sites comme Yahoo Local, Flickr, Meet-up, Upcoming, Eventful, Edgeio, Technorati, Ice Rocket, le .Mac mail d’Apple et bien d’autres utilisent de nombreux Microformats.

DIAGRAMME MICROFORMATS
Pour illustrer mes propos, voici la traduction d’un schéma réalisé par un designer brésilien qui matérialise clairement comment les Microformats se mettent en place au cœur d’une page HTML ou XHTML.

EXEMPLE DE CODE MICROFORMATS
Prenons par exemple le Microformat “Hcard” et voyons comment il s’applique.
Nous avons par exemple les données suivantes :

Cf.slides!!

Lorsque ces informations vont se retrouver dans ma page HTML, elles vont apparaître comme ceci:

Cf. slides!!

On rajoute simplement les fameux markups Microformats hcard qui permettent de comprendre les données de type “vcard” qui sont présentes dans ma page :

Cf.slides!!

On ajoute juste une classe sémantique
Grâce à ces marqueurs, les informations vont pouvoir être digérées intelligemment par une application externe pour en faire quelque chose, pour traduire le contenu en services et usages intelligents.

AUTRES MICROFORMATS
On vient de parler d’hCard, qui modélise les vCards et décrit les personnes, les lieux et les organisations, et d’hCalendar qui modélise iCalendar et s’utilise pour décrire des événements. D’autres formats gèrent les CVs (”hResume“), les critiques (”hReview” pour les produits, les endroits, les sites web, les films, etc.), les citations, la syndication et bien plus encore.

XFN: Pour les réseaux sociaux.
rel-license: pour les liens référençant des contenus sous License.
XOXO: pour les listes et plans.
VoteLinks: pour/contre/ un lien (ou s’abstenir).
rel-nofollow: une tentative pour décourager le spam venant de tiers.
rel-tag: pour les contenus tagués.
xFolk: pour les liens tagués.
adr: pour les adresses postales.
geo: pour faciliter la géolocalisation.
hAtom: pour la syndication.
hListing: pour les annonces classées.
hResume: pour les CVs.
hReview: pour les critiques.
rel-directory: pour la création et inclusion de répertoires distribués…

… et beaucoup d’autres en cours de développement.

Il existe plusieurs catégories de Microformats. Les “simples” comme rel-tag, xoxo, xfn, rel-licence définissant des types d’objets très simples. Rel-tag indique par exemple qu’un mot qui s’affiche à l’écran est un tag qui définit le contenu de la page ou d’un article. Rel-tag peut être utilisé par les bases de données de favoris en ligne (del.icio.us par exemple) ou de photos (Flickr), pour effectuer une recherche complémentaire en un clic. Les objets plus complexes comme les CVs, adresses, événements, etc. reposent sur des Microformats “composés” qui intègrent différents Microformats “simples“. hResume s’appuie par exemple sur hCard (coordonnées), hCalendar (événements) et rel-tag (mots-clés) pour encoder un curriculum vitae.
En exposant ainsi des structures de données formellement définies, le site web qui recourt aux Microformats augmente l’interactivité avec l’internaute. Il donne aussi la possibilité aux moteurs de recherche d’étendre leur domaine d’activité. En effet, jusqu’à présent les moteurs de recherche se limitaient à l’indexation des textes contenus dans les pages Web. Ils calculent la densité de liens et de mots-clés des pages pour créer un index permettant de les retrouver. Avec les Microformats, les moteurs indexent des objets dans des bases de données. Comme ils travaillent à partir d’une information formelle, ils peuvent constituer des bases de données thématiques (emploi, immobilier, produits et services, personnes, etc) sans difficulté. La recherche dans une telle base de données donne des résultats bien plus pertinents qu’une indexation traditionnelle en mode “full text“.
Ils normalisent les modèles existants d’usages des contenus en utilisant des noms de classes brefs et descriptifs souvent basés sur des standards existants et inter-opérables pour permettre un développement décentralisé de ressources, outils et services.
Il y a trois endroits majeurs où vous pouvez encoder du “sens” supplémentaire: l’élément “méta“, l’attribut de classe et les attributs rel/rev. Le fait que les Microformats poussent du contenu pour le rendre visible, ils se concentrent sur les deux derniers endroits où peut être ajoutée de la sémantique, les attributs “class” et “rel/rev“.
Reste que, même s’il existe une vingtaine de Microformats à l’heure actuelle, il reste à développer des formats métier: E-commerce, format de catalogues en ligne, paiement, etc.
Par exemple, si une société souhaite que son information de contact soit facilement trouvée et partagée, elle la publierait avec hCard. De la même manière, si une organisation est en train de planifier une série d’évènements et souhaite qu’un maximum de personnes en soient informées, elle publierait alors sa liste d’événements avec hCalendar…
La clé ici est que les Microformats soient suffisamment simples/faciles pour que toutes les organisations aient leurs propres auteurs/designers Web qui puissent facilement les ajouter eux-mêmes. Ajouter des Microformats est par exemple plus facile que de publier un fil RSS. Vous n’avez pas besoin d’être programmeur. Quiconque avec quelques compétences décentes en publication/écriture (X)HTML+CSS peut utiliser les Microformats.

2004 – NEWSMAP
Un nouveau concept pour la visualisation de l’information ! Le site de Marcos Weskamp, marumushi.com, propose une newsmap en Flash des Google News, avec une ergonomie particulière. Pus le nombre d’articles recensés par Google est important, plus sa place dans le graphique l’est également. Les informations sont classées par pays auxquels l’utilisateur peut avoir accès au moyen d’onglets, et sont visibles dans des espaces réservés dont la taille correspond à l’importance accordée à l’info dans chaque pays. On peut donc comparer très facilement combien de place avait été réservée dans tel journal de tel pays pour tel ou tel événement. La couleur de fond renseigne sur la catégorie de l’information.
Ainsi, on peut très aisément jongler entre les dates, les catégories et les pays. Ce site a gagné, en 2004, un prix Ars Electronica dans la catégorie Netvision.
Marcos Weskamp, originaire d’Argentine, a inventé une autre manière de lire les informations, qui selon lui, sont difficiles à “apprécier” (surtout les liens invisibles tissées entre elles) compte tenu de leur nombre.

2005 – THE ZEN OF CSS DESIGN
The Zen of CSS Design est publié par Dave Shea, le créateur de CSS Zen Garden et la spécialiste de design Web, Molly Holzschlag. Livre tout autant incontournable que le site Web.

2005 – EXPLOSION DE LA VIDEO EN LIGNE
C’est d’abord une profusion de plateformes de partage de contenus vidéo avec YouTube, Dailymotion et les autres. A une période, on en voit même apparaître plus de trois nouveaux par jour.

La vidéo devient portable. On voit d’ailleurs apparaître le phénomène des Vlogs (pour video-blogs) et des télévisions verticales, communautaires ou individuelles. Evidemment, pour les webdesigners, cela est synonyme de la possibilité d’intégrer plus facilement de la vidéo dans leurs créations.

| View

2005 – NABAZTAG
Un Nabaztag est un objet communiquant représentant un lapin très stylisé (nabaztag signifie “lièvre” en arménien). Créé par Rafi Haladjian et Olivier Mével, Les premières versions de ce petit lapin orienté Web ont été développées par l’école d’ingénieurs ESME-Sudria à Ivry Sur Seine. Il est produit par la société française Violet.
Il mesure 23 cm de haut et se connecte à Internet par ondes Wi-Fi 802.11b. Il communique avec son utilisateur en émettant des messages vocaux, lumineux ou en remuant les oreilles. Il diffuse des informations comme la météo, la bourse, la qualité de l’air, la circulation routière du périphérique parisien, l’arrivée d’e-mail etc.
Il existe aussi un nouveau Nabaztag, sorti début décembre 2006: le Nabaztag/tag. Au niveau du nombril est placé un micro permettant de contrôler le lapin grâce à la voix, d’envoyer des messages vocaux aux autres Nabaztags. Il est également possible d’écouter des sons en streaming (ce qui permet l’utilisation des services de Web-radios). Il sert aussi de reconnaissance de présence. Le nouveau modèle est également capable de reconnaître des tags Rfid. Le premier usage des étiquettes Rfid est inauguré avec Gallimard Jeunesse en décembre 2007. Violet et Gallimard lance en effet le premier livre muni d’une puce Rfid que Nabaztag sait identifier et lire. Courant 2008, Violet va proposer de nouveaux livres Rfid avec d’autres éditeurs. En 2008, Violet va par ailleurs proposer des puces Rfid qui permettront de connecter n’importe quel objet.
La seconde grande nouveauté est la capacité de Nabaztag Tag à “renifler” des objets équipés d’une étiquette RFID. On peut par exemple placer une étiquette sur un trousseau de clef qui envoie un message à un proche dès qu’on rentre chez soi ou encore placer une étiquette sur une boite de petits pois qui déclencherait la lecture audio de recettes de cuisine.
Mais le mieux pour les “touches à tout” reste la possibilité de créer ses propres programmes avec l’API ouverte, permettant l’intégration du lapin avec des applications existantes… Les objets communiquant et les réseaux pervasifs sont définitivement un champ des possibles à explorer pour les Webdesigners.

2005 – FUSIONS ET CONCURRENCES
Une des nouvelles chocs dans le monde de la création Web en 2005 fut assurément l’annonce du rapprochement entre les sociétés Adobe et Macromedia. La première a acquise une renommée mondiale grâce à Photoshop, leader sur le marché du logiciel de retouche d’image et la seconde n’est pas en reste puisque Flash est aussi le premier logiciel de création de contenus animés pour le Web. Pour les Webdesigners, cela est synonyme de perspectives technologiques passionnantes et prometteuses.
Quelques mois après, Microsoft se lance aussi dans la bataille avec une volonté clairement affiché de dominer le marché des outils design pour le Web. A l’annonce du lancement de ses nouveaux produits, Microsoft a rencontré beaucoup de résistance. Il faut dire que ses produits ont la réputation d’être difficiles à utiliser, pas franchement esthétiques, pas intuitifs, truffés de bugs, confus, et réalisés par des ingénieurs plutôt que par des designers.
Cependant, que ce soit le développement de .Net, de la suite de logicielles de création Microsoft Expression, ou encore du concurrent direct de Flash, Silverlight, les premiers résultats sont impressionnants de qualité.
Pour Microsoft, le challenge, à travers ces outils, est de faciliter le dialogue et le travail entre designers et développeurs.
Quelque soit l’issu de la compétition, les designers ne peuvent que se réjouir car cela va amener de nouvelles choses et c’est tant mieux.

2005 – AGENCYNET
La visite virtuelle interactive franchit une nouvelle étape avec la réalisation d’AgencyNet qui permet à l’utilisateur de découvrir de l’intérieur l’agence et ses services. Grâce à Flash et à quelques plugins, la 3D est parfaitement recréée.

2005 – NYC TRAFFIC
Justin Everett Church développe l’application mobile en temps réel NYC Traffic. Entièrement réalisée en Flash elle détaille les informations de circulation routière en direct des différentes intersections de Manhattan.

2005 – LEOBURNETT
Nouvelle expérience utilisateur immersive avec le site de présentation de l’agence Leoburnett. Le site s’illustre notamment par une représentation d’espaces multidimensionnelles. Ce site présente le portfolio de la compagnie Leo Burnett, agence spécialisée en publicité qui fait partie du groupe mondial de communication Publicis. La structure de ce site est une arborescence en étoile. De la page d’accueil, il est possible d’accéder aux sections des clients de l’agence, et dans chacune de ces sections, il est possible d’y consulter les différentes réalisations. A chaque instants, il est possible de remonter dans la structure du site en cliquant dans un espace blanc. On a l’impression que c’est de la 3D, mais il n’en est rien. Un site vraiment impressionnant à consulter d’urgence si ce n’est pas encore fait. Même si la navigation est peu commune, on trouve vite son chemin et on comprend facilement où trouver tel ou tel type de données.

A propos d’architecture de l’information et de design, j’aime beaucoup cette citation de Larry McVoy qui pourrait très bien s’appliquer au design Web.
Architect: Someone who knows the difference between that which could be done and that which should be done. (Larry McVoy)

2005 - Rich Internet Applications
L’Internet riche regroupe aujourd’hui une multitude de concepts divers et variés trouvant un axe commun dans la volonté de changer les usages et de rendre la navigation toujours plus simple et intuitive.
Le terme RIA fut imaginé par Macromedia dans un livre blanc en mars 2002. Les RIA pour Rich Internet Application offrent de nouvelles possibilités aux utilisateurs en les ouvrant au plus grand nombre. Au delà d’un aspect “rich media“, c’est à dire permettant par exemple l’utilisation de vidéos, ou de musique facilement, il faut ajouter une nouvelle perception de la navigation: Le modèle de page en page n’existe plus. Les codes ont changés. Un bouton de formulaire ne va pas forcément recharger toute la page, il peut par exemple avoir une influence sur une partie de la page ou charger une image. Ce sont des concepts très bien repris par Gmail (la messagerie de Google) par exemple, en simulant des comportements d’un vrai client mail, tout en offrant les avantages du net: Accès à un même point, de n’importe où. Cela permet donc de décentraliser les données en ligne. Les technologies utilisées ont permis une adaptation souple et rapide des utilisateurs car les comportements que l’on retrouve sont plutôt mimés par rapport à une application classique.
En effet, ces nouvelles interfaces et les technologies qui en découlent permettent d’envisager de nombreuses nouvelles utilisations du Web comme par exemple de la retouche photo, de la vidéo ou toute manipulation de contenu “riche” (élément 3D, carte enrichie, etc.) directement à travers un site Internet.
L’Internet Riche marquera enfin le début d’une vraie collaboration entre graphistes et développeurs. Ce mariage permettra la création d’interfaces évoluées avec des ergonomies pensées en amont de toute phase de création pour imaginer de nouveaux usages du web, et ainsi replacer l’utilisateur au centre des réflexions et des applications créés. D’après Forrester, 70% des utilisateurs plébiscitent aujourd’hui l’ergonomie de ces nouvelles interfaces.

2005 – THE VENICE PROJECT (JOOST)
D’abord appelé The Venice Project, puis Joost, ce projet de platefome vidéo interactive supplante la télévision et l’ordinateur en créant une nouvelle forme de broadcast interactif. Après KaZaA et Skype, les deux inventeurs et entrepreneurs Zennström et Friis révolutionnent le Web pour la troisième fois à travers leur toute nouvelle plateforme de diffusion vidéo Joost. Il s’agit d’une nouvelle forme de diffusion de la vidéo en ligne, basée sur les technologies de Peer to Peer.
Travaillant sous le nom de code “The Venice Project“, Zennstrom et Friis ont également réalisés l’exploit de mettre sur pied des équipes de développeurs dans une demi-douzaine de villes autour du monde. Le projet fonctionne parfaitement et laisse à penser que la télévision traditionnelle est en train de vivre ses dernières heures de gloire. Reste à inventer de nouveaux contenus interactifs pour ces nouveaux supports qui peuvent faire plus que de retransmettre de la vidéo.

2005 - HAN
Après avoir élaboré le concept il y a quelques années sous le nom d’ElectAura-Net, NTT a présenté en 2005 une technologie plus aboutie pour transformer le corps humain en réseau de transmission de données à haut-débit. Désormais, plus besoin d’équiper les sols ou les plafonds de capteurs comme c’était le cas dans la version antérieure de cette technologie. RedTacton utilise un transmetteur et des récepteurs pour faire passer les données via le faible champ électrique généré par le corps. La connexion entre deux appareils se fait naturellement par les mouvements physiques. RedTacton fonctionne par le toucher. Il suffit de saisir, d’effleurer ou de faire un pas pour générer le champ électrique entre deux appareils et déclencher ou arrêter un transfert.
Avec un site très didactique et visiblement destiné à faire parler de son innovation, NTT introduit le concept de “réseau local humain” (Human Area Network, HAN) en complément, voire en substitution du “réseau local personnel” (Personal Area Network, PAN) bien connu des utilisateurs de Bluetooth notamment. Il faut reconnaître qu’avec un taux de transfert possible de 10 Mb/s, qui ne souffre pas des problèmes d’interférence que rencontrent les technologies radios, la technologie de NTT semble ne pas craindre les comparaisons. A priori, pas de problèmes non-plus d’ondes néfastes à la santé (quoiqu’on ne sache rien encore d’une exposition permanente du corps à la polarisation). Enfin, un environnement de communication peut être établi facilement et à coût réduit en utilisant les propriétés conductrices des objets.
Les applications envisagées sont assez proches de celles des PAN. En serrant la main d’une personne, vous transférez automatiquement votre carte de visite à son téléphone qui se trouve dans une de ses poches. Quand vous touchez votre ordinateur, la carte de visite est transmise à votre gestionnaire de contact. Il suffit de toucher sa chaîne hifi pour entendre la musique sélectionnée dans son casque audio. Il suffit d’effleurer la télévision pour que son caméscope numérique portable y diffuse un film. Il suffit de s’asseoir à une table pour qu’un réseau local se forme entre les participants d’une réunion. En attrapant une boîte de médicament qui ne vous est pas destinée, celle-ci pourrait se mettre à sonner. Juste en vous asseyant dans votre voiture, les réglages se mettent en place automatiquement…etc. Le nombre d’usages possibles est presque illimité.
NTT imagine notamment des affiches publicitaires qui fournissent des informations complémentaires sur les produit proposés dès qu’on les touche.

Peut-être qu’avec ces technologies, inventées il y a déjà 3 ans, le Webdesigner va devoir imaginer de nouvelles formes d’interfaces et travailler directement sur le corps humain qui deviendra un peu plus proche du mythe du cyborg.

Cela nous rapproche de la citation de Bjarn Stroustrup :
Design and programming are human activities; forget that and all is lost. (Bjarne Stroustrup)

2005 - CHRONOTEXT
Arial Malka, expert israélien en processing développe une nouvelle forme de lecture des Manuscrits de la Mer Morte. A visiter sur www.chronotext.org

2005 – GOOGLE EARTH
2005 fut assurémment l’année de la géolocalisation et de la visualisation 3D sur le Web avec des projets comme Google Earth, Microsoft Virtual Earth, ou encore Nasa World Wind.
Google Earth est un logiciel de la société Google permettant une visualisation de la terre avec un assemblage de photographies aériennes ou satellitaires.
Plusieurs grandes villes peuvent être observées avec une résolution suffisamment élevée pour pouvoir distinguer individuellement chaque immeuble, maison et même voiture.
Le logiciel Google Earth est également pourvu des données topographiques rassemblées par la NASA lors de la mission SRTM, ce qui lui permet d’afficher la surface de la Terre en 3D.

Ces cartes numériques alimentées par la masse immense de contenus créés par les utilisateurs, qu’il s’agisse de photos de voyage ou de notes thématiques, forment la charpente d’une nouvelle géographie.

APPLICATIONS GOOGLE EARTH
Au printemps 2007, moins de deux ans après avoir vu le jour, Google Earth avait déjà été téléchargé plus de 250 millions de fois. Les circonstances de sa naissance remontent au début des années 2000. A l’époque, les prix de l’imagerie aérienne et satellitaire baisse considerablement et on observe une plus grande disponibilité des informations topographiques et géographiques collectées par les gouvernements du monde entier. Le tout s’accompagne d’une normalisation des technologies de modélisation 3D (développées à l’origine pour les jeux vidéo) et l’augmentation du parc mondial d’ordinateurs équipés de cartes graphiques 3D de forte capacité. Les résultats sont d’ailleurs parfois saisissants.

On commence donc même à voir apparaître des logos de marques dans l’application. Des sociétés utilisent aussi les possibilités offertes par les solutions d’édition de contenus pour afficher de l’information dédiée à la surface du globe Google Earth.

Le Musée mémorial de l’Holocauste, aux Etats-Unis, s’est associé à Google pour indiquer la situation géographique de 1,600 villages du Darfour ravagés par la campagne du gouvernement soudanais contre les tribus non-arabes. En faisant un gros plan sur ces points, un utilisateur peut voir les restes des villages détruits par les milices pro-gouvernementales des Janjawids. Cette réalité se trouve sur la même planète numérique que visitent de nombreux Américains pour y voir leur maison ou l’école que fréquentent leurs enfants. Aucun média n’a pu faire ça jusqu’à aujourd’hui. Le but est donc de répertorier dans les cartes de Google Earth les lieux où ont été perpetués les horreurs du Darfour, et ainsi faire prendre conscience à tous les internautes de l’ampleur de l’évènement.

On rajoute des données sur le planisphère de Google Earth sous forme de couches d’informations que l’on “dépose” à la surface du globe virtuel. Un utilisateur lambda, habile en modélisation 3D, peut donc créer une nouvelle couche d’informations géographiques et y inclure des bâtiments, des ponts… SketchUp est un logiciel qui permet de créer facilement des formes en 3D (plus facilement que Blender). Une extension permet aussi de sauvegarder les formes dans Google Earth (format kmz).

Google a donc bien compris comme Joel Spolsky que :
Design adds value faster than it adds cost. (Joel Spolsky)

2006 – AMERICAN APPAREL ET SECOND LIFE
Vendre des vêtements virtuels contre monnaie sonnante et trébuchante ? L’initiative peut paraître cocasse. C’est pourtant une des nouvelles activités de la chaîne de prêt-à-porter et d’accessoires de mode American Apparel. Depuis le 17 juin, date de l’inauguration de sa boutique dans Second Life, le commerçant a ainsi écoulé plus de 2,000 produits immatériels d’une valeur unitaire d’un dollar ou moins.
A peine de quoi rentabiliser l’achat du terrain virtuel nécessaire à la construction du magasin. Mais l’essentiel n’est pas là. American Apparel, qui compte quelques 200 enseignes aux quatre coins du monde, entendait bien utiliser son magasin virtuel pour améliorer ses ventes physiques et booster son site de commerce électronique qui réalisait un million de dollars de chiffre d’affaires en Mai 2006.
Les Second Lifers sont ainsi particulièrement chouchoutés par la chaîne de prêt-à-porter, puisque tout achat virtuel au sein du jeu donne droit à un coupon de réduction de 15 % à valoir dans un vrai magasin. L’objectif est de transformer le buzz lié à la présence de la marque au sein du jeu en trafic réel dans les enseignes de la chaîne. American Apparel prévoyait également de tester de nouvelles lignes de vêtement en avant-première dans l’univers virtuel avant de les proposer dans les véritables boutiques.
Mais toute médaille, même virtuelle, à un revers. Quelques jours après l’ouverture de la boutique dans Second Life, un groupe d’avatars s’est emparé des locaux pour protester contre l’utilisation d’images jugées provocantes et suggestives mettant en scène de jeunes femmes dans le cadre des campagnes publicitaires réelles de la marque. Pas de quoi arrêter American Apparel qui prévoyait de développer sa boutique en embauchant des vendeurs pour animer son magasin dématérialisé.

2006 – DEMOCRATISATION DU WEB A HAUT DEBIT.
80 % des accès à Internet à domicile sont des connexions ADSL ou câble, ce qui concerne 16 millions de personnes en France.
On constate aussi une évolution de l’offre. Dans le même temps, il y a une véritable professionnalisation des agences interactives. En France, il y a désormais Plus de 50 % d’internautes (26 millions d’internautes selon Médiamétrie).
En un an, le temps passé sur Internet a globalement augmenté de près de 4 heures.

2006 – FORT DEVELOPPEMENT DU MARCHE DE LA PUBLICITE INTERACTIVE
Plus d’1 milliard d’euros bruts dépensé par les annonceurs (TNS Media, Intelligence/IAB).
Déjà en 2005, 1400 marques ont fait de la publicité sur Internet. Soit 30 % de plus qu’en 2004. Elles ont dépensé plus d’1,1 milliard d’euros bruts en 2005 soit une progression de 74 % en un an.
La gestion de la publicité interactive ne cesse de s’affiner grâce à des outils toujours plus précis pour mesurer les effets d’une campagne. Les innovations se multiplient, notamment avec le rich media (plus de vidéo, plus d’interactivité), l’irruption de la publicité sur des espaces jusqu’ici inexploités (podcasting, fils RSS), la généralisation de la technologie Flash 8 (vidéo compressée) et l’utilisation de techniques d’e-mailing personnalisées.
Les services Web, les réseaux sociaux, les technologies 2.0 placent l’usager au centre de la toile. Il devient lui-même acteur de la chaîne de communication et donc potentiellement des canaux de publicité.
La vidéo en ligne explose aux Etats-Unis. Les investissements pour les publicités vidéo ont atteint 225 millions de dollars en 2005. D’après les prévisions, elles devraient dépasser un montant d’1,5 milliard en 2009.
Avec le déploiement de nouveaux supports de communication et l’essor du Web, les annonceurs doivent modifier leur manière d’attirer des consommateurs qui sont déjà très sollicités. Les experts du marketing ne peuvent désormais plus faire l’impasse sur les technologies; le client les attend comme un dû, il est à la recherche a la fois d’interactivité et de services en ligne.
Les technologies disponibles grâce à l’explosion des débits et l’avènement du rich média et désormais les outils communautaires du Web2.0 (flux RSS, vidéo-blogs, podcasting, réseaux sociaux…), font entrer l’internaute dans une nouvelle ère.
Plus qu’une révolution du marketing, c’est toute la chaîne de l’information qui est remise en question. La relation client est totalement ébranlée, le pouvoir du marché revient au consommateur.
Les consommateurs ont un besoin croissant de communiquer et d’interagir avec les marques et le monde de l’entreprise.

2006 - ADVERGAMING
L’Advergaming est une pratique publicitaire utilisant les jeux sur ordinateurs (en particulier les jeux online) pour promouvoir un produit, une marque, un point de vue.
Le marché des jeux online se développe: 105 millions de joueurs en 2005.
- 50% des joueurs passent 25 minutes et plus sur les jeux.
- 90% des joueurs, qui sont sollicités par une connaissance, participent aux jeux.
Le marché dégage 173 M$ de recettes en 2006. Plus de 560 M$ de recettes sont attendues en 2009.

Il existe 3 principales formes d’advergames :
1. Les jeux sont directement liés à l’identité d’un jeu ou d’un produit. Ils sont disponibles sur le site Web de ces derniers et ont pour objectif principal de retenir le visiteur.
2. Les jeux ont pour objectif d’informer et de former l’utilisateur. Il s’agit de faire partager des connaissances, voir un état d’esprit. Il peut s’agit d’une problématique commerciale, aussi politique ou éducative. Par exemple, le jeu Food Force réalisé par les Nations Unis.
3. Il peut s’agir de jeux dans lesquelles la publicité agit de manière plus subtile. Par exemple, un jeu de conduite en ligne dont les voitures utilisées portent le logo d’un constructeur ou d’une marque, par exemple.

On dénombre également 6 modes de représentation de l’advergaming :
1. Dynamic in game advertising: Des contenus publicitaires évolutifs et modifiables à la demande.
2. Inter-Level advertising: Animation Flash ou vidéo insérer pendant les phases de changement des jeux (introduction, changement de niveau…).
3. Plot Integration: Le produit ou la marque est disponible dans le jeu. L’avatar, le personnage dirigé par le joueur est capable de l’utiliser.
4. Pre-Roll: Spot de publicité pendant les temps de chargement des softs.
5. Product Placement: Comme au cinéma, on intégre des marques ou des produits dans l’environnement du jeu.
6. Sponsoring et partenariat: Sites Web, concours et autres événements…

2006 - Flash Lite est disponible sur 100 millions de portables.
Les services Web pour mobiles se développent à vitesse fulgurante.

2006 – ETSI Site E-COMMERCE EN FLASH
Etsy.com est un site de vente en ligne de petits objets faits “main“. On peut trier les objets par couleur, par géolocalisation…etc. En termes d’ergonomie et d’expérience utilisateur sur un site d’e-commerce, c’est extrêmement performant et séduisant. Les modules d’exploration sont très bien réalisés et très efficaces. Ils proposent une exploration peu commune au lieu des catégorisations classiques. Le site invite l’utilisateur à rechercher de manière ludique les objets.

2006 – SPAM RECYCLING
Cette application que l’on peut ranger dans la catégorie “generative art” propose de recycler ses spams pour les transformer sous une autre forme. Dans spamrecycling.com, chaque mail est décomposé pour en créer une composition animée, graphique et le tout en flash. Vous envoyez simplement vos spams à spam@spamrecycling.com et l’application fera le reste.

2006 – PILEUS
Pileus est un parapluie connecté à l’Internet et qui projette à sa surface des images du Web. Equipé d’un GPS, il peut vous aider à vous repérer en vous connectant à Google Earth. Lancé par Sho Hashimoto et Takashi Matsumoto, chercheurs au Laboratoire de design d’interaction humain-ordinateur de l’Université de Keio. Pileus a reçu d’ailleurs le prix de l’innovation à Laval Virtual 2007 grâce à sa fonction de géolocalisation couplée à Google Earth.

2007 - HYPERVIDEO
L’hypervidéo ou comment naviguer à l’intérieur d’une vidéo ou “vidéo interactive“.
L’ergonomie des sites Web connait actuellement une petite révolution: La navigation dans une vidéo.
Inventé en 1998 au M.I.T., l’hypervidéo redevient aujourd’hui à la mode. Utilisé dans le contexte online, ce procédé rend le site Web plus interactif et surtout plus immersif.
En effet, cela permet de scénariser d’avantage le message du site. Le son (musique et bruitages) et la mise en scène (travelling, changement de rythme,…) sont autant d’éléments qui construisent l’univers du site et renforce son efficacité.
Du point de vue de l’utilisateur, c’est surprenant et valorisant car c’est lui qui décide de son parcours.
La navigation reste intuitive et peut se faire soit à la souris soit au clavier, ou via les deux.
Malheureusement, cette innovation néglige l’accessibilité et pour bénéficier d’une expérience optimale une connexion haut-débit est indispensable.
Quelques exemples, avec tout d’abord une campagne lancée par Nike en 2006 qui est de toute beauté.
Et aussi, le groupe canadien Arcade Fire qui s’est fait connaître du monde entier grâce à son clip/site Web réalisé avec de l’hypervidéo.

2007 – LE WEB EN HAUTE-DEFINITION
La vidéo haute-définition envahit le Web. Jusqu’à une définition en 1920×1080. C’est une relance de la course au très haut-débit.
A noter que le lecteur Flash est lui aussi compatible HD depuis récemment.

2007 - LA FAUSSE BONNE IDEE SECOND LIFE
Second Life ne fait plus recette. L’essoufflement est presque aussi rapide que l’engouement qu’il a créé. De plus en plus d’agences marketing renoncent à faire du marketing avec Second Life. Les agences croient que ce n’est plus important de faire acte de présence dans cet univers pour une seule et bonne raison: Les îles des entreprises sont vides… Ils estiment que le potentiel commercial est surestimé. Selon Linden Labs, plus de 7 millions de personnes sont inscrites dans Second Life. Pourtant, d’après les statistiques du site Internet officiel, le nombre de membres connecté en direct n’a jamais dépassé 40,000 personnes. Sur l’île d’American Apparel on peut y lire dans la fenêtre du magasin: “Fermé“. Entre Mai et Juin 2007, le volume des transactions effectuées sur Second Life est tombé de 7,3 à 6,8 millions de Dollars. Les entreprises délaissent réellement ce monde virtuel pour d’autres univers. Un traffic trop faible, une prise en main trop compliquée, une économie trop fragile… Les stigmates du déclin sont bien réels. Avec le départ en série des investisseurs, le futur de Second Life est incertain. Pourtant, il reste un concept qui pourrait bien s’imposer dans un futur proche et les candidats à la relève sont déjà bien présents.

Dofus, The Habbo Hotel, Taatu, CyWorld, Entropia, There, CityPixel… Il y en a pour tous les goûts. Les univers virtuels n’en sont qu’à leurs balbutiements et promettent d’intéressantes possibilités pour les Webdesigners qui ne sont autres que les principaux architectes de ces nouveaux espaces de création!

2007 - EVERYSCAPE
Une plate-forme interactive propose aux internautes une promenade virtuelle en trois dimensions. Elle permet aux personnes qui souhaitent repérer un lieu, un monument ou un magasin de déambuler dans les rues qui ont été recrées sur le Web. Dans certains cas, on peut même pénétrer à l’intérieur de certains bâtiments. L’initiative, lancée par la société EveryScape et baptisée The Real World Online, passe par la collaboration pour enrichir son service de reproduction des villes. Ainsi, elle combine des informations trouvées sur le Web aux contributions des internautes et des résidents. Ces derniers pouvant envoyer, ponctuellement ou régulièrement, leurs photos panoramiques d’un lieu via le programme Scape Artist. Objectif: Proposer une expérience d’un lieu plus réaliste que sa simple visualisation via un système de géolocalisation.
Pour le moment, seules les villes d’Aspen, Boston, Miami et New York sont ouvertes à cette exploration virtuelle. Les internautes peuvent flâner dans les rues et dans les lieux et bâtiments publics, mais également effectuer une recherche par nom de rue, de quartier ou de magasin. Pour rendre le service de recherche plus complet, The Real World Online permet également d’accéder à des informations additionnelles en provenance de sites comme Yahoo!, Wikipédia ou YouTube.
A Miami et Aspen, la plate-forme se fait plus perfectionnée et fonctionne sur un système de partenariats avec les commerçants. Ceux-ci peuvent afficher virtuellement un résumé de leurs activités en vitrine, ou proposer une vision en 3D de l’intérieur de leur magasin. De nouvelles villes, mais aussi des zones rurales et les banlieue devraient prochainement s’ajouter à ce monde en ligne.

2007 – FLASH 3D
Papervision, le moteur de rendu 3D sous Flash, devient de plus en plus connu, étudié par des agences web, et utilisé ci-et-là pour des expérimentations plutôt intéressantes.
Ces différents programmes proposent tous au travers d’un plugin le support d’une scène 3D complète ou partielle: pièces, objets, avec réflexions de matières et lumière… avec une fidélité et une interactivité plus ou moins importantes selon le contexte d’utilisation. Le problème bloquant reste l’installation nécessaire de plugins. Toutefois, ces applications peuvent être utilisées pour des usages bien ciblés en entreprise dans le cadre de Serious Games: Apprentissage, formation, simulation…
Toutes ces technologies peinent à se mettre d’accord entre elles. Il manque profondément des normes, des règles, et des standards pour uniformiser le parc des technologies développées au fil des ans, au risque de voir de vieux acteurs dans le domaine se faire doubler par des mastodontes du Web dont les programmes bénéficient d’une adoption massive par le grand public. Surtout que certaines technologies sont propriétaires (et sous licence) tandis que d’autres utilisent des projets open sources, et d’autres encore se veulent être un standard sans être véritablement adoptés par la majorité.

2007 – YAHOO ! DESIGN INNOVATION TEAM
Lancée en Septembre dernier (et fermée en Février 2008), la Yahoo ! Design Innovation Team ou Yhaus est un ensemble d’expériences de représentations graphiques de données (data visualization) liées à Internet.
Yahoo ! Traffic Map, d’Aaron Koblin, est la représentation en temps réel de l’état du trafic routier des villes américaines (Los Angeles, Chicago, Las Vegas, etc.). Du même auteur, Query bursts (Rafales de questions) représente les adresses IP des requêtes très populaires (ou “rafales“), telles que “miss teen usa” ou “cricket“, posées sur le moteur de recherche Yahoo. Chaque particule de la visualisation représente une requête à partir d’un ordinateur dans le monde.

2007 – DIGG LABS
Digg, le site Internet communautaire, typique du phénomène “Web 2.0“, qui a pour but de faire voter les utilisateurs pour une page Internet intéressante et proposée par un autre utilisateur, dispose d’un laboratoire qui se penche sur des problématiques de Webdesign et d’informations. Des dizaines d’expérimentations de visualisations des nouveaux flux d’informations sont donc disponibles sur Digg Labs. S’agit-il de design d’Information ou de Webdesign? Ou les deux ?

2007 – TRESOR DE LANCOME
Un autre site impressionnant, celui de la dernière campagne pour le parfum Trésor de Lancôme: “Trésor is Love“. Elle s’illustre par un flacon de parfum recréé en 3D, composé d’une mosaïque de vidéos issues de Dailymotion. La marque invite les internautes à s’exprimer en vidéo sur le thème de l’amour et de la rencontre.

2007 – RICH DESKTOP APPLICATIONS
Les RDA sont des applications en ligne mais qui s’exécutent en dehors de votre navigateur. Comprenez par là que ce sont des applications, au même titre que votre traitement de texte ou votre logiciel de messagerie, sauf que ces applications riches sont déployées à la volée et exécutées sur une machine virtuelle. Une RDA est une application qui s’auto-déploie et qui se met à jour de façon transparente en quelques secondes. Une RDA peut s’exécuter en mode déconnecté. Par exemple, elle permet de rédiger des billets depuis un train et de les publier sur son blog lorsqu’une connexion Internet est à nouveau disponible. Ces nouvelles formes d’applications peuvent potentiellement amener à la création d’interfaces Web dédiées. Adobe AIR et d’autres plateformes de développement sont déjà disponibles et ont permis la réalisation de RDAs à la fois esthétiquement réussies mais surtout dont les services sont particulièrement innovants.

2007 - WIDGETS
Les widgets sont des applications connectés qui fonctionnent sur le bureau ou en ligne puisque certains s’insèrent dans des pages existantes. Le browser n’est plus la limite du Web! Embryon de certains concepts du “Web 3.0“: Widgets, applications bureaux riches, supports mobiles et autres typologies d’interfaces font sortir le Web et donc le Webdesign du navigateur Web.

2007 – SOCIAL DESIGN
2007, c’est l’explosion des réseaux sociaux. Le Social Design, vise donc à favoriser, faciliter et organiser les interactions sociales sur online et offline. Comment le Webdesigner favorise ses interactions avec les outils dont il dispose ? Il s’agit d’un véritable challenge dans lequel le design a toute sa place.

2007 – MOBILITE 2.0
L’I-Phone d’Apple, le Samsung F700, le HTC Touch, le Nokia N95, le LG KS20 et le LG Variety, le Sony Ericsson P1i… autant de mobiles nouvelles générations qui repoussent les limites des interactions entre Web et mobiles. Le Web envahit un peu plus notre quotidien et les webdesigners sont pressés de s’adapter à ses formats de petites tailles et portables.

2007 – MICROSOFT SURFACE
Une nouvelle interface futuriste basée sur un écran tactile de très grande taille qui supporte le “multi-touch” (plusieurs points de contacts simultanés). Ce concept n’est pas nouveau puisque début 2006 des chercheurs du Media Research Laboratory de l’Université de New York avaient mis au point un système similaire.
Microsoft a présenté une table qui intègre un écran tactile de 30 pouces. Cet écran peut être utilisé par plusieurs personnes en même temps pour regarder des photos ou encore jouer des jeux. Il pourrait également s’intégrer facilement dans les restaurants pour passer commande. Le prototype actuel embarque un processeur Intel Pentium 4 cadencé à 3 GHz et 2 Go de mémoire mais également cinq caméras infrarouge qui permettent de détecter certains mouvements au dessus de la table. Enfin, on notera que le concept Surface de Microsoft détecte automatiquement les objets qu’on lui pose dessus, ce qui permet la synchronisation automatique des PDAs ou encore le déchargement de photos.

2007 – CITY WALL
Une installation “collaborative et ludique” installée dans une rue du centre d’Helsinki (Finlande). L’écran affiche dynamiquement des contenus en relation avec ce qui se passe dans la ville: Festivals, événements sportifs, etc. En continu, il va ainsi surfer sur le net à la recherche des documents taggés “Helsinki“. Il s’agit essentiellement de photographies et vidéos glanées dans des bases de données publiques, telles que Flickr ou YouTube.
Mais, le plus impressionnant est sa technologie de navigation. Sur toute la largeur de l’écran plusieurs utilisateurs peuvent en même temps, par de simples gestes, manipuler les éléments affichés.
Le passant peut ainsi déplacer des documents, zoomer dans des photographies ou écrire des annotations. Ainsi, comme le montre la vidéo disponible sur le site officiel (www.citywall.org), un simple balayage de la main permet d’évoluer dans l’espace, tandis qu’un mouvement d’ouverture des mains suffit pour déclencher un zoom.
“N’importe qui ayant des connaissances informatiques basiques peut apprendre et utiliser le CityWall en quelques minutes.” promet Ubiquitous Interaction, la société qui a développé le projet dans le cadre du projet européen IPCity. L’installation a été spécifiquement conçue pour être implantée dans une ville comme une vitrine interactive sur l’actualité que les passants, résidents ou touristes, peuvent manipuler en s’amusant.

2007 - iTea
Willem Velthoven de Mediamatic présente iTea, un système développé pour la dernière conférence PicNic, qui permettait aux personnes présentes de visualiser les données dont on dispose sur eux. En plaçant l’étiquette qui leur était remise en tant que participant dans une tasse à thé équipée d’un capteur, le système projetait les données de profil de l’utilisateur sur une table, avant de lancer une requête Google sur leur nom.

2007 – BILLBOARD INTERACTIF
CNN et CNN.COM ont lançé unbillboard interactif en haute définition, sur Time Square à New York. Le panneau d’affichage est connecté au Web d’où il récupère des données pour les afficher en temps réel.

2008 – UNDERUNDER
Un mur de chaussures en 3D temps réel. Nous ne parlons pas ici de technologies de représentation 3D qui nécessitent un plug-in spécifique mais plutôt de ce qu’il est possible de faire en utilisant simplement du Flash. Un magasin en ligne virtuel donc, avec cette fluidité incomparable qu’offre la 3D temps réel par rapport à un développement rich media, et une liberté de mouvement incroyable.

2014 – NEW SONGDO
New Songdo City, la ville nouvelle des technologies en construction à 60 kilomètres de Seoul, qui occupera en 2014 les 600 hectares d’une île artificielle. New Sondgo City est présentée comme une version moderne du TomorrowLand de Disney, une ville propre, moderne et efficace où tout est connecté et suivi en temps réel, chaque action enregistrée, chaque service personnalisé, toute transaction automatisée.
Des investisseurs privés coréens et américains investiront au total 25 milliards de dollars pour faire de cette cité - qui sera également une zone économique franche - le laboratoire des nouvelles technologies. Cette U-ville (U pour Ubiquitous compunting, c’est-à-dire une ville où l’informatique sera omniprésente), promet que tous les systèmes électroniques pourront partager leurs données. Jusqu’aux canettes de soda qui utiliseront les étiquettes intelligentes pour créditer les comptes de ceux qui les auront jetées dans des poubelles de recyclage adaptées.
Dans la U-city, la même clef servira à prendre le métro, à payer son parking, à voir un film, à ouvrir son appartement… Tous les systèmes d’informations (résidentiels, médicaux, d’entreprises, administratifs) partageront leurs données, à une échelle jamais atteinte. Résidences et bureaux seront équipés d’origine de multiples capteurs-senseurs qui collecteront des données d’identification, de localisation, climatiques, corporelles, elles aussi réinjectées dans le système d’information global de la ville.

DISPARITION DE L’INTERNET
Réseaux sans fils, IPV6, objets connectés, portabilité de l’information, nanotechnologies… l’internet disparaît peu à peu car il se généralise, et devient invisible. Le Web est disponible partout, tout le temps, en haut ou en très haut-débit. Nous sommes connectés de manière permanente. Il n’y a plus que les applications, les interfaces et les usages qui compte. C’est en quelques mots, le concept d’ubiquitous computing.
Si le Web disparaît, alors que se passe-t-il pour le WebDesign ? Peut-être qu’il ne reste alors plus que le design !?

DEFINITION DU DESIGN
Si telle est le cas, il devient alors beaucoup plus facile de définir le design. Pour autant, Il n’existe pas de définition unique du design. Son sens varie selon les époques, les cultures et les individus.
Pour les anglo-saxon, le design est davantage une conception, une idée, une intention ou un projet. En français, c’est une recherche d’harmonie entre les formes et les fonctions de l’objet. A la suite de la présentation que je viens de livrer et de mon expérience personnelle, je crois que la définition la plus adaptée serait la suivante :
“Le design est une activité créatrice dont le but est de présenter les multiples facettes de la qualité des objets, des procédés, des services et des systèmes dans lesquels ils sont intégrés au cours de leur cycle de vie. C’est pourquoi il constitue le principal facteur d’humanisation innovante des technologies et un moteur essentiel dans les échanges économiques et culturels.”

Quoiqu’il en soit je crois qu’il ne faut en aucun cas sous-estimé le design, surtout aujourd’hui avec les rythme de développement technologiques qui s’accroissent un peu plus chaque jour, pour peu que l’on souhaite conserver un visage humain à ce développement.

Peut-être que comme le dit David Carson :
Graphic design will save the world right after rock and roll does. (David Carson)

Pour cela, je crois que le design Web, comme toutes les autres formes de design a besoin de définir des process de création. Des process intelligents et adaptés à l’existant et au champs des possibles tels que j’en décrit une partie dans cet exposé. Il ne s’agit donc pas de vouloir reproduire des process existants comme ceux du print mais bien de créer de nouvelles méthodologies.

Sans cette recherche, impérative à une meilleure compréhension du Webdesign et à son développement, la pratique est sans cadre, sans véritable environnement et ressemble presque, en y ajoutant un peu d’humour, à ce schéma qui a fait le tour de la blogosphère il y a quelques mois.

DES DEFIS A RELEVER.
Il y a donc de nombreux défis à relever pour donner au Design Web ses lettres de noblesse:
1. D’abord, comme je viens de le dire, il faut inventer des process adaptés aux nouveaux enjeux.
2. Il faut Elargir le champ d’application des standards. On le voit bien aujourd’hui, les langages et les supports évoluent très vite. Pour progresser encore et démocratiser certaines technologies et usages, comme la 3D par exemple, il est primordial de développer les standards ad hoc.
3. Il faut penser convergence et plus seulement plurimédia. L’interopérabilité des technologies, des usages et des contenus est incontournable.
4. Il faut oublier le support écran du micro-ordinateur, et envahir d’autres espaces d’interactions, tous les espaces d’interactions.
5. Le design doit cultiver le sens. Il faut donc rechercher du sens encore et toujours.
6. Il faut aussi faire entrer les contenus dans l’ère de la sémantique. Les Microformats et les RIA devraient permettre d’accélérer ce phénomène.
7. Enfin, il est important d’organiser le design collaboratif à tous points de vue. Que ce soit le travail à distance, les échanges de bonnes pratiques, les rassemblements internationaux… Il est essentiel de créer des liens durables et efficaces entres les acteurs du Webdesign.

QUELQUES CONSEILS
Comme cette intervention s’adressait essentiellement à des étudiants et à de jeunes professionnels, j’ai terminé par quelques conseils issus de 15 années d’observation.
1. Les idées, les concepts, l’expérience utilisateur d’abord, les outils et les langages ensuite.
2. Sortir du Web, aller chercher l’inspiration ailleurs.
3. Cultiver le sens, réussir à présenter ses concepts.
4. Apprendre la collaboration et travailler le process.
5. Se spécialiser, ne pas avoir peur de ne pas tout savoir.
6. Ne plus se limiter au browser.
7. Se confronter à d’autres cultures.

J’espère que cette présentation vous a plu. Je reste à votre disposition pour échanger sur les sujets qui y sont développés. Cette présentation est sous license Creative Commons et vous êtes autorisés à la télécharger, à la modifier et à la redistribuer.

Enfin, vous trouverez mes informations de contacts. Merci de votre intérêt et à très bientôt sur webevangelists.net.