fbpx Skip to content

Les bases du webdesign ou comment créer un site internet professionnel efficace et à ton image ?

Aujourd’hui, chère Audacieuse Créative, j’aimerais te parler d’un outil devenu quasi indispensable pour avoir une communication dynamique et performante : ton site web bien sûr !!

Je ne t’apprends sans doute pas grand-chose, mais créer un site internet est une étape clé lorsque l’on travaille sur son identité de marque. Et nul besoin d’être développeur ou de passer par une agence web pour le réaliser. Les solutions pour créer soi-même son site sont aujourd’hui monnaie courante et l’aspect technique n’est plus vraiment un frein, dès lors qu’on a un peu de temps devant soi. Bref, construire son site est maintenant à la portée de tous et c’est tant mieux ! 🎉

Cependant, même en utilisant des templates, des plugins et autres extensions magiques, il y a certaines petites règles que tu dois connaître pour bien l’optimiser et lui offrir un rendu vraiment professionnel. Cela peut faire toute la différence, crois-moi ! 😉

Alors, que ton site web soit déjà en ligne, en cours de développement ou en pleine refonte, je te recommande vivement de lire ce qui va suivre ! 😉

Tu découvriras mes meilleurs conseils de graphiste pour créer un site internet professionnel avec une navigation fluide et un webdesign efficace qui retranscrit parfaitement ton identité !

SOMMAIRE
les bases du webdesign

Pourquoi soigner le webdesign et l'expérience utilisateur de ton site ?

Je ne vais pas revenir ici sur l’intérêt d’avoir un site web. Tu le sais, cela fait maintenant partie des supports incontournables d’une communication professionnelle crédible et impactante. 

C’est tout simplement la vitrine de ton business, mais aussi un bel outil de prospection pour trouver tes nouveaux clients. 👌🏻

Je n’aborderai pas non plus toute la dimension technique. Nous ne parlerons pas d’hébergeur, de langages HTML ou CSS, ni du CMS (le système de gestion de contenu) que tu dois choisir pour développer ton propre site (même si je dois t’avouer que j’ai un petit penchant pour WordPress qui est vraiment facile à prendre en main et permet de créer de très belles choses sans compétences techniques particulières).

D’autant plus que, si tu comptes créer ton site internet par toi-même, il y a de fortes chances pour que tu t’appuies sur un template qui t’évitera de t’aventurer dans les tréfonds obscurs du code. 😅

 

Ce dont je souhaite te parler ici concerne plutôt la partie visible de ton site, soit toute sa conception graphique, « sa mise en page » en quelque sorte et ce que l’on appelle plus communément « webdesign ».

Le webdesign est un aspect essentiel de la création de sites internet. C’est lui qui rend la navigation agréable et met en valeur les contenus. Sans lui, nous passerions certainement beaucoup moins de temps sur la toile ! 😉

Ce travail englobe le placement des différents éléments sur tes pages web, l’agencement de tes accroches et de tes blocs de textes, le choix de tes images ou pictogrammes, mais aussi des couleurs, des polices web, des fonds de page ou encore l’apparence des menus (rien que ça ! 😅).

 

Par ailleurs, il faut savoir que cette notion de design web est étroitement liée à celle d’UX design.

L’UX design est en fait une méthode de conception qui se centre avant tout sur l’expérience utilisateur. Au-delà du graphisme du site, il y a donc toute la notion d’ergonomie qui va entrer en jeu.

 

La bonne nouvelle, lorsque l’on travaille sur des templates personnalisables, c’est qu’il est possible de modifier tous ces éléments sans aucune connaissance en programmation ! 🎉

Les systèmes de « page builder », avec leurs nombreuses fonctionnalités, sont aujourd’hui très bien conçus et permettent de faire énormément de choses en toute simplicité, sans coder, avec de simples paramétrages et glisser-déposer. Ainsi, concevoir un site web devient (presque) un jeu d’enfant ! Magique n’est-ce pas ? ✨

 

Mais revenons à notre sujet … 🤓

Voyons maintenant quelques notions importantes à retenir pour créer un site internet esthétique et ergonomique ! 😍

creer son site internet

Créer un site internet efficace et soigner l'expérience utilisateur grâce aux grandes lois de l'UX design

Créer un site internet efficace et soigner l’expérience utilisateur grâce aux grandes lois de l’UX design.

1. La loi de Miller

