Superlink me

Alors du côté des blogs mis en place par les étudi­ants, qu’avons-nous ? D’une manière générale, Ça com­mence à peine à pren­dre forme alors que sur le papier (ou à l’écran) nous devri­ons avoir depuis un mois un dossier des bil­lets d’actus rédigés, d’un plan général, etc. (dans un logi­ciel de traite­ment de texte, comme pour un mémoire, si, si) ; Ces éléments per­me­t­tant de cerner l’éditorial de ces mag­a­zine en ligne que son vos blogs.

Ces éléments font par­tie d’une phase de design édito­r­ial, pensez à leur mise en forme. Cer­tains aiment écrire manuelle­ment, et faire des sché­mas. C’est bien, mais pensez à rédi­ger (présen­ta­tions syn­thé­tiques, plans, etc.).C’est ce design édito­r­ial sur lequel vous serez essen­tielle­ment jugé lors de la nota­tion de ce projet.

Je sais que la mise en place tech­nique des blogs de cha­cun a été laborieuse mais cela ne vous empêchait pas d’avancer con­ceptuelle­ment. Je compte donc sur vous pour con­tin­uer à affiner tout cela ; Allez ! c’est pas sorcier.

NB : Pensez à m’envoyer les liens vers vos blogs (je ne retiens pas tout). Il y a apparem­ment des pannes de serveurs sur l’hébergeur Olympe-Network chez qui sont cer­tains d’entre-vous. Signalez-le, il y a un for­mu­laire de con­tact sur leur site.

Résumons :

> Lire la suite…

Comme nous en avons parlé précédem­ment, vous aurez un pro­jet, presque plus un exer­cice tech­nique, visant à vous famil­iariser avec le con­cept de site web. Nous avons vu qu’il y avait aujourd’hui com­muné­ment deux type de sites web que vous pou­vez être appelé à définir et/ou à réaliser.

Tout d’abords, il faut savoir que tout site est matérielle­ment con­sti­tué de code ou de fichier au for­mat HTML. Le HTML est un lan­gage de base pour le nav­i­ga­teur qui affiche les pages. Bien que le con­cept de « page » qu’on assim­i­l­erait à la page de papier soit totale­ment dépassé et ne cor­re­sponde plus à une désig­na­tion cor­recte, nous con­tin­uerons de l’employer, faute de mieux. Par­fois on utilis­era le terme « écran » afin de définir une étape de nav­i­ga­tion. À vous de démêler ces ter­mes, l’important étant que vos scé­nario de nav­i­ga­tion soit clairs.

> Lire la suite…

Comme nous en avons parlé lors d’une dernière séance, la resti­tu­tion de la Semaine folle (Creazy Week) qui s’est déroulé en décem­bre 2008 se fera cette année sous la forme d’un site événe­men­tiel et non d’un DVD. Le déroule­ment de cette réal­i­sa­tion devrait se dérouler ainsi :

> Lire la suite…

Il reste peu de séances con­cer­nant ce pre­mier semes­tre. Le sujet sur lequel nous tra­vail­lons en 3ème année (avec une thé­ma­tique com­mune aux groupes de 1ère année) est clos.

Comme annoncé au départ, nous voulons organ­iser une resti­tu­tion par­ti­c­ulière pour ce sujet. Compte tenu des séances restantes,

> Lire la suite…

Con­cer­nant votre sujet « Échangez, syn­chro­nisez, partagez », vous avez (presque) tous arrêté une idée générale autour d’un thème. À par­tir de là il y a des tâches sim­ples à effectuer pour passer du stade d’idée à celle de pro­jet : 
 
La pre­mière étant de se deman­der qui va échanger, partager ou syn­chro­niser quoi? Avec qui ? Quand ? Où ?

