E-Artsup. Département Design interactif & communication visuelle. installation typographique interactive. Design interactif S.04 // Sujet 03 : Installation typographique intercative // Alexandre Rivaux arivaux@gmail.com Département Design interactif & communication visuelle: Enseignants: Nicolas Baumgartner Félicie d Estienne D Orves Jonathan Munn Alexandre Rivaux
Contexte Brief Références Annexe E-Artsup - Priinciples of Design. Design Interactif - Alexandre Rivaux 2
1 - Contexte
Exposition Linotype. La typographie est un élément essentiel du design graphique. Depuis le plomb au pixel, elle marque l ensemble des créations des designers, véhicule des messages, des campagnes et marque les époques. Linotype, fondeur et distributeur de typographies depuis 1886 organise une exposition rétrospective autour de la typographie. À cet occasion, il vous est demandé par le fondeur de réaliser une installation interactive typographique autour du travail du typographe qui contribua à son succès Adrian Frutiger. Adrian Frutiger Linotype Linotype, movie trailer 4
2 - Brief
Exposition Linotype. Installation typographique interactive L installation, que vous imaginerez, prendra place à l entrée l exposition devra permettre aux spectateurs de découvrir ou redécouvrir de manière sensible le travail typographique d Adrian Frutiger et le dessin de lettre. L utilisateur pourra interagir avec l installation par un canal d entrée que vous définirez (Interactions aux corps, detection de présence, son, interface tangible, VR...) Votre travail portera une attention particulière à l expérience utilisateur ainsi qu à son ergonomie. Vous saurez démontrez, par diverses recherches et prototypes, la pertinence de votre proposition. Un cours sera dédié à la présentation de divers canaux d entrée tel que Kinect, Leap Motion, Oculus Rift... afin d en comprendre les tenants et aboutissants en terme d expérience. Vous designerez également le site web de présentation de votre installation. 6
Contraintes Votre installation se composera uniquement de typographie - aucune image ou illustration ne sera autorisée. Vous ne devrez pas utiliser plus de 3 fontes. Le format de l installation est libre. Le temps de l expérience est libre. Votre travail devra prendre en considération l espace dans lequel l utilisateur sera amené à interagir ainsi que la manière dont ce dernier pourra interagir. Le site web de votre installation devra présenter l installation, son concept, vos recherches ainsi que sa vidéo démo et maquettes. 7
Rendu Planning Vous présenterez votre réponse sous la forme d un dossier contenant: - Le rappel du brief - Vos benchmark - Votre concept créatif - Le parcours utilisateur - Vos recherches graphiques - Votre scenographie - 3 visuels clés de votre installation - 1 vidéo demo/prototype de votre installation présentant le projet ainsi que le parcours utilisateur. - Design du site de présentation Vous rendrez également un document making-of de votre travail. Ce dernier pourra contenir : - Photos de votre travail de recherches - Croquis - Essais vidéos - Travail de recherche parallèle UX/UI design de votre installation 26 Janvier 2015 Prise de brief Validation des groupes Analyse du sujet, Recherches & conception... 2 Février 2014 Benchmark Recherches d inspiration interactive, graphique et ergonomique Concepts UX/UI... 9 février 2015 User Journey Storyboard de la vidéo Direction artistique Design site internet... 16 Février 2015 Pré-Rendu 16 Mars 2015 Rendu 8
3 - Références
Digital Type Wall Variable.io (Marcin Ignac) Digital type wall est une installation réalisée par Variable.io à l occasion de l exposition Pencil to Pixel initiée par Monotype en Août 2012 Cette installation retrace l histoire de la typographie par Monotype au travers une série d animations génératives. À chaque nouvelle animation, une typographie de la bibliothèque Monotype est choisie pour la mise en forme, créant ainsi une série de 6000 possibilités différentes. Liens SEA - Design studio Variable.io Pencil to pixel website 10
Chronotext Ariel Malka En 2001, Ariel Malka designer & developpeur, initie le projet chronotext; une série d expérimentation numérique de la typographie. À travers ces expérimentation, Ariel Malka explore le texte et la typographie comme élément de design. Parfois en mouvement, autonome, réagissant en fonction de leur sens propre ou du sens de la phrase, chacune de ses expérimentation prenne en compte le numérique comme un espace physique digital. Liens Chronotext Ariel Malka 11
Searching for Ulysses Fabien Zocco En 2013, Fabien Zocco, artiste en résidence au Labomedia d Orléans, réalise la pièce Searching for Ulysses. Cette pièce reconstitue l œuvre de James Joyce (Ulysse) à travers des flux twitter. Chaque mot est cherché à travers le réseau social puis est affiché, avec son tweet, à la suite des autres. Liens Searching for Ulysses (Excerpt video) Fabien Zocco 12
The moment Song Hyun Ju & Bae Mi Lyoung Réalisée en 2013, The moment explore la relation qu il y a entre un mot et son sens. Issue de la phrase «Il ne fait pas de mot.» souvent dite en Corée lorsque l on est face à une situation absurde, l artiste explore à travers la déformation de la lettre et du mot la réalisation de nouveaux mots eux-même absurdes. Liens Song Hyun Ju 13
LetterScape Peter Cho Réalisée en 2002, Letterscape est une série de 26 paysages typographique. À travers cette pièce, Peter Cho, etudiant de John Maeda à MIT Media Lab, explore la relation possible entre lettre, sens et mouvement. Il reçoit en 2002 le Tokyo Type Director club award ainsi que le Silver award au Art Director Club de New York. Peter Cho concentre une grande partie de son travail à la typographie cinetique dont de nombreux exemples sont visibles sur son site. Liens Peter Cho 14
For all seasons Andreas Muller Réalisé en 2005, For All Seasons est une pièce explorant la mémoire à travers un environnement textuel. Comme Peter Cho, Andreas Muller explore, à travers cette pièce, les possibilités cinétiques que peuvent avoir une typographie à la différence qu il concentre son travail sur la valeur du texte et non sa lecture. Liens Andreas Muller For All Seasons (Excerpt video) 15
Expérimentation Typographique interactive e-art sup, digital lab, 2014 L option Digital Lab a pour objectif de sensibiliser les étudiants à la conception graphique générative et interactive. Après plusieurs cours portant sur la création d objets aux comportements propres, l aléatoire et la gestion de chaîne de caractère, il leur a été demandé à chacun de réaliser une expérimentation typographique interactive. Réaliser une expérimentation typographique interactive à partir d une citation qui vous sera donnée. À travers cet exercice les étudiants se sont interrogés sur le sens des citations choisies, sur la composition graphique et typographique au sein d un espace génératif ainsi que sur le comportement dont peut disposer un caractère typographique. Liens e-art interactive 16
4 - Annexe
La typographie dynamique: hier, aujourd hui et demain Beaucoup de gens lisent davantage sur un écran d ordinateur ou de télé, un agenda électronique ou un téléphone cellulaire que sur du papier. Comment en est-on arrivé là? Depuis plusieurs dizaines d années, notre relation à la technologie s est développée à un point tel que la lecture sur des interfaces graphiques fait aujourd hui partie intégrante de notre vie. Les caractères numériques qui s affichent sur l écran coûtent évidemment moins chère à produire et à diffuser que les écrits sur papier. La typographie dynamique et animée offre en outre des possibilités exceptionnelles par rapport à la typographie par définition statique de la page imprimée. En tant que médium fondé sur le temps, elle autorise une approche cinématographique, avec des voix et des personnages, un rythme, du suspense, des surprises et un récit. La typographie animée interactive permet par ailleurs de naviguer dans une narration non linéaire ou de créer un espace d information complexe. L histoire de la typographie dynamique commence avec l illusion du mouvement sur la page statique et elle se poursuit avec les livres animés, le cinéma, la télévision et l écran d ordinateur. Il est intéressant d étudier d abord les exemples de typographie statique dans lesquels Peter Cho Diplômé du MIT en 1999, Peter Cho est parti à Los Angeles poursuivre son rêve : créer des génériques de film pour Imaginary Forces. Aujourd hui, il habite toujours à LA, où il perfectionne ses connaissances dans le cadre de l enseignement du troisième cycle à l UCLA. Découvrez son travail de recherche typographique sur : http://www.pcho.net/ la mise en page du texte ajoute du sens aux mots. Peu avant la première guerre mondiale, les dadaïstes et les futuristes ont utilisé la mise en page des mots et des lettres pour souligner le sens poétique du texte, ou le modifier. Les poètes concrets des années 1950 et 1960 ont approfondi ces expériences, élaborant des poèmes visuels destinés à être regardés comme des peintures. Des artistes et des graphistes comme Lazlo Moholy-Nagy ou Robert Massin se sont servi de la page comme support d une typographie expressive et dimensionnelle. La typographie réellement animée trouve son origine dans le film, temporel par nature. La création de génériques est devenue dans les années 1950 une forme artistique à part entière, avec les élégants «films dans le film» de Saul Bass, et elle a connu regain de faveur vers le milieu des années 1990 notamment avec le travail de Kyle Cooper. Les logiciels actuels, tel que After Effects ou Flash, permettent de créer facilement un animation textuelle. Ainsi, ce que la PAO a permis pour le texte imprimé (donner les moyens à toute personne équipée d un ordinateur de produire une œuvre imprimée qui ait une apparence professionnelle), ces logiciels le feront pour la typographie dynamique en permettant à quiconque de créer des graphismes animés semblables à ceux que l on peut voir à la télévision. Aujourd hui, la typographie dynamique est surtout utilisée dans la publicité. Les messages animés abondent à la télévision et sur internet, essentiellement parce qu on essaie d attirer notre attention pour nous vendre quelque chose. Mais, depuis quelques années, ces graphismes ont trouvé de nouvelles utilisations dans les journaux télévisés, les reportages sportifs, les émissions musicales et les programmes de divertissement, notamment sur les chaînes câblées. Les annonceurs publicitaires se rendent compte que le texte animé, parfois appuyé par la parole, est capable d attirer l attention du spectateur tout en évitant le tournage d une séquence coûteuse. Dans cette rivalité pour capter notre attention et créer une image de marque aisément identifiable, les messages des spots publicitaires occupent une grande place en ce début du XXIe siècle. Cet envahissement finira par gagner notre «vie réelle», car les annonceurs traversent l écran pour entrer dans notre espace physique. Un des grands problèmes de demain consistera sans doute à déterminer comment gérer cette saturation. La révolution numérique a eu pour conséquence de raccourcir notre temps d attention face à cette pléthore de textes dynamiques, mais l informatique peut aussi s associer à la typographie pour développer des possibilités expressives et esthétiques. Les progrès technologiques récents ont apporté l e-mail, la téléphonie cellulaire, le SMS, 18
la messagerie instantanée en ligne et les blogs, autant de formes textuelles qui ont leur structures et leur règles. Peut-être verrons-nous bientôt apparaître une forme écrite jusqu ici inimaginable, qui utiliserait de façon novatrice la typographie dynamique et comblerait le fossé entre l oral et l écrit, comme le fait déjà, d une certaine façon, l échange de messages en temps réel. Il existera peut-être un jour une fonte intelligente, qui écoutera et nous parlera, et qui traduira de manière plaisante les inflexions de notre voix. Les caractères intégreront peutêtre une connaissance interne de leur formes, modifiant ou amplifiant leurs traits - tout en gardant l intégrité de leur morphologie - pour mieux véhiculer le contenu affectif d un message. Une autre voie pourrait nous entraîner vers la manipulation de la structure du texte écrit, à l aide de l hypertexte et d autres interactions avec l utilisateur, afin d ajouter de la profondeur à la narration linéaire traditionnelle. Si c est dans ce sens que s oriente l avenir, alors la typographie dynamique animera le texte sous des formes élégantes et inventives. J ai hâte de voir cela. Peter Cho Essai paru dans «Code et création», John Maeda, 2004 19
Contact Alexandre Rivaux Visual Designer & Partner Bonjour, interactive Lab www.bonjour-lab.com arivaux@gmail.com