Aujourd’hui, le webdesign est au cœur de tous les projets de refonte ou de création 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 pour votre communication visuelle. 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.
Webdesigner, qu'est ce que c'est?
Le webdesigner doit concevoir et réaliser le design d’une interface web. Il est en mesure de réaliser la transposition artistique d’une idée de site web. Pour cela il doit suivre le brief réalisé par ses clients et rendre leurs idées concrètes.
Il est donc en charge de construire le visuel du site web de ses clients. Son rôle est primordial quand on sait à quel point les sites internet sont aujourd’hui des outils indispensables et sont une vitrine pour les entreprises. Le designer web travaille en cherchant en permanence à satisfaire les futurs utilisateurs du site internet en prenant en compte certaines contraintes qui peuvent le limiter dans ses réalisations. Il doit mettre en place un site internet responsive pour limiter le taux de rebond et permettre au site d’être bien référencé. Il doit alors se mettre à leur place, tester tous les cas de figure possibles afin de travailler l’UX design quelque soit les besoins des utilisateurs.
C’est également un conseiller puisqu’il a suffisamment d’expérience pour guider le client dans ce qui est réalisable ou non. Il n’est n’est pas juste exécutant d’un projet, mais il construit avec le client, il peut le conseiller sur les bonnes pratiques, sur ce qui correspond le mieux à son secteur d’activité et il peut lui présenter des idées auxquelles il n’aurait pas pensé tout seul. Il sait quel type d’ergonomie est la plus appropriée pour ses clients.
Il est aussi amené à collaborer avec d’autres fonctions de l’entreprise, comme le webdevelopper ou encore le chef de projet. Il va pouvoir créer un cahier des charges pour permettre à tous ces acteurs de fournir le bon produit fini et d’être sur la même ligne directrice. Ce cahier va comporter certains éléments attendus à propos de la scénarisation, de l’identité visuelle, de l’arborescence du site ou du mode de navigation. Il est le chef d’orchestre du projet qui va accompagner l’équipe au résultat fini.
Son rôle lui demande aussi d’avoir des compétences pointues sur des logiciels tels qu’Illustrator, Photoshop ou encore Flash. Il doit également connaître le code HTML/CSS pour bien mettre en forme le design web.
Webdesigner, le brief du créateur de site web : une première étape cruciale
Le rôle du web-designer 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 sites internet ou d’une 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 web-designer 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 de web-design. 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 bien adapté.
Webdesigner et réalisation de 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.
Webdesigner, le croquis du web-design du site, étape cruciale pour la réalisation d'un site
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. En bref, cette étape permet de s’assurer du responsive design des pages web. 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.
Webdesigner et la création du web-design du site sur logiciel et la collaboration avec le web-developer
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 lors de 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 web-designer validées par le client, elles sont transmises au web-developer qui va ainsi pouvoir débuter le développement du site en ligne.
Webdesigner et l'ultime étape: la vérification des maquettes
Une fois le site construit par les web-developers, la dernière étape consiste en la vérification de celui-ci. En effet, il est important pour le web-designer 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. Il s’assure alors que les contenus soient pertinents et la mise en page optimale. 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.