Superlink me

Dessiner l’information

20 octobre 2008 | par Christian Porri

nk_sweaters_full Voici quelques exemples d’installations utilisant l’interactivité pour échanger des données ou participer à des performances. Ici, une interface de réseau de données autour de projets d’architectures, présenté à la Biennale de Venise.

Un autre exemple ici, présente un concept de vêtement dont la production est liée aux données qui sont communiquées. cette autre permet d’organiser les données renseignées par l’utilisateur en une interface visuelle. Ici, vous trouverez plusieurs exemples de systèmes de représentation d’informations, d’objets interactifs et de réseaux de données sur divers domaines, du corps humain à la politique.

Beaucoup de ces outils ont en commun d’avoir été programmés avec Processing qui est un langage proche de l’actionScript de Flash, reposant sur la technologie Java, qui permet des interactions simplifiées avec des interfaces hardware (de type WiiMote, la télécommande pour console Wii ou l’Asus EeeStick pour Windows).
Enfin, « simplifié » pour qui veut s’y mettre. Avis aux amateurs, son environnement de programmation (multiplateforme Mac et PC) peut être téléchargé gratuitement à la même adresse.


One Laptop Per Studient

21 mai 2008 | par Christian Porri

XO by Fuse Project Le projet OLPC (One Laptop Per Child) est maintenant connu en substance, j’espère, de tous. Il s’agit du projet mené par Nicholas Negroponte au MIT, visant à une démocratisation très poussée de l’accès au réseau informatisé planétaire pour les enfants de pays en voie de développement. Le projet a donné naissance au XO, un ordinateur portable. Il a été et est certainement critiquable sur plusieurs aspects mais ce projet et son développement nous concerne en premier lieu ici à l’ESAD :

Cet ordinateur portable ne devait pas coûter cher à produire et doit pouvoir être distribué dans des pays où les infrastructures techniques électriques et de télécommunications ne sont pas aussi abouties que chez nous. Le projet entre donc pleinement dans un cahier des charges de type « éco-conception », concept devenu cher à l’école.

Cet ordinateur portable était également un projet de design : il s’agissait de réunir des matériaux très économiques, au sacrifice d’un certain confort d’utilisation. Ce qui est un schéma peu habituel de la production standard, qui vise une qualité minimum, propre à nos marchés de pays riches. Cette impossibilité de rentrer dans un modèle déjà produit auparavant ajouté à l’objectif de s’adresser à des enfant en premier lieu à conduit les dirigeants du projet à chercher un design produit approprié. Du côté de l’utilisation, il était également impossible de se caler sur nos logiciels et OS, trop spécialisés et coûteux en développement et marketing. Le design s’est donc étendu à l’interface graphique, nommée Sugar, pour proposer des fonctions basiques adaptés aux spécificités de la machine et de ses futurs utilisateurs. Inutile de préciser le rapport de l’école avec cette problématique du design.

> Lire la suite…


ESAD, DVD SF/CW Édition 2007 processing…

13 avril 2008 | par Christian Porri

dvd-esad-sfcw2007-storyboard2 Les élèves de 3e année Nina Bahsoun, Agathe Bouvachon, Clara Busson, Vanessa Jouillerot, Rémy Louvard, Sarah Poletti, Julia Robert et ceux de 4e année Dora Borst-Jouan, Guillaume Bulete, Tyan Yong Tao et Cao Jing ont effectué le travail de conception et réalisation du DVD de la Semaine folle/Crazy week édition 2007.
Ce travail touche à sa fin, vous pourrez en avoir un aperçu sur l’image ci-contre (Cliquez pour agrandir) sur laquelle figurent presque tout les éléments. Les étudiants ont fait preuve d’initative pour proposer une interprétation vidéo-graphique sur des ateliers de type installations ou performances dont la restitution n’était matériellement ou conceptuellement pas évidente.

L’identité visuelle de cette édition 2007 repose sur des prises de vues réelles. Pliage, dépliage, assemblage, superposition, tout est mis en scène à partir de feuille de format A4 aux couleurs bureautique. Chaque écran d’introduction interprète de cette manière le sujet de l’atelier qui suit.
Le travail sur les ateliers est également conséquent : Les films produits mettent en scène les déroulements des ateliers durant la semaine folle ou s’inspirent de leurs thématiques pour proposer un montage original permettant d’en saisir la teneur :

