métiers du design by jonathan lalanne

mĂŠtiers du design_

Andrieux Thomas / Lalanne Jonathan / Sequeval Jade

Flashez-moi pour ma version numĂŠrique

métiers du design_ graphisme print & numérique

_Rédaction Andrieux Thomas Lalanne Jonathan Sequeval Jade _Graphistes Andrieux Thomas Lalanne Jonathan Sequeval Jade _Photographes Andrieux Thomas Lalanne Jonathan Sequeval Jade _Directeurs de la publication Andrieux Thomas Lalanne Jonathan Sequeval Jade métiers du design_ est une publication éditée par STUDIO T2J SARL au capital de 8000 euros SIRET 49999999999 ISSN : 1969 - 2440 _impressions tuerlinckx N.V. 3294 Molenstede / Belgique

avant-propos 1.le graphisme histoire du graphisme

2.le web

histoire du graphisme numĂŠrique

3.Smartphones et tablettes

print & web se rencontrent

avant-propos_

Aujourd’hui la consommation d’informations se fait de façon dynamique. Le texte défile. Avec son défilement, il se fragmente et se lit en petites portions. Une portion remplit exactement l’espace donné, l’écran. Dans le texte, des mots sont reliés à d’autres stocks d’informations, d’autres ensembles et entités de texte. Les images, elles, ont réduit leur format et s’organisent / se composent de façon typographique, à l’instar des lettres. L’image remplace/synthétise le mot, l’image devient horschamp de la lettre. Nous pouvons choisir notre mode de lecture, notre entrée en matière, par l’image ou par le texte. Les ressources visuelles et écrites sont indépendantes. Le graphisme décuple leur pouvoir narratif, ainsi que leur accessibilité. L’information se dématérialise. Peut-on parler alors de démocratisation du verbe ? Le graphisme deviendrai-t-il un acte politique ? Il agence des protagonistes dans un espace donné, met en lumière des informations, change les modes de lecture. La personnalisation des solutions graphiques va mettre en abime un métier jusque la statique. Il va devenir dynamique et s’adapter constamment aux contenus. Seul le support reste matériel, le contenu se fragmente, le graphisme devient un programme, la mise en page interchangeable. Mon journal devient une caméra et mon téléphone est un livre. Notre rapport à l’écrit change et l’image change. Aujourd’hui. Quelles mutations a subi le métier de graphiste avec l’arrivée du numérique ?

1.le graphisme_ Histoire du graphisme

Le graphisme existe depuis que l’homme eu le besoin de s’exprimer. Parfois artistique, parfois scientifique, il est le subtil mélange du dessin, de la typographie, de la photographie, de la mise en page, de la couleur, du support alliant des principes, des théories et des pratiques. Il créé, manipule, articule des informations et des savoirs dans un but promotionnel et informatif. Véritable langage, il communique visuellement des idées et des émotions. Le graphisme suit l’évolution humaine dans la transmission. L’art pariétal est considéré comme la première forme du graphisme avec les peintures dans les grottes de Lascaux (18 000 et 15 000 ans avant J.C). Le second élément est fondateur de la communication visuelle, l’écriture. Elle est un pilier et est née en Mésopotamie à Sumer vers -3500 av JC. Nous considérerons le graphisme en tant qu’évolution de l’écriture et de l’image au travers des siècles jusqu’à aujourd’hui.

De 700 av JC jusqu’à la fin des années 1970, la typographie est l’élément moteur du graphisme. Etroitement liée à l’histoire de l’imprimerie, elle est une production graphique se basant sur la lettre. En effet, le graphisme voit apparaître différents styles d’écritures allant de la phénicienne à la capitale romaine en passant par la gothique. L’invention de l’imprimerie par Gutenberg en 1440 est une véritable révolution pour la typographie. Elle permet une diffusion plus large des supports. Prenons comme exemple la bible qui fut le premier ouvrage à utiliser la technologie à caractères métalliques et mobiles. On disposait des caractères mobiles en plomb pour former des mots et des phrases. C’est à cette époque que le terme typographie est employé pour la première fois. La typographie aide le graphiste à connoter et donner des valeurs à ses projets quels qu’ils soient, elle fait partie intégrante de son métier.

Le 19 ième siècle est synonyme de libération. En effet, après une longue période sans avancées technologiques, le graphisme est libéré de ses contraintes grâce à l’invention de la lithographie, technique d’impression à plat qui permet la création et la reproduction à de multiples exemplaires d’un tracé exécuté à l’encre ou au crayon sur une pierre calcaire. Une distinction se créer alors entre arts et arts appliqués au début du 20 ième siècle. L’industrialisation ainsi que la société de consommation favorisent l’apparition de nouveaux medias comme par exemple la publicité ce qui créer de nouveau emplois. Nous ne sommes plus dans l’artisanat mais réellement dans l’industrialisation de l’art. La création graphique devient un outil de communication. Elle permet de répondre à une commande précise. La création d’affiches publicitaires fait émerger de nouveaux “graphistes artistes”, artistes qui mettent à profit 10