Cette loi nous explique qu’on ne peut retenir plus de 7 éléments à la fois (à plus ou moins 2 éléments) dans notre mémoire de travail. Ainsi, tu dois faire en sorte de ne pas dépasser les 7 items dans ton menu. Si ce dernier est trop long, tes utilisateurs auront plus de mal à intégrer toutes les options qui s’offrent à lui et cela risque de complexifier leur navigation sur le site.

De même, si tu fais une liste, essaie de faire en sorte qu’elle ne fasse pas plus de 5 à 9 points différents. Au-delà, l’internaute ne parviendra pas à retenir tout ce que tu lui dis.

2. La loi de Jacob ou "loi de familiarité"

D’après cette loi, un utilisateur est plus à l’aise lorsqu’il utilise quelque chose dont il a l’habitude, sur une interface similaire aux autres. Tu comprendras donc qu’en matière de webdesign, il vaut mieux éviter de vouloir faire trop original et plutôt se demander comment faciliter la compréhension et la navigation. La création de site internet ne peut malheureusement pas s’envisager comme la création d’une oeuvre d’art 🖼️. Le web comporte de nombreuses normes et il est important de les respecter ( toujours placer le menu et le logo en haut de page, mettre les mentions légales en pied de page, etc.).

Par exemple, pour un site responsive, c’est-à-dire adapté aux mobiles et tablettes, on évitera de mettre 7 onglets les uns à la suite des autres. On préfèrera plutôt les regrouper dans un menu « hamburger » (avec les 3 petits traits superposés, tu sais 😉) qui permet de dérouler les rubriques facilement sans encombrer tout l’espace. Cela fait partie des normes UX que l’on voit désormais sur toutes les interfaces web et il est important que tu les appliques aussi sur ton site.

3. L'effet de position série

D’après cette troisième loi, on apprend que, lorsque plusieurs éléments sont présentés à la suite, l’internaute va retenir plus facilement le premier et le dernier d’entre eux. Donc, imaginons que tu rédiges une liste où tu présentes les avantages à travailler avec toi et que tu la fasses sous forme de colonnes : rappelle-toi que la première et la dernière colonne seront celles où tu dois placer tes contenus les plus importants. Ce sont ces informations qui, de par leur emplacement, seront les mieux retenues. 🤓

Ceci justifie aussi le fait que, pour optimiser tes pages web, tu dois placer ton pitch de présentation et ta phrase d’accroche dans la première section de ta page d’accueil puisque c’est la première chose que verra l’internaute. Quant à la dernière section, je te conseille de la réserver pour un autre élément clé : ton call to action (appel à l’action) qui amènera la personne à entrer en contact avec toi. ✉️

4. La loi de Hick

D’après Monsieur Hick (toi aussi ce nom te fait sourire ? 😆), le psychologue qui a théorisé cette loi, plus nous avons de choix à faire, plus il nous est difficile de prendre une décision. Du moins, cela peut ralentir considérablement le processus.

Dans cette optique, lorsque tu crées un formulaire, veille à limiter le plus possible le nombre de champs. Dans ton formulaire de contact par exemple, évite de demander le nom, le prénom, l’adresse, la date de naissance et le numéro de téléphone. Fais au plus simple pour l’utilisateur. Toi-même tu sais, perdre du temps devant un questionnaire à rallonge n’est jamais très agréable…😅

Ainsi, lorsque tu proposes de télécharger ton freebie par exemple, ne demande pas plus d’informations que le prénom et l’email pour optimiser le taux de remplissage (ce sera amplement suffisant !). 👌

5. Le chunking

Cette règle de l’UX design, consiste à fragmenter une information afin qu’elle soit mieux retenue par l’internaute. Sur Instagram par exemple, les carrousels ont beaucoup de succès, tout simplement parce qu’ils permettent de découper l’information en plusieurs slides et facilitent ainsi leur assimilation. ✂️

De la même manière, lorsque l’on va créer un site internet, on préfèrera fragmenter son contenu et éviter de proposer de gros blocs de textes peu engageants et difficiles à lire. Il est en effet plus pertinent de les scinder en plusieurs petites colonnes avec des icônes ou de faire des listes à puces pour faciliter la lecture et la compréhension.

6. La loi de Fitts

Cette loi nous apprend que le temps nécessaire pour atteindre une cible à la souris dépend de la distance et de la taille de la cible en question. Cela signifie que tes call to action doivent être suffisamment grands, bien visibles (dans ta couleur de contraste par exemple) et placés à proximité du sujet. Si tu as une phrase d’accroche qui propose de te contacter par exemple, ton bouton doit être le plus près possible de cette dernière pour inciter au clic. 🖱️

