7 erreurs design à ne jamais commettre sur votre site

Lorsque vous créez un site internet, le référencement est bien sûr primordial, cependant le parcours utilisateur n’est pas à négliger et passe par la qualité du design. 

Quand on parle de webdesign, on pense à l’esthétique en premier lieu. Pourtant, cela concerne bien plus d’éléments. La lisibilité des textes, le contraste des couleurs, le choix des visuels, la variation des types de contenus, l’harmonie générale, l’emplacement des CTA, etc. Il y a beaucoup de critères à respecter pour obtenir un site internet professionnel.

Dans cet article, nous allons vous présenter les 7 erreurs qu’il ne faut jamais commettre si vous ne souhaitez pas impacter négativement sur l’apparence de votre site.

Sommaire interactif :

  1. Vouloir en faire trop
  2. Utiliser des mauvaises images
  3. Ne pas aérer la mise en page
  4. Ne pas être cohérent
  5. Sous estimer la lisibilité
  6. Bien choisir ses emplacements
  7. Ne pas respecter le logo ou la charte graphique

separateurs P1. Vouloir en faire trop

1. Vouloir en faire trop

Lorsque vous concevez votre site web, il est important d'avoir un objectif clair en tête. N'essayez pas de faire trop de choses à la fois, ou vous vous retrouverez avec un site confus, désorganisé et peu esthétique. Il est préférable de se concentrer sur une seule chose et de la faire bien, que d'essayer de tout faire en négligeant l'ensemble général du site.

"Point trop n'en faut” : c’est la ligne directrice que vous devez suivre, que ce soit en termes de blocs de texte, d'images, des boutons d'appel à l'action ou de tout autre élément.

Un site web, c'est comme une maison. Des professionnels s'occupent des murs, mais vous êtes en charge de la décoration d’intérieur. Et trop de décoration peut porter préjudice à l'esthétisme de votre bâtisse : il en va de même pour votre site.

Dans l'idée, focalisez-vous sur 1 à 2 styles d'animations. Le design d'un site web est avant tout le résultat d'un travail de composition. Si vous souhaitez utiliser plusieurs types d'animation, veillez à ne pas en faire trop, sinon votre site deviendra rapidement envahissant et difficile à naviguer.

De plus, privilégier des animations "d'une même famille" (fondu vers la gauche ou vers la droite) plutôt que des animations trop différentes. Enfin, évitez d'appliquer des animations sur tous les contenus  : ayez la main légère, au risque de surcharger votre site. Le risque de faire un site “too much” est de perdre l’internaute qui ne saura pas où se concentrer.

Trop de couleurs peut donner une impression de confusion et rapidement provoquer une fatigue visuelle pour les utilisateurs. Il est important de se limiter à 2-4 couleurs fortes maximum. En soi, utilisez les couleurs de votre charte graphique. En bonne pratique, il est conseillé d’utiliser 2 couleurs principales et 2 couleurs secondaires qui seront soit plus douces, soit au contraire plus vives pour souligner certains éléments. Il s’agit d’un jeu d’équilibre pour déterminer celles qui seront les plus propices, c'est-à-dire ni trop flash/fluo, ni trop pastel, et qui se marient bien ensemble. 

Pour vous aider à déterminer une palette de couleurs, il existe de nombreux outils et site en ligne tels que PaletteDeCouleur.net, Coolors ou encore ColorSpace.

Pour résumer, garder un fil rouge, soyez capable de prendre du recul et d'avoir un œil critique sur votre création. Car même si les goûts et les couleurs ne se discutent pas, l’apparence graphique d'un site si. Un design trop chargé, en plus des conséquences sur l'internaute, risque de noyer les informations utiles et essentielles. Et gardez en tête que la simplicité est la sophistication suprême.

separateurs P2. Utiliser des mauvaises images

2. Utiliser des mauvaises images

Lorsque vous illustrez votre site, les images choisies sont aussi importantes que la structure de votre site.

Évitez à tout prix les images de basse qualité ! Celles-ci entacheraient l'expérience utilisateur et donneraient une image peu professionnelle de votre site.