Pour dévelop­per, doc­u­mentez vous, rien de tel que de définir des mots clés qui s’y rap­por­tent et lancer une recherche. Il peut-être par­fois intéres­sant de chercher ailleurs que dans un moteur de recherche général­iste (la page .Recherche ci-dessus est là pour ça), les résul­tats par­fois annexes peu­vent aider à con­di­tion de ne pas s’éparpiller.
Dans tous les cas évoqués il existe soit des pro­jets annexes de ce type, soit des références dans des films ou livres de SF. À vous de chercher ces sources d’inspiration ou d’appuis des bases de votre concept.

Pensez à scé­nariser, pourquoi pas en dessi­nant, c’est le meilleur moyen de cadrer et définir votre con­cept, savoir ce qu’il est et ce qu’il n’est pas :

- On utilise votre con­cept dans un endroit, à un moment pré­cis ? Faîtes un plan, racon­tez dessus
- On utilise un objet qu’on manip­ule ? à quoi ressem­ble t-il ? -> Téléphone/tablette ? Rubick’s cube ? meu­ble mod­u­laire ? etc.  
- On utilise une sur­face tac­tile ? pan de mur ? table ?tee-shirt ? -> À quoi ressem­ble son inter­face ?
- Il s’agit d’un con­cept d’échange ? Lan­gage de mains ? sig­naux de fumée ?
- Votre con­cept est un ser­vice ? com­ment s’appelle t-il, quelle est son iden­tité visuelle ?
- Etc.

Sinon, pour les quelques références dont j’ai parlé avec cer­tains en cours, voilà :

Vu avec Adrian ; cette page reper­to­rie plus de 100 ser­vices con­cer­nant la ges­tion de playlists, le partage etc. de musique en ligne, que ce soit des ser­vices liés à un outil (type iTunes+iPod) ou non. Vous ver­rez que cer­tains pro­posent des inter­faces moins communes.

Vu avec Car­oll ; ce site, Pow­er­Cur­sor pro­pose une ges­tion visuelle de la tex­ture. En jouant sur le com­porte­ment du poin­teur de la souris, l’utilisateur peut con­cevoir men­tale­ment et pour­rait donc « ressen­tir » une matière.

Pour Vio­laine ; le film dont je par­lais est A Scan­ner Darkly, tiré du roman éponyme de Philip K. Dick (sub­stance mort, en français).
Les jou­ets Brio Net­work, met­tant en scène des entités de don­nées (virus, courrier-facteur, recherche-chercheur, graveur de CD, etc.) sont un con­cept qui entre dans le cadre des réponses au sujet : il s’agit d’une inter­face (jouet, vol­ume, mod­u­la­ble) per­me­t­tant aux enfants d’échanger et organ­iser réelle­ment des élements et de con­cep­tu­aliser un réseau d’échange (ici informatique).

Si j’ai oublié quelque chose dont j’ai parlé à quelqu’un, n’hésitez pas à m’en faire part par courriel.

Bon tra­vail.

Pour vous pro­jeter un peu en avant dans vos réponses au sujet « Échanger, syn­chro­niser, partager », vou spou­vez aller faire un tour sur le site du pres­tigieux con­cours Red Dot et notam­ment sa par­tie Design con­cept où vous pour­rez par­courir le port­fo­lio des con­cours des années passées. Vous pou­vez aussi jeter un oeil sur le site du Inter­na­tional Forum Design où vous pour­rez égale­ment con­sul­ter pas mal de fiche de pro­jets, con­cept, etc.
Vous y trou­verez pas mal de thèmes ou d’applications pos­si­bles pour vos con­cept (habi­tat, com­mu­ni­ca­tion, éduca­tion, loisir, etc.). Au delà de l’inspiration, analy­sez les modes de présen­ta­tion de ces pro­jets. Pho­tos, cro­quis, vidéo, maque­tte, etc. ces modes de resti­tu­tion sont assez var­iés mais sou­vent insuff­isants pour se faire une idée du fonc­tion­nement, de la manip­u­la­tion ou de l’ergonomie. Réfléchissez donc au matériau  min­i­male néces­saire et idéal pour expli­quer, démon­trer, com­mu­ni­quer, partager l’expérience du pro­jet que vous élaborez.

