Webdesign – / Regards professionnels

Connaître dans l’inconnu

Je suis depuis maintenant 4 jours au sein de St-Louis, une maison de postproduction parisienne dont le domaine m’est TOUT SAUF CONNU. Ce stage est pour moi un voyage dans un navire étranger, une prise de risque, mais aussi une opportunité vers de nouveaux horizons. De plus, l’ambiance très sombre et le grand nombre d’employés n’arrangeaient pas ma situation…j’étais encore plus perdue.

C’est avec peine que je tentais de retenir tous les noms techniques et méconnus : flame, étalonnage, VFX…en me demandant ce que je faisais là. Cependant ma douleur n’a été que de courte durée (merci à mon tuteur Tibor) lorsque j’ai rejoint le groupe des IT (Information Technology) pour assurer la refonte de leur site interne : ENFIN quelque chose que je connais.

Ma réaction lors de la découverte du site

C’est ainsi que je me suis retrouvée nez à nez avec des interfaces qui ne semblent ni connaître la notion d’ergonomie ni de design (ma douleur est revenue instantanément). Cependant beaucoup d’idées étaient bonnes et pertinentes, seulement…j’ai très vite réalisé que le graphisme était nécessaire, VRAIMENT VRAIMENT nécessaire et ce dans une multitude de domaines.

Vue d’ensemble des interfaces du site original

Avant de me jeter à l’eau, un certain Marin (oui c’est son prénom) m’a d’abord rattrapée en posant un “cadre” : « fais comme tu le sens! ». 🤓
C’est là que j’ai su que c’était à moi de poser le cadre : moodboard, identification des besoins, analyse de l’univers déjà en place….et c’est à travers cette petite préparation que j’ai appris à connaître le fonctionnement de l’entreprise. Ainsi j’ai pu me familiariser avec les lieux, les gens, mais aussi les différents pôles qui m’entourent tout en alliant découverte et récolte de données utiles au site. Ici, il y a beaucoup de pôles, de sous pôles et de sous sous pôles…bref. Je prendrai le temps de découvrir tout ça plus tard.

En analysant le site de plus près, j’ai tout de même été surprise par les essais graphiques : l’idée de cohérence était quand même pensée à défaut d’être maîtrisée, ainsi que quelques effets de style plus ou moins efficaces. C’est avec très peu de mal que j’ai réussi à les convaincre qu’il était nécessaire de TOUT refaire, même le code (qui est terriblement mal ordonné d’ailleurs). Mon challenge personnel était d’aller à la rencontre des couleurs (que je manie très rarement et dont la manipulation m’est peu familière) par respect pour le bleu significatif de St-Louis.

Premières maquettes et écrans originaux correspondants :
(1) projets et chatbox , (2) shotgrid des plans 3D

Une fois plongée dans ma tâche, je me suis pleinement rendue compte que l’inconnu ne me concerne pas exclusivement, mais qu’il touche aussi mes collègues, totalement étrangers à l’idée de graphisme et d’esthétisme. Je dois avouer que cette perspective m’a plutôt rassurée, tout comme l’ambiance qui semblait se réchauffer au fil des jours, malgré l’aspect très sombre du lieu. Et c’est petit à petit que j’ai réussi à me détacher de l’inconnu grâce à ce que je connaissais. Je sortais cependant de temps en temps de cette nouvelle zone de confort pour affronter de nouveau cet univers inhabituel.

La peur de l’inconnu nous distrait du connu.
Ylipe, écrivain et dessinateur français

Alors pourquoi ne pas se faire peur pour casser la routine ? C’est ainsi qu’entre 2 lignes de code je m’aventurais dans les autres pôles de la maison, en fantasmant déjà sur tout ce que je pourrais apprendre et tester.

Enfin, suite à cette première semaine j’ai très vite remarqué que le graphisme n’est pas uniquement présent dans les studios, les agences, les écoles, il est PARTOUT. Un graphiste peut toujours (ou presque) se retrouver dans un domaine donné, et ainsi, connaître dans l’inconnu.

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 …

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.

Lead Designer pour 3 semaines

Je suis arrivé en stage chez Altaroad il y a un peu plus de deux semaines. Jusqu’alors je n’arrivais que peu à comprendre ce que faisait concrètement l’entreprise, je savais cependant que j’étais là pour les aider dans la refonte de leur application web.

Dès lundi, je fais la rencontre des différentes équipes présentes sur site et m’installe avec l’équipe plateforme (développement) avec qui je vais travailler durant les prochains mois. Sans vraiment comprendre, ils me font installer un nombre incalculable de logiciels et clés de sécurité sur mon pc afin de pouvoir travailler sur le projet et je me retrouve notamment avec Linux d’installé sur mon PC sous Windows (déroutant). Puis vient la première réunion, chacun dit ses objectifs pour la journée et ma tutrice me présente aux autres employés. Je suis le « Lead Designer UI/UX » de Altaroad pour 3 mois et quelques jours.

Les premiers jours passent et je comprends mieux le projet sur lequel je travaille, Altaroad vend une solution permettant de peser et de suivre les camions entrant et sortant de chantiers ainsi l’un des points fondamental du service proposé est une application web permettant de suivre et renseigner tous les camions leurs informations / contenus / provenance … L’équipe de développement travaille à fond sur cette application qui était techniquement très impressionnante, beaucoup moins visuellement. J’étais censé travailler avec un designer UX freelance cependant celui-ci arrive 3 semaines après le début de mon stage. Ce qui fait de moi le seul décisionnaire en terme de design durant 3 semaines. (petite pression)

Cependant les débuts se passent bien, en effet tout est organisé jusqu’au moindre détail et renseigné sur OpenProject un logiciel de gestion de projet, chaque décision est accompagnée de son message sur Slack un outil de dialogue pour entreprise et enfin chaque ajout est vérifié plusieurs fois avant d’être ajouté via GitLab. Très vite, on me demande de travailler sur les pages déjà codées, je lance Figma et ne même temps que je crée mes premières maquettes du site, je me conforte dans l’utilisation de ce logiciel. On a des réunions tous les jours, voire même plus et parfois trop, il m’arrive de passer des journées quasiment entières sur Google Meet à suivre les avancements des équipes sur le projet. Je me sens bien intégré à l’équipe développement avec laquelle je me trouve et bien que je travaille plutôt de mon côté les nombreux échanges possibles et mis en place durant la semaine me permettent d’avoir des retours fréquents sur mon travail et de trouver un juste-milieu entre création et apprentissage, j’essaie au plus que possible de comprendre comment ils travaillent et ce qu’ils font car il s’agit d’un domaine qui m’intéresse aussi beaucoup.

Par la suite à force de me balader sur les prototypes du site bien que celui-ci soit jusqu’à dix fois plus compliqué que tout ce que j’ai pu faire auparavant en intégration web, je commence à comprendre son fonctionnement dans les grandes lignes. J’ai ainsi pu commencer à avoir la possibilité à toucher au code et notamment au SCSS.

Le principal problème qui m’a fait peur en ce début de stage est de ne pas être accompagné et de devoir décider de moi-même pour toute la partie graphique mais finalement tout se passe bien et les choix et propositions que je fais dans un premier temps seront revus par la suite avec Greg (le designer freelance). Cela va me permettre de voir comment un professionnel aurait fait à ma place et ainsi potentiellement adapter mes méthodes de travail.