Webdesigner en agence : quotidien & bonnes pratiques !

Afin de mener à bien un projet, il est essentiel d’adopter la bonne approche. Le webdesigner en agence doit avoir un process pertinent pour garantir le succès du projet et une bonne collaboration avec les équipes.

Som’mer :

• La journée type d’un design 
• Quels process et méthodologie utiliser pour garantir la qualité de son design 
• Les bonnes pratiques pour designer un site 
• Les sources d’inspiration 
• Les outils incontournables

La journée type d’un webdesigner en agence

La journée d’un webdesigner en agence dépend des projets et des avancements. Les journées sont différentes quand il s’agit d’une journée conseil (basée sur des recherches), la création avec le directeur artistique digital ou une fin de projet (passation avec des développeurs pour faciliter le développement du site web).

Les tâches varient. Cependant, il est important de créer des routines pour affiner la journée et faire en sorte d’avoir un processus de production qualitatif. Cette répartition permet d’affiner son organisation en fonction de l’emploi du temps défini avec le chef de projet en début de semaine.

L’organisation générale d’un webdesigner

• Lire ses emails : voir si on a des retours clients, des réunions qui se sont glissées dans la journée, etc. L’idéal est de les consulter 2 à 3 fois par jour.

• Procéder à une veille : l’idée est de faire le tour de différentes plateformes afin de voir les nouveautés en termes de design, de code… Vous pouvez le faire durant 15-20 minutes.

• Débuter les tâches : en fonction du planning et des tâches, commencez à travailler sur les différents projets vers 9h30. Il s’agit ici du début du processus de production pur. Pilot’in a entre 2 à 3 projets en simultanée, mais ils ne sont pas dans les mêmes phases. En déterminant les projets, vous êtes en mesure de structurer la journée en bloc. Le top est de garder 3h30 par projet ! Cela évite de faire des allers-retours et de se déconcentrer. Les tâches vraiment longues coupées d’une pause permettent d’éviter toute distraction

• Logger son temps : en fin de journée, faites le point du temps passé sur chaque tâche. Cette approche permet aux chefs de projets de voir l’avancée du projet. Il est bien de le faire quotidiennement, voire à la fin de chaque semaine. Vous pouvez utiliser Monday ou Calendar. Cela vous donne le temps passé sur le projet pour connaître la rentabilité et adapter les futurs projets.

  Cette liste est non exhaustive. Chaque designer a ses différentes routines.

Webdesigner en agence : quels process et méthodologies utiliser pour garantir la qualité de son design ?

Il existe différentes étapes à respecter.

Définir le cadre du projet webdesign avec le client

Beaucoup d’éléments se passent en amont du projet. Le chef de projet et l’équipe d’avant-vente doivent comprendre le besoin du client. Ici sont déterminés les demandes générales, les comportements spéciaux sur le site… Ces informations vont permettre de proposer un site en accord avec les demandes.

Sensibiliser le client

Les aspects designs et techniques sont considérés. Il faut prendre du recul et faire en sorte que ce soit dans les tendances du web tout en respectant les objectifs fixés. Lors de cet échange, vous devez faire comprendre qu’il est le décisionnaire qui valide les étapes. Cependant, ce n’est pas lui qui va utiliser le site. Le travail doit être effectué pour des utilisateurs finaux. Il faut donc mettre en place des processus qui sont en accord avec les besoins des prospects.

Connaître les utilisateurs pour un design stratégique

Déterminez qui sont les cibles et les personas types pour adapter le design. Un site pour des seniors doit avoir les bonnes typographies (grandes et larges) avec une navigation simplifiée. Pour être un bon webdesigner en agence, il faut créer un persona et se mettre dans sa peau.

Déterminer les objectifs clients en tant que webdesigner

Les envies sont différentes en fonction des projets. Vous pouvez souhaiter des conversions dans certains produits, avoir plus de leads… Quelle que soit la raison du projet, les designs sont différents en fonction des objectifs.

Créer une arborescence cohérente

Un bon webdesigner va déterminer une page type ainsi que des catégories au début du projet. L’objectif est de challenger le projet afin d’ajouter ou supprimer des éléments. Cette approche permet une approche agréable pour répondre aux besoins du client.

Récolter les feedbacks d’autres webdesigners