Pour la route, plus mod­este mais pas moins inter­es­sant et en rela­tion avec le sujet, vous pou­vez égale­ment jeter un oeil au pro­jet Light Brix du Stu­dio HeHe, présent à l’édition 2007 de la semaine folle.

Voici le sujet s’adressant aux 3e années con­cer­nant le thème des réseaux de don­nées. En voici l’énoncé :

« Échanger, syn­chro­niser, partager, trans­met­tre, con­necter, exporter, importer, envoyer, recevoir, copier, déplacer, coller, enreg­istrer, archiver, restau­rer, accéder, explorer, nav­iguer, butiner, mar­quer, abon­ner, rechercher, informer, organ­iser, man­ager, fil­trer, trier, chat­ter, grouper, rejoin­dre, liguer, frag­ger, cap­turer, hacker, con­verser, biper, wiz­zer, enreg­istrer, actu­aliser, attribuer, présen­ter, afficher, mas­quer, con­fig­urer, for­mater, paramétrer, per­son­naliser, etc.

Autant de verbes désig­nant une action liée à l’utilisation d’un réseau infor­ma­tique aujourd’hui et à l’échange des don­nées qu’on y organ­ise via de mul­ti­ples out­ils. Ces ter­mes, verbes ou expres­sions n’étaient pas néces­saire­ment envis­agés lors de la con­cep­tion de ces out­ils, ils sont nés ensuite avec leur usage.

Les réseaux de don­nées, le Net en pre­mier lieu, ont amené de nou­velles pra­tiques sociales : cor­re­spon­dance instan­ta­née, infor­ma­tion con­tinue, jeu en masse, etc. Autant de pra­tiques per­me­t­tant d’échanger des don­nées via un con­cept, une inter­face, un objet.

Échanger, syn­chro­niser, partager. À vous de le définir. »

Vous pou­vez égale­ment télécharger le sujet au for­mat PDF, pour impres­sion : sujet 10.2008.pdf

Con­cer­nant le tra­vail de recherches que j’ai demandé aux 3e années, voici un récapitulatif.

> Lire la suite…

Les élèves de 3e année Nina Bah­soun, Agathe Bou­va­chon, Clara Bus­son, Vanessa Jouillerot, Rémy Lou­vard, Sarah Poletti, Julia Robert et ceux de 4e année Dora Borst-Jouan, Guil­laume Bulete, Tyan Yong Tao et Cao Jing ont effec­tué le tra­vail de con­cep­tion et réal­i­sa­tion du DVD de la Semaine folle/Crazy week édition 2007.
Ce tra­vail touche à sa fin, vous pour­rez en avoir un aperçu sur l’image ci-contre (Cliquez pour agrandir) sur laque­lle fig­urent presque tout les éléments. Les étudi­ants ont fait preuve d’initative pour pro­poser une inter­pré­ta­tion vidéo-graphique sur des ate­liers de type instal­la­tions ou per­for­mances dont la resti­tu­tion n’était matérielle­ment ou con­ceptuelle­ment pas évidente.

L’identité visuelle de cette édition 2007 repose sur des prises de vues réelles. Pliage, dépliage, assem­blage, super­po­si­tion, tout est mis en scène à par­tir de feuille de for­mat A4 aux couleurs bureau­tique. Chaque écran d’introduction inter­prète de cette manière le sujet de l’atelier qui suit.
Le tra­vail sur les ate­liers est égale­ment con­séquent : Les films pro­duits met­tent en scène les déroule­ments des ate­liers durant la semaine folle ou s’inspirent de leurs thé­ma­tiques pour pro­poser un mon­tage orig­i­nal per­me­t­tant d’en saisir la teneur :

