Étiquette : mockup

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. 

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.