Mon objectif pour ce stage de 1ère année de DSAA, était de rejoindre un studio créatif ou un indépendant ayant une pratique combinée de graphisme et de développement web. En effet, après une première expérience mitigée il y a 2 ans dans une agence de communication, mon choix était motivé par le souhait de faire un stage vraiment formateur et d’expérimenter de nouveaux outils comme le code, le design génératif et interactif.
Cependant, ayant peu de connaissance en programmation, je ne me voyais pas demander à un développeur de métier de me former et je me suis vite rendu compte que du côté des designers, les graphistes codeurs se faisaient rares. La plupart se limitant à l’aspect visuel et fonctionnel d’un site pour ensuite envoyer la maquette au développeur sans vraiment s’intéresser à sa fabrication. Or il me semble important de ne pas délaisser la technique afin de comprendre l’outilqu’on utilise et qu’il soit lui-même source d’inspiration dans le processus créatif.
Il existe tout de même en France, avec la démocratisation des logiciels de création open source, le développement d'une scène artistique de Code Créatif dont les idées se diffusent progressivement dans les autres disciplines du design. Des artistes et des designers qui mettent en avant l’intérêt génératif et interactif du code dans leurs créations.
C’est finalement chez Ivan Murit, un artiste numérique dont j’ai découvert le travail suite à un workshop organisé pour les DSAA 2 transmédia, que j’ai pu débuter mon stage le 10 mai 2021.
Ce rapport constitue, dans son fond et sa forme, la synthèse de ce que ce stage m'a apporté. C'est l'occasion pour moi, fort de ces trois mois de formation pratique, de créer un site web et d'y exposer un regard critique sur le travail que j'ai effectué.
Présentation
Artiste numérique, designer graphique et développeur, Ivan travaille en indépendant depuis 5 ans. Diplômé d’une licence de graphisme aux beaux-arts de Rennes puis d’un master aux beaux-arts de Valence, il s’installe sur Paris en 2015 et se fait rapidement connaître grâce à son projet de fin d’étude, Texturing, financé grâce à une campagne Kickstarter et publié dans Étapes Magazine.
Sa pratique artistique passe par le développement d’outils créateurs de formes inspirées du monde vivant et de modèles scientifiques. Pour développer ses projets en tant qu'artiste-auteur, il participe à des résidences lui permettant un soutien financier et l’accès à des ateliers. Ses œuvres sont ensuite présenter à des expositions sous la forme d’installations numériques ou lors de workshops au cours desquels il transmet son processus créatif. De plus son expertise dans la création de systèmes génératifs l’amène à être contacté par des studios de design pour collaborer sur des typographies, tapisseries ou identités pour le domaine culturel.
En parallèle de ça, il arrive qu’on lui propose du travail plus exécutif de développement web ou de graphisme. Cette activité de designer auto-entrepreneur lui permet de dégager de l’argent pour ses projets artistiques mais en contrepartie empiète sur son temps de création. C’est pourquoi, ayant de nombreuses commandes cet été, il a accepté de prendre un stagiaire pour la première fois.
Mon rôle
Ivan travaille principalement dans son appartement à Bagnolet où il m’a installé un espace de travail dans son salon à côté de son bureau. Une journée type commence à 9h, avec une présentation des tâches à faire dans la journée. La pause déjeuner sonne à midi et nous reprenons, après notre partie de ping-pong quotidienne, à 14h jusqu’à 19h. Avant de terminer la journée, nous prenons le temps de faire un récapitulatif du travail effectué pour qu’il ait une vue globale de mon avancée.
Mon rôle était de l'assister principalement sur ses commandes de graphiste et de sites internet pour lui dégager un maximum de temps pour ses projets personnels. Généralement, la rencontre avec le client avait été faite en amont par Ivan au téléphone dont il me faisait le bilan oralement. Le lancement d’un projet se faisait à 2, lui permettant de vérifier si j’avais bien saisi les objectifs et de me laisser en autonomie ensuite. Je pouvais l’interrompre à tout moment pour des questions ou pour l’informer de mon avancée. Quand il estimait que le travail était terminé, il envoyait les exports dans l’attente d’un retour du client au téléphone et des modifications qui s’en suivent.
Entre 2 retours, j’avais comme projet de fond de développer la communication de son application Texturing sur les réseaux avec la création régulière de post Instagram.
Projets internes
Communication Texturing
Texturing est une application développée par Ivan, qui permet de tramer des images avec des motifs de Turing produits par le système mathématique de réaction-diffusion. Cet algorithme est le modèle d'une réaction que l'on retrouve en chimie, en géologie ou en biologie et qui est à la base de nombreux motifs : poissons tropicaux, pelages d'animaux, coraux …
L’application est sortie en 2016 et s’est bien vendue en France et en Belgique auprès des graphistes, illustrateurs et sérigraphes. Grâce au succès du Kickstarter et des articles dans les magazines spécialisés, il n’a pas eu besoin de développer jusque là une campagne importante de communication pour son logiciel. L’engouement étant un peu retombé depuis et pour promouvoir la sortie de la version 2.2, il souhaite ouvrir une page promotionnelle Instagram et cibler principalement les pays étrangers.
Mon rôle fut de définir la stratégie de communication, développer sa charte graphique, ouvrir un compte Instagram après avoir mis en place sa direction artistique, et finalement, créer et publier des posts promotionnels à intervalle régulier pendant les 3 mois de stages.
Refonte du logo pour faire apparaître le nom TexTuring. Je conserve l'idée d'avoir un visuel tramé pour signifier le but de l'application. La palette chromatique dérive des couleurs initiales de l'interface. Finalement, pour la typographie, je conserve le choix d'Ivan pour une police libre de droit.
La grille instagram quant à elle, marche par ligne de 3 posts publiés en même temps toute les 2 semaines. Le premier post de chaque ligne met en avant l'interface et l'utilisation de TexTuring par des screenshot fixe ou des vidéos. Le deuxième propose des exemples d'images tramées par l'outil. Ces 2nd posts fonctionnent par séries de 4 avec à chaque fois l'alternance des couleurs de la charte. Enfin, le dernier présente des travaux d'artistes et de designers ayant utilisé le logiciel.
En conclusion, me retrouvant un peu livré à moi-même car Ivan n’avait pas d’idée précise sur la direction à prendre pour la campagne Instagram, il en résulte au bout de ces 3 mois un travail conséquent de planneur, concepteur, graphiste, motion-designer… Il était au départ difficile pour moi d'avoir carte blanche et de me réapproprier le projet signature d'un autre designer. Cela m’aura tout de même permis de me remettre à After Effects et Premier Pro, et d’utiliser de nouveaux outils comme TexTuring.
Site Dessin Codé
Conception d’une page d’accueil pour télécharger « Dessin Codé », un logiciel de programmation simplifiée développé par Ivan dans le cadre de « Création en cours ». Cette résidence des Ateliers Médicis propose à des artistes de venir transmettre leur savoir par l’intermédiaire d’ateliers dans des écoles en milieu rural, périurbain et des territoire d’outre-mer. Son intervention a consisté à initier les enfants à l’art algorithmique et au dessin à l’aide d’un programme informatique.
Cet site web « Dessin Codé » permet de prolonger l’expérience en diffusant l’outil à d’autres établissements scolaires. L’objectif est d’avoir une page claire, sans artifice, pour faciliter la compréhension des différentes étapes d’installation du logiciel.
J’étais en total autonomie sur sa conception et son développement. Après quelques croquis, je me suis directement attelé aux HTML/CSS/JS sans forcément passer par une maquette ou wireframe comme ça peut être le cas en agence. Elle ne me semblait pas utile pour un projet de cette taille et elle est surtout favorisée lors d’échanges avec un client ou un développeur. De plus, je pense que les meilleures idées viennent en ayant les doigts dans le code.
Je me suis permis la création de petits pictogrammes, discrètement animés en CSS lorsque l’on passe la souris dessus sans que ça nuise à la compréhension. Petite astuce CSS que je n'aurais pas découverte sans m'immerger totalement dans la matrice.
C'est au final un projet intéressant, qui est arrivé en fin de stage après l’élaboration de plusieurs sites web avec Ivan. J’ai pu concevoir le design et développer celui-ci en toute autonomie. Il intervient tout de même un choix esthétique personnel qui ne convenait pas forcément à Ivan et je ne sais pas s’il utilisera cette version pour son site final. C'est le piège de ces projets « carte blanche » où finalement comme pour TexTuring, il est difficile pour un artiste de déléguer ses petits bébés.
Projets web
Site Fabien Goutelle
Fabien Goutelle est un designer graphique, ancien camarade de promo d’Ivan aux beaux-arts de Rennes. Il nous a demandé de lui faire son site internet et nous a envoyé un .pdf avec le design finalisé qui nous restait plus qu’à mettre en place.
C’est le premier projet de site web que j’ai eu à faire cet été. Le design étant déjà établi et plutôt épuré visuellement, j’ai pu prendre mon temps pour me familiariser avec le développement HTML et CSS. Cela correspond à placer les textes, les images, activer les typo et relier les liens avec les bons url. De son côté, Ivan s’est occupé de la partie back office, c’est à dire la partie administrative où le client peut modifier les contenus sans toucher à la structure. Il a aussi réalisé en JavaScript, la demande de Fabien d'avoir une surface grise effaçable avec son curseur révélant les travaux du designer et rappelant une carte à gratter.
La 2e étape fut de faire une autre version qui soit responsive lorsque que l’on consulte le site sur téléphone mobile. Cela demande de repenser le site dans un format vertical et de bien organiser ses fichiers pour passer d’une version à l’autre sans problème.
Un première entrée en douceur dans le développement web qui a permis à Ivan de me former pour la suite du stage.
Site Maison Julien
Création d'un site pour la chaîne de boulangeries parisiennes Maison Julien. Un projet beaucoup plus ambitieux que le précédent où nous n’avons pas de contact direct avec le client mais passons par l’intermédiaire du graphiste Eddy Terki qui s’occupe du web design. Le but étant pour la boulangerie d’avoir une plateforme pour vendre ses produits.
Sans doute à cause des exigences du client, on a vite fait le constat que le site était beaucoup trop chargé en contenus et en effets. Par exemple, trop de cliques pour atteindre la page de vente, de nombreux textes sur l'histoire de la boulangerie qui me semblent inutiles sur un eshop, des hovers supperposés sur des blocs scrollables dans des fenêtres individuelles, etc.
Je me suis rendu compte qu'il était difficile de rester à sa place de développeur et de ne pas s’immiscer dans le travail du designer. Après coup, je n’envie pas sa position d’être coincé entre le client, qui change régulièrement d’avis, et le développeur qui remet en cause ton design. Une situation qui ressemble plus à une guerre d’égo plutôt qu’à une collaboration de travail. Je pense que l’erreur d’Eddy est d’avoir voulu commencer le développement du site avant même d’avoir fixé sa maquette et la notre de dépasser notre rôle d’exécutant dans ce projet.
Site Notre Café
Notre Café, établissement dans le Marais, se veut un lieu d’insertion sociale et professionnelle, en milieu ordinaire, pour des personnes présentant des troubles autistiques.
Un site One-page designé par Fabien Goutelle et développé par nos soins. Notre duo avec Ivan fonctionnant maintenant parfaitement pour ce dernier projet, nous avons developpé les versions web et mobile en moins de 2 semaines. Un record dans l'agence !
Projets print
Livret Ateliers de Croissance Personnelle
Tous les étés, Ivan s’occupe de la création du livret de programmation de l’association de ses parents,Ateliers de Croissance Personnelle. Un travail éditorial qu’il fait pour aider mais qui lui rapporte peu d’argent. Pour y passer le moins de temps possible, il reprend la maquette de l’année précédente en modifiant peu de choses.
Je suis donc chargé de sa réalisation avec comme premier objectif de trouver le thème des photos illustrant la citation choisie par l’association « Soyons le changement que nous souhaitons voir pour le monde ». Généralement celles-ci proviennent de banques libre de droit et la difficulté est d’en trouver des pas trop kitchs. 3 moodboards leurs ont été proposés et ils ont finalement choisis celui des mains.
Un travail éditorial compliqué avec beaucoup de textes à couler dans un petit livret A5 de 18 pages et où dès le départ il était convenu de ne pas trop bouleverser la direction graphique au risque de contrarier les habitudes du client. C’est pourquoi je me suis surtout efforcé de simplifier la maquette en terme de couleur et de hiérarchie pour faciliter la lecture du programme. Un travail plutôt rébarbatif dont la principale difficulté fut d’éplucher pendant des heures des banques pour trouver des photos gratuites collant au thème, qu’elles soient ensuite acceptées et d’en retrouver des nouvelles en cas de changement de dernière minute. Pour l’étape d’impression, l’association a ses habitudes chez un imprimeur, on s’est donc contenté d’envoyer le .pdf finalisé dont je n’ai malheureusement pas pu voir la version imprimée.
Il y a tout de même des enseignements à retirer de ce projet : premièrement qu'il est difficile de travailler avec des proches car on se fait vite accaparer par les retours incessants, qu’il faut savoir imposer son expertise vis-à-vis des goûts des clients et qu’il n’est pas aisé de conserver une rigueur de travail lorsque que le sujet ne nous parle pas forcément.
Tracts Ateliers de Croissance Personnelle
Nouveau projet pour les ACP mais cette fois-ci pour une dizaine de tracts présentant les différents ateliers et intervenants de l'association. Le design est basique, une photo libre de droit en pleine page avec les principales informations agencées pour permettre leur lisibilité (nom, thème, type d'atelier, date et horaire). De nouveau un voyage passionnant dans les banques pour trouver l'image gratuite parfaite ! Le résultat reste correct mais aurait pu être plus créatif dans l’ensemble si j'avais eu le temps et l’envie.