Pour Votre intérieur idéal mange­able (ate­lier de Kiki Van Eijk), Les étudi­ants ont choisi de rester dans la référence « bureau­tique » asso­cié à la cui­sine en util­isant les codes d’un classeur de fiche qu’on feuil­lete. Pour L’important, c’est d’essayer (ate­lier de Fab­rice Lam­bert), l’accent a été mis sur le film du spec­ta­cle lui même, remonté pour se focaliser sur des éléments par­ti­c­uliers.
No way (ate­lier de Christophe Le Gac),  pro­pose un mon­tage énig­ma­tique, à la manière du film qui a servi de trame à l’atelier  : Lost High­way, de David Lynch. Odora­max (ate­lier de Boris Raux) pro­pose une vision simul­tanée des pré­parat­ifs et de la per­for­mance de l’atelier. Abstract hack­tivism (ate­lier de Otto Von Bush) reprends le car­ac­tère sub­ver­sif de l’atelier pour présen­ter cer­taines des réal­i­sa­tions ou con­cept qui y ont été étudiés.
Son titre (ate­lier de Pas­cal Bat­tus) appose des ani­ma­tions graphiques pour val­oriser la bande son des images tournées lors de la per­for­mance de l’atelier. Carto(o)ns (ate­lier de Ilka Hem­ing) pro­pose de par­courir une planche de BD type Comics dans la lignée des instal­la­tions vues lors de la semaine folle. Design­ing the for­bid­den (ate­lier de HeHe) pro­pose un mon­tage de scènes tournées lors des mul­ti­ples instal­la­tions ayant pris place dans la ville durant l’évenement.
Pour Entrée dou­ble slash (ate­lier de Vin­cent Delpeux), les étudi­ants ont choisi un mon­tage d’images alternées de type caméra de sur­veil­lance pour évoquer la lec­ture dis­con­tinue de l’action et l’effet de sur­prise. Enfin, sur Pein­ture, design, abstrac­tion déco­ra­tive (ate­lier de Damien de Roubaix), on par­court en détail les dessins et pein­tures réal­isées lors de l’atelier à la façon de Palettes.

Les étudi­ants de 4e année tra­vail­lent actuelle­ment à la mas­ter­i­sa­tion du DVD : le pack­ag­ing est égale­ment en voie de final­i­sa­tion (et sera bien­tôt présenté ici).
À suivre…

Bravo aux étudi­ants pour l’organisation du rendu qui s’est déroulé comme con­venu en salle 202. La journée (longue) a per­mis de démon­trer que la nature indéfinie de la resti­tu­tion du pro­jet n’en était pas pour autant informelle. Les accrochages étaient de qual­ité et ont été eux-même sujet d’un tra­vail plas­tique.
Le sujet était ambitieux dans la mesure où sa réponse était à définir au fur et à mesure de l’avancement dans le pro­jet. Cha­cun devait donc, à la manière d’un pro­jet per­son­nel, le diriger à sa façon. Cer­tains ont eu plus de facil­ités que d’autres à le faire, par­venant à maîtriser leur pro­pos mal­gré un avance­ment à tâtons. D’autres ont eu plus de dif­fi­cultés à tirer un pro­pos clair et une direc­tion du sup­port image qu’ils avaient choisi.
Aussi la par­tic­i­pa­tion, certes per­fectible, du groupe à la présen­ta­tion du rendu de cha­cun per­me­t­tra, je l’espère, à ceux ayant eu des dif­fi­cultés, de mieux cerner les champs d’ouvertures pos­si­ble à leur réponse.