leur art dans la société industrielle, comme Toulouse Lautrec ou encore Alphonse Mucha, peintres emblématiques de l’Art nouveau qui réaliseront un grand nombre d’affiches publicitaires. En 1923, durant la période de art déco, apparaît en France la première affiche dite moderne, avec Charles Loupot « voisins ». Dans les années 1925, les artistes commencent à travailler sur de nouveaux vecteurs de communication : la photographie, le cinéma. En 1927, le terme de « graphisme » apparaît dans la revue Arts et métiers graphiques. C’est la grande revue du temps, qui recueille les contributions des meilleurs professionnels de la typographie, mais aussi d’artistes, d’écrivains, comme Pierre Mac-Orlan. Le constructivisme russe (1917-1935) vient marquer le paysage graphique mondial. Il se base sur exclusion du réel de l’œuvre en créant une tension au sein de celle-ci comme en

témoigne les affiches de El Lissitzky. L’artiste Jan Tschichold, représentant du Bauhaus, met l’accent sur la valeur de la mise en page asymétrique, sur l’aération de la page, l’emploi de caractères simples et efficaces, comme l’akzidenz grotesque, et l’appropriation par les typographes de la photographie, en tant que vecteur de la modernité. Il met en page lui-même, dans Arts et métiers graphiques, ses travaux et ceux de ses condisciples, adeptes de la nouvelle typographie. Les années 30 sont marquées par Paul RAND, l’un des plus célèbre graphiste américain. Il a créé de nombreux logos d’entreprises comme IBM ou UPS. En 1950, l’Alliance graphique internationale est fondée à Bâle. C’est dans le contexte contemporain que la discipline et le terme « graphisme » se popularisent, tout comme le design, la bande dessinée ou la

vidéo. Dans le cinéma, le graphisme connaît de grands changements. Le graphiste Saul Bass, révolutionne l’affiche et le générique avec le film vertigo, dans les années 1950, en adoptant une approche diamétralement opposée à celle en vigueur à cette époque. L’édition n’est pas en reste de ces multiples mutations du graphisme. Robert MASSIN. Graphiste, directeur artistique et typographe français connu sous le nom de Massin, il est une figure majeure du graphisme français, notamment dans le domaine de l’édition. Son approche non conventionnelle de la typographie le rendra célèbre. Parmi ces travaux les plus remarquable on peut compter : « Exercices de style » paru en 1963, « »Cent Mille Milliards de Poèmes » paru en 1961 et « La Cantatrice » en 1964. Il va exposer les différentes intonations au travers de la typographie. 11

Durant la seconde moitié du 20 ième, il est important de relever les travaux de Romain CIESLEWICZ, polonais, qui compte parmi les plus influent de la seconde moitié du XXème siècle. Il a influencé d’une façon décisive le développement des arts graphiques et de l’affiche. Ses travaux se distinguent par des associations d’idées originales, une structure recherchée, des détails qui, à force de répétition et de transformations deviennent un signe clair, ses techniques de collage et de photomontage, sa poésie, son romantisme et son rationalisme. Michel BOUVET, graphiste et affichiste français quand à lui, réalise de nombreuses affiches pour l’Opéra de Massy, le Théâtre Les Gémeaux ainsi que des catalogues pour Arles. Il est également commissaire de nombreuses expositions et reçoit plusieurs récompenses dans la plupart des grandes biennales internationales d’affiches (Pologne, Finlande, République, États-Unis, Mexique, Chine et Japon) ; En France, il recoit le Grand Prix de l’Affiche en 1987 et en 1992. Il reçu également le Prix Alphonse Mucha de la 22ème Biennale Internationale des Arts Graphiques de Brno en République Tchèque. Il faut également noter que Neville BRODY Graphiste, typographe et directeur artistique britannique est une figure emblématique de la culture graphique. Iinventeur de la typographie moderne, il a considérablement 12

bousculé les conventions et développé de nouveaux systèmes de communication et est considéré comme l’un des artiste les plus reconnus de sa génération. Il révolutionne la mise en page des magazines avec des titres cultes comme « The Face », « Arsena » ou encore « Actuel » en France. Il est notamment le créateur de la typographie « Blur ». Parallèlement, il publie deux monographies considérées aujourd’hui comme de véritables références du design graphique : « The graphic language of Neville Brody » 1 et 2, en 1988 et 1994. Plus recement, Shepard FAIREY, graphiste et illustrateur issu de la scène du skateboard, s’est d’abord fait connaître par les autocollants « André Giant Has a Posse », qui a donné la campagne « Obey Giant ». Son travail est devenu mondialement célèbre lors de la campagne présidentielle américaine de 2008 avec la création du poster « HOPE » de Barack Obama qui deviend une imageicône de la campagne. L’Institut d’art contemporain de Boston le considère comme l’un des plus connus, des meilleurs et des plus influents artistes de Street Art du moment. En 2007, il participe au film associé à Bansky « Faites le mur ». Jonathan HOEFLER,c réateur américain de polices typographiques, est le fondateur de la fonderie de polices numériques « Hoefler & Frere-

Jones » à New York. Il est connu pour les identités visuelles de « The Rolling Stone Magazine », « Harper’s Bazaar », « The New York Time Magazine », « Sports Illustrated », le groupe musical « They Might Be Giants ».En 1995, il a été reconnu comme un des quarante designers les plus influent des Etats-Unis par I.D. Magazine. En 2002 il reçoit le prix « Charles-Peignot » par l’Association typographique internationale.

