De nos jours, un site doit absolument être responsive (c’est à dire, être adapté à tous les écrans) : les internautes étant devenus des mobinautes, c’est la version mobile de votre site qui sera la plus consultée.
Le choix des couleurs
En plus du choix d’une palette harmonieuse, il existe une règle chromatique qui permet de bien répartir les couleurs d’un site. Cette règle marche également dans le domaine de la décoration intérieure. Il s’agit de la règle du 60-30-10.
Cette règle peut s’appliquer de la manière suivante :
60% : il s’agit de la couleur dominante, elle peut être utilisée pour les fonds des contenus
30% : la teinte secondaire qui peut être utilisée pour les sections
10% : la couleur d’accent employée pour mettre en exergue certains éléments comme les boutons d’appel à l’action.
Les couleurs du site doivent être en adéquation avec votre domaine d’intervention et il est déconseillé d’utiliser une palette trop large : l’attention de vos utilisateurs pourrait être détournée.
Le choix des fonts
Comme cela a déjà été mentionné dans l’article sur la typographie pour le web, les typographies de type sans-serif sont les mieux adaptées pour la lecture sur écran.
Il est important de ne pas multiplier les typographies : en utiliser une pour les titres et une autre pour le corps du texte est idéale. Concernant la police de corps, en choisir une avec plusieurs graisses différentes vous permettra de dynamiser vos paragraphes en faisant ressortir des mots de manière subtiles. Voici un exemple de toutes les graisses que vous pourrez trouver en fonction des familles de polices :
Pour les titres, vous pouvez vous permettre d’utiliser des typographies serifs ou plus fantaisistes : en effet, celles-ci n’étant employées que très rarement, cela ne n’entachera pas la lisibilité de votre contenu.
L’espacement
Un design épuré nécessite une aération des sections. En effet, les marges externes permettent de bien hiérarchiser les informations et de détacher les sections entre-elles, ce qui permet une meilleure compréhension du contenu de la page. Les marges internes sont aussi indispensables pour bien harmoniser les textes dans les contenants.
Pour une adaptation responsive optimale (sur tous les écrans), mieux vaut privilégier des marges en pourcentage plutôt qu’en pixel: cela évitera de les modifier pour chaque taille d’écran et donc de moins surcharger votre site en termes de code.
La lisibilité
Il faut savoir que vos utilisateurs n’auront pas la patience de lire entièrement vos textes : il est donc essentiel de bien hiérarchiser vos informations en créant pour chaque point différentes sections, comme cela a été dit plus haut, et également en fractionnant vos paragraphes s’ils sont trop longs et en leur attribuant des titres. Cela permettra à vos visiteurs de voir en seul coup d’oeil, la thématique de chaque paragraphe.
En termes d’apparence, en Europe, les utilisateurs lisent de gauche à droite. Il est donc recommandé d’aligner à gauche tous vos paragraphes. Pour mettre en exergue un texte court, il est possible de centrer celui-ci. Attention cependant à ne pas justifier un texte sur le web, celui-ci sera difficilement lisible sur les écrans.
La lisibilité est également un critère à prendre en compte pour améliorer le SEO on-page de votre site, pour favoriser son référencement naturel et ainsi booster son apparition dans les résultats des moteurs de recherche comme Google.
La cohérence
Le design d’un site doit être cohérent pour ne pas perdre l’utilisateur. Pour que l’utilisateur, par exemple, identifie facilement un lien, il est préférable de lui attribuer la même couleur, la même graisse. Les boutons doivent être du même type, soit avoir tous des bords arrondis, soit avoir tous des bords carrés. Vous pouvez vous permettre de varier leur couleur : par exemple un bouton d’appel à l’action, accrochant le regard du visiteur pourrait avoir une nuance plus vive qu’un bouton classique renvoyant vers une autre page de votre site.
Il est possible, bien entendu, de changer la couleur d’un texte en fonction du fond chromatique de celui-ci. Cela permettra de le détacher du paragraphe précédent et de rythmer votre composition de manière plus originale.
Les titres et les sous-titres peuvent, comme les textes, avoir des variations de couleurs. En revanche, il est conseillé de faire en sorte que tous les titres de premier niveau aient la même apparence, tous les titres de niveau 2 également, de niveau 3 etc. Cela permettra à l’utilisateur de mieux comprendre la hiérarchisation de votre contenu.
Le dynamisme
Les éléments apparaissant en animation sur la page rendent votre site dynamique et plaisant. Cependant, attention à ne pas trop surcharger votre site d’animations : elles pourraient êtres source de confusion et entacher la lisibilté de vos pages. Les animations subtiles et bien coordonnées entre elles attirent l’oeil.
Certains builders de WordPress comme Elementor proposent directement de mettre des animations dès l’entrée d’un élément : elles se déclenchent quand l’utilisateur scrolle la page.
Ajouter des animations en CSS ou en JS permet une plus grande liberté et rend votre site plus original : voici des sites vous aidant à générer du code CSS pour créer des animations harmonieuses :