Pour l’ensemble, l’obligation de com­poser du texte et d’organiser des éléments pic­turaux a for­cé­ment per­mis de tra­vailler graphique­ment. On mesure là l’influence du sup­port papier qui con­tinu de dicter la com­po­si­tion. Ce qui reste nor­mal en 2e année et je dirais même que de ce point de vue graphique, il y avait beau­coup de qual­ité.
D’une façon générale, il est clair que la prob­lé­ma­tique d’une com­po­si­tion graphique har­monieuse par un usage hiérar­chisé de la typogra­phie est inté­grée. Reste désor­mais à porter cette cul­ture du visuel « fixe » sur un écran, avec des notions de médias mul­ti­ples (image, son, mou­ve­ment) et d’interactivité : de design de la manip­u­la­tion de ces médias. Ce que cer­tains pro­jets ont très juste­ment ques­tionné. Il en ressort donc qu’il faut enrichir les con­nais­sances du mul­ti­mé­dia, en terme d’histoire, de con­cepts, etc. L’école fait ce qu’elle peut de son côté, il faut pour­suivre les efforts indi­vidu­elle­ment. Les livres con­cer­nant le domaine ne man­quent pas, ceux qui sont per­ti­nents ne sont pas for­cé­ment acces­si­bles et sou­vent en anglais (Peut-être y remédierez-vous plus tard). Le web est donc le vecteur de cul­ture de l’objet inter­ac­tif le plus acces­si­ble. Par chance il est un des plus riches, en tant que source et en tant qu’objet en soi.
En effet, pop­u­lar­isé depuis plus de dix ans, le web est devenu un véri­ta­ble ter­rain de design d’interfaces pour explorer les pos­si­bil­ités d’interactions avec des médias. Le logi­ciel Flash, notam­ment, a rendu plus acces­si­ble cette pra­tique que les autres sup­ports type jeux, logi­ciels ou sys­tèmes d’exploitations.

Ce sujet était une entrée en matière, un peu ardue, de ce qu’est fon­da­men­tale­ment le design mul­ti­mé­dia : du design d’information. Ce design réside en un objet inter­ac­tif con­sti­tué d’un con­tenu (pas néces­saire­ment vis­i­ble simul­tané­ment) et d’une inter­face (qui sert à manip­uler, afficher, etc. ce con­tenu). La ques­tion cen­trale de tout tra­vail de com­mu­ni­ca­tion reste le même : faire passer son mes­sage et tra­vailler le design que revêt sa forme. Il est donc tou­jours impor­tant de bien définir ce que l’on veut dire ou mon­trer et de tra­vailler chaque détail pour servir ce pro­pos ; tant les aspects visuels que les aspects scéno­graphiques ou fonc­tion­nels. Cer­tains ont donc bien exploré la manip­u­la­tion des éléments à l’écran sur leur pro­jet ou ont réfléchi à la nature con­ceptuelle de leur inter­face en rela­tion avec cer­tains con­cepts actuels du Web, félicitations.

J’espère donc que cette intro­duc­tion aux prob­lé­ma­tiques de design inter­ac­tif vous amèn­era à porter cette réflex­ion sur l’ensemble de vos pro­jets, du point de vue de leur com­mu­ni­ca­tion et/ou, mieux, de vous voir directe­ment pousser cette explo­ration en 3e année graphisme et multimédia.

Ci-dessous, un aperçu de cer­tains pro­jets présen­tés, par ordre d’apparition : Chris­telle Sajas (1 et 2) ; Adrien Petrucci (3 et 4) ; Laure Strom­boni (5, 6 et 7) ; Con­stance Laisne (8 à 14) ; Olivier Cortès (15, 16 et 17) ; Char­lène Bois­tault (18 et 19) ; Gas­pard Graulich (20) ; Fleur Lecoester (21) ; Emmanuelle Goutal (22) ; Mar­ion Frébourg (23 et 24) ; Claire Bau­d­ri­mont (25 et 26) ; Louise-Clémence Gre­nier (27 et 28) ; Geof­froy Gillant ( 29 et 30).

Merci aux étudi­ants (présen­tés ici ainsi qu’aux autres — dont les pro­jets n’en étaient pas moins intéres­sants), leur nom appa­raît en légende d’image au sur­vol de la souris.