Contrairement au autres, Stefan SAGMEISTER, designer graphique et typographe considéré comme l’un des designers marquant du début du XXIème siècle, approche le support de manière originale. En effet, la plupart de ses oeuvres ne sont pas réalisées sur ordinateur. Il questionne constamment la pratique même du design graphique. _

interview Romain Bourguet Graphic designer & étudiant_ 25 ans, graphiste, Wad magazine, Paris

Scolairement, quel est ton parcours ? Alors, j’ai passé un Bac littéraire option audiovisuelle, avant d’entamer une année de fac en « Arts du spectacle cinéma audiovisuel à Bordeaux trois. J’ai vite décidé de changer de voie, je voyais que je ne m’investissais pas assez tout simplement parce que les cours trop théoriques de la fac ne m’intéressaient pas plus que ca, je me suis rendu compte que j’aimais les images mais qu’il y avait d’autre moyen de communiquer par elle que par le biais du cinéma. En fait j’avais envie de créer. Du coup, je me suis inscrit en année de Mise a niveau en arts appliqués (MANAA) a l’école ECRAN au Campus de Bissy, et j’ai continue dans cette voie en passant un BTS communication Visuelle. Option Graphisme Edition Publicité. Bon, c’est vrai, je n’ai pas

eu mon BTS du premier coup. Pas par manque de compétences, mais plutôt par manque de confiance en moi : je ne me suis pas présenté aux examens de fin d’année parce que je n’étais pas pleinement satisfait de mes travaux. J’ai alors déménagé à Paris, et j’ai passé mon BTS en candidat libre, que j’ai obtenu avec mention. J’avais besoin de changer d’air, et d’être au contact de la capital, qui, je pense, offre beaucoup de choses aux graphistes, en matière de rencontres, d’expos… Et comme je suis jeune, je peux me permettre de migrer. Je devais saisir cette opportunité. Cette année, je suis a la Sorbonne, en 3ème année de licence de « Médiation Culturelle » option livre. J’avais comme premier choix l’option « image », mais beaucoup trop de monde postule à cette option, et bien que finalement,

quelle photo vous représenterait ?

j’ai eu « libre » par défaut, je suis satisfait de ce parcours car il est dans la continuité de mon BTS, et j’aime énormément l’univers du papier et de l’édition. Quels obstacles as-tu rencontrés pendant ta recherche d’emploi ? Je pense que le BTS Communication Visuelle tel que j’ai pu l’appréhender m’a donné une vision trop « industrielle » du graphisme. J’ai très peu vu la part « purement créative » du travail. Du coup je crois que je ne me sentais pas assez « mure » pour me lancer en agence. Les obstacles ne venaient pas du « monde de l’entreprise », mais plutôt de moi. Qu’est-ce qui t’a aidé ?

peu plus tot : je ne suis pas pleinement dans l’univers du travail. Je suis étudiant et graphiste indépendant su de petites missions. Par contre, oui, je suis en stage, grâce a la fac. Pour trouver mon stage (je suis chez WAD (le magazine) pour deux mois, trois jours par semaines jusqu’à fin décembre), j’ai répondu a une annonce que j’ai trouvée sur leur compte Facebook. Aujourd’hui, les réseaux sociaux jouent beaucoup dans les relations professionnelles. Et pour l’univers du graphisme tout marche par le bouche a oreille, et les contacts : j’ai écrit quelques articles pour Spray magazine parce qu’une copine bossait chez eux, j’ai pu bosser une semaines a Cannes pendant le festival l’an dernier grâce a un client a qui j’avais fait un logo… On peut vraiment avoir de très bonnes surprises.

Comme j’ai pu le faire entrevoir un

Quels conseils donnerais-tu a quelqu’un qui souhaiterait exercer une profession comme la tienne ? Définitivement : ne pas cracher sur les petits boulots. Il faut bien se faire un peu la main et glaner des sous la ou on peut, mais surtout : se rendre visibles des qu’on le peut pour ferrer des clients plus intéressants de fil en aiguille. Où en es-tu maintenant? Et quelles sont tes perspectives. Et bien.. C’est une bonne question. Je veux valider mon année de BAC+3 (6 ans après avoir passé mon Bac, ca ne me ferait pas de mal je trouve (rires)), voir ce que me réserve l’avenir grâce a mon stade chez WAD, que je continue chez eux ou que je rencontre des gens qui m’apporteront quelque chose d’intéressant professionnellement. Trouver de petites missions car a cause de l’université je n’ai plus vraiment l’occasion de « créer » comme j’ai pu le faire en BTS… Et puis je me suis ache-

té un ouvrage sur la création de site web et j’ai découvert le « siteduzero » et compte bien me mettre aux langages HTML et CSS des que je le pourrai, car c’est véritablement une lacune que je souhaite combler : a la fois pour me créer une visibilité sur le net a travers un portfolio en ligne, mais aussi parce que j’estime qu’aujourd’hui, pour être graphiste, il faut avoir un maximum de cordes son arc, pour ne pas se laisser dépasser par les nouvelles technologies. J’irai également me renseigner a la Mairie de Paris, apparemment, ils proposent des formations courtes web pour les graphistes… A voir. _