Cet échange doit se faire à chaque étape clé (présentation de charte graphique, wireframes, design final…). L’objectif est de partager des points de vue. Comme chaque designer a son projet, il est très indépendant. Cette liberté est un point positif, mais cela peut être un piège pour passer à côté des petites erreurs. Le partage du travail permet de tirer profit de l’expérience de chacun dans le but de créer un design propre et cohérent. Cela évite de passer à côté des petits éléments.

Pour aller plus loin : faites des échanges réguliers avec les clients afin de confirmer que le design est en accord avec ses attentes. Un bon webdesigner en agence est en mesure d’accompagner le client. Ne créez pas d’effet tunnel. Faites en sorte d’impliquer le client dans la démarche de création.

Les bonnes pratiques pour designer un site : devenir un bon webdesigner en agence

Plusieurs pratiques sont essentielles afin de créer un site rapidement et efficacement.

Avoir le contenu du client pour assurer le succès de votre projet

Avec l’ensemble du contenu, un webdesigner est en mesure de prévisualiser les différentes informations, la longueur, les types de contenus… Charte graphique et contenus textuels sont nécessaires pour permettre au designer de travailler correctement. Cela évite également de devoir retravailler le design final. Par exemple, si vous devez réaliser un site avec plus de 500 pages, vous ne serez pas en mesure d’identifier les besoins. À l’aide du contenu et de la typographie, vous pourrez vous projeter.

À savoir : on ne design pas toutes les pages des sites web. On fait une page type (article / blog / accueil / page produit) puis on utilise ces modèles pour le reste du site.

Identifier les concurrents avant de lancer le webdesign

Prendre en compte les bonnes et les mauvaises pratiques permet de faire des feedbacks aux clients des leviers utilisés par la concurrence. Vous pouvez également voir comment ils s’adressent à leur cible.

S’intéresser aux pratiques actuelles d’un webdesigner en agence

Trouver de l’inspiration sous toutes ces formes permet d’avoir une idée globale des tendances du web. Cette approche vous donne la possibilité de chiner des typographies, des couleurs, des inspirations de sections, des micro-interactions…

Avant chaque phase de création, les équipes Pilot’In font une grande phase de recherches et de conseils. Cela permet de nourrir l’œil et de vous faire réfléchir pour avoir une tendance globale. Vous allez donc être en mesure de proposer un projet actuel à votre client.

Si vous êtes dans le secteur du design web et que vous créez des interfaces, ne négligez pas les autres catégories du graphisme. Regardez le branding, le packaging ou encore le motion design. Cela vous donnera une idée globale sur les tendances actuelles. Vous obtiendrez une référence visuelle autre que celle que l’on voit habituellement. Faites des moodboards. Ayez des références visuelles, des couleurs, des typographies. Mettez l’ensemble dans un dossier. Ce travail d’inspiration peut être présenté au client ou conservé en interne.

Créer des wireframes

Les wireframes haute fidélité permettent au client de mieux se projeter sur la place que son contenu va prendre. De plus, le prototypage rend l’immersion plus importante.

Chez Pilot’in, les équipes de webdesigners travaillent avec une librairie qui permet de faire des wireframes. Cela permet de créer un enchaînement de sections indépendantes qui forment une page web. Toutes ces pages forment un site.

Dans celles-ci, il n’y a pas d’images, de couleurs ou de typographies. L’objectif est uniquement de valider la première structure.

Puis, les experts en webdesign les rendent interactifs afin de faire des liens.

Le client va alors pouvoir naviguer dans le site. Le client peut se rendre compte de comment fonctionne son site. Quand on a une arborescence, la projection est difficile. Grâce à cette approche efficace, vous pouvez le rassurer et obtenir des feedbacks.

Travailler en concordance avec le dev et le chef de projet

Pour créer des sections techniquement réalisables qui respectent les délais et le budget, il faut impérativement travailler avec le développement. Cette collaboration permet d’éviter d’avoir des hors budget. Les experts développeurs indiquent si vous pouvez créer les différents éléments et s’ils entrent ou non dans le projet.

Faire partie d’une équipe interne assure une aisance dans les échanges et une collaboration facile. Grâce à l’utilisation du plugin WordPress Pilo’Press et à Figma, un webdesigner en agence peut collaborer avec tous les experts. Ce sont des plateformes collaboratives.

