{"id":785,"date":"2020-07-16T10:00:53","date_gmt":"2020-07-16T08:00:53","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=785"},"modified":"2025-08-20T17:18:37","modified_gmt":"2025-08-20T15:18:37","slug":"erreurs-webdesign","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/erreurs-webdesign\/","title":{"rendered":"Web design\u00a0: 12 erreurs \u00e0 \u00e9viter pour cr\u00e9er un site efficace"},"content":{"rendered":"

Au\u00a0 moment de r\u00e9aliser le design ou de refondre le design d’un site<\/a>, on ne sait pas toujours comment s’y prendre pour bien commencer et obtenir un r\u00e9sultat qui sera \u00e0 la fois esth\u00e9tique, pratique pour l’utilisateur et qui plaira au client.<\/p>\n

Voici 12 erreurs courantes \u00e0 ne surtout pas commettre lors de la r\u00e9alisation d’un site.<\/p>\n

 <\/p>\n

1. Ne pas penser aux mobiles<\/h2>\n
\"\"
R\u00e9alisation de Denis Stekhin<\/figcaption><\/figure>\n

Penser le design uniquement pour ordinateur sans se soucier des diff\u00e9rentes tailles d’\u00e9crans est une grosse erreur.<\/p>\n

Aujourd’hui, les utilisateurs de tablettes et smartphones sont tr\u00e8s nombreux \u00e0 surfer sur le net. Si vous ne pensez pas le design de votre site pour qu’il soit responsive, le risque est de le rendre inaccessible pour un grand nombre de personnes.<\/p>\n

\u00c0 lire aussi : Mobile : le guide ultime pour r\u00e9ussir tous vos designs<\/a><\/p><\/blockquote>\n

 <\/p>\n

2. Ne pas se mettre \u00e0 la place de l’utilisateur<\/h2>\n

\"\"<\/p>\n

Lorsque vous cr\u00e9ez un site, vous r\u00e9pondez \u00e0 la demande d’un client mais il faut d’abord penser au public qui l’utilisera. Il doit \u00eatre clair et pratique pour l’utilisateur.<\/p>\n

R\u00e9fl\u00e9chissez donc bien \u00e0 qui s’adresse le site, le design ne sera pas le m\u00eame si vous avez affaire \u00e0 un public de seniors<\/a> ou plut\u00f4t \u00e0 des enfants<\/a>.<\/p><\/blockquote>\n

\u00c0 lire aussi : Web design : 6 fa\u00e7ons pour vendre plus avec un design de qualit\u00e9<\/a><\/p><\/blockquote>\n

 <\/p>\n

3. Ne pas tenir compte du secteur d’activit\u00e9<\/h2>\n

\"\"Comme dans le cas de beaucoup de r\u00e9alisations graphiques, le secteur d’activit\u00e9 du client est important.<\/p>\n

Si vous ne vous int\u00e9ressez pas au domaine de l’entreprise pour laquelle vous r\u00e9alisez un site, vous risquez au mieux de proposer un design lambda qui ne mettra pas l’entreprise en valeur et au pire de passer totalement \u00e0 c\u00f4t\u00e9 de ce qu’on vous a demand\u00e9.<\/p>\n

 <\/p>\n

4. Pr\u00e9voir des gif anim\u00e9s pour “attirer l\u2019\u0153il”<\/h2>\n

\"\"<\/p>\n

L\u2019\u0153il humain est con\u00e7u pour \u00eatre attentif aux mouvements, c’est pourquoi il peut \u00eatre tentant d’inclure dans ses pages des \u00e9l\u00e9ments anim\u00e9s afin de capter l’attention du visiteur.<\/p>\n

C’est une erreur qu’il ne faut surtout pas faire. Loin de trouver le site int\u00e9ressant, l’utilisateur aura le sentiment d’\u00eatre agress\u00e9 par tous ces \u00e9l\u00e9ments en mouvement qui au final le feront fuir. Lorsqu’un produit ou service est r\u00e9ellement int\u00e9ressant, nul besoin d’agiter les bras pour le vendre.<\/p>\n

\u00c0 lire aussi : 3 conseils pour bien utiliser le GIF anim\u00e9 dans un email marketing<\/a><\/p><\/blockquote>\n

 <\/p>\n

5. Faire un design trop charg\u00e9<\/h2>\n

\"webdesign\"<\/p>\n

Un design de site tr\u00e8s charg\u00e9, en plus d’augmenter le temps d’affichage, aura pour cons\u00e9quences de noyer toute information utile et de fatiguer l\u2019\u0153il. La forme n’est l\u00e0 que pour mettre en avant le fond et non prendre le pas sur lui.<\/p>\n

Si un effet n’a aucune r\u00e9elle utilit\u00e9 (faire ressortir un texte qu’on ne voit pas bien par exemple) alors ne le mettez pas. La mode \u00e9tant \u00e0 la simplicit\u00e9 et au flat design, un site charg\u00e9 d’effets aura un aspect vieillot.<\/p>\n

Pour aller plus loin : Neumorphism : vers la fin du flat design ?<\/a><\/p><\/blockquote>\n

 <\/p>\n

6. Abuser des encadr\u00e9s\"\"<\/h2>\n

R\u00e9alisation de Vladimir Romanov<\/a><\/em><\/p>\n

Attention aux encadr\u00e9s ! S’ils peuvent \u00eatre utiles pour mettre en avant un texte, trop d’encadr\u00e9s risquent de cr\u00e9er une impression de cloisonnement tr\u00e8s d\u00e9sagr\u00e9able.<\/p>\n

Pr\u00e9f\u00e9rez des espaces vides qui laisseront les textes respirer, ils en deviendront bien plus confortables \u00e0 lire. De m\u00eame pour les images.<\/p>\n

 <\/p>\n

7. Utiliser un grand nombre de typographies<\/h2>\n

\"\"<\/p>\n

R\u00e9alisation de Marie Codina<\/a><\/em><\/p>\n

Essayez d’\u00eatre sobre dans l’utilisation des polices de caract\u00e8res.<\/p>\n

Comme pour toute r\u00e9alisation faisant intervenir beaucoup de textes, l’ensemble doit absolument rester lisible et clair pour l’utilisateur. Changer de typo \u00e0 chaque texte donnera le sentiment d’un site fait par un amateur.<\/p>\n

\u00c0 lire aussi : 25 typographies \u00e0 empattements gratuites pour vos cr\u00e9ations<\/a><\/p><\/blockquote>\n

 <\/p>\n

8. Faire un design tr\u00e8s diff\u00e9rent \u00e0 chaque page<\/h2>\n

\"\"R\u00e9alisation de Rino & Pelle<\/a><\/em><\/p>\n

Pour qu’un site soit facile d’utilisation, la coh\u00e9rence graphique entre ses pages est un crit\u00e8re essentiel. Elles doivent respecter la charte globale et avoir toujours quelques \u00e9l\u00e9ments r\u00e9currents afin de cr\u00e9er une stabilit\u00e9.<\/p>\n

Si vous h\u00e9sitez entre plusieurs mises en page,\u00a0 faites des propositions \u00e0 votre client, qui choisira le design qu’il juge le meilleur.<\/p>\n

\u00c0 lire aussi : 4 secrets pour r\u00e9ussir le design de votre packaging<\/a><\/p><\/blockquote>\n

 <\/p>\n

9. Pr\u00e9voir beaucoup trop de rubriques et sous-rubriques<\/h2>\n

\"\"<\/p>\n

R\u00e9alisation de Mehmet \u00d6zsoy<\/a><\/em><\/p>\n

Mieux vaut privil\u00e9gier une arborescence simple, et donc \u00e9viter les sous-rubriques de sous-rubriques. Plus une information se trouve loin dans l’arborescence d’un site, plus il faudra fouiller pour la trouver et donc moins elle sera lue.<\/p>\n

Les informations importantes doivent appara\u00eetre d\u00e8s la premi\u00e8re page, \u00e9vitez donc de les enterrer dans de multiples rubriques.<\/p>\n

 <\/p>\n

10. Utiliser trop de couleurs<\/h2>\n

\"\"<\/p>\n

R\u00e9alisation de Maria Podshivalova<\/a><\/em><\/p>\n

Bien-s\u00fbr, vous pouvez utiliser les couleurs de votre choix sur votre site internet, selon votre charte graphique, votre audience, les produits\/services que vous proposez, etc.<\/p>\n

Toutefois, il est vivement conseill\u00e9 de ne pas surcharger votre lecteur de pages, photographies et illustrations multicolors qui impacteraient son exp\u00e9rience utilisateur.<\/p>\n

Pr\u00e9f\u00e9rez 2 ou 3 couleurs (hors noir et blanc) maximum qui ressortiront sur des titres, images, CTA, en rapport avec votre votre charte graphique.<\/p><\/blockquote>\n

\u00c0 lire aussi : Le guide complet pour utiliser les couleurs dans votre communication<\/a><\/p><\/blockquote>\n

 <\/p>\n

11. N\u00e9gliger les illustrations de votre site<\/h2>\n

\"\"<\/p>\n

R\u00e9alisation de Shah Alam<\/a>\u00a0<\/em><\/p>\n

Les illustrations de votre site internet vont \u00eatre d\u00e9terminantes pour l\u2019exp\u00e9rience utilisateur. Si vous n\u00e9gligez la qualit\u00e9 de vos photographies, leur taille, style, etc., c\u2019est le design tout entier de votre site qui en p\u00e2tira.<\/p>\n

Portez donc une attention tr\u00e8s particuli\u00e8re \u00e0 l\u2019insertion de vos illustrations et pensez \u00e0 leur :<\/p>\n