2.le web_ Le graphisme interactif

Le rôle du graphiste a subi d’importantes évolutions au cours des dernières années, pour en venir à englober une vaste gamme de nouveaux supports, outils, ressources ( et par conséquent, de nouvelles responsabilités ). Là où auparavant les spécialistes s’occupaient de tâches allant de la rédaction à la postproduction, c’est désormais au graphiste d’en faire plus. Les clients attendent plus que la mise en œuvre créative de leurs idées ; ils font désormais appel aux graphistes pour développer leurs styles visuels spécifiques, qu’ils espèrent voire traduits sur une vaste gamme de supports : par exemple les supports numériques faisant appel au graphisme interactif. Discipline la plus jeune de l’univers graphique, le graphisme interactif est en cours de redéfinition depuis le milieu des années 1990. Avant Internet, le graphisme interactif prenait la forme de guichets, de CD-Rom et d’autres interfaces d’utilisation, mais la discipline a vé-

ritablement explosé avec les progrès techniques et la montée en puissance d’Internet. Si les sites Internet constituent la forme d’expression la plus usuelle de cette discipline, elle trouve également à s’exprimer dans les interfaces d’utilisation des appareils électroniques (appareils photographiques numériques, appareils mobiles, ordinateurs), les logiciels, les guichets électroniques, les menus des DVD ou des systèmes de transmission par satellite ou par câble, et les écrans électroniques affichant de l’information. L’objectif principal de tout graphiste travaillant sur un projet interactif doit être de faciliter l’utilisation et l’accessibilité des informations par l’utilisateur final, favorisant une utilisation la plus fluide et la plus intuitive possible de l’interface. De tels projets résultent de la collaboration entre graphistes, programmeurs front-end et back-end et architectes de l’information ou bien d’un graphiste vraiment doué et polyvalent. Internet constitue donc la forme la

plus usuelle du graphisme interactif. Il y a à peine vingt ans, Internet ressemblait à une boîte de Pandore dont les premiers utilisateurs se décidaient à retirer le couvercle avec précaution. Le moteur le plus utilisé était Yahoo. La plupart des sites étaient hébergés par Geocities, on déroulait leurs textes verticalement sur des fonds aux textures prédéfinies, à peine émaillés de quelques lignes soulignés ou en gras pour qu’on les repère bien. L’humanité commençait juste à explorer le grand « réseau des réseaux », la possibilité de communiquer en temps réel, mais ce n’était que l’imitation primitive d’une page imprimée. Aujourd’hui, Internet est la technologie qui a été le plus rapidement acceptée. Chaque jour, chaque minute, chaque seconde, Internet dépasse ses propres possibilités grâce à sa connexion permanente aux nouveaux logiciels puissants, et nous surprend avec un niveau d’interactivité qui nous capture et nous transporte 22

dans des mondes imaginaires imprévisibles. Pour bon nombre de moyens de communication, les sites Web sont devenus le principal outil, détrônant ainsi les supports imprimés. Dans le même temps, les applications Web ont pris leur place aux côtés des médias traditionnels. Par ailleurs, l’utilisation d’Internet est parvenue à un stade de maturité, tout comme la conception Web: au cours des dix dernières années, cette discipline a franchi une étape d’incertitude et d’expérimentation pour parvenir à une place assurée et estimée. L’utilisation toujours plus répandue des accès Internet à large bande permet aux designers d’employer des fichiers image plus volumineux. L’émergence des réseaux sociaux et l’évolution vers un stockage et une gestion des données sur le Web changent notre manière d’utiliser Internet et de concevoir des pages Web. Bien que des avancées tech-

nologiques majeures aient été accomplies en matière de conception graphique Web, la tendance prédominante récente a été marquée par le passage de l’utilisation de la technologie comme nouveauté vers un équilibre entre la conception, la facilité d’utilisation et la technologie. La transparence PNG, par exemple, a offert aux concepteurs toute une gamme de nouvelles possibilités permettant d’incorporer des images dans leur travail. Grâce à des polices mieux supportées par les navigateurs , les concepteurs peuvent désormais utiliser la typographie ( en particulier les caractères grands, gras et fantaisie ) pour ajouter de la personnalité et de la clarté et jouer sur la mise en page avec CSS3. CSS3 CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World

Wide Web Consortium (W3C). Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. L’un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d’un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité de changer plus facilement de présentation, et de réduire la complexité de l’architecture d’un document. Mais il est important de rappeler que certains navigateurs n’ont pas encore implémenté l’ensemble de ces fonctionnalités. 23

