Habefast alt

Habefast | Blog
GraphismeWebWebdesign

Le rôle du webdesigner dans la création ou refonte de votre site internet

Habefast Blog Webdesign
>

Aujourd’hui, le webdesign est au cœur de tous les projets de création ou de refonte de site web. En effet, depuis le design général jusqu’à la réflexion sur l’expérience utilisateur, le webdesign représente une étape à part entière dans la construction d’un site web. Le travail  du webdesigner consiste ainsi à réfléchir à la structuration et l’esthétisme d’un site web dans le but de faire rester l’internaute sur le site et qu’il y réalise une action (achat, prise de contact, prise de rendez-vous etc.). Mais concrètement, quel est le rôle du webdesigner responsable de la création ou la refonte de votre site web? Quelles sont les principales étapes de son travail? Découvrons-le ensemble dans cet article.

Le brief: une première étape cruciale

Le rôle du webdesigner débute au commencement du projet. Il reçoit un brief par le client qui comporte tous les éléments clés du projet. Qu’il s’agisse de la création de votre site internet ou de sa refonte, le brief permet de cerner au mieux vos besoins et vos objectifs. Il contient notamment le message ainsi que les valeurs que vous souhaitez véhiculer au travers de votre site web. Cette étape permet également de transmettre au webdesigner la charte graphique à respecter.

Par exemple, nous avons procédé en interne à la refonte des sites web de nos entités Habefast et LakeProd. Pour ces réalisations, les objectifs et attentes de la refonte de ces sites ont été transmis à l’équipe webdesign. En effet, le site web Habefast est davantage basé sur des contenus informatifs là où le site LakeProd cherche à mettre en avant les productions audiovisuelles du studio. Il est donc crucial de bien cerner les attentes  et les objectifs de l’entreprise pour réaliser un site web vraiment adapté.

Réaliser l’arborescence

Une fois vos attentes assimilées, le webdesigner commence la réalisation de la structuration de votre site web. Il faut tout d’abord en réaliser l’arborescence. Au sein de notre agence, cette étape se réalise en collaboration avec les chefs de projets. L’arborescence de votre site correspond à la structure de celui-ci, son ossature. Un des principes de base de l’UX design consiste notamment à construire le site de façon à ce que l’internaute ne réalise pas plus de 3 clics avant d’atteindre l’information qu’il recherche. Les futures pages de votre site web sont donc classées avec l’objectif de respecter cette règle, et ainsi optimiser l’expérience utilisateur. Les informations principales, qui doivent être facilement accessibles, sont ainsi davantage mises en avant.

Il est ensuite possible de réaliser un site map du site web. Un site map est un croquis reprenant l’arborescence du site, les liens entre les différentes pages de votre site web. Dans le cadre de la refonte de nos sites Habefast et Lakeprod, un site map a ainsi été réalisé. L’objectif était d’avoir une vision globale de la construction des sites, et donc de la communiquer plus facilement aux webdevelopers, qui sont en charge du développement du site en ligne.

Une fois l’arborescence validée, elle n’est généralement plus modifiée, ainsi les fondations du projet sont solides.

L’étape du croquis: le projet se concrétise toujours plus

Une fois ces premières étapes réalisées, le webdesigner entre dans une étape encore plus concrète: le début des croquis du nouveau site. C’est à ce moment-là également que l’UX design intervient. Cette étape – dont le but est de penser le site web de façon à rendre l’expérience utilisateur la meilleure possible – permet de réaliser ce que l’on appelle un wireframe. Un wireframe est une maquette du site à blanc, sans les contenus textuels et multimédias finaux. Cela reprend la structure d’une page web et la disposition des éléments sur la page dans un but d’optimisation de l’expérience utilisateur: minimisation du nombre de clics, accès facile à l’information, compréhension facile de l’interface utilisateur, etc. Il correspond également aux tendances du webdesign et à la façon de naviguer des internautes actuels.

Cette étape permet ainsi au webdesigner de se projeter dans plusieurs éventualités et ainsi de sélectionner les meilleures options en accord avec les objectifs du client.

La création du design du site sur logiciel et la collaboration avec le webdeveloper

Vient ensuite l’étape de création sur logiciel. Les logiciels les plus communs utilisés sont notamment Photoshop, Sketch ou Figma.

Ces logiciels permettent de réaliser concrètement les croquis de l’étape précédente. En se basant sur une grille web définie, le webdesigner dispose les éléments de l’interface utilisateur comme cela a été défini précédemment. Cette étape permet aussi de choisir la typographie et le code couleur utilisé (ou de reprendre ceux imposés par la charte graphique du client) ainsi que de définir les animations présentes sur le futur site internet. Le web designer réalise plusieurs maquettes, puis les présente au webdeveloper afin de s’assurer de la faisabilité de celles-ci. La collaboration entre web designer et webdeveloper à cette étape est donc très importante. Le webdeveloper peut notamment contribuer aux décisions concernant les animations des éléments ou CTA (call to Action) – comment réagit un CTA lorsque l’on clique dessus? Comment apparaissent les photos d’illustration du site web? En effet, le webdeveloper saura décider de la faisabilité de ces animations.

Par exemple, ceci a permis de réaliser sur logiciel les croquis de l’étape précédente pour des clients comme Kauri, ou des réalisations en interne comme les sites Habefast et Lakeprod. Mais elle a également permis de décider, sur le site Kauri, que les éléments (photos et textes) apparaissent au fur et à mesure que l’internaute avance sur la page web. Cela permet de rendre le site dynamique. Si l’on prend l’exemple de Lakeprod, l’étape de création sur logiciel a permis de réaliser des triangles animés autour des images d’illustrations.

Une fois les maquettes du webdesigner validées par le client, elles sont transmises au webdeveloper qui va ainsi pouvoir débuter le développement du site en ligne.

Ultime étape: vérification des maquettes

Une fois le site construit par les webdevelopers, la dernière étape consiste en la vérification de celui-ci. En effet, il est important pour le webdesigner de s’assurer que ses croquis ont bien été compris et développés, qu’il n’y a pas eu de confusion, de mauvaise compréhension ou d’oubli. Ainsi, le rendu final du site web sera en parfait accord avec ce qui a été convenu précédemment avec le client. Une fois ce travail de vérification effectué, le site est alors mis en ligne.

Notre agence de communication Habefast dispose dans ses équipes de webdesigner, webdeveloper et chefs de projets. Si vous avez donc un projet de création ou de refonte de site web, n’hésitez pas à nous contacter ou demander un devis. Nous serions ravis de pouvoir vous aider dans la réalisation de votre projet.