Tu souhaites créer un site internet attractif et en phase avec ton univers de marque, mais tu n’as aucune compétence technique en la matière ? Tu n’as pas non plus le temps ni la motivation pour te former et le créer toi-même ; quant à passer par une agence web, tu ne l’envisages même pas de peur d’y laisser un bras… 😬
Pas facile tout ça, je te l’accorde ! 😅
Heureusement, il te reste encore une excellente option : faire appel à un webdesigner freelance !
Si tu n’as aucune idée de comment se déroule une prestation, laisse-moi t’expliquer tout ça en détails, afin que tu puisses te lancer en toute sérénité dans cette belle aventure… 🧘
En quoi consiste le métier de webdesigner freelance ?
Déjà, tu dois savoir que, bien qu’on fasse souvent l’amalgame, il y a une vraie nuance entre les métiers de graphiste et de webdesigner.
Si ces deux professionnels s’appuient sur le socle commun du design et de la communication visuelle, le webdesign, comme son nom l’indique, intègre également la notion de graphisme WEB. 🌐
Ainsi, le webdesigner freelance peut se définir comme un créatif du numérique. On peut le considérer comme un architecte du web en quelque sorte. Pour simplifier, c’est un graphiste indépendant, spécialisé dans la conception de sites internet et autres supports digitaux (applications, newsletters, landing pages, bannières, etc.). 🎨💻
Elle ou il connait le graphisme et le branding sur le bout des doigts tout en maîtrisant parfaitement les contraintes et les spécificités du web. 🤓
Ce.tte dernier.e possède également des bases solides dans divers domaines techniques tels que :
- Le développement et l’intégration HTML / CSS ainsi que les CMS (WordPress, Jumla…), les templates, plugins, etc. ⚙️
- L’UI & UX design pour proposer des sites agréables, aussi bien sur le plan esthétique qu’ergonomique, en se concentrant avant tout sur l’expérience utilisateur. 😍
- Le responsive design pour créer un site entièrement compatible sur mobile 📱
- Le SEO pour faciliter le référencement naturel du site 🔎 : optimisation de la structure HTML et des titres, balises meta, images, poids des pages…
- Les normes d’accessibilité web W3C pour proposer des contenus accessibles aux personnes en situation de handicap 👩🦯
- L’administration serveur : il ou elle doit savoir comment fonctionne un hébergeur, un FTP, une base de données, etc. 💽
- L’ UX Writing ✍️ pour optimiser l’approche textuelle (avoir des call to action efficaces, faire ressortir le positionnement de la marque, etc.)
Bien souvent, les services du webdesigner freelance dépassent le simple design du site et englobent également la création technique de ce dernier (c’est d’ailleurs mon cas 🖐️). Bien sûr, pour les projets les plus techniques (qui dépassent le simple site vitrine ou la petite e-boutique), ce dernier peut aussi travailler en collaboration avec un développeur.
Enfin, dans certains cas, une fois le site créé, le webdesigner peut également prendre la casquette de webmaster pour gérer l’intégration des contenus, si le client ne souhaite pas s’en charger lui-même.
Ça fait pas mal de choses n’est-ce pas ! 😅 Maintenant, tu comprends mieux pourquoi ce métier riche et polyvalent me passionne autant. 🥰
Quels sont les prérequis et éléments à fournir pour démarrer ta collaboration avec un.e webdesigner freelance ?
Si tu as déjà une identité visuelle définie (avec un logo, une palette de couleurs, des typographies…) et différents supports de communication print (plaquette, affiches, flyer…), il te faudra bien sûr tout lui transmettre au préalable, afin que ton site web soit en accord avec ta charte graphique. Si tu disposes de photos, d’illustrations et autres visuels en lien avec ton activité, tu devras également lui fournir afin qu’il ou elle ait un maximum d’éléments pour illustrer tes pages web. 🖼️
Ce.tte dernier.e aura aussi besoin que tu lui envoies tes textes rédigés 📝 (par un rédacteur web SEO et / ou un copywriter si l’écrit n’est pas ton fort ) pour présenter ta marque et tes produits ou services.
Pour l’orienter au mieux quant au rendu souhaité, l’idéal est de lui fournir un cahier des charges détaillé avec un maximum de précisions. 📝
Ce dernier devra notamment comporter une présentation de ton entreprise et de ton marché avec tes orientations stratégiques. Tu devras préciser tes objectifs, ta cible, l’environnement du projet, ta concurrence, mais aussi tes attentes précises avec le détail de ta demande, tes sources d’inspiration, ce vers quoi tu veux tendre et ce qu’à l’inverse tu ne veux surtout pas pour ton site ! ❌
N’hésite pas à lui donner des exemples de sites que tu apprécies et d’autres que tu n’aimes pas du tout (dans ton domaine d’activité et éventuellement dans d’autres secteurs, si certains univers visuels te plaisent en particulier 💕.)
Que comprend une prestation de webdesign exactement ?
Pour déterminer le périmètre de sa prestation, le webdesigner freelance doit avoir à sa connaissance un certain nombre d’informations afin d’ajuster au mieux son devis et de t’éviter de mauvaises surprises a posteriori. 😉
Ce dernier doit avoir une idée précise de :
- l’arborescence du site avec ses différentes rubriques et le nombre de pages qu’il comporte 📄
- la structure des pages : le type et le volume d’informations qu’elles vont rassembler : beaucoup de textes ou plutôt des accroches et des petits paragraphes avec plein de visuels, des listes à puces, des galeries d’images, des fiches produits, etc.
- des fonctionnalités du site : formulaire de prise de contact et/ou d’inscription à une newsletter, blog, option multilingue, intégration de cartes, de podcasts, de flux social media (Instagram, Twitter, etc.), de lecteurs vidéo, un eshop avec système de paiement, des fonctionnalités de partage sur les réseaux sociaux, etc. 🛠️
- le nombre de maquettes à produire (en fonction du nombre de gabarits de page qui peuvent ou non être dupliqués et du nombre de versions souhaitées) 🖼️
- le volume de recherche pour les visuels 🔎 (icônes, illustrations, photos) si ces derniers ne sont pas fournis par tes soins.
Enfin, si, comme dans mon cas personnel, le webdesigner se charge de la création globale de ton site web, il faudra également inclure d’autres aspects en plus de la création tels que l’installation, le paramétrage et la sécurisation du site sur le serveur, l’intégration des contenus, l’optimisation SEO et bien sûr la mise en ligne. 😉
Dans le cas d’un webdesigner freelance, ce dernier va également se charger lui-même de toute la gestion de projet. 🗓️ Elle comprend notamment la gestion du planning de production et des différents aller-retour de briefing et de validation.
Comment se déroule la prestation d’un webdesigner freelance étape par étape ?
Comment se déroule la prestation d’un webdesigner freelance étape par étape ?
1. La définition du brief créatif 🗒️
Comme évoqué juste avant, ton prestataire va commencer par te demander un cahier des charges pour bien comprendre tes besoins. Il peut pour cela te poser un certain nombre de questions complémentaires pour bien cerner ton univers de marque et établir un brief créatif suffisamment détaillé. À partir des infos récoltées, il va pouvoir aller un peu plus loin sur le plan stratégique en analysant plus précisément ta cible, ses goûts et ses habitudes. 🔎
Il va également réaliser un petit benchmark pour étudier ta concurrence et trouver la meilleure façon de se démarquer tout en respectant les codes de ton secteur d’activité. Bref, il va s’imprégner au maximum de ton univers pour s’assurer de proposer un résultat au plus proche de tes attentes et bien aligné avec ton client de cœur. 💖
Pour accompagner le brief créatif, le webdesigner peut également réaliser un moodboard 🖼️(une planche d’inspiration basée sur ton univers de marque) pour valider avec toi la direction artistique du projet.
2. La création des wireframes ✏️
Avant de se lancer dans la réalisation des maquettes graphiques, le webdesigner freelance va déterminer de manière schématique l’emplacement des différents blocs de contenus sur les différentes pages du site (images, textes, boutons, formulaires). C’est ce qu’on appelle les wireframes (ou “maquettes fonctionnelles” si tu préfères la langue de Molière 😉).
Ces derniers ont un vrai intérêt pour assurer une navigation fluide sur le site et optimiser l’expérience utilisateur. 👌 Ils représentent aussi un bon support pour te donner une première idée de la forme que prendra ton site et pour gagner du temps ensuite. En effet, si la disposition des éléments ne te convient pas ou si les pages ne sont pas assez ergonomiques dans leur agencement, il est bien plus simple d’ajuster les choses à cette étape qu’après la création des maquettes graphiques (qui, elles, seront bien plus élaborées 😍).
3. Le maquettage des pages principales 🖼️
Une fois que tu auras validé les différents wireframes, le webdesigner va pouvoir s’atteler à la partie la plus connue et la plus créative de son travail : la réalisation des maquettes du site ! 🤗
En général, comme un site peut contenir un très grand nombre de pages web (dans le cas d’un blog ou d’un site e-commerce par exemple), il ne va maquetter que les pages principales de ton arborescence (page d’accueil, page à propos, services, actualités, etc.). Ce nombre limité de maquettes s’explique aussi par le fait qu’un grand nombre des pages de ton site seront simplement des déclinaisons de tes pages principales.
Pour un site e-commerce 🛒 par exemple, nul besoin de maquetter une page par produit. Une seule maquette de fiche produit suffira amplement 👍, sachant qu’il faudra juste adapter le contenu et les images pour chaque article vendu sur le site.
4. La validation et les éventuels allers-retours de modifications ↔️
En tant que cliente, c’est certainement l’étape que tu vas attendre avec le plus d’impatience ! 🤗
Une fois son travail terminé, ton webdesigner freelance va t’envoyer ses différentes propositions de maquettes pour que tu puisses valider (ou non 😅) ses créations avant qu’il les intègre sur le site. ✅
Je te conseille de les regarder le plus attentivement possible 🤓 et de bien noter toutes les petites optimisations que tu aimerais faire pour réduire au maximum le nombre d’aller-retours et éviter de perdre du temps ⌛ (il est bien plus simple et efficace de tout faire en une fois que de faire les modifications au compte-goutte et de perdre du temps avec de nombreux exports).
Tu dois aussi savoir que c’est généralement assez cadré et que la plupart des webdesigner limitent le nombre d’aller-retour pour éviter les abus (pour ma part je limite à 3 aller-retour maximum par exemple 😉).
5. La configuration technique du site et l’intégration des contenus ⚙️⌨️
Si ton webdesigner freelance gère lui-même l’ensemble de la création du site, son travail ne s’arrête pas à la livraison des maquettes, tu t’en doutes bien 😉. Une fois que tout est validé, il va pouvoir s’atteler à tout l’aspect technique qui comprend notamment :
- l’installation de WordPress (ou autre CMS) sur un serveur (configuration du FTP et de la base de données)
- la configuration du thème choisi pour mettre en forme ton design
- la création de l’arborescence avec le ou les menus du site
- la création des différents gabarits de pages (page accueil, page services, page de produit, d’article de blog, de portfolio, etc.)
- L’ intégration des contenus (textes et images) ainsi que la mise en place et la configuration des fonctionnalités prévues dans le devis
- L’optimisation SEO à travers la gestion des balises de titres, des url, des méta données et autres attributs d’image notamment (si cela fait partie de ses compétences) et l’installation d’extensions dédiées telles que Yoast SEO par exemple.
6. Les dernières validations et la mise en ligne ✅ 🚀
Une fois toute cette phase de conception et réalisation terminée, ton graphiste web va pouvoir te donner accès à l’interface de tests afin que tu puisses vérifier ton nouveau site dans les moindres détails. Tu devras bien sûr ouvrir toutes les pages une par une et vérifier que tout est à sa place (comme sur la maquette), mais aussi tester les différentes fonctionnalités du site pour t’assurer que tout fonctionne comme sur des roulettes ! 🛼 😎
Si nécessaire, ton webdesigner freelance pourra effectuer quelques dernières modifications avant la mise en ligne (là encore, un nombre maximal d’aller-retour sera certainement fixé dans le devis, donc soit bien attentive lors de tes tests 🤓).
Une fois que tout sera prêt pour propulser ton joli site sur la toile, ton prestataire devrait te proposer une petite formation 👩🏫 pour t’apprendre à l’administrer en toute autonomie et faciliter la gestion du contenu. Si c’est sur WordPress par exemple, le back-office est très intuitif et tu devrais vite maîtriser la bête ! 💪
Enfin, quand tout sera prêt, le webdesigner n’aura plus qu’à opérer la mise en ligne tant attendue ! 🎉
Surtout, n’hésite pas à revérifier que tout fonctionne une fois mis en ligne bien sûr. 😉
Quels sont les pièges à éviter ?
Maintenant que tu sais comment se déroule une prestation de webdesign, j’ai envie de conclure sur quelques conseils et notamment sur les pièges à éviter lorsque tu créeras ton site internet. ❗
Tout d’abord, soit vigilante lors du choix de ton webdesigner freelance. Avant même de demander un devis, assure-toi qu’il n’est pas simplement graphiste et qu’il a de vraies compétences dans la conception et le design d’interface web. Crois-moi, il y a tout un monde entre graphisme web et graphisme print ! L’idéal, selon moi, est de choisir un profil qui maîtrise à la fois l’aspect créatif, la direction artistique et la dimension technique indissociable de tout projet web (un peu comme moi quoi 😉😄).
Je te conseille aussi de veiller à ce que ton site ait un bon équilibre entre le graphisme et les contenus. Un site magnifique, mais sans fond ou avec des textes peu qualitatifs n’aura pas vraiment d’intérêt pour tes lecteurs ni pour les moteurs de recherche d’ailleurs, car il auront bien du mal à le référencer ☹️.
Au moment de valider les wireframes, l’arborescence, puis les maquettes, interroge-toi vraiment sur l’ergonomie du site et sur l’expérience utilisateur. La navigation doit être la plus fluide possible et le contenu facile d’accès 👌 (essaie de limiter au maximum le nombre de clics pour accéder aux pages importantes).
Pour le respect des délais de production ⌛, je te conseille également d’être la plus réactive possible avec ton prestataire (pour lui envoyer des éléments, valider les maquettes, etc.). Plus tu laisseras passer du temps, moins ce dernier sera disponible à cause des projets suivants qui risquent de se chevaucher avec le tien. 😬
N’oublie pas les utilisateurs mobile 📱 ! Ce n’est pas un scoop, nous utilisons de plus en plus nos smartphones pour surfer sur la toile 🏄🏻♀️ et c’est désormais le 1er de nos outils de communication. Alors, veille à ce que ton site soit 100% responsive (adapté aux téléphones et tablettes) pour maximiser ta visibilité ! 🙌
Ne néglige surtout pas le pouvoir du référencement naturel SEO. Parfaitement complémentaire de ta stratégie de communication webmarketing et social media, il va te permettre de générer du trafic gratuitement et en continu sur ton site grâce aux requêtes des internautes dans les moteurs de recherche. 🔎
Pense à faire vivre ton site en l’alimentant régulièrement à travers ton blog 📰, tes références, tes pages produits, etc. C’est très bon pour le référencement, mais aussi pour tes lecteurs qui apprécieront toujours plus un site dynamique et actualisé. 😍
- Opère une maintenance régulière sur ton site en effectuant des mises à jour (de WordPress, de tes extensions, etc.), des sauvegardes et d’éventuelles améliorations (sur l’expérience utilisateur, le graphisme, les fonctionnalités). D’ailleurs, n’hésite pas à demander à ton webdesigner si ce dernier peut l’ajouter à son devis, si tu ne veux pas mettre les mains dans le cambouis 👩🏭😆.
Voilà, très chère Audacieuse Créative, te voilà prête à te faire accompagner pour créer le plus beau et le plus chouette des sites internet ! 🤗
Si tu as des questions sur le sujet ou sur ta communication web en général, n’hésite surtout pas à me contacter ! Je me ferai un plaisir de te répondre. Tu peux aussi jeter un œil à mes services de webdesign et à mon pack premium, conçu spécialement pour toi 💖.
À très bientôt pour de nouveaux conseils !
(N’oublie pas d’enregistrer cet article dans ton compte Pinterest ! 👇🏻)