Designer Graph-quoi ?

Cela fait déjà 1 semaine que je suis en stage avec Raphaël Guez !

C’est un artiste 3D qui réalise des œuvres numériques, et qui en parallèle répond à des commandes pour différents clients (affiches, campagnes de communication, motion design).

Son atelier se situe à POUSH, une ancienne parfumerie réhabilitée par la Mairie d’Aubervilliers pour en faire des locaux d’artistes. Il y a plus de 270 artistes qui travaillent là-bas ! Chaque jour, je découvre de nouvelles personnes avec qui j’ai l’occasion d’échanger sur leurs travaux et aussi sur ce que je fais. Il y a une diversité folle qui émane de ce lieu, c’est juste génial.

Les trajets sont un peu compliqués… j’avoue
Cafétéria et flyer d’exposition de POUSH

Très vite, je me suis aperçu de quelque chose. Les gens ne savent pas ce qu’est le design graphique ! J’ai vraiment ressenti lors des discussions que j’ai pu avoir avec toutes ces personnes, une incompréhension générale de ce que je fais exactement. C’est compliqué à décrire, mais je dirais que l’on n’a tout simplement pas la même définition des termes design graphique et graphisme.

Dès le lundi, je me suis lancé dans la réalisation d’un site web pour Raphaël. Pour le moment, ce n’est qu’un simple portfolio, mais à l’avenir nous travaillerons à deux sur des pages web expérimentales. Avant de me lancer, je lui ai demandé s’il avait une identité visuelle, une charte graphique ou au moins un logotype. La réponse = non.

Je lui ai donc proposé de travailler sur une identité graphique, tout en lui expliquant l’importance que ça a d’en avoir une… mais sans succès. Il avait l’impression que ça ne servait à rien. Sans rentrer dans les détails, j’avais encore une fois l’impression que sa notion de graphisme était complètement différente de la mienne. Lorsque l’on parle design, on ne parle pas exactement de la même chose.

Atelier de Raphaël Guez

Durant cette première semaine de stage, j’ai réalisé une maquette Figma pour son site web, puis je me suis directement plongé dans le code !

Lorsque l’on code pour quelqu’un, c’est complètement différent. Cette fois-ci, je ne peux pas me permettre d’avoir des noms de balises étranges, une mauvaise indentation ou même oublier de commenter le code. Tout doit être parfaitement lisible et compréhensible pour lui. Aussi, l’ensemble du code doit être fait pour que Raphaël n’ait pas besoin de se prendre la tête lorsqu’il voudra ajouter de nouveaux projets dans son portfolio. Bref, coder pour soi-même c’est plus facile 🙂

Maquette Figma
Site Web
Code HTML / CSS / JS

En fin de semaine, j’ai réalisé un modèle 3D ainsi qu’un début d’animation pour aider Raphaël dans un projet professionnel. Il ne m’a pas vraiment expliqué pourquoi il fallait faire tout ça, mais ça a été un bon moyen de lui montrer qu’il pouvait me faire confiance !

Modélisation 3D

Cette semaine est passée si vite… j’ai hâte de découvrir ce que l’on va faire ensemble et les projets sur lesquels je vais travailler !

Webdesign pour les nuls

Depuis maintenant un mois je suis chargée de refaire entièrement le site web qui avait été fait par l’ancienne stagiaire. 

J’ai d’abord fait une carte récapitulative de ce qu’était Mobilisation Générale avec une mindmap et la nouvelle direction du site. 

De celle-ci j’ai commencé à chercher des références de sites que je trouvais intéressantes. Je les ai montrées à Charlotte, en lui expliquant ce que je trouvais intéressant dans celle-ci. Elle a adoré le premier mais j’attendais qu’elle soit plus précise dans ce qu’elle voulait mais cela n’a pas été le cas.