Pour Votre intérieur idéal mangeable (atelier de Kiki Van Eijk), Les étudiants ont choisi de rester dans la référence « bureautique » associé à la cuisine en utilisant les codes d’un classeur de fiche qu’on feuillete. Pour L’important, c’est d’essayer (atelier de Fabrice Lambert), l’accent a été mis sur le film du spectacle lui même, remonté pour se focaliser sur des éléments particuliers.
No way (atelier de Christophe Le Gac),  propose un montage énigmatique, à la manière du film qui a servi de trame à l’atelier  : Lost Highway, de David Lynch. Odoramax (atelier de Boris Raux) propose une vision simultanée des préparatifs et de la performance de l’atelier. Abstract hacktivism (atelier de Otto Von Bush) reprends le caractère subversif de l’atelier pour présenter certaines des réalisations ou concept qui y ont été étudiés.
Son titre (atelier de Pascal Battus) appose des animations graphiques pour valoriser la bande son des images tournées lors de la performance de l’atelier. Carto(o)ns (atelier de Ilka Heming) propose de parcourir une planche de BD type Comics dans la lignée des installations vues lors de la semaine folle. Designing the forbidden (atelier de HeHe) propose un montage de scènes tournées lors des multiples installations ayant pris place dans la ville durant l’évenement.
Pour Entrée double slash (atelier de Vincent Delpeux), les étudiants ont choisi un montage d’images alternées de type caméra de surveillance pour évoquer la lecture discontinue de l’action et l’effet de surprise. Enfin, sur Peinture, design, abstraction décorative (atelier de Damien de Roubaix), on parcourt en détail les dessins et peintures réalisées lors de l’atelier à la façon de Palettes.

Les étudiants de 4e année travaillent actuellement à la masterisation du DVD : le packaging est également en voie de finalisation (et sera bientôt présenté ici).
À suivre…


Bilan : rendu du 17 décembre 2007

26 décembre 2007 | par Christian Porri

Bravo aux étudiants pour l’organisation du rendu qui s’est déroulé comme convenu en salle 202. La journée (longue) a permis de démontrer que la nature indéfinie de la restitution du projet n’en était pas pour autant informelle. Les accrochages étaient de qualité et ont été eux-même sujet d’un travail plastique.
Le sujet était ambitieux dans la mesure où sa réponse était à définir au fur et à mesure de l’avancement dans le projet. Chacun devait donc, à la manière d’un projet personnel, le diriger à sa façon. Certains ont eu plus de facilités que d’autres à le faire, parvenant à maîtriser leur propos malgré un avancement à tâtons. D’autres ont eu plus de difficultés à tirer un propos clair et une direction du support image qu’ils avaient choisi.
Aussi la participation, certes perfectible, du groupe à la présentation du rendu de chacun permettra, je l’espère, à ceux ayant eu des difficultés, de mieux cerner les champs d’ouvertures possible à leur réponse.

Préparation du renduPréparation du renduPréparation du rendu

Pour l’ensemble, l’obligation de composer du texte et d’organiser des éléments picturaux a forcément permis de travailler graphiquement. On mesure là l’influence du support papier qui continu de dicter la composition. Ce qui reste normal en 2e année et je dirais même que de ce point de vue graphique, il y avait beaucoup de qualité.
D’une façon générale, il est clair que la problématique d’une composition graphique harmonieuse par un usage hiérarchisé de la typographie est intégrée. Reste désormais à porter cette culture du visuel « fixe » sur un écran, avec des notions de médias multiples (image, son, mouvement) et d’interactivité : de design de la manipulation de ces médias. Ce que certains projets ont très justement questionné. Il en ressort donc qu’il faut enrichir les connaissances du multimédia, en terme d’histoire, de concepts, etc. L’école fait ce qu’elle peut de son côté, il faut poursuivre les efforts individuellement. Les livres concernant le domaine ne manquent pas, ceux qui sont pertinents ne sont pas forcément accessibles et souvent en anglais (Peut-être y remédierez-vous plus tard). Le web est donc le vecteur de culture de l’objet interactif le plus accessible. Par chance il est un des plus riches, en tant que source et en tant qu’objet en soi.
En effet, popularisé depuis plus de dix ans, le web est devenu un véritable terrain de design d’interfaces pour explorer les possibilités d’interactions avec des médias. Le logiciel Flash, notamment, a rendu plus accessible cette pratique que les autres supports type jeux, logiciels ou systèmes d’exploitations.

