Superlink me

Cer­tains d’entre-vous ont émis le souhait de per­son­naliser l’apparence de leur blog. J’ai été déjà assez exhaus­tif sur le sujet au lance­ment du pro­jet : L’interface d’un blog, en l’occurrence ici de type Word­Press, est plus une ques­tion d’habillage que de design. Il est pos­si­ble de lui faire dépasser ce cadre de façade mais cela sous-entend une solide cul­ture tech­nique en PHP / CSS. Sans aller jusque là, j’avais prévu une intro­duc­tion à cer­taines mod­i­fi­ca­tions de base sur les styles CSS (couleurs, polices, etc.) mais nous n’aurons pas le temps néces­saire dans le plan­ning de fin d’année. De plus je con­sid­ère cette phase d’habillage comme sec­ondaire dans le con­cept d’un blog.

Comme je l’ai déjà dit, un blog est avant tout un pro­jet édito­r­ial, Sa rai­son d’être est surtout sa thé­ma­tique et l’approche qu’il pro­pose à son lec­torat. Tout comme un mag­a­zine, penser son apparence, ses styles, etc. avant d’avoir trouvé son con­tenu et son nom est met­tre la char­rue avant les bœufs.

> Lire la suite…

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…

Con­cer­nant les pré-requis tech­niques pour la mise en place de votre outil Word­Press, il vous faut avant tout un hébergeur avec un espace de stock­age (10 Mo peu­vent suf­fire, tant mieux si c’est plus). Cet hébergeur doit pou­voir vous offrir sur son serveur l’usage du lan­gage PHP et la ges­tion d’une base de don­née MySQL (qu’importe les ver­sions). Je n’ai pas de référence par­ti­c­ulière, ce la dépends de si vous préférez un hébergeur français (avec inter­face en français) ou étranger (avec inter­face en anglais). Les étrangers sont sou­vent plus intéres­sants niveau prix. En france on pensera à l’un des plus gros qui est OVH ; aux États-Unis, Site5 mais il y a une foule de petits hébergeurs gra­tu­its un peu partout. À vous de faire votre recherche rapi­de­ment car ensuite, pour que nous puis­sions avancer effi­cace­ment, il vous faut :

> 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…

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…

Vous n’êtes peut-être pas spé­ciale­ment famil­iarisé avec les acronymes d’argots util­isés sur le net mais vous risquez de ren­con­trer celui-ci si vous vous pré­cip­itez sur un forum d’utilisateurs après avoir déballé et tenté d’utiliser un appareil sans suc­cès… avant d’avoir lu le mode d’emploi.

RTFM est l’acronyme de Read That F*cking Man­ual (presque lit­térale­ment en français « lis ce foutu manuel ») ; très sou­vent suivi d’un « ! ».

Les objets dont l’usage est implicite ou véri­ta­ble­ment intu­itif sont en réal­ité très rares. Notre appar­ente facil­ité de prise en main n’est sou­vent que le fruit d’une cul­ture de la manip­u­la­tion, déjà acquise. D’autres fois, un mar­ket­ing malin se charge de nous amadouer pour faciliter la per­cep­tion de cette prise en main, pour­tant pas plus naturelle. Nous con­cevons ainsi des objets dont nous pen­sons impétueuse­ment la prise en main évidente. Et pour­tant, non.

> 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.

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…

Les appli­ca­tions du design inter­ac­tif sont innom­brables, les objets qui nous entourent ayant ten­dance à inté­grer de plus en plus d’informations ne va faire qu’accroître cet état. L’interface graphique, son graphisme, ses principes de manip­u­la­tion devi­en­nent une com­posante de la con­cep­tion de ces objets.

Si ces objets relèvent d’un proces­sus de pro­duc­tion indus­triel très coû­teux, sou­vent impos­si­ble à assumer pour l’école, celle-ci est cepen­dant un endroit priv­ilégié à leur ges­ta­tion. C’est là que vous apprenez à manier la notion de con­cept, à for­muler un pro­pos et l’illustrer. Vous apprenez à utiliser des out­ils d’expression visuelle vous per­me­t­tant de créer des images et des vidéos comme vous apprenez égale­ment à maîtriser le lan­gage qui entoure ces métiers (vocab­u­laire, etc.) et plus générale­ment à for­muler claire­ment vos idées. Cer­tains de ces con­cepts sont des pos­tu­lats, d’autres des utopies mais dans la mesure où ils reposent sur une recherche et un scé­nario plau­si­ble, ils pour­ront tou­jours servir de base à d’autres pro­jets plus concrets.

C’est pour cela que pour le rendu du sujet, j’ai insisté sur la présen­ta­tion de vos pro­jets, com­posée de morceaux d’animation, de démos d’interactivité, de maque­ttes graphiques, de story-boards, de doc­u­ments de recherche, etc. qui don­nent corps à votre projet.

Si vous con­sul­tez les pro­jets de Yahoo! Design Inno­va­tion Team, vous vous ren­drez compte que la plu­part de leur pro­jets n’existent que sous la forme de vidéos ou ani­ma­tions. Ces pro­jets explorent, en analysant le réseau, l’usage que nous en faisons : Ils en tirent des sta­tis­tiques qui devi­en­nent un matériau. Le car­ac­tère en apparence pure­ment artis­tique de cer­tains de ces pro­jets cachent de véri­ta­bles out­ils d’observation social.

Toutes ces nou­velles pra­tiques que nous avons des tech­nolo­gies de com­mu­ni­ca­tion, les mes­sageries, le partage ou la syn­chro­ni­sa­tion de ressources, les pro­jets reposant sur la par­tic­i­pa­tion, etc. ouvrent de nou­velles per­spec­tives de pra­tiques du design.