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. Découvrez les règles design à respecter pour proposer unsite internet digne de ce nom !

Quand on parle de webdesign, on pense à l’esthétique ! 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 et attractif.

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.

L’article en un coup d’œil  👀

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

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, évitez :

• un site confus,
• une surcharge visuelle,
• un site désorganisé,
• un site peu esthétique,
• une palette de couleurs mal assortie.

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égiez 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. 

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, gardez 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 !

2. Utiliser des mauvaises images

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

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

À 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 nombreuses banques d'images gratuites et libres de droits qui proposent des photos de qualité, comme Pexels ou Pixabay. 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.

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 ?

3. Ne pas aérer la mise en page

Un site web doit être agréable à consulter, 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. Ces marges sont essentielles pour le bon fonctionnement visuel du site. Grâce à elles, l'œil de l'utilisateur est encadrée et il peut se déplacer facilement d'un élément à l'autre, tout en respirant.

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.

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. 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.

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.

6. Mal 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 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...

7. Ne pas respecter le logo ou la charte graphique

Nous vous recommandons vivement de privilégier les couleurs de votre charte graphique.  Évitez les 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, il peut être intéressant qu'elle reprenne 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.

📖 Pour aller plus loin : Infographie - 8 conseils pour créer un site internet efficace

Vous êtes maintenant au courant des erreurs de conception design à é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 !

Si vous vous rendez compte que vous appliquez ces différentes erreurs de design, pas de panique : vous pouvez toujours vous lancer dans l'amélioration de votre site internet visuellement, ou même déléguer sa refonte à un professionnel de confiance.

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.