Aussi, pour adapter ton site aux règles du responsive design et faciliter son utilisation sur mobile, veille à ce que, sur chaque page, tes boutons soient accessibles et suffisamment gros pour que l’on puisse cliquer dessus facilement (rien n’est plus désagréable que de devoir s’y reprendre à 3 fois pour parvenir à cliquer 😤) .

creer son site web

Mes conseils de webdesigner pour créer un site internet attractif, en accord avec ton identité de marque

Maintenant que tu connais les grands principes de l’UX Design, parlons du design de ton site en lui-même. Ce dernier doit impérativement s’accorder avec ton identité de marque et plus spécifiquement avec ton identité visuelle et ta charte graphique. Il est donc indispensable de l’avoir préalablement défini. Si ce n’est pas le cas, je t’invite à lire mes articles de blog sur le sujet.


Une fois que cette identité est bien en place et que tu es au clair sur ton univers de marque, je te conseille en premier lieu de placer un bandeau introductif en haut de ta page d’accueil. Tu pourras y inscrire ton pitch de présentation et mettre en avant de manière claire et attractive ta proposition de valeur, ce qui fait ton unicité. 😍


Je te recommande ensuite d’utiliser les couleurs neutres ou secondaires de ta palette pour les utiliser en fond de section. Cela te permettra de créer des démarcations visuelles et du contraste, ce qui facilitera la lecture pour l’internaute et permettra de compartimenter le contenu que tu proposes. 🗄️


Toujours dans l’optique de faciliter la lecture et la compréhension de tes textes, veille à mettre en avant les mots clés importants, en les mettant en gras (ce qui a aussi un intérêt en matière de référencement SEO), en couleur ou en les soulignant selon ton identité visuelle. De cette manière, l’internaute retiendra plus facilement les informations essentielles. 👌

Essaie aussi de hiérarchiser au maximum tes contenus en créant des titres et des sous-titres (H1, H2, H3). Au-delà d’être plus agréable pour tes lecteurs, c’est là encore une excellente pratique pour le référencement naturel de ton site !


Pour créer du contraste, aérer et illuminer ton site web, pense également à intégrer des espaces blancs dans tes pages web. Ils vont permettre d’encadrer les contenus et d’attirer l’oeil vers ces derniers. 😉


Concernant tes call to action et leurs boutons, je te conseille de les mettre dans la couleur de contraste de ta palette afin de bien attirer le regarder, d’encourager les clics et de maximiser ainsi les conversions. 🎉


Enfin, n’hésite pas à utiliser l’ensemble des éléments que tu as défini dans ton identité visuelle, qu’il s’agisse de typos, d’icônes, de textures, de photos… Ils vont jouer un rôle important dans l’identification de ta marque et la retranscription de ton univers. ✨


Voilà, tu as maintenant toutes les clés pour créer un site internet agréable à regarder, en accord avec ta personnalité de marque et 100% user-friendly ! 🤗

Être visible avec un joli site c’est bien, mais avoir une identité de marque bien définie en amont c’est encore mieux ! Pour apprendre comment créer un branding cohérent, professionnel et attractif, n’hésite pas à t’inscrire sur la liste d’attente de la prochaine session de mon programme identité & com : une formation qui t’explique pas à pas comment faire rayonner ton business à travers une identité de marque et une communication 100% alignées avec ta personnalité et tes valeurs !

(N’oublie pas d’enregistrer cet article dans ton compte Pinterest ! 👇🏻)

bases du webdesign 9
bases du webdesign 5
bases du webdesign2
audacieuses creatives formation identite visuelle

❤️ Tu aimes cet article ? Partage-le !

Pinterest
Facebook
Twitter
LinkedIn
WhatsApp
Email

🙋‍♀️ Une question sur cet article ?

marion

Bonjour & Bienvenue

Je m'appelle Marion, Designer de marques & de sites web depuis 15 ans ~ Formatrice et Experte Branding 360° depuis 2020 | On te crée une image de marque qui colle à ta vibe, pour enfin oser être TOI dans ta communication 🤩 | Tu es une femme entrepreneure, tu vibres pour ton projet du 🧡, et tu veux développer ta marque personnelle ? Tu es au bon endroit !

Le blog des Audacieuses Créatives
196
checklist image de marque
freebie liste templates instagram canva2023