Au-delà de simplifier les échanges, chacun va pouvoir profiter du travail des collègues.

En effet, quand un design est créé, une version générique est créée (sans couleur / photo / typographie spécifique). Les développeurs font la même chose avec les éléments qu’ils développent. Ainsi, ils peuvent être réutilisés facilement sur d’autres projets. Ce travail en équipe est fondamental. De plus, le résultat final est présenté au client uniquement lorsque l’ensemble du design est validé.

À noter : certaines agences ont des effets tunnels. Elles présentent le projet uniquement à la fin. Avec cette approche, le client se trouve bloqué face au design final. Créez un process de travail afin de pouvoir collaborer avec l’ensemble des acteurs du projet.

Proposer deux pistes créatives distinctes

Partir sur deux pistes différentes permet de faire émerger des idées et des concepts au client. En sortant de sa zone de confort, un bon webdesigner en agence permet une meilleure approche design.

Avant, Pilot’In proposait qu’une seule piste graphique. Maintenant, avec deux pistes créatives, nous évitons d’enfermer le client vers une direction. Il est plus à l’aise pour rebondir et proposer de nouveaux éléments.

Néanmoins, il vaut mieux en proposer que deux très bons plutôt qu’une dizaine, mais sans réelle proposition concrète. Après avoir proposé ces pistes différentes, n’oublions pas de sensibiliser le client qu’elles peuvent évoluer.

Les propositions innovantes doivent rentrer dans les chartes, au risque de ne pas être rentables. Soyez vigilant à ne pas dépasser le temps imparti tout en proposant des éléments différenciants.

Une fois les wireframes validées, le webdesigner se penche sur les webdesigns V1 et V2. Ici, l’objectif est d’avoir les sections les plus réutilisables possible.

Un point vocabulaire :

• Une page désigne un gabarit par exemple la page blog la page accueil… 
• Dans un gabarit, il y a des sections : photo / champs texte / vidéo / témoignage client…

Cette méthode de travail permet d’avoir une homogénéité dans le site. Après la construction, les sections sont réparties sur l’ensemble du gabarit du site.

Les sources d’inspiration d’un designer

Il existe deux types de sources d’inspirations :

• Les inspirations fictives : elles sont pour la plupart utilisées pour nourrir son œil. Vous pouvez consulter Dribbble, Behance ou encore Pinterest. 

• Les inspirations situationnelles : ces inspirations sont plus ancrées dans le monde réel. Ce sont des projets concrets mis en place. On peut citer Awwwards, CSSDA, la navigation à travers le web…

Les outils incontournables d’un webdesigner en agence

• Figma et notre design system : que ce soit les wireframes, les maquettes ou le prototypage, les webdesigners utilisent uniquement Figma. Le design system Pilot’In permet de gagner du temps pour des sections simples tout en permettant d’être créatif. Certains plugins sont aussi très utiles pour permettre de gagner du temps de production. 

• L’ensemble de la suite Adobe : différents logiciels sont utilisés pour répondre aux besoins de création. Les deux les plus utilisés par un webdesigner en agence vont être After Effects pour créer des animations avancées sur des sections et illustrator pour toute la partie iconographie, logo, illustrations…

• Notion : lorsque les sections sont créées et placées dans le sandbox, le rôle d’un designer est de les documenter au mieux afin de faciliter le développement et de spécifier le comportement de cette dernière.

• Raindrop : lors de la veille, vous pouvez classer vos trouvailles avec des hashtags les éléments préférés et les ranger dans des catégories (finance, architecture…). Ainsi, lors de la création, vous avez déjà une bibliothèque d’inspirations en accord avec le secteur d’activité.

• Monday : pour l’organisation de nos marins sur leurs travaux afin de favoriser leur productivité ! Cela permettra également aux chefs de projet de pouvoir suivre leur designer et l’avancée des travaux!

Un webdesigner en agence a des tâches diverses et variées pour répondre aux besoins des clients. Le plus important est de stimuler votre créativité pour sortir des carcans traditionnels et proposer des éléments innovants. Pour vos projets, les marins Pilot’in sont à votre disposition. N’hésitez pas à soumettre vos besoins concernant le webdesign.

Pour les plus curieux, découvrez le webinar de Loïck, directeur artistique digital chez Pilot’in