J’ai donc commencé alors les wireframes sur Illustrator, et ensuite les mockups. J’ai eu pas mal de problèmes à ce niveau-là car j’étais en manque d’image, Charlotte m’a dit de les prendre de wix. Il faut savoir que l’espace de stockage de leur site est la caverne d’Ali baba pour les images, elles ne sont pas nommées, certaines sont triées dans des dossiers mais la plupart sont très peu potables pour ce dont j’ai besoin. Charlotte voulait me partager un dossier partagé de photos mais étant sur iphone, ne faisant pas partie du cercle très fermé il était impossible pour moi d’y accéder. Alors elle m’envoyait les photos que je demandais par WhatsApp. (j’ai essayé d’induire un drive commun mais c’était trop compliqué à mettre en oeuvre) :’(

Après une semaine de travail dessus, Johanna est venue voir ce que je faisais pour me faire ses retours, elle m’a dit qu’elle n’était pas très fan. Elle me disait tout ce qu’elle n’aimait pas, je lui ai alors montré les références que j’avais montrées à Charlotte, et elle m’a dit ce qu’il fallait avoir sur le site. J’ai dû recommencer mes mockups et wireframes mais j’avais enfin l’impression d’avancer et de ne plus faire les choses sans trop savoir. Ça m’a plu de faire des wireframes sur papier que je reportais sur Illustrator et d’avoir des retours plus précis sur mon travail. 

Je suis alors passé sur Wix … 

Moi face à Wix

Ce grand ami m’a fait revoir toute ma grille, son interface est quelque peu étrange. J’étais habitué à la taille standard d’un écran (1920px-1080px) pour faire mes mockups. Sauf que pour wix il faut mettre les éléments entre 0 et 979 px pour qu’ils puissent s’afficher correctement partout, je trouve ça plutôt compréhensible. Mais le 0 ne se trouve pas du tout au bord gauche, donc après le 0 nous avons des valeurs négatives jusqu’à -324. C’est à ce moment que mon cerveau a décroché pour comprendre la logique de Wix. Donc de l’autre on se retrouve avec un espace allant jusqu’à 1280, et quand on calcule tout ça on n’obtient pas 1920 mais 1440. J’ai donc refait ma grille en prenant ses paramètres en compte, j’ai marqué les mesures exactes sur une feuille pour être sûr que tout soit correct et pour savoir plus facilement. Le design de l’éditeur de site a été influencé par la suite d’Adobe, on retrouve les règles, les repères bleu fluo, la grille d’outil à gauche, faire bouger les éléments très facilement. 

Comment je me sentais pendant que je calculais

J’ai réussi à faire toutes les pages que je voulais au niveau structurel. Puis j’ai voulu commencer à mettre des animations pour rendre plus vivant. Les limites de Wix se sont alors fait sentir, je voulais que quand la souris passe sur une image le nom apparaît (appelé en anglais hover ou en bon français survol). J’ai donc regardé des tutos pour comprendre comment ça marchait mais c’est une galère sans nom et wix a une communauté assez faible. Enfin c’est simple si tu ne rajoutes pas un lien cliquable pour une autre page 0_o 

Et là c’est le drame… 

J’avais l’habitude que pour un site chaque élément soit une boîte dont on peut en mettre d’autre à l’intérieur, leur mettre des caractéristiques. Chez Wix chaque élément est indépendant, alors c’est très pratique pour la mise en page, mais quand on veut modifier des éléments on est vraiment limité (et pourtant mes patronnes ont payé pour la version premium). Pour faire mon hover, j’ai dû prendre une template déjà faite pour la modifier (je ne suis pas fan de ne pas pouvoir tout faire de mes propres moyens), il est composé de deux éléments qui se superposent (mon image et l’effet hover), tout était prêt. Puis arrive le test, cela ne marche pas, il se trouve que si les bords du cadre de l’effet est trop proche de l’image l’animation n’apparaît pas. Alors j’ai décalé plus vers l’extérieur, mais c’était bizarre, on avait un cache transparent sombre qui apparaissait sur le fond. Après avoir testé plusieurs choses, le fond s’est retrouvé derrière la photo, le texte devant la photo mais illisible et impossible de revenir en arrière. C’est là que j’ai compris qu’essayer de faire des effets serait trop compliqué. C’en est presque frustrant, car je sais le faire en CSS mais là ça dépasse mon niveau de compréhension.

C’était une demande assez fastidieuse, mais sans pression ou deadline et je n’avais rien d’autre à faire ne même temps. C’était un peu ennuyant et long mais je fait de mon mieux pour faire un site clean avec les moyens que j’ai.