L’importance du web design pour créer un site internet
Saviez-vous que le mot design est souvent utilisé à tort pour parler de quelque chose de beau ? “Regarde ce meuble, il est tellement design”. Alors aucun problème dans cette phrase mais ça veut tout simplement dire que vous trouvez qu’il a été “bien conçu” !
Pour le web c’est la même chose, vous pouvez trouver mon site internet très beau (sympa merci) mais j’ai avant tout réfléchi à sa conception, son ergonomie, son utilisation, bref à son design.
Ressource à télécharger
Ensuite la direction artistique prendra le relai pour rendre l’esthétique attrayante parce que comme pour les gens, la première impression est importante.
Le web design : qu’est-ce que c’est ?
La base de la conception d’un site internet, d’une plateforme web, d’une application, bref tout ce qui sera affiché sur un terminal relié à internet passe par la réflexion de son web design.
Les métiers du design appliqué au web ont évolué au fil du temps. Comme pour tout dans le monde digital, tout avance à une vitesse folle. Il existe néanmoins 2 grandes typologies de métiers / services que sont l’UX design et l’UI design.
UX design (User Experience)
Le design d’expérience doit se réfléchir tout au long de la phase de conception du site ou toute plateforme digitale. C’est la fondation obligatoire qui permettra de définir l’arborescence du site, de ses pages, les différents parcours que l’utilisateur pourra emprunter, les points d’intéractions …
Pour faire simple, l’ux designer va se demander : “comment je peux aider l’utilisateur à accéder à ce contenu”. C’est là que va apparaître un bouton par exemple.
UI design (User Interface)
C’est la conception graphique de l’interface que verra l’utilisateur quand il navigue sur votre plateforme. Si je devais résumer très grossièrement, je dirais que c’est l’esthétique du site.
Mais au-delà du choix des couleurs ou des typos, il va falloir réfléchir à l’utilité graphique de certains éléments, la gestion des contrastes pour rendre les contenus lisibles, faire passer simplement des messages, ajouter des micros-interactions …
Pour faire simple, l’ui designer va se demander : “comment je vais pouvoir faire comprendre à l’utilisateur qu’il peut cliquer sur ce bouton”. C’est là que va apparaître une interaction au survol du bouton avec une flèche et un changement de curseur par exemple.
L’impact du web design sur l’expérience utilisateur
On a tous déjà fait l’expérience de vouloir réserver sur des sites en ligne et de ne rien comprendre au fonctionnement parce que rien n’est intuitif. C’est pour ça que la conception du web design est si importante.
“Le mieux est l’ennemi du bien”. Cette expression n’a jamais été aussi vraie et vérifiée que dans le digital. Parfois on veut tout mettre en se disant que plus il y a d’info vite accessible sur le même espace, mieux ce sera. C’est une grosse erreur qui peut vous coûter cher.
Imaginez des mastodontes comme Amazon. La masse immense de contenu à afficher sur le site, sur les pages de listing ou sur une page produit. Si un travail de conception et de recherche en UX design n’avait pas été fait, un autre acteur sera devant lui.
Ça marche aussi bien pour un site vitrine mais ça se confirme encore plus sur les boutiques e-commerce ou les applications mobiles. Il faut analyser le comportement des utilisateurs, demander des feedbacks, faire des ateliers de tests avec eux pour comprendre ce qui fonctionne ou non. Ce travail ne laisse aucune place à la subjectivité.
Pour reprendre l’exemple d’amazon, il faut savoir que des algorithmes d’apprentissage automatique alimentent les recommandations personnalisées au fil de votre parcours et l’interface peut changer d’une page à l’autre sans vous en rendre compte. Voyez où ils en sont aujourd’hui et où ils auraient pu être autrement.
L’importance de la cohérence visuelle
La plupart du temps, on essaye de faire en sorte d’être assorti un minimum quand on s’habille le matin. Même sans être fan de mode, c’est inconscient par rapport au regard des autres. Dans le web c’est pareil, il faut être attirant pour que les utilisateurs souhaitent aller plus loin et s’intéresser au fond.
Certaines marques auront des partis pris audacieux en termes d’esthétique et ça va refléter l’image de la marque. Comme pour la mode, les sites possèdent en général leurs codes.
On ne va pas faire de généralité parce que certains sites sortent du lot mais on est d’accord qu’un site pour une marque de luxe comme Hermès n’aura pas la même esthétique qu’une société de transport logistique.
C’est en celà qu’il faut rester cohérent parce que les visiteurs d’un site ont ces codes en tête. On a été formaté depuis notre enfance à mettre des étiquettes. C’est dommage et si vous souhaitez en sortir, il va falloir être malin et audacieux.
En tout cas, prenez le temps de faire une analyse de vos concurrents directs et indirects pour comprendre ce qui a fonctionné et comment ils ont réussi à rendre leur web design si cohérent.
Télécharger les wireframes / maquettes Figma
Si vous souhaitez créer un site ou de nouvelles pages, vous devez penser à la structure.
Pour vous aider, télécharger ce kit de wireframes à ouvrir sur Figma et adaptez les.
L’adaptabilité aux différents appareils : responsive design
On va poser tout de suite la base, 55 % des visites en ligne dans le monde proviennent du mobile, 43 % de l’ordinateur de bureau et 2 % de la tablette. Donc ne pas faire attention au responsive, c’est se priver de plus de la moitié de la terre.
Je pense que vous l’aurez facilement remarqué mais la taille d’un écran d’ordinateur est quand même beaucoup plus grande que celle d’un smartphone. Du coup, on ne peut pas afficher le même contenu ou en tout cas on ne peut pas l’afficher de la même manière sur l’un et sur l’autre.
Ce qu’on appelle responsive design c’est le fait d’adapter la mise en forme et l’affichage des éléments suivant la taille / la résolution de l’écran. Surtout que maintenant on ne parle plus seulement du trio légendaire : ordinateur, tablette, mobile. Il y a une panoplie énorme de terminaux digitaux à disposition.
Prenons l’exemple d’une station de ski près de chez moi dans en Haute Savoie.
- Je vais sur le site internet de la station depuis mon ordinateur
- Pendant le trajet je check la météo des pistes depuis mon téléphone
- Arrivé sur place, je regarde les pistes ouvertes sur les écrans accrochés aux chalets
- Sur le télésiège, je reçois une notification sur ma montre connectée pour me dire qu’une piste est fermée
4 terminaux différents, 4 utilisateurs différents, 4 contenus différents et pourtant 1 seule plateforme, celle de la station. C’est pour ça qu’on peut tout centraliser et proposer des contenus avec des design adaptés suivant le terminal cible.
Si le contenu n’est pas correctement adapté à ces média, vous risquez d’avoir des soucis.
L’accessibilité : un aspect fondamental
Ce sujet est important et nous concerne tous. On a tendance à l’oublier mais tout le monde doit avoir la même expérience. Vous devez rendre accessible à toutes et tous vos contenus.
Non l’accessibilité n’est pas exclusivement réservée aux personnes handicapées. Personnellement j’ai des problèmes de vue et si vous me mettez des textes beiges sur un fond blanc, pas sûr que je puisse lire correctement les contenus.
Il existe plusieurs éléments importants pour rendre accessible l’ensemble des éléments d’un site internet :
- Créer un maximum de contraste (couleurs, tailles, images …)
- Structurer les pages avec des titres et rythmer avec des médias (images, vidéos, …)
- Ajouter des balises alternatives sur les images (car ces éléments ne sont pas visibles pour les personnes aveugles ou malvoyante, ils doivent pouvoir les entendre)
- Décrire tous les champs de son site pour permettre l’utilisation des lecteurs de site internet
- Assurer la possibilité de naviguer via un clavier
- Gérer et optimiser le responsive design
- …
Les tendances actuelles en matière de web design
Chaque année de nouvelles directions artistiques et techniques se dégage pour définir les tendances de l’année.
En 2024, on met l’accent sur beaucoup de mouvements esthétiques repris des années 80 et 90. On ne va pas s’attarder sur ça puisque ce sont surtout des goûts qui appartiennent à chacun(e).
Je préfère faire un focus sur 3 grands éléments importants à prendre en compte :
- Les sites d’expériences “App-like” : c’est une approche centrée sur l’utilisateur qui vise à offrir une expérience utilisateur imitant les fonctionnalités et les interactions des applications mobiles
- L’éco-conception / le web vert : cette tendance consiste à utiliser des pratiques durables dans la conception et le développement de sites Web, telles que la réduction de la consommation d’énergie ou l’optimisation du code source des pages web
- L’art IA : l’utilisation d’intelligence artificielle pour créer des œuvres, des images, des vidéos personnalisées par rapport au site internet. Certains outils permettent de faire des choses incroyables et d’autres un peu moin (les fameux mains de personne avec 6 ou 7 doigts par exemple)
Le mot du grimpeur
Cet article vous a permis de comprendre en quoi la conception d'un site internet est un élément très important. Bien avant la création graphique, il faut réfléchir à l'ergonomie et à la structuration des pages.