Ce sujet était une entrée en matière, un peu ardue, de ce qu’est fondamentalement le design multimédia : du design d’information. Ce design réside en un objet interactif constitué d’un contenu (pas nécessairement visible simultanément) et d’une interface (qui sert à manipuler, afficher, etc. ce contenu). La question centrale de tout travail de communication reste le même : faire passer son message et travailler le design que revêt sa forme. Il est donc toujours important de bien définir ce que l’on veut dire ou montrer et de travailler chaque détail pour servir ce propos ; tant les aspects visuels que les aspects scénographiques ou fonctionnels. Certains ont donc bien exploré la manipulation des éléments à l’écran sur leur projet ou ont réfléchi à la nature conceptuelle de leur interface en relation avec certains concepts actuels du Web, félicitations.

J’espère donc que cette introduction aux problématiques de design interactif vous amènera à porter cette réflexion sur l’ensemble de vos projets, du point de vue de leur communication et/ou, mieux, de vous voir directement pousser cette exploration en 3e année graphisme et multimédia.

Ci-dessous, un aperçu de certains projets présentés, par ordre d’apparition : Christelle Sajas (1 et 2) ; Adrien Petrucci (3 et 4) ; Laure Stromboni (5, 6 et 7) ; Constance Laisne (8 à 14) ; Olivier Cortès (15, 16 et 17) ; Charlène Boistault (18 et 19) ; Gaspard Graulich (20) ; Fleur Lecoester (21) ; Emmanuelle Goutal (22) ; Marion Frébourg (23 et 24) ; Claire Baudrimont (25 et 26) ; Louise-Clémence Grenier (27 et 28) ; Geoffroy Gillant ( 29 et 30).

Christel SajasChristel SajasAdrien Petrucci 
Adrien PetrucciLaure StromboniLaure Stromboni
Laure StromboniConstance Laisne / Jeff WallConstance Laisne
Constance LaisneConstance LaisneConstance Laisne
Constance LaisneConstance LaisneOlivier Cortes
Olivier CortesOlivier CortesCharlène Boistault
Charlène BoistaultGaspard GraulichFleur Lecoester
Emmanuelle GoutalMarion FrebourgMarion Frebourg
Claire BaudrimontClaire BaudrimontLouise-Clémence Grenier
Louise-Clémence GrenierGoeffroy GillantGoeffroy Gillant

Merci aux étudiants (présentés ici ainsi qu’aux autres – dont les projets n’en étaient pas moins intéressants), leur nom apparaît en légende d’image au survol de la souris.


Au doigt, à l’oeil et au curseur.

23 novembre 2007 | par Christian Porri

Vous vous souvenez peut-être de ce site, Don’t click it, que nous avions consulté lors d’un cours, où il s’agit de naviguer sans effectuer un seul clic, remplacé par le roll-over (ou survol) de la souris. Il permet de rappeler à quel point l’usage de la souris est devenu intuitif ; au point qu’appuyer sur le bouton est devenu un réflexe conditionné difficile à éviter.

Approfondissons notre réflexion sur la notion de curseur de la souris. Le curseur est la transposition de notre main dans l’interface du bureau virtuel. Il peut revêtir l’aspect de multiples outils virtualisés (flèche, crayon, pot de peinture, etc.) allant jusqu’à la représentation de notre main (main au doigt pointant sur un lien, etc.).
Ce site, Jaarvandekleuter, vous propose de retrouver l’usage d’une main dans l’écran. C’est assez bien fait mais ça permet de se rendre compte de la richesse du traditionnel curseur dont la polyvalence semble moins épuisable qu’un couteau suisse.