LA TYPOGRAPHIE Pour tout professionnel du web, l’utilisation de polices autres que celles disponibles sur le système des internautes a toujours été jusqu’à présent un exercice délicat et complexe. Pour un imprimé, la seule contrainte par rapport aux polices de caractère est que la police soit compatible avec le système de l’imprimeur (ce qui ne pose presque jamais de problème si la police est fournie). Par contre, sur le web, l’affichage du texte ne se fait pas sur l’ordinateur du créateur, mais sur l’ordinateur de chacun des internautes qui visite le site. Une solution était d’utiliser des images à la place du texte mais le référencent s’effectuait mal. Des solutions techniques ont été mises en place. Avant 2009, nous avions déjà : sIFR (Flash), sIFR Lite (Flash), sIFR Lite, FLIR ou Facelift (PHP + GD) FLIR, typeface.js (SVG/ VML). CUFON En 2009, Cufón est une alternative pour intégrer des polices TrueType et OpenType au web. Le site se propose de générer un fichier JavaScript à inclure sur le site, comprenant les tracés vectoriels calculés à partir du fichier de police fourni (formats TTF, OTF, PFB). Il faut bien sûr aussi télécharger et inclure la librairie Cufón, et sélectionner les caractères pouvant être utilisés (alphanumériques, latins, ponctuation, cyrillique...) ce qui en augmentera la 24

taille d’autant. Le fichier obtenu peut être d’une taille raisonnable selon la complexité de la police et la qualité choisie. Si on en fait un usage fréquent à différents endroits d’un site, ce fichier généré s’avére probablement moins lourd qu’un remplacement par des images. FONT FACE CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages web à proposer une fonte au téléchargement, fonte qui serait ensuite utilisée dans la page. Il s’agit de la règle @font-face. Mais celle-ci a été peu implémentée par les navigateurs, ou alors partiellement. (En l’occurrence, le bon élève à quelques réserves près, tout de même - était Internet Explorer). Les problèmes rencontrés étaient les suivants: La plupart des fontes disponibles sont protégées par le droit d’auteur et ne peuvent pas être redistribuées, y compris comme fonte «intégrée» à un site web; Les fontes rajoutaient un poids conséquent aux pages (jusqu’à plusieurs centaines de Ko); Les développeurs des navigateurs étaient peu enclins à affronter les deux problèmes ci-dessus (surtout le premier). Pendant longtemps, le seul navigateur à avoir un support tout relatif de @font-face était Internet Explorer. Mais il fallait utiliser un format de fonte (EOT) un peu obscur, pro-

priétaire, et généré par des outils peu disponibles. Bref, c’était assez limité. Lorsque le groupe CSS a publié CSS 2.1 (correctif de CSS 2 qui, entre autres, supprime un certain nombre de choses peu réalistes, pas ou mal implémentées, etc.), @fontface a été supprimée. Depuis fin 2010 et début 2011, @ font-face permet d’incorporer des polices externes et variées. Défini en 1998, par la norme css2, Fonface revient sur les devants de la scène grâce à son support maintenant implémenté correctement par tous les navigateurs récents. Google Web Fonts sont également des polices hébergées en ligne par Google (@fontface). Le web rejoint ainsi le support imprimé par l’utilisation parfois subtile de typographies diverses donnant du corps aux mise en page. ORDINATEURS ET LOGICIELS Dans les années 1980 les ordinateurs personnels se répandirent, dont le Macintosh, et mirent à la portée d’un plus large public la puissance

des gros systèmes informatiques jusqu’alors réservés aux laboratoires et aux programmeurs. Les interfaces graphiques comme Mac Os sur Macintosh, GEM et plus tard Windows sur PC, facilitèrent la prise en main de ces ordinateurs de nouvelle génération qui, en s’affranchissant du mode texte des terminaux, s’ouvrirent à la création avec des méthodes de travail plus naturelles : bureau virtuel, icônes, manipulations des graphismes à la souris. Cela permit aux artistes et aux maquettistes de passer plus facilement à l’informatique grâce notamment à la suite Adobe. Adobe Creative Suite est une suite logicielle de graphisme professionnel commercialisée par Adobe Systems depuis 2003, qui comporte notamment les logiciels Illustrator, Photoshop et InDesign. Adobe Flash faisant partie de la creative suite a la particularité d’allier dessin vectoriel et animations, permettant la correspondance des supports imprimés et du web. La plupart des graphistes au début des années 2000 se sont mis

à ce logiciel et à l’action script. Mais depuis fin 2010, il a peu à peu disparu d’internet se cantonnant à certaines applications. Les graphistes se rapprochent peu à peu également du code informatique grâce à java contenu dans Processing logiciel open source. ADOBE FLASH ET LE WEB Adobe Flash est un puissant environnement de création d’animations et de contenus multimédias ( animations vectorielles, sites webs). On peut créer des expériences interactives captivantes qui s’affichent à l’identique sur tous les postes de travail et terminaux mobiles, y compris les tablettes, les smartphones et les téléviseurs. Adobe Flash ou Flash (anciennement Macromedia Flash) est une suite de logiciels permettant la manipulation de graphiques vectoriels, de bitmaps et de scripts Actionscript, qui sont utilisés pour les applications web, les jeux et les vidéos. Flash Player, développé et distribué

