{"id":231840,"date":"2021-12-02T15:52:00","date_gmt":"2021-12-02T12:52:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=231840"},"modified":"2022-05-16T10:40:47","modified_gmt":"2022-05-16T07:40:47","slug":"9-regles-de-conception-simples-pour-rendre-votre-site-web-plus-beau","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fr\/9-regles-de-conception-simples-pour-rendre-votre-site-web-plus-beau\/","title":{"rendered":"9 r\u00e8gles de conception simples pour rendre votre site Web plus beau"},"content":{"rendered":"

"Je suis nul en design."<\/p>\n

Je l’ai d\u00e9j\u00e0 entendu plusieurs fois.<\/p>\n

Je connais beaucoup de gens qui g\u00e8rent des sites Web et cr\u00e9ent du contenu de qualit\u00e9, mais insistent sur le fait qu’ils n’ont aucun go\u00fbt pour le design.<\/p>\n

Absurdit\u00e9!<\/p>\n

Je pense que n’importe qui peut aiguiser son \u0153il pour le design, mais si vous pouviez avoir besoin d’un peu d’aide, cet article est pour vous.<\/p>\n

Dans ce didacticiel, vous trouverez 9 principes de conception de base que vous pouvez appliquer \u00e0 tout ce que vous faites.<\/p>\n

J’ai \u00e9crit ces conseils pour qu’ils soient aussi concrets que possible afin qu’ils soient faciles \u00e0 mettre en \u0153uvre sur votre site Web.<\/p>\n

Consultez cette liste chaque fois que vous devez faire un choix de design et je vous promets que le r\u00e9sultat sera un peu plus beau.<\/p>\n

Commen\u00e7ons avec\u2026<\/p>\n

1 N’utilisez jamais de texte en couleur<\/h2>\n

\u00c0 moins que vous ne sachiez ce que vous faites, le texte color\u00e9 a tendance \u00e0 \u00eatre laid et difficile \u00e0 lire.<\/p>\n

En r\u00e8gle g\u00e9n\u00e9rale, faites toujours votre texte en noir ou en blanc<\/strong>.<\/p>\n

Si vous avez du texte en couleur sur votre site Web, vous devriez plut\u00f4t choisir d’utiliser la couleur \u00e0 proximit\u00e9.<\/p>\n

Voici ce que je veux dire.<\/p>\n

Exemple 1<\/h3>\n

Ce bouton a du texte bleu et un fond gris clair. Il a l’air un peu plat et le texte d\u00e9passe la forme du bouton\u00a0:<\/p>\n

Si je retourne les couleurs en utilisant le bleu pour l’arri\u00e8re-plan et le texte clair, \u00e7a a l’air beaucoup mieux :<\/p>\n

Et pendant que nous parlons boutons\u2026<\/p>\n

Si votre bouton a un arri\u00e8re-plan color\u00e9, il sera presque toujours plus beau avec du texte blanc.<\/p>\n

Le texte noir a tendance \u00e0 para\u00eetre horrible par-dessus la couleur, \u00e0 moins que cette couleur ne soit vraiment p\u00e2le ou simplement d’un gris plus clair\u00a0:<\/p>\n

Si vous utilisez couramment du texte en couleur dans vos publications, vous appr\u00e9cierez les id\u00e9es de l’exemple suivant.<\/p>\n

Exemple #2<\/h3>\n

Comme autre exemple, vous pourriez avoir du texte en couleur dans un article parce que vous voulez qu’il se d\u00e9marque, comme ceci :<\/p>\n

Ce texte n’a pas l’air g\u00e9nial parce qu’il est bleu !<\/p>\n

Il existe des moyens plus esth\u00e9tiques d’attirer l’attention avec la couleur. Sans oublier que certaines couleurs (comme le bleu) font ressembler le texte brut \u00e0 un lien.<\/p>\n

Une autre approche pour attirer l’attention avec la couleur consiste \u00e0 rendre le texte blanc et l’arri\u00e8re-plan bleu\u00a0:<\/p>\n

C’est beaucoup de couleur, alors utilisez-la avec parcimonie!<\/p>\n

Ou vous pouvez r\u00e9duire la saturation pour que l’arri\u00e8re-plan soit tr\u00e8s p\u00e2le, puis rendre le texte noir pour un aspect plus subtil\u00a0:<\/p>\n

Le texte noir est joli sur des arri\u00e8re-plans p\u00e2les.<\/p>\n

Ou vous pouvez laisser le texte noir et ajouter une touche de couleur comme bordure autour du texte\u00a0:<\/p>\n

C’est un look plus simple qui attire toujours l’attention.<\/p>\n

Ou vous pouvez combiner un arri\u00e8re-plan et une bordure\u00a0:<\/p>\n

C’est une autre fa\u00e7on attrayante d’utiliser la couleur.<\/p>\n

Pour r\u00e9sumer les r\u00e8gles sur le texte en couleur :<\/p>\n

Vous devez utiliser un arri\u00e8re-plan color\u00e9 ou une bordure color\u00e9e autour du texte au lieu de changer la couleur du texte. De plus, le blanc est toujours plus beau sur les arri\u00e8re-plans color\u00e9s, \u00e0 moins que la couleur ne soit tr\u00e8s p\u00e2le.<\/p>\n

Maintenant, s\u00e9lectionnons les couleurs que vous utiliserez.<\/p>\n

Juste pour que vous le sachiez, j’ai d\u00fb \u00e9crire un peu de CSS pour ajouter des bordures aux paragraphes ci-dessus. Gutenberg n’a pas encore d’option fronti\u00e8re. Vous pouvez d\u00e9j\u00e0 ajouter des bordures avec les widgets Elementor<\/a>.<\/p>\n

2 Utilisez une palette de couleurs<\/h2>\n

Choisir les couleurs \u00e0 la vol\u00e9e est une grosse erreur de d\u00e9butant.<\/p>\n

Chaque fois que vous appliquez une couleur \u00e0 votre site Web, vous devez toujours choisir une couleur dans votre palette<\/strong>.<\/p>\n

En utilisant une palette, vous pouvez simplement s\u00e9lectionner parmi vos couleurs existantes et vous savez que le r\u00e9sultat sera joli et \u00absur la marque\u00bb sans aucun effort.<\/p>\n

Et voici le truc\u2026<\/p>\n

Je suis concepteur de sites Web depuis des ann\u00e9es et j’ai toujours du mal \u00e0 cr\u00e9er de belles palettes de couleurs.<\/p>\n

Et c’est pour \u00e7a que je triche<\/p>\n

Je ne cr\u00e9e jamais mes propres palettes de couleurs. Au lieu de cela, je trouve une magnifique palette de couleurs qui a d\u00e9j\u00e0 \u00e9t\u00e9 cr\u00e9\u00e9e, puis je la modifie pour r\u00e9pondre \u00e0 mes besoins de conception.<\/p>\n

Ma ressource secr\u00e8te pour trouver des palettes de couleurs est Color Hunt<\/a>.<\/p>\n

\"9<\/a><\/p>\n

Ce site Web g\u00e9nial a une communaut\u00e9 de membres qui cr\u00e9ent et partagent des palettes de couleurs qu’ils con\u00e7oivent.<\/p>\n

Si vous parcourez la page d’accueil, vous trouverez une liste interminable de belles palettes parmi lesquelles choisir. En cliquant sur n’importe quelle palette, vous acc\u00e9dez \u00e0 sa page o\u00f9 les palettes associ\u00e9es sont r\u00e9pertori\u00e9es ci-dessous.<\/p>\n

\"9<\/a><\/p>\n

Honn\u00eatement, c’est tr\u00e8s amusant de parcourir les palettes et de trouver des id\u00e9es et de l’inspiration pour votre site.<\/p>\n

Si vous avez d\u00e9j\u00e0 une teinte en t\u00eate, vous pouvez commencer par choisir une couleur \u00e0 l’aide de la barre de recherche.<\/p>\n

\"9<\/a><\/p>\n

Des mots-cl\u00e9s pr\u00e9d\u00e9finis sont \u00e9galement disponibles, tels que \u00ab\u00a0chaud\u00a0\u00bb et \u00ab\u00a0froid\u00a0\u00bb pour trouver des palettes appropri\u00e9es.<\/p>\n

Une fois que vous avez s\u00e9lectionn\u00e9 une palette que vous aimez et impl\u00e9ment\u00e9 les couleurs sur votre site, vous serez \u00e9tonn\u00e9 de la diff\u00e9rence que cela fait.<\/p>\n

Ces deux premiers conseils devraient faire croire \u00e0 vos visiteurs que vous \u00eates un ma\u00eetre du design en mati\u00e8re de couleurs.<\/p>\n

Parlons maintenant des polices !<\/p>\n

3 Utilisez uniquement 1 ou 2 polices<\/h2>\n

Les couleurs doivent \u00eatre s\u00e9lectionn\u00e9es dans votre palette. Les polices sont similaires.<\/p>\n

Vous devez s\u00e9lectionner une ou deux polices, puis les r\u00e9utiliser pour tout.<\/p>\n

Souvent, lorsque les utilisateurs de WordPress apprennent \u00e0 changer les polices sur leur site, ils veulent soudainement toutes les utiliser !<\/p>\n

Par exemple, j’ai vu des gens changer la police d’un paragraphe pour le faire ressortir dans un article. C’est une mauvaise id\u00e9e. Si vous avez besoin de texte pour vous d\u00e9marquer dans un article, vous pouvez\u00a0:<\/p>\n