à savoir : utiliser des outils en ligne pour améliorer la qualité de vos imagesÀ savoir

Si vous souhaitez utiliser vos propres images, mais que celles-ci ne sont pas d'une qualité optimale, il existe des outils gratuits en ligne prévue à cet effet.

Si vous ne souhaitez pas utiliser vos photos, il existe de nombreux sites (banques d’images) qui proposent des photos de qualité et gratuites comme Pexels ou Pixabay. Ces banques d’images ont une très grande variété d’illustrations et de ce fait, elles sont très utilisées pour les sites internet professionnels. Certains de vos sites préférés ont sans doute une image qui provient de ces sites sans même que vous vous en rendiez compte.

📖 Lire aussi : Top 15 des meilleures banques d’images gratuites et libres de droits

En plus de la qualité, il faut de la cohérence. Lorsque vous choisissez vos images, tenez compte de l'ambiance que vous souhaitez créer sur votre site ainsi que de son design. Les photos doivent être en accord avec l'harmonie générale de votre site tout en respectant les codes couleurs utilisés. Elles doivent également être raccord avec le sujet et le texte qu'elles illustrent.

📖 Lire aussi : Comment bien choisir les photos et illustrations sur son site internet ?


separateurs P3. Ne pas aérer la mise en page

3. Ne pas aérer la mise en page

Un site web doit être agréable à survoler, sans trop d'éléments, avec une interface claire et aérée.

Un site internet est constitué d'un en-tête (ou header), du contenu et d'un pied de page (ou footer). Le contenu est l’endroit où vous allez mettre la plupart de vos textes. Celui-ci est organisé de sections qui doivent être agrémentées de marge.

La marge correspond à l'espace qui se trouve entre le contenu et la bordure, comme vous pouvez le voir ci-dessous. Ces marges sont essentielles pour le bon fonctionnement visuel du site. Grâce à eux, l'œil de l'utilisateur peut se déplacer facilement d'un élément à l'autre tout en respirant.

C'est-à-dire que pour chaque nouvelle section, il est nécessaire d'intégrer des marges en haut et en bas. Vous pouvez vous amuser alors à en mettre des grandes pour laisser un grand espace ou bien des petites pour casser le rythme.

separateurs P4. Ne pas être cohérent

4. Ne pas être cohérent

Tout comme pour les images, les éléments de votre site doivent être cohérents entre eux et donner un sentiment d’uniformité.

Idéalement, les icônes et boutons doivent avoir la même couleur. Ils doivent également avoir la même forme, tout comme les blocs de texte. Autrement dit, n'envisagez pas de commencer sur des éléments à angles arrondis pour finir par des angles carrés : soyez cohérent !

Les pattern doivent aussi être cohérents : si l'ensemble de votre site tourne autour d'une forme ronde (bouton, angle, typographie, logo etc) vos pattern nécessitent d'être dans le même univers. Il faut garder une harmonie globale.

Enfin, la typographie doit, elle aussi, être continue. Nous recommandons d'utiliser maximum 3 typographie différentes pour les titres, les sous-titres et le corps du texte par exemple. Vous pouvez garder une seule et même police d'écriture et varier entre italique, gras et normal afin de créer une différence. Si vous optez pour des polices différentes, il est primordial que celles-ci aient des similitudes et qu'elles se marient bien.  Là encore, vous pouvez faire appel à des outils en ligne qui vous généreront des combinaisons de polices, comme Fontjoy.com ou Mixfont.

separateurs P5. Sous estimer la lisibilité

5. Sous estimer la lisibilité

La conception de votre site doit tenir compte de la lisibilité du contenu. Personne n'aime passer des heures à déchiffrer le texte d'un site web.

Les erreurs les plus facilement évitables viennent souvent d'un problème de visibilité, et en particulier de contrastes. Méfiez-vous des textes sur image, car ils ont très difficilement visibles. De même que pour les chevauchements de couleurs.