par Macromedia (racheté en 2005 par Adobe systems, est une application client fonctionnant sur la plupart des navigateurs web. Ce logiciel, et la diffusion de flux (stream) bi-directionnels audio et vidéo. Pour être bref, Adobe Flash est un environnement de développement intégré (IDE), une machine virtuelle utilisée par un player Flash ou serveur flash pour lire les fichiers Flash. Mais le terme « Flash » peut se référer à un lecteur, un environnement ou à un fichier d’application. Depuis son lancement en 1996, la technologie Flash est devenue une des méthodes les plus populaires pour ajouter des animations et des objets interactifs à une page web ; de nombreux logiciels de création et OS sont capables de créer ou d’afficher du Flash. Flash est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo. Il permet aussi d’intégrer de la vidéo en streaming dans une page, jusqu’au développement d’applications Rich media. Les fichiers Flash, généralement

appelés « animation Flash », comportent l’extension .SWF. Ils peuvent être inclus dans une page web et lus par le plugin Flash du navigateur, ou bien interprétés indépendamment dans le lecteur Flash Player. Même si Flash est utilisé sur de nombreux sites web, il ne s’agit pas d’une norme du W3C, et donc, en tant que tel, il ne fait pas partie du Web. En effet, bien qu’un plugin Flash soit préinstallé sur la majorité des ordinateurs grand public, de nombreux systèmes d’exploitation, libres ou non, ne disposent pas d’un lecteur. En l’occurrence, GNU/Linux ne dispose d’un plugin que pour processeurs x86, comme mentionné sur le site d’Adobe, alors que Linux est disponible sur de nombreuses autres architectures. Bien qu’Adobe ait publié les spécifications partielles de Flash (hors codecs vidéo, par exemple), il n’existe pas d’application de référence, et donc, il est impossible de l’utiliser « quelle que soit sa plateforme ». De plus, l’intégration aux navigateurs par un plugin pose de nombreux problèmes d’accessibilité. Lors de sa conférence de presse, en janvier 2010, Apple a rappelé que sa tablette tactile ne supporterait pas la technologie Flash, l’une des applications les plus populaires pour lire les vidéos depuis un navigateur Internet. Flash, qui permet de réaliser des animations, était utilisé sur de nombreux sites, qui l’utilisaient également pour des jeux ou des présentations. 28

Depuis les sites d’agence en flash ont été peu à peu remplacés par des sites en html5 avec les balises video, audio et canvas. PROCESSING ET LE CODE INFORMATIQUE Avec l’avénement du numérique et de la culture qui l’accompagne (artistique mais aussi professionnelle, dans les métiers du graphisme, du design, de l’image, du son, de l’édition), la nécessité de vulgariser les outils de création nécessaires au travail du code informatique s’est manifestée dans un contexte du «libre» et de l’open source qui contribue d’autant plus à soutenir sa diffusion. Processing (autrefois orthographié Proce55ing) est un langage de programmation et un environnement de développement créé par Benjamin Fryet Casey Reas, deux artistes américains. Processing est le prolongement « multimédia » de Design by numbers, l’environnement de programmation graphique développé par John Maeda au Media Lab du Massachusetts Institute of Technology. Processing est tout particulièrement adapté à la création plastique et gra-

phique interactive. Le logiciel fonctionne sur Macintosh, sous Windows et sous Linux, car il est basé sur la plate-forme Java— il permet d’ailleurs de programmer directement en langage Java. Processing est distribué sous GNU GPL. Les programmes réalisés avec Processing peuvent être lus par les navigateurs internet équipés du plug-in java, mais aussi sous forme d’applications indépendantes pour windows, linux ou mac (en réalité n’importe quelle machine disposant d’une Machine virtuelle Java). Le principe majeur de Processing est la simplicité, dans la mise en œuvre des programmes comme dans la syntaxe du langage. Adapté à la création graphique, Processing réclame moins d’efforts que Java pour effectuer des tâches simples telles que la modification d’une animation à intervalle régulier (qui permet des créations animées). Ses fonctionnalités sont limitées aux besoins des créateurs d’images 2D et 3D générées par programmation mais peuvent être étendues, par le biais de modules externes, à la capture d’un flux video, à la génération et à la manipulation de son, à l’interfaçage des ports d’entrées-sorties, etc. Processing s’adresse aux artistes

en « arts numériques » et aux graphistes, notamment dans le domaine du graphisme d’information et dans celui du graphisme génératif. D’après Julien Gadachoat, Intervenant Processing Bordeaux, Processing a permis de démystifier la programmation, qui reste pour le plus grand nombre une discipline de spécialistes voire de geeks. Grâce à Processing, le code informatique est devenu un outil de création à part entière utilisé aujourd’hui par des artistes, des architectes, des étudiants, ou de simples amateurs… Processing peut être utilisé pour réaliser des animations interactives, c’est à dire des images produites en temps réel, en direct, qui vont réagir à certains signaux produits par des utilisateurs ou à des flux de données: mouvements devant une caméra, messages envoyés par texto ou sur les réseaux sociaux,etc. Il est très employé aussi dans la visualisation de données (Data vision) et peut servir de base pour la création de visuels destinés à être imprimés. Processing permet d’exporter ses créations sur le web avec javascript en jouant avec les notions de réseau, d’interaction temps réel et de productions collaboratives. _

interview Chadourne Julien_ Web designer_ 29 ans, web designer, Each x Other, Paris

Pouvez-vous nous présenter votre parcours ? Au début, j’ai passé un bac sti électrotechnique, j’ai ensuite fais un an en informatique, c’était trop orienté programmation alors je suis rentré en DUT SRC (Services et réseaux de communications). Suite à mes stages au sein de différentes petites agences web, j’ai voulu aller voir ce qu’il se passait dans les grandes agences. J’ai décidé de postuler dans des grands groupes et j’ai finalement eu une mission d’un an avec le groupe Express Roularta, à Paris. Le fait d’intégrer un énorme groupe tel que l’Express m’a permis en plus de développer le journal, de toucher au développement d’applications web et smartphones. Pourquoi le web design ?

Depuis mes 12 ans, je suis sur un ordinateur. J’ai toujours aimé le web et étant très curieux, j’ai voulu comprendre le pourquoi du comment et c’est comme cela que j’ai voulu devenir web designer. Pourquoi ne pas être devenu développeur dans ces cas la ? Je dois surement avoir un côté artiste que je n’assume pas ! Et le code pour faire du code, c’était pas pour moi. J’ai trouvé le juste milieu entre graphisme et code, à mon avis. Quels obstacles avez-vous rencontrés pendant votre recherche d’emploi ? Je suis web designer freelance en plus de mon travail à plein temps, j’ai pu rencontrer pas mal de personne

quelle photo vous représenterait ?

lorsque j’étais étudiant, de fil en aiguille j’ai pu me faire un réseau et cela n’a pas était trop problématique de trouver un emploi. Quels conseils donneriez-vous à quelqu’un qui souhaiterait exercer une profession comme la votre ?

Je suis chargé du développement web et du design du site internet. En plus du web je doit faire face à de nouveaux problèmes et avec l’arrivée des tablettes je dois savoir m’adapter, ce sont de petits chalenges qui me font apprécier mon métier. _

Alors les conseils, d’être rigoureux et organisé et surtout de ne pas accepter des contrats trop peu payés ! Nous effectuons un métier qui nécessite une rémunération conséquente alors ne vous laissez pas faire. Le client a besoin de vous, c’est la seule chose à savoir ! Vous devez lui être indispensable. Où travaillez vous actuellement ? Je suis toujours webdesigner freelance et je travail aussi pour une marque de vêtements, Each x Other.

3.smartphones & tablettes_

De la même manière que l’univers de l’édition a du s’adapter à l’ère du numérique en passant du format codex au format EPUB3 (format standard pour les livres numériques, reposant sur du HTML5), le graphiste a du s’adapter lui aussi en passant des compétences print aux compétences web multiplateformes. Depuis quelques temps maintenant, le graphiste-designer doit apprivoiser de nouvelles plateformes. Suite à l’engouement que suscitent les Smartphones et tablettes tactiles, il doit, en plus de la plateforme « web », être familier de ces nouveaux supports de communication mobiles. De cette manière, lorsqu’un client lui demande de concevoir son identité visuelle par exemple, il doit la lui concevoir de manière à ce qu’elle soit lisible sur papier, applicable sur un site web, mais aussi compatible sur Smartphones. Lorsqu’on y pense aujourd’hui, c’est une évidence, il s’agit du monde qui nous entoure, cependant, elle suscite un effort sup-

plémentaire pour le graphiste pour satisfaire sa clientèle, et se donner une plus grande crédibilité au sein de sa propre communauté. Aujourd’hui, il s’agit de « s’adapter » a tout support de communication. Pour cela, le graphiste fait appel à une technique que l’on appelle « Responsive Design ». La notion de Responsive Web Design indique qu’un site est conçu pour s’adapter aux différentes tailles d’écrans, tablettes, mobiles, télé connectées, etc. Ce que l’on appelle « web responsive » repense donc la manière de concevoir les parcours de navigation sur Internet, en ce qu’il s’agit de concevoir une interface auto adaptable. On peut ainsi avoir une navigation et une mise en page spécifique, sans dégradation de ces deux éléments, et sans devoir utiliser les fonctionnalités de zoom (ou un autre type de redimensionnement), car bien souvent, les mobiles ne permettent pas d’afficher certains types de contenus mul-

timédias. L’idée du web responsive est alors de créer un site web basique sur les terminaux les plus pauvres et ensuite de l’améliorer pour les usages plus avancés. Ainsi, on bascule d’une navigation dégradée pour les terminaux non classiques à une expérience optimale et personnalisée. Il s’agit donc de consulter la même information, mais organisée différemment selon le type de terminal utilisé. En d’autres termes, c’est une mise en page sur mesure, en se pliant aux standards du web. (image(s)) Ci-dessus : Un site web « responsive », ici affiché sur des appareils de tailles diverses, couramment utilisés. Concrètement, le concept de web responsive se conçoit selon différentes techniques : - feuilles de style CSS (mise en page web) permettant d’utiliser des dimensions relatives aux dimensions écrans ; - solutions de stockage d’images

adaptables (le poids des images s’adaptera directement, côté serveur, à la qualité de l’affichage) ; - ergonomie basée notamment sur l’utilisation massive de JavaScript ; - usage des nouveaux standards du web (HTML5, CSS3, etc.). A travers cette conception du design, nous pouvons nous rendre compte que l’utilisation des téléphones « mobiles », et autres tablettes, notre quotidien se voit changé. Nous sommes de plus en plus amenés a nous déplacer, encore une fois a nous « adapter » a notre environnement, tout en restant connectés au reste du monde. De cette manière, que l’on soit graphiste ou client faisant appel a des designers, nous sommes de plus en plus sensible a l’information « immédiate ». Nous vivons effectivement dans un monde en perpétuel mouvement, grâce a internet, une infinité d’informations deviennent a notre portées en un seul clic, il s’agit alors de rentabiliser et économiser notre temps en

ne filtrant alors que les informations qui nous sont nécessaires, en un rien de temps. Ainsi, être graphiste, aujourd’hui, c’est savoir créer du design percutant en toute circonstance, ou plutôt : en toute plateforme. Pour illustrer cette polyvalence du monde du graphisme au sein même des technologies mobiles, nous pouvons citer Adobe, la société de logiciels les plus utilisés dans l’univers du design graphique. Le géant aura mis du temps a rendre disponible son produit phare « Photoshop » sur l’App Store, mais c’est chose faite depuis septembre 2012 sous sa version « Touch ». Le challenge résidait surtout dans l’ergonomie, et les performances que devait offrir le logiciel sur un écran tactile sans pour autant décevoir ses utilisateurs réguliers, habitués aux écrans d’ordinateurs. Selon les dires, l’App se veut pourtant intuitive et facile d’utilisation. La plateforme étant réduite, l’utilisation en est donc simplifiée. Les utilisateurs réguliers de Photo-

shop peuvent donc être mobiles, au sens propres comme au figuré, et pour la modique somme de 8,99 euros seulement (contre 955,00 euros pour sa version initiale). Les détenteurs d’iPad, experts ou novices en la matière, peuvent éditer leurs photographies sur leur tablette chez eux ou lorsqu’ils sont en déplacement. Adobe ne s’est pas rendu seulement compte du besoin des graphistes de travailler de manière mobile : dans la dernière version de la Creative Suite (la CS6), il est désormais possible de choisir le profil de document à éditer a travers le réglage « Périphériques » et réaliser des productions pour des supports de style iPad, iPhone ou Galaxy S. _

interview Rousset Thomas_ Web & Graphic designer_ 25 ans, graphiste junior, Saguez & Partners, Nantes

Quel est votre parcours scolaire ?

mais maintenant c’est bénéfique !

Au début j’ai fais mes trois ans de maternelle, tout s’est bien passé jusqu’au bac. Bac S avec mention, il est important de le souligner. J’ai ensuite décidé de faire une Licence en média numérique, étant un geek dans l’âme, je ne voyais que cette solution ! ( rires) . Je l’ai faite à la rochelle et puis j’en ai eu un peu marre de l’informatique pure et dure et je me suis dirigé vers le graphisme print en faisant un BTS comm visu à Bordeaux.

Quels obstacles avez vous rencontrés pendant ta recherche d’emploi ?

Pourquoi le design graphique ? J’ai toujours eu un intérêt pour l’image et j’ai voulu voir l’autre facette, celle derrière le numérique, le print. Je sais que j’ai fais le chemin inverse de pas mal de personnes

Je n’en ai pas eu (rire) ! J’ai postulé dans une agence et après un entretien ils ‘mont pris ! J’avoue que j’ai eu un peu de chance mais c’est le jeu ! Quels conseils donneriez vous à quelqu’un qui souhaiterait exercer une profession comme la votre ? Je lui conseil de bien s’accrocher et de ne pas avoir peur de la concurrence. Toujours faire des choses que l’on aime. Parlez-nous de la période entre la fin de vos études et votre premier emploi ? Et bien j’étais directement engagé

quelle photo vous représenterait ?

avant même d’avoir fini, je n’ai pas eu cette transition. Certains de mes anciens potes de promo galèrent maintenant à trouver un travail mais je pense qu’il ne faut pas être trop fine bouche. Il y a des emplois mais il faut aller les chercher

lance. Ma double formation web et print me permet de réaliser des identités complètes. C’est un suivi total d’un projet et une transversalité dans les domaines ce qui est très motivant !

Où travaillez vous ?

Julien Pacaud, j’adore Julien Pacaud. Pour moi, c’est un des grands graphistes de ces dernières années.

Saguez & partners en tant que graphiste junior. Je suis chargé de la création des identités visuelles de gros clients comme la SNCF ou l’aquarium de la Rochelle. Je suis intégré à une équipe composée d’un directeur artistique et d’un directeur de création. Je travaille aussi avec des web designer et ds architectes. Ce système me permet d’apprendre et d’évoluer. C’est une constante source de motivation. Je suis également graphiste free-

Graphiste préféré ?

Dernier coup de cœur graphique ? Identité de pigment Pol, on a encore du chemin à faire en france en terme de graphisme, ils sont forts ces allemands ! _

Étapes, design et culture visuelle, juillet 2012 Web Design Index, The Pepin Press, 2010,Pepin Van Roojen Web design Index 7,The Pepin Press, 2007, Pepin van Roojen Web design Handbook, design sur internet, Booqs publishers, 2000 Bryony Gomez-Palacio et Armin Vit Anthologie du graphisme, Le guide de référence des pratiques et de l’histoire du graphisme, Pyramid, 2010 Petit manuel de graphisme, éditions Pyramid, 2009 Mise en page et fondamentaux, Pyramid, 2010 L’histoire du graphisme en France, Michel Wlassikoff , conférence du 9 janvier 2007 Les fondamentaux du graphisme,Pyramid, 2009

bibliographie_