Lorsqu’un designer conçoit un objet, il le pense jusque dans sa perception tactile. Les effets de matière, de structure à manipuler sont autant de facettes de sa création. En multimédia, nous créons également des objets : que ce soit des menus à tirer, des boutons à enfoncer, des icônes à saisir, glisser, déposer, des zones à détourer, etc. Toutes ses manipulations sont transposée virtuellement mais leur sens est bien maintenu et nous avons réellement l’impression de saisir et déposer des icônes dans une fenêtre de dossier, de gommer, tourner, étirer des objets.

Pour autant, si nous avons réussi à symboliser, à « iconifier » avec précision ces manipulations, nous avons très peu d’exemple de travail sur le sens tactile ou la gestion de l’inertie. Pourtant nos bureaux virtuels que ce soit Windows, MacOS ou Linux rivalisent d’effets de volume, de plans, de lissage, de matières mais la manipulation reste toujours la même. Il pourrait pourtant être intéressant d’adjoindre la notion de toucher au design graphique et ergonomique d’un objet virtuel. La première application de ce genre de réflexion serait de permettre la représentation, via l’écran, d’objets réels. Plus loin, on pourrait concevoir une interface avec des particularités tactiles directement intégrées à l’ergonomie de son utilisation.
Cela consisterait à réfléchir au comportement du curseur de la souris lors du passage sur des zones (entrée et sortie, passage lent, rapide, autre ?) ou lors du clic sur le bouton (double-clic ? clic long ?). le curseur pourrait avoir un poids, être aimanté, avoir une force d’inertie, etc.

C’est ce que PowerCursor vous propose d’explorer en repertoriant sur cette page divers exemples de manipulations virtuelles, plus ou moins réussies. Pour les plus enthousiastes, les sources Flash de ces exemples sont téléchargeables librement sur la même page.

Et pourtant, tout ceci n’est pas nouveau. Ceux qui ont un peu de culture sur le jeu vidéo connaissent peut-être ces célèbres jeux que sont Marble Madness ou Spindizzy (autre source) qui, déjà il y à vingt-quatre ans, explorait la notion d’inertie virtuelle… mieux vaut tard que jamais pour se pencher sur la question (ou reconsidérer l’influence du jeu vidéo sur toute les pratiques du design lié aux nouvelles technologies).

Dans tous les cas, ce type de réflexion est au centre de l’apprentissage du multimédia (ou design multimédia, ou encore « design », tout court).


Je ne le dis pas pour rien. De nombreux opérateurs de téléphonie commencent à intégrer de la recherche & développement en terme de design d’interface graphique. Récement, Édouard Wauttier, ancien étudiant de l’ESAD intégrait les laboratoires d’Orange. Les industriels de la téléphonie sont désormais convaincus que le design des appareils ne concerne plus seulement l’apparence de leur coques. Exemple notable, les designers de TeamLab, en collaboration avec KDDI, deuxième opérateur de téléphonie en asie, lancent un concept d’interface de téléphone d’un genre nouveau : Au lieu de l’éternel fond d’écran et icones, on trouve un environnement réactif et autonome, à la manière des Tamagochis.

Intitulé ActFace, le projet propose des univers thématiques différents. l’univers de l’interface du téléphone évolue en fonction de son utilisation. Des plantes vont pousser durant un appel téléphonique, un quartier de ville dessinée au pixel va s’agiter lors du captage d’un réseau, les contacts du carnet d’adresse vont se promener dans les rues, etc.
(Sources : L’atelier)

Bien sûr Je ne peux m’empêcher de rappeler que ce nouveau genre d’application du design graphique et interactif prends sa source encore une fois dans le jeu vidéo puisqu’on pouvait voir ce genre d’interaction entre jeu et bureautique dans le jeu Black & White. Il serait peut-être intéressant de considérer l’importance du jeu vidéo comme source d’inspiration d’usages pour des outils de demain…


Propulsé par WordPress | Sur un thème de Tamanta Famiglia | Creative Commons License