ven.
11
nov.
2011
Conseil design : mettre vos textes en valeur
Aujourd'hui encore, quelques petits conseils pour améliorer le design de votre site, juste pour vous !
Peut-être en avez-vous déjà fait l'expérience, vous surfez sur le web et atterrissez sur une page Internet : fond d'écran noir, police d'écriture grise, bref : illisible !
Le texte peut alors être aussi intéressant et informatif que possible, rien n'y fera...le visiteur est en général agacé et quitte rapidement la page Internet en question...
Pour y remédier, et pour vous assurer d'avoir un texte toujours mis en valeur, nous vous proposons quelques astuces et conseils...
Contraste
Faites toujours attention aux contrastes entre les couleurs afin que le texte soit toujours lisible. Comme sur l'image ci-dessous, un texte vert sur un fond rouge est par exemple un véritable "faux-pas" (en plus de faire mal aux yeux :) !
Notre conseil : toujours choisir une couleur "douce" pour la couleur de fond. Et si en plus le contraste des couleurs du texte et du fond est harmonieux, le texte en sera d'autant plus agréable à lire.
Un outil en ligne pratique pour vos palettes de couleurs : Kuler
Et justement, pour être sûr de faire le ou les bons choix de couleur, pourquoi ne pas vous laisser inspirer par le site kuler.adobe.com ?
Ce site entièrement gratuit vous présente des palettes de couleur associées en combinaisons et sélectionnées par des spécialistes. L'assurance de marier harmonieusement les couleurs de votre site !
Voici quelques exemples de combinaisons de couleurs "douces" et permettant une lecture facile et agréable :
Exemple et mise en pratique
Et pour une petite mise en pratique, voici en bonus un tutoriel pour créer vous même un cadre de texte avec fond coloré.
Taille de police et interlignes
Via l'icône "Style" de la colonne de droite, vous pouvez aller paramétrer la police d'écriture de votre site Jimdo.
Lors du choix de la taille de la police d'écriture du texte, gardez toujours à l'esprit que certains de vos visiteurs pourraient être malvoyants. Pour cette raison, nous vous recommandons
de toujours privilégier une taille suffisamment grande pour assurer une lecture confortable à tous vos visiteurs.
L'interligne est en général fixée à 120%. Mais en la paramétrant sur 140% ou plus, votre texte paraîtra moins "compressé", plus aéré et donc plus agréable à lire.
Les titres
Le but d'un titre, c'est de servir d'introduction au texte qui va suivre. Il doit à la fois en fournir une rapide description et "donner envie" de le lire en mettant en valeur une phrase "clé" du texte par exemple.
Des titres de trop grandes tailles auront tendance à être trop imposants, à trop attirer l'attention ; mais à l'inverse, un titre trop petit aura tendance à se fondre parmi le reste du texte et ne sera pas bien mis en valeur.
Astuce : grâce à une modification facile du code CSS, vous allez pouvoir réduire l'espace entre chaques lettres de vos titres, et, pour les niveaux de titre 2 et 3, créer un espace plus grand au-dessus du titre (interligne) afin de mieux séparer vos paragraphes et rendre votre page plus aérée.
Pour cela, allez simplement coller le code suivant dans la partie "modifier le head" de vos paramètres de site, à la suite des codes qui y sont éventuellement déjà présents.
<style type="text/css">
h1,h2,h3 {
letter-spacing:-1px ;
}
h2,h3 {
margin-top:20px ;
}
</style>
Allez, lancez-vous, ça en vaut la peine ! :-) Et montrez-nous les résultats sur vos sites !
Commentaires: 22(Discussion fermée)
-
#1
Merci! ;)
-
#2
Merci.
-
#3
Bonnes idées
-
#4
tres interressant! merci
-
#5
Ah cool, du nouveau pour agrémenter mon blog ; ) Merci à vous.
-
#6
Merci beaucoup mais un petit problème: quand vous sautez des lignes ça fait quelque chose de pas très très joli...
-
#7
aussi-non c'est magnifique !!! merci !!!
-
#8
COOL
-
#9
Super le tuto pour la couleur du fond du texte!
-
#10
je n'ai pas encore essayé vos conseil, pour le moment je suis charrette dans un autre domaine mais depuis longtemps je me demandais comment mettre un fond couleur sous mes textes. continuez à nous erfectionner. je ne regrette pas d'être chez JIMDO!
-
#11
bravo!
-
#12
C'est un peu compliqué pour moi en un seul coup d'oeil et surtout en anglais
-
#13
Vraiment sympathique ce tutoriel officiel. Pour ceux qui veulent j'ai un vieux tutoriel de disponible avec des exemples de cadre avec des bordures et coins arrondis:
http://funnycat.jimdo.com/astuces-jimdo/cadre-esth%C3%A9tique/ -
#14
C'est vraiment sympa de penser à celles et ceux qui ne maîtrisent pas les codes HTML. Merci :-)
-
#15
Exercice pratique qui m'a vraiment plu! Donc je vous montre les résultats:
http://www.britavit.com/
et aussi http://www.britavit.com/la-plan%C3%A8te-nous-aimons-nous-sauvons/
http://www.britavit.com/pas-de-piscine-le-choix/
-
#16
Leçon reçue 5/5 y a plus qu'a, et j'ai commencé..!
-
#17
sympa ^^
-
#18
@ NRJ Fan : c'est pour cela qu'il est précisé de sauté des lignes en maintenant la touche MAJ enfoncée ;)
@Tony : Oui, merci pour l'ajout !!! Les cadres présentés y sont vraiment supers ! un super tutoriel de JimdoFriends comme on aime :) -
#19
Pas mal comme article, car en effet il y a des sites où l'ergonomie est tout de même encore très en retrait :) En tant que spécialiste des couleurs, je ne peux que cherche à faire très attention aux couleurs sur mon site internet de chromothérapie :) merci. Antoine
-
#20
Je vais essayer pour voir. Merci
-
#21
J'comprends pas... Je suis tous vos précieux conseils à la lettre et je n'ai toujours pas réussi à être élue "meilleur site du mois" !!!!!!!!!!!!!! ;-)
Merci Jimdo !
Atelier de Chantal Par AZ'art -
#22
Bonjour
Globalement facile la création d'un site avec Jimdo, tant qu'on ne sort pas des clous; alléché par les conseils design, je me suis empressé d'aller modifier les polices, leur taille, les titres et sous-titres, les couleurs... et ça ne marche pas. La modification est bien prise en compte sur le moment, mais elle n'est pas enregistrée, si bien que lorsque je ferme la connexion à Jimdo et que je reviens plus tard sur mon site, je le retrouve avec son ancien design sans qu'aucune des modifications de style n'ait été prise en compte.
Version imprimable