{"id":112,"date":"2023-10-21T12:30:37","date_gmt":"2023-10-21T12:30:37","guid":{"rendered":"https:\/\/poyesis.fr\/blogs\/?p=112"},"modified":"2025-02-05T14:31:19","modified_gmt":"2025-02-05T14:31:19","slug":"7-conseils-pour-travailler-avec-un-webdesigner","status":"publish","type":"post","link":"https:\/\/poyesis.fr\/blogs\/7-conseils-pour-travailler-avec-un-webdesigner\/","title":{"rendered":"7 conseils pour travailler avec un webdesigner"},"content":{"rendered":"<p>En qu\u00eate d\u2019un site web responsive design, vous vous \u00eates tourn\u00e9 vers un webdesigner.<\/p>\n<p>Mi-graphiste, mi-d\u00e9veloppeur, vous attendez de ce cr\u00e9a qu\u2019il vous fournisse une maquette pour votre prochain site web. Peut-\u00eatre, attendez-vous de lui qu\u2019il donne aussi vie \u00e0 votre application web ou mobile.<\/p>\n<p>Seulement, vous h\u00e9sitez : comment devez-vous aborder cette collaboration ?<\/p>\n<p>Les histoires de collaboration infructueuses avec des webdesigners freelance et des agences abondent sur le web. Et vous ne souhaitez surtout pas avoir \u00e0 ajouter une page suppl\u00e9mentaire \u00e0 ce livre des malheurs.<\/p>\n<p>Rassurez-vous : travailler avec un webdesigner est excessivement simple, en plus d\u2019\u00eatre b\u00e9n\u00e9fique pour votre image de marque.<\/p>\n<p>Suivez ces 7 conseils et votre collaboration se d\u00e9roulera sans encombre.<\/p>\n<h2><b>1 &#8211; D\u00e9terminez l\u2019objectif de votre site avant de vous adresser \u00e0 un webdesigner<\/b><\/h2>\n<p>Avant de vous adresser \u00e0 un webdesigner, vous devez \u00eatre capable de r\u00e9pondre \u00e0 une question : quel est l\u2019objectif principal de votre site web ?<\/p>\n<p>Plus vous comprendrez ce que vous voulez, plus votre graphiste web sera capable de cr\u00e9er une maquette qui comblera vos attentes.<\/p>\n<p>Pour \u00eatre certain que votre web-designer puisse vous cr\u00e9er une identit\u00e9 visuelle sur-mesure, voici quelques informations que vous devez avoir en t\u00eate :<\/p>\n<ul>\n<li>Quel est l\u2019objectif g\u00e9n\u00e9ral de votre (futur) site web ou application mobile (Am\u00e9liorer l\u2019exp\u00e9rience utilisateur de vos clients ? Acqu\u00e9rir plus de clients ?) ?<\/li>\n<li>Quel sera votre positionnement marketing ?<\/li>\n<li>Quels sont les supports de communication privil\u00e9gi\u00e9s de vos cibles ?<\/li>\n<li>Quels sont les outils de communication qu\u2019ils utilisent au quotidien ?<\/li>\n<li>Quelle exp\u00e9rience utilisateur voulez-vous faire vivre \u00e0 vos utilisateurs\u00a0?<\/li>\n<\/ul>\n<p>Ces questions peuvent sembler sans importance, et pourtant.<\/p>\n<p>Observez par exemple les communications web et print de deux marques qui vendent les m\u00eames produits (des v\u00eatements) : Louis-Vuitton et Zara.<\/p>\n<p>Leurs positionnements marketing \u00e9tant radicalement oppos\u00e9s (luxe vs populaire), cela se refl\u00e8te aussi sur leurs sites web : structure, typographie, arborescence, visuels, ergonomie\u2026 la diff\u00e9rence est flagrante.<\/p>\n<p>Raison pour laquelle vous devez absolument fournir ces informations \u00e0 votre graphiste web. De la conception jusqu\u2019\u00e0 la r\u00e9alisation de votre site d\u2019e-commerce, y compris dans vos actions de webmarketing, ces r\u00e9ponses guideront vos d\u00e9veloppeurs, marketistes et webdesigners.<\/p>\n<h2><b>2 &#8211; Listez toutes les futures fonctionnalit\u00e9s de votre application<\/b><\/h2>\n<p>Maintenant que vous savez ce que votre application web ou produit digital fera, reste encore la question du comment.<\/p>\n<p>D\u2019embl\u00e9e, sachez que deux produits qui remplissent exactement la m\u00eame fonction peuvent le faire via des fonctionnalit\u00e9s diff\u00e9rentes. Et c\u2019est valable aussi bien pour les produits physiques que les services num\u00e9riques.<\/p>\n<p>Sceptique ? Si nous vous disions que Ryanair &#8211; une compagnie a\u00e9rienne &#8211; est en concurrence avec Zoom, nous croiriez-vous ?<\/p>\n<p>Et pourtant, c&rsquo;est bel et bien le cas. Toutes deux r\u00e9pondent exactement au m\u00eame probl\u00e8me : permettre aux cadres de faire des r\u00e9unions B2B.<\/p>\n<p>Sans surprise, l\u2019exp\u00e9rience utilisateur propos\u00e9e par chaque site, leurs banni\u00e8res, leurs logos et leurs communications visuelles n\u2019ont rien \u00e0 voir.<\/p>\n<p>Pour \u00eatre certain de lister toutes les fonctionnalit\u00e9s de votre future application, voici quelques astuces :<\/p>\n<ul>\n<li>analysez les sites de vos concurrents directs : si tous vos concurrents proposent les m\u00eames fonctionnalit\u00e9s, disons une newsletter, ce serait une bonne id\u00e9e de faire de m\u00eame ;<\/li>\n<li>trouvez vos concurrents indirects, ceux qui r\u00e9solvent le m\u00eame probl\u00e8me que vous et analysez-les : souvenez-vous de l\u2019exemple de RyanAir et Zoom ;<\/li>\n<li>observez des sites qui vous plaisent : de nouvelles approches ou l\u2019usage de supports diff\u00e9rents peuvent surprendre agr\u00e9ablement vos utilisateurs.<\/li>\n<\/ul>\n<p>Une fois que vous avez en main la liste compl\u00e8te des futures fonctionnalit\u00e9s sp\u00e9cifiques qui vous int\u00e9ressent, il est temps de vous rapprocher d\u2019un webdesigner.<\/p>\n<h2><b>3 &#8211; N\u2019expliquez pas ce que vous attendez. Montrez-le<\/b><\/h2>\n<p>Absolument tous les webdesigners appr\u00e9cient qu\u2019on leur fournisse des r\u00e9f\u00e9rences. Cela permet de voir les chartes graphiques qui vous plaisent (ou au moins, qui s\u00e9duisent vos cibles).<\/p>\n<p>Mais surtout, votre r\u00e9f\u00e9rence sera plus appr\u00e9ci\u00e9e si vous expliquez \u00e0 votre web-designer pourquoi elle vous pla\u00eet.<\/p>\n<p>En fournissant des exemples \u2013 accompagn\u00e9es de descriptions sp\u00e9cifiques dans votre briefing si possible -, l\u2019\u00e9quipe de cr\u00e9atifs en charge de votre projet web sera capable de cr\u00e9er l\u2019interface web que vous d\u00e9sirez.<\/p>\n<p>Mieux encore, ils pourront cr\u00e9er des logos, plaquettes, flyers et autres d\u00e9clinaisons d\u2019outils de communication qui refl\u00e9teront votre identit\u00e9. Votre personnalit\u00e9.<\/p>\n<p>C\u00f4t\u00e9 d\u00e9veloppement, d\u00e9finir le p\u00e9rim\u00e8tre de vos fonctionnalit\u00e9s permet \u00e0 votre webdesigner de vous recommander <a href=\"https:\/\/poyesis.fr\/blog\/creation-dun-site-e-commerce-cms-ou-developpement-personnalise\/\">un cms type WordPress ou Shopify, ou un d\u00e9veloppement sur-mesure<\/a>.<\/p>\n<h2><b>4 &#8211; D\u00e9finissez le type de contenus qui vous int\u00e9resse<\/b><\/h2>\n<p><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter wp-image-195 size-full\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2022\/10\/Image-PC-avec-tablette-graphique.jpg\" alt=\"Laptop ex\u00e9cutant un logiciel de vid\u00e9o-montage avec tablette graphique\" width=\"563\" height=\"750\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2022\/10\/Image-PC-avec-tablette-graphique.jpg 563w, https:\/\/poyesis.fr\/wp-content\/uploads\/2022\/10\/Image-PC-avec-tablette-graphique-225x300.jpg 225w\" sizes=\"(max-width: 563px) 100vw, 563px\" \/><\/p>\n<p>Qu\u2019attendez-vous comme prototype\u00a0?<\/p>\n<p>Des pages web remplies de textes\u00a0? Des illustrations\u00a0? Des templates pr\u00eats \u00e0 l\u2019emploi\u00a0?<\/p>\n<p>Vous l\u2019aurez compris, d\u00e9finir le type de contenus qui abondera sur votre futur service digital est une \u00e9tape cruciale. Une \u00e9tape trop souvent saut\u00e9e par de nombreuses personnes en qu\u00eate de gain de temps et d\u2019argent.<\/p>\n<p>H\u00e9las, en sautant cette \u00e9tape, vous perdrez presque tous les <a href=\"https:\/\/poyesis.fr\/blog\/les-6-avantages-importants-du-wireframing\/\">avantages des wireframes<\/a>. Par cons\u00e9quent, sans wireframe, votre \u00e9quipe projet et vous n\u2019\u00eates pas certain de comprendre les choses de la m\u00eame fa\u00e7on.<\/p>\n<p>Heureusement, cr\u00e9er un wireframe est excessivement simple.<\/p>\n<p>Gr\u00e2ce \u00e0 cette r\u00e9flexion en amont, vous \u00eates certain que la gestion de votre projet sera plus simple. Toutes les parties auront le m\u00eame niveau de compr\u00e9hension. D\u00e9veloppeurs et designers sauront exactement ce que vous attendez d\u2019eux et comment cela doit \u00eatre impl\u00e9ment\u00e9.<\/p>\n<p>Par ailleurs, si vous avez fait appel \u00e0 un web-designer, celui-ci saura s\u2019il doit se faire aider par un r\u00e9dacteur ou d\u00e9veloppeur exp\u00e9riment\u00e9 (particuli\u00e8re si vous voulez autre chose qu\u2019un site vitrine responsive en HTML\/CSS, ou un petit site d\u2019e-commerce).<\/p>\n<h2><b>5 &#8211; Fournissez les \u00e9l\u00e9ments de votre charte graphique<\/b><\/h2>\n<p>La charte graphique est un document qui d\u00e9taille les diff\u00e9rents aspects de votre strat\u00e9gie de communication digitale et physique. \u00c0 l\u2019int\u00e9rieur, figurent vos codes couleurs, les diff\u00e9rentes versions de votre logo, les polices typographiques autoris\u00e9es et tout un ensemble de r\u00e8gles.<\/p>\n<p>Gr\u00e2ce \u00e0 elle, vous aurez une identit\u00e9 visuelle unique et facilement reconnaissable par votre cible. Si peu importe o\u00f9 vous \u00eates, vous arrivez \u00e0 reconna\u00eetre des produits Coca-Cola ou Mcdonald&rsquo;s, c\u2019est gr\u00e2ce \u00e0 ce document.<\/p>\n<p>Plus t\u00f4t vous serez fix\u00e9 sur ce que vous attendez, plus vous aurez de chances d\u2019obtenir un r\u00e9sultat satisfaisant.<\/p>\n<p>Lorsque les \u00e9l\u00e9ments de votre charte graphique sont fournis en retard, vos concepteurs web devront prendre davantage de temps pour les modifier. Typographie, couleurs primaires, secondaires, mise en page\u2026 absolument tout sera revisit\u00e9.<\/p>\n<p>Naturellement, le calendrier de votre projet s\u2019en trouvera rallong\u00e9.<\/p>\n<h2><b>6 &#8211; Lisez les lignes \u00e9crites en tout petit dans les conditions de vos polices<\/b><\/h2>\n<p>D\u2019embl\u00e9e, sachez que certaines polices peuvent ne pas fonctionner sur certains sites web.<\/p>\n<p>Pour contourner ce probl\u00e8me, les polices populaires ont g\u00e9n\u00e9ralement leurs propres versions web, gratuites jusqu\u2019\u00e0 un certain trafic.<\/p>\n<p>Raison pour laquelle demandez toujours \u00e0 l\u2019agence ou au webdesigner freelance avec qui vous travailler de v\u00e9rifier cela pour vous.<\/p>\n<p>Vous ne voudriez pas \u00eatre factur\u00e9 pour avoir utilis\u00e9 une police, n\u2019est-ce pas\u00a0?<\/p>\n<h2><b>7 &#8211; Testez toujours votre maquette<\/b><\/h2>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-194 size-full\" src=\"https:\/\/poyesis.fr\/blogs\/wp-content\/uploads\/2022\/10\/Homme-avec-casque-VR-accompagne-dune-femme-avec-un-stylo.jpg\" alt=\"Homme avec casque VR accompagn\u00e9 d'une femme avec un stylo\" width=\"501\" height=\"750\" srcset=\"https:\/\/poyesis.fr\/wp-content\/uploads\/2022\/10\/Homme-avec-casque-VR-accompagne-dune-femme-avec-un-stylo.jpg 501w, https:\/\/poyesis.fr\/wp-content\/uploads\/2022\/10\/Homme-avec-casque-VR-accompagne-dune-femme-avec-un-stylo-200x300.jpg 200w\" sizes=\"(max-width: 501px) 100vw, 501px\" \/><\/p>\n<p>Si votre webmaster travaille selon les <a href=\"https:\/\/poyesis.fr\/blog\/quelles-sont-les-ceremonies-agiles\/\">c\u00e9r\u00e9monies agiles<\/a>, alors vous recevrez tr\u00e8s rapidement une maquette fonctionnelle de votre application.<\/p>\n<p>Mais attention\u00a0: ce n\u2019est pas parce qu\u2019elle fonctionne chez vous qu\u2019elle fonctionnera chez tous vos prospects.<\/p>\n<p>Peut-\u00eatre vous souviendrez-vous d\u2019Internet Explorer 9, qui \u00e9tait r\u00e9put\u00e9 pour avoir des normes incompatibles avec la plupart des navigateurs. Par cons\u00e9quent, certaines animations ne fonctionnaient tout simplement pas sur ce navigateur.<\/p>\n<p>Si vous ne voulez pas perdre une partie de votre audience \u00e0 cause de probl\u00e8mes d\u2019incompatibilit\u00e9, vous avez une seule solution : mener des <a href=\"https:\/\/poyesis.fr\/blog\/de-limportance-du-test-utilisateur\/\">tests utilisateurs<\/a> et faire des retours \u00e0 votre webdesigner.<\/p>\n<p>Mais vous pouvez aller encore plus loin. Pourquoi ne pas contacter nos experts pour discuter de votre projet digital ? <a href=\"https:\/\/poyesis.fr\/contactez-nous\/\">\u00c9crivez-nous<\/a>. Cela ne vous engage \u00e0 rien et nous vous r\u00e9pondrons rapidement.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En qu\u00eate d\u2019un site web responsive design, vous vous \u00eates tourn\u00e9 vers un webdesigner. Mi-graphiste, mi-d\u00e9veloppeur, vous attendez de ce cr\u00e9a qu\u2019il vous fournisse une maquette pour votre prochain site web. Peut-\u00eatre, attendez-vous de lui qu\u2019il donne aussi vie \u00e0 votre application web ou mobile. Seulement, vous h\u00e9sitez : comment devez-vous aborder cette collaboration ? [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":108,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":{"format":"standard","override":[{"template":"7","single_blog_custom":"553","parallax":"1","fullscreen":"1","layout":"no-sidebar-narrow","sidebar":"default-sidebar","second_sidebar":"default-sidebar","sticky_sidebar":"1","share_position":"floatbottom","share_float_style":"share-normal","show_share_counter":"1","show_view_counter":"1","show_featured":"1","show_post_meta":"1","show_post_author":"1","show_post_author_image":"1","show_post_date":"1","post_date_format":"default","post_date_format_custom":"Y\/m\/d","show_post_category":"1","post_reading_time_wpm":"300","post_calculate_word_method":"str_word_count","show_zoom_button":"0","zoom_button_out_step":"2","zoom_button_in_step":"3","number_popup_post":"1","show_post_related":"1"}],"image_override":[{"single_post_thumbnail_size":"crop-500","single_post_gallery_size":"crop-500"}],"trending_post_position":"meta","trending_post_label":"Trending","sponsored_post_label":"Sponsored by","disable_ad":"0","subtitle":""},"jnews_primary_category":[],"jnews_override_bookmark_settings":{"override_bookmark_button":"0","override_show_bookmark_button":"0"},"jnews_override_counter":{"view_counter_number":"0","share_counter_number":"0","like_counter_number":"0","dislike_counter_number":"0"},"footnotes":""},"categories":[36],"tags":[44,46,47],"class_list":["post-112","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","tag-developpeur-freelance","tag-travailler-avec-un-webdesigner","tag-webdesigner"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":1,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/112\/revisions"}],"predecessor-version":[{"id":1229,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/posts\/112\/revisions\/1229"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/media\/108"}],"wp:attachment":[{"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/media?parent=112"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/categories?post=112"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/poyesis.fr\/blogs\/wp-json\/wp\/v2\/tags?post=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}