Pour vérifier que votre site est lisible, éloignez-vous légèrement de votre écran : si vous devez plisser les yeux pour lire, modifiez ce qui est nécessaire. Si celui-ci est trop semblable à une page de livre avec un bloc de texte dense et difficilement digeste, alternez avec des illustrations (photos, dessins, schémas, etc).

Enfin, pour faciliter la compréhension de chaque changement de thématique, alternez les fonds de section. Comme dit précédemment, les marges sont nécessaires pour la mise en page, mais pour mieux faire ressortir votre section et rendre le tout naturellement lisible, vous pouvez opter pour des fonds différents en alternance.

separateurs  P6. Bien choisir ses emplacements

6. Bien choisir ses emplacements

Bien que vous soyez totalement libre de créer votre site comme il vous plait, il existe quand même quelques notions à respecter quant aux emplacements de certains éléments :

  • Votre logo ne doit pas être mis sur une image ou dans un emplacement qui ne le rendra pas visible. Privilégiez de la mettre en haut de votre page, dans le coin à gauche. Vous pouvez également en faire votre photo de profil et l'inclure dans tous vos supports de communication (carte de visite, flyers, etc)

  • La bannière de votre site doit se trouver en haut de celui-ci. Elle ne doit ni être trop grande, ni trop petite. Cette bannière pourra, elle aussi, être réutilisée pour votre communication en tant qu'élément distinctif.

  • Le pied de page, ou footer, doit être le plus épuré possible. C'est ici que se trouveront les différents liens de votre site scindé en catégories tel un récapitulatif pour faciliter la navigation.

  • Les boutons d’appel à l’action ne doivent pas être placés au hasard, mais à des endroits stratégiques où ils seront facilement visibles et utiles : dans des pop-up, après un long texte, dans le footer, dans un bandeau...

separateurs partie 7 Ne pas respecter le logo ou la charte graphique

7. Ne pas respecter le logo ou la charte graphique

Nous en avons déjà parlé, mais les couleurs qui doivent figurer dans votre site doivent provenir de votre charte graphique.  N'utilisez pas des couleurs qui n'en font pas partie, c'est une erreur de conception à éviter si vous voulez avoir un aspect professionnel.

Il en va de même pour le logo. Il est très important de ne pas le modifier, parce qu'il permettra à vos visiteurs d'identifier rapidement votre site et votre marque. Si vous souhaitez mettre une image de fond, veillez à ce que le logo reste visible en le rendant semi-transparent par exemple. Vous pouvez également utiliser votre slogan si vous en avez un.

Quant aux polices d’écriture, vous aurez compris qu'elles doivent être cohérentes entre elles si vous en choisissez plusieurs. Mais surtout, il est intéressant qu'elle reprendre celle de votre charte graphique, encore plus si vous avez un logo comportant une typographie claire.

Si vous avez déjà une charte graphique, votre site doit s'articuler autour d'elle. Formes, couleurs, typos, vous devez tout reprendre pour que votre site soit à l'image de votre entreprise et ne pas risquer de perdre vos clients.

Si vous n'en avez pas de charte graphique, reprenez les éléments, couleurs, formes et typo de votre logo. Beaucoup d'éléments peuvent être extraits de votre logo.

En revanche, si vous n'avez ni charte graphique, ni logo, tout est à créer. Vous avez carte blanche, mais encore une fois, veillez à ne pas en faire trop et à penser à vos utilisateurs. Il est préférable de se concentrer sur deux ou trois couleurs que vous utiliserez sur tout le site pour un rendu plus professionnel.

separateurs Conclusion

Vous êtes maintenant au courant des erreurs de conception à éviter si vous voulez avoir un site web d'aspect professionnel. N'hésitez pas à vous inspirer d'autres sites, mais veillez toujours à respecter votre propre identité en incorporant votre propre logo et vos propres couleurs, car votre site doit être à votre image et avant tout vous plaire !

Chez Simplébo, nous sommes spécialisés dans la création de sites internet. Nos chefs de projet sont là pour aider et vous conseiller sur divers aspects, notamment en design. CTA blog logo Simplébo

Sarah
Article écrit avec passion par

Publié le 3 octobre 2022

Mis à jour le 3 octobre 2022

Notez le contenu