Lorsqu'on parcourt un site internet, on pense en premier lieu au développement web qui a permis de créer et de mettre en ligne le site. Mais pour créer un site internet captivant et agréable à parcourir, il faut faire appel à un web designer. On vous explique en détail à quoi sert le web design et un designer pour la création d'un site internet.
Le web design a pour but de créer une interface web idéale pour l'internaute avec un design ergonomique.
Le web design désigne, dans la conception de site internet, la création et la mise en forme de toute la partie visible du site. C'est-à-dire :
L'objectif du web design c'est de sécuriser, donner confiance et conduire l'utilisateur à passer à l'action. Alors, il pourra, par exemple, acheter un produit, s'inscrire sur le site ou encore demander un devis.
Un web designer est la personne qui va réaliser le web design d'un site internet ou d'une application web définit ci-dessus.
En se basant sur des documents fondamentaux, comme un cahier des charges et une charte graphique, le web designer va concevoir des interfaces web.
Le web designer va, avant tout, mettre en avant le contenu d'un site internet ou d'une application grâce à :
Mais ce n'est pas tout, le champ de compétence du web designer se veut vaste afin de connaître toutes les contraintes et les subtilités du web.
Vous l'avez compris, le web designer s'occuper de la partie visuelle d'une interface. Et pour ce faire, il doit maîtriser les points suivants :
Voici une liste de ce qu'un web designer doit penser à chaque création d'interface web. Ces 10 points sont les principaux et il faut savoir, que chacun de ces points comportent des sous-points.
Il faut donc comprendre que la création d'interface n'est pas une chose simple et rapide à faire. Cela prend du temps de cerner le besoin des internautes selon le business à mettre en avant. C'est pourquoi il faut travailler avec une agence web ou un freelance expert.
Architecture du site | Il s'agit d'organiser toute la structure du site. | |
Liens | Il s'agit de relier les pages entre elles pour créer un maillage interne puissant. | |
Ordre de lecture | Pour mettre en avant le contenu important pour l'utilisateur afin qu'il le trouve rapidement | |
Fluidité de la navigation | Pour permettre à l'utilisateur de trouver ce qu'il recherche en moins de 3 clics. | |
Accessibilité | Il s'agit des bonnes pratiques à mettre en place pour rendre le site accessible à tout le monde y compris les personnes avec handicap. | |
Responsive web | Pour aider à la navigation sur tous les supports : grands écrans, ordinateur, tablette et mobile. | |
Interactivité du site | Il s'agit des interactions qu'il peut y avoir entre le site et l'utilisateur. Comme par exemple un élément qui bouge au passage de la souris. | |
Couleurs | Respect du contraste entre les couleurs des éléments du site, afin que chacun soit visible. | |
Typographies | Respect des typographies et travail sur leurs lisibilités. | |
Charte graphique | Respect de la charte graphique pour le choix des typographies, des couleurs et le design des illustrations. |
Voici deux exemples de réflexion autour de la création d'interfaces.
Dans la conception de ses pages, le web designer va se concentrer sur l'utilisateur et va faire en sorte qu'il puisse acheter un produit en le moins de clics possibles. Cela passe par l'ajout de produits sur la page d'accueil du e-commerce avec un bouton ajouter au panier sous les articles. L'utilisateur aura directement son produit d'ajouter au panier sans avoir à passer par la page détail du produit.
Tout cela dans le but d'augmenter le taux de conversion et les ventes.
Le but premier d'un site vitrine est de présenter une entreprise ou un produit. Dans cette démarche, le web designer va travailler l'interface pour qu'elle fasse passer un message compréhensif à l'utilisateur. Que ce soit un univers, des valeurs, des fonctionnalités ou l'histoire de l'entreprise.
Duis aute irure sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Avant d'expliquer ce qu'est l'UX, revenons sur un point important : le web design repose sur la satisfaction de l'utilisateur. Il est au centre de tout.
L'expérience utilisateur va donc contenir toutes les interactions possibles entre l'utilisateur et le site internet. À savoir :
Pour être plus précis, l'expérience utilisateur doit permettre à un internaute de naviguer sur le site internet sans rencontrer de blocage, cela doit être intuitif et naturel. De plus, l'utilisateur doit trouver l'information facilement et rapidement. S'il ne comprend pas le site internet ni comment y faire sa recherche, il va partir. Ensuite, l'expérience utilisateur va permettre de diriger l'internaute vers des boutons d'actions de manière fluide et instinctive. Comme par exemple un bouton "inscription" facile d'accès, en un clic, dans le menu en haut à droite. Pour finir, l'internaute doit être incité à rester sur le site même s'il a envie de partir. Le web designer peut alors concevoir des pop up pour régler cela.
Contrairement à l'expérience utilisateur, l'UI concerne l'aspect graphique du site ou de l'application. Ces deux fondements sont complémentaires pour apporter une complète satisfaction à l'utilisateur.
Dans l'interface utilisateur, le web designer va chercher à créer une identité visuelle du site impactant pour offrir à l'utilisateur une expérience mémorable. Il va donc travailler :
Avant de débuter la création d'interface, le web designer doit se poser des questions pour l'aider dans sa conception et bien comprendre quels sont les messages à faire passer.
La clé pour réussir le web design d'un site internet ou d'une application, c'est l'ergonomie. Mais pas que ! Il faut aussi choisir un style graphique adapté à la cible et au secteur d'activité de la marque.
L'ergonomie consiste à créer ou à améliorer un objet pour qu'il soit plus facile à utiliser au quotidien. Et cette notion s'applique très bien au web ! On va donc chercher à répondre efficacement aux besoins d'un internaute.
L'ergonomie se base sur l'utilité d'un site, sa facilité d'utilisation, son design simple et compréhensif et enfin la satisfaction de l'utilisateur à l'utiliser.
Lorsqu'un web designer va travailler sur les interfaces d'un site ou d'une application, il se doit de faire des interfaces ergonomiques.
Voici quelques points qu'il va travailler.
On est d'accord qu'il faut du contenu sur une page, à la fois pour que l'utilisateur ne la trouve pas "vide" mais aussi pour le référencement naturel. Cependant, il ne faut pas trop en mettre au risque d'avoir un site surchargé. Le web designer va donc veiller à :
Petite astuce, pour dynamiser une page sans les surcharger visuellement, le web designer va proposer des animations SVG sur certains éléments visuels. Il s'agit par exemple de changer la couleur d'un bouton ou de faire bouger une illustration au passage de la souris.
Choisir une couleur n'est pas anodin. Les couleurs ont une signification et transmettent inconsciemment un message.
Par exemple, si vous souhaitez présenter et vendre un produit énergétique pour les sportifs, oubliez le vert et optez plutôt pour l'orange et le jaune. En effet, le vert désigne le bio, le naturel, le sain. Alors que l'orange et le jaune signifient la vitalité, la force, le sport, l’énergie. Donc, lorsque l'utilisateur va voir votre site, il va comprendre que vous vendez un produit boostant et vitalisant pour le corps.
Le web designer va aussi gérer le contraste entre les couleurs, surtout le contraste entre le fond et les textes. Un exemple simple, sur un site avec un fond sombre comme le noir, le texte ne sera pas de couleur blanche, mais plutôt gris clair. Sinon le contraste sera trop important et l'œil n'arrivera pas à lire. On aura l'impression que le texte bouge ou est qu'il est flou.
Comme détaillé au-dessus, le web design doit mettre l'utilisateur au centre de toutes les actions du site. L'utilisateur doit pouvoir trouver l'information rapidement et en peu de clics. Pour aider la navigation, le web designer va ajouter au site :
Pour que le site soit lisible, les éléments des pages doivent être rangés et il doit y avoir une hiérarchie dans l'information délivrée. En effet, au premier regard, l'utilisateur doit pouvoir distinguer le titre principal, qui résume la page, du reste.
Ensuite, pour que le texte soit lisible, le web designer va veiller à choisir une typographie bien dessinée et claire. Le but étant d'éviter d'avoir une police d'écriture illisible car les caractères sont trop collés, trop gars ou trop manuscrits par exemple.
De nos jours, beaucoup de sites internet s'autorisent plus de modernité et de folie sur leurs pages. C'est très bien pour attirer le regard des utilisateurs, mais il faut tout de même faire attention à certains pièges.
Il ne s'agit pas a proprement parlé de règles, mais plutôt d'habitudes qui se sont installées au cours des années. En effet certaines pratiques sont ancrées dans les esprits et se font inconsciemment, alors pourquoi les changer ?
La plus classique est de mettre le logo d'un site internet en haut à gauche dans le menu et qu'un clic sur ce logo, on retourne à la page d'accueil. Ensuite, l'utilisateur est habitué à voir les liens de couleur bleue et soulignés pour lui indiquer qu'il peut cliquer. Si un texte n'est pas cliquable et est souligné, l'utilisateur sera perdu car, par habitude, il voudra cliquer dessus. Enfin, on voit couramment le menu en haut du site internet ou sur la gauche verticalement. Et bien faisons ainsi sinon l'utilisateur cherchera le menu et va vite s'énerver de ne pas le trouver.
On est tous d'accord pour dire qu'avoir un beau site internet ou application c'est important et c'est la clé pour que les gens aient envie d'y revenir. Cependant, il est encore plus important d'avoir un site clair, lisible et compréhensible.
Le contenu visuel doit être présent pour aider à la compréhension des textes et non pour distraire le lecteur, de par sa taille ou son animation. Pour vous expliquer simplement, imaginez un site internet qui a des animations sur chacun de ses blocs. Donc, pour une page avec 5 parties, il y a 5 animations. Qu'est-ce que cela va engendrer ? Tout d'abord la page va être longue à charger et l'utilisateur va s'impatienter. Et ensuite, l'oeil de l'utilisateur va instinctivement s'orienter vers ce qui bouge. Il ne va donc pas lire le texte. Ce qui est l'inverse de ce qu'on veut.
Tout d'abord, le référencement naturel ou SEO consiste à faire de multiples actions sur un site ou une application pour aider à son référencement dans les moteurs de recherche. Concrètement, il s'agit de faire apparaître un site sur la première page de recherche de Google.
De plus, pour le référencement naturel, seul les textes importent. Un moteur de recherche comme Google par exemple va scanner les pages d’un site internet afin de vérifier la pertinence des textes. Plus les textes sont pertinents et de qualité et mieux sera référencé la page. Il est donc clair que si vous mettez 80% de visuel et 20% de textes, le référencement sera nul et le site ne sera pas visible sur les moteurs de recherche. Ce qui implique pas ou peu de trafic et de visibilité et donc de vente.
L'expérience utilisateur permet, comme expliqué plus haut, à l'utilisateur d'utiliser agréablement et de naviguer simplement sur le site ou l'application. Donc si l'UX est négligé, l'utilisateur ne pourra pas profiter pleinement du site.
Prenons l'exemple du responsive mobile. Aujourd'hui, la navigation sur les sites internet ne se fait pas que sur ordinateur. 65% des recherches faite sur le web en 2020 ont été faites sur mobile. Il ne faut donc pas négliger le responsive design.
À titre d’exemple, sur notre site, 20% de nos utilisateurs consultent notre site internet sur mobile. C'est pourquoi chacun de nos blocs de page a été pensé et développé pour être visible sur tous les écrans : ordinateur, tablette et mobile.
Comme son nom l'indique, les Call To Action ou CTA sont des boutons d'appel à l'action. En d'autres termes, ce sont des boutons qui vont inciter l'utilisateur à faire une action comme remplir un formulaire de contact, s'abonner à une newsletter, ajouter un article dans un panier ou encore se créer un compte.
Les boutons CTA doivent être bien placés sur le site, certains dans le menu comme un bouton contact ou inscription et d'autres doivent se trouver dans le corps de la page.
Aussi important que leur emplacement, la couleur des CTA joue un rôle important. En effet, nous l'avons vu plus haut, les couleurs ont une signification et donc, si vous mettez l'un à côté de l'autre un bouton rouge et un bouton bleu, l'utilisateur cliquera sur le rouge car son œil sera attiré en premier vers lui.
Abonnez-vous à la newsletter Flocon de neige de Snoweb et recevez toutes nos nouveautés en web design.
Une identité visuelle regroupe l'ensemble des supports qui vont refléter une marque. Le logo, les cartes de visite ou encore les bannières de réseaux sociaux font partie de l'identité visuelle.
L'identité visuelle permet donc d'identifier une marque de ses concurrents. Dans notre quotidien, nous repérons des marques grâce à leur logo, leurs couleurs ou leur typographie, comme par exemple Netflix ou encore Starbucks.
Le logo reste la part la plus importante de l'identité visuelle, car il en est la base. Une identité visuelle va se construire autour d'un logo.
Zoom sur le logo, ce petit élément graphique qui permet d'identifier une marque en un clin d'œil. Souvent vu comme deux ou trois coups de crayon, le logo demande énormément de réflexion et de recherche afin d'arriver à un résultant "wow".
Voici un bref résumé des étapes de création d'un logo :
Cette étape consiste à réfléchir sur la marque, d'étudier la concurrence et de se poser des questions stratégiques sur la marque et sa cible. | |
Cette partie de recherche consiste à faire les premiers crayonner du logo : disposition des éléments, taille des éléments, choix de la typographie, etc. | |
Une fois la piste finale du logo trouvée, il est décliné en plusieurs couleurs, formes, texture. Il aura par exemple une déclinaison noir et blanc ou bien avec un fond uni ou à motif. | |
Selon l'utilisation du logo, différents formats seront utilisés. Comme par exemple le logo du site internet et le pictogramme du logo pour le favicon (vous savez, la petite image qui se trouve à côté du nom du site dans l'onglet de votre navigateur). | |
Cette dernière étape n'est pas systématiquement réalisée par le graphiste, c'est à la demande du client. Nous vous la détaillons juste en dessous. ↓ |
Ce qu'il faut savoir, c'est que le prix d'un logo n'est pas fixe. Il dépend de trois choses :
Selon l'enveloppe disponible pour créer le logo, il existe différentes options, plus ou moins professionnelles et de qualité. Pour connaître les différentes options disponibles en fonction d'un budget, direction notre article qui vous explique tout en détail ! ⬇️
Tout comme les images, le logo peut s'exporter en différents formats selon son utilité. Le web designer va utiliser le logo, ses couleurs et son éventuelle typographie dans ses interfaces afin d'harmoniser le site ou l'application. Il faut aussi savoir que le format d'une image va impacter son poids. Et le poids d'une image va lui impacter sur le temps de chargement d'un site internet. C'est donc pour ça que le web designer doit maîtriser tous les formats d'export d'une image, que ce soit un logo, une illustration ou une photographie. Il pourra donc utiliser le logo sous tous les formats suivants.
C'est le format classique d'une image. Cependant, il n'est pas recommandé en web, car une image peut vite être très lourde et pour alléger son poids, on réduit drastiquement sa qualité. Mais, si vous devez utiliser une photo faite avec un appareil photo, vous allez devoir utiliser ce format.
Le PNG a un atout, c'est qu'il prend en compte la transparence, c'est-à-dire que si on ne veut pas de fond à son image, c'est possible. Même s'il est plus maniable que le JPG, ce format ne reste pas le plus apprécié sur un site internet.
Nous y voilà ! Ce format d'image développé par Google est parfait pour les sites internet. C'est peut-être d'ailleurs pour ça que c'est Google qui l'a créé, non ?
Dans l'étude sur la compression WebP de Google, on voit qu'une WebP est 25-35% plus petite qu’une JPEG et 26% plus petite qu’une PNG.
Attention néanmoins pour ce format, certains navigateurs ne lisent pas ce type d'image.
Très bien connu des web designer, le SVG est un format d'image vectoriel très léger et compatible avec tous les navigateurs. De plus, un fichier SVG est facilement modifiable par un développeur depuis un éditeur de texte ou par un web designer depuis un logiciel graphique.
Le SVG est un format qui ne perd pas de qualité, qu'il soit de très petite taille ou au contraire de très grande taille. Il peut être étiré à l'infini sans perte de qualité.
Vous l'avez compris, le SVG est un format idéal pour le web très prisé par les web designer et les développeurs.
La charte graphique est un des documents fondateurs de votre communication et est essentielle au travail du web designer. C'est un document qui liste les droits, les devoirs et le respect que toute personne se doit de respecter. C'est donc à partir de ce document que le web designer va travailler pour décliner l'identité visuelle sur ses interfaces.
Il existe deux types de charte graphique, la charte papier et web. Ici, nous allons nous concentrer sur la charte graphique web car c'est le rôle d'un web designer de, soit la construire, soit de la respecter. Je vous laisse au bon soin de lire notre article sur les chartes graphiques pour avoir plus de détails sur la charte graphique papier.
La charte graphique web ou guide de style va regrouper tous les éléments nécessaires à la création et au développement d'un site internet ou d'une application. Comme :
En une phrase, une maquette permet de visualiser une idée. La maquette va permettre au web designer de se mettre à la place de l'utilisateur pour lui créer une navigation agréable et sans embûches.
Il ne faut pas se leurrer, au début, une maquette n'est ni plus ni moins que des carrés à côté de rectangles reliés avec des flèches et le tout formant une page web ! Les maquettes sont essentielles pour mettre en place toute l'architecture du site et les bases de l'UX.
Parlons d'un portfolio web, vous savez, ce site internet qui présente les réalisations et le savoir-faire d'un peintre, designer ou d'un artisan. Et bien dans ces exemple de portfolio, vous allez voir que réaliser une maquette est primordial pour mettre en avant une réalisation. En effet, la personne qui veut faire son portfolio va se dire, je veux présenter mon projet avec une galerie d'images, un titre percutant, une description du produit, un avis de mon client et aussi une vidéo. Ok, la liste est longue, beaucoup trop longue pour se lancer comme ça ! Le web designer va alors construire une maquette en hiérarchisant les informations par ordre d'importance. Dans un premier temps, le titre, une brève description et une image pour capter l'attention. Et ensuite, une description détaillée, un avis client et les médias.
Exemple clôt, passons au concret !
Cette première étape consiste à faire un croquis de toutes les maquettes d'un site internet ou d'une application afin d'en ressortir la structure. Dans cette structure le web designer y intègre les zones de texte, les boutons, les images, le menu. Et, si besoin la recherche, l'espace utilisateur, la connexion, le panier.
Il n'est pas encore question de couleurs, de typographie et de choix d'image.
À partir de cette étape, on visualise mieux le rendu final de la page. Tout simplement parce que les rectangles sont remplacés par du texte de substitution, des images libres de droit, des icônes. Les palettes de couleur sont aussi mises en place.
Dernière étape de la conception, le prototype ou maquette interactive. Comme le dit son nom, la maquette interactive bouge ! Il s'agit de créer les liens entre les pages, de rendre les boutons cliquables et d'ajouter toutes les interactions possibles entre les éléments.
Le web design participe énormément au taux de rentabilité d'un e-commerce. En effet, plus l'e-commerce retient l'attention, est clair et simple et plus facile sera e processus d'achat.
C'est logique pour tout le monde, ce qui fait fonctionner un e-commerce c'est de vendre des produits. Et, pour vendre des produits, ils faut qu'ils soient mit en avant. Pour cela, il faut travailler les fiches produit. Vous savez, se sont ces pages qui vont présenter un produit avec :
Si vous êtes intéressé par les fiches produit, on vous a concocter un listing de 20 exemples de fiches produit réussies. On y détaille les points forts et les points faibles.
Le sujet du web design vous fascine, alors ces articles devraient vous intéresser également.
Recevez les dernières nouveautés et astuces sur le web design directement dans votre boite e-mail.
