{"id":1080,"date":"2022-06-16T22:06:26","date_gmt":"2022-06-16T20:06:26","guid":{"rendered":"http:\/\/stages.dnmade-prevert.fr\/?p=1080"},"modified":"2022-06-24T17:09:51","modified_gmt":"2022-06-24T15:09:51","slug":"webdesign-pour-les-nuls","status":"publish","type":"post","link":"https:\/\/stages.dnmade-prevert.fr\/index.php\/2022\/06\/16\/webdesign-pour-les-nuls\/","title":{"rendered":"Webdesign pour les nuls"},"content":{"rendered":"\n

Depuis maintenant un mois je suis charg\u00e9e de refaire enti\u00e8rement le site web qui avait \u00e9t\u00e9 fait par l’ancienne stagiaire. <\/p>\n\n\n\n

J’ai d’abord fait une carte r\u00e9capitulative de ce qu’\u00e9tait Mobilisation G\u00e9n\u00e9rale avec une mindmap et la nouvelle direction du site. <\/p>\n\n\n\n

De celle-ci j’ai commenc\u00e9 \u00e0 chercher des r\u00e9f\u00e9rences de sites que je trouvais int\u00e9ressantes. Je les ai montr\u00e9es \u00e0 Charlotte, en lui expliquant ce que je trouvais int\u00e9ressant dans celle-ci. Elle a ador\u00e9 le premier mais j’attendais qu’elle soit plus pr\u00e9cise dans ce qu’elle voulait mais cela n’a pas \u00e9t\u00e9 le cas.<\/p>\n\n\n\n

J’ai donc commenc\u00e9 alors les wireframes sur Illustrator, et ensuite les mockups. J’ai eu pas mal de probl\u00e8mes \u00e0 ce niveau-l\u00e0 car j’\u00e9tais en manque d’image, Charlotte m’a dit de les prendre de wix. Il faut savoir que l\u2019espace de stockage de leur site est la caverne d’Ali baba pour les images, elles ne sont pas nomm\u00e9es, certaines sont tri\u00e9es dans des dossiers mais la plupart sont tr\u00e8s peu potables pour ce dont j’ai besoin. Charlotte voulait me partager un dossier partag\u00e9 de photos mais \u00e9tant sur iphone, ne faisant pas partie du cercle tr\u00e8s ferm\u00e9 il \u00e9tait impossible pour moi d’y acc\u00e9der. Alors elle m’envoyait les photos que je demandais par WhatsApp. (j\u2019ai essay\u00e9 d\u2019induire un drive commun mais c\u2019\u00e9tait trop compliqu\u00e9 \u00e0 mettre en oeuvre) :\u2019(<\/p>\n\n\n\n

Apr\u00e8s 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’\u00e9tait pas tr\u00e8s fan. Elle me disait tout ce qu’elle n’aimait pas, je lui ai alors montr\u00e9 les r\u00e9f\u00e9rences que j’avais montr\u00e9es \u00e0 Charlotte, et elle m’a dit ce qu’il fallait avoir sur le site. J’ai d\u00fb recommencer mes mockups et wireframes mais j’avais enfin l’impression d’avancer et de ne plus faire les choses sans trop savoir. \u00c7a m’a plu de faire des wireframes sur papier que je reportais sur Illustrator et d\u2019avoir des retours plus pr\u00e9cis sur mon travail. <\/p>\n\n\n\n

Je suis alors pass\u00e9 sur Wix \u2026 <\/p>\n\n\n\n

\"\"
Moi face \u00e0 Wix<\/em><\/figcaption><\/figure><\/div>\n\n\n\n

Ce grand ami m’a fait revoir toute ma grille, son interface est quelque peu \u00e9trange. J’\u00e9tais habitu\u00e9 \u00e0 la taille standard d\u2019un \u00e9cran (1920px-1080px) pour faire mes mockups. Sauf que pour wix il faut mettre les \u00e9l\u00e9ments entre 0 et 979 px pour qu\u2019ils puissent s\u2019afficher correctement partout, je trouve \u00e7a plut\u00f4t compr\u00e9hensible. Mais le 0 ne se trouve pas du tout au bord gauche, donc apr\u00e8s le 0 nous avons des valeurs n\u00e9gatives jusqu\u2019\u00e0 -324. C\u2019est \u00e0 ce moment que mon cerveau a d\u00e9croch\u00e9 pour comprendre la logique de Wix. Donc de l\u2019autre on se retrouve avec un espace allant jusqu\u2019\u00e0 1280, et quand on calcule tout \u00e7a on n\u2019obtient pas 1920 mais 1440. J\u2019ai donc refait ma grille en prenant ses param\u00e8tres en compte, j\u2019ai marqu\u00e9 les mesures exactes sur une feuille pour \u00eatre s\u00fbr que tout soit correct et pour savoir plus facilement. Le design de l\u2019\u00e9diteur de site a \u00e9t\u00e9 influenc\u00e9 par la suite d’Adobe, on retrouve les r\u00e8gles, les rep\u00e8res bleu fluo, la grille d\u2019outil \u00e0 gauche, faire bouger les \u00e9l\u00e9ments tr\u00e8s facilement.\u00a0<\/p>\n\n\n\n

\"\"
Comment je me sentais pendant que je calculais<\/em> <\/figcaption><\/figure><\/div>\n\n\n\n

J\u2019ai r\u00e9ussi \u00e0 faire toutes les pages que je voulais au niveau structurel. Puis j\u2019ai voulu commencer \u00e0 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\u00eet (appel\u00e9 en anglais hover ou en bon fran\u00e7ais survol<\/em>). J\u2019ai donc regard\u00e9 des tutos pour comprendre comment \u00e7a marchait mais c\u2019est une gal\u00e8re sans nom et wix a une communaut\u00e9 assez faible. Enfin c\u2019est simple si tu ne rajoutes pas un lien cliquable pour une autre page 0_o <\/p>\n\n\n\n

Et l\u00e0 c\u2019est le drame\u2026 <\/p>\n\n\n\n

J\u2019avais l\u2019habitude que pour un site chaque \u00e9l\u00e9ment soit une bo\u00eete dont on peut en mettre d\u2019autre \u00e0 l\u2019int\u00e9rieur, leur mettre des caract\u00e9ristiques. Chez Wix chaque \u00e9l\u00e9ment est ind\u00e9pendant, alors c\u2019est tr\u00e8s pratique pour la mise en page, mais quand on veut modifier des \u00e9l\u00e9ments on est vraiment limit\u00e9 (et pourtant mes patronnes ont pay\u00e9 pour la version premium). Pour faire mon hover, j\u2019ai d\u00fb prendre une template d\u00e9j\u00e0 faite pour la modifier (je ne suis pas fan de ne pas pouvoir tout faire de mes propres moyens), il est compos\u00e9 de deux \u00e9l\u00e9ments qui se superposent (mon image et l\u2019effet hover), tout \u00e9tait pr\u00eat. Puis arrive le test, cela ne marche pas, il se trouve que si les bords du cadre de l\u2019effet est trop proche de l\u2019image l\u2019animation n’appara\u00eet pas. Alors j\u2019ai d\u00e9cal\u00e9 plus vers l\u2019ext\u00e9rieur, mais c\u2019\u00e9tait bizarre, on avait un cache transparent sombre qui apparaissait sur le fond. Apr\u00e8s avoir test\u00e9 plusieurs choses, le fond s\u2019est retrouv\u00e9 derri\u00e8re la photo, le texte devant la photo mais illisible et impossible de revenir en arri\u00e8re. C\u2019est l\u00e0 que j\u2019ai compris qu’essayer de faire des effets serait trop compliqu\u00e9. C\u2019en est presque frustrant, car je sais le faire en CSS mais l\u00e0 \u00e7a d\u00e9passe mon niveau de compr\u00e9hension.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

C\u2019\u00e9tait une demande assez fastidieuse, mais sans pression ou deadline et je n\u2019avais rien d\u2019autre \u00e0 faire ne m\u00eame temps. C\u2019\u00e9tait un peu ennuyant et long mais je fait de mon mieux pour faire un site clean avec les moyens que j\u2019ai.<\/p>\n","protected":false},"excerpt":{"rendered":"

Depuis maintenant un mois je suis charg\u00e9e de refaire enti\u00e8rement le site web qui avait \u00e9t\u00e9 fait par l’ancienne stagiaire.  J’ai d’abord fait une carte r\u00e9capitulative de ce qu’\u00e9tait Mobilisation G\u00e9n\u00e9rale avec une mindmap et la nouvelle direction du site.  De celle-ci j’ai commenc\u00e9 \u00e0 chercher des r\u00e9f\u00e9rences de sites que je trouvais int\u00e9ressantes. Je … Continuer la lecture de « Webdesign pour les nuls »<\/span><\/a><\/p>\n","protected":false},"author":33,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[165],"tags":[75,240,239,237,106,238,197],"class_list":["post-1080","post","type-post","status-publish","format-standard","hentry","category-stages-2022","tag-incomprehension","tag-mission","tag-mockup","tag-site-web","tag-webdesign","tag-wireframe","tag-wix"],"_links":{"self":[{"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/posts\/1080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/users\/33"}],"replies":[{"embeddable":true,"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/comments?post=1080"}],"version-history":[{"count":3,"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/posts\/1080\/revisions"}],"predecessor-version":[{"id":1287,"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/posts\/1080\/revisions\/1287"}],"wp:attachment":[{"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/media?parent=1080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/categories?post=1080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stages.dnmade-prevert.fr\/index.php\/wp-json\/wp\/v2\/tags?post=1080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}