20€ /mois
Sans engagement
20€ /mois
Sans engagement
Attention, ce qui suit n’est pas à prendre au pied de la lettre mais sont seulement des indications. Il ne s’agit pas d’une formule mathématique et d’une science exacte, mais plutôt d’orientations.
Miser sur la différenciation visuelle des éléments afin de mettre clairement l’accent sur certains éléments et de les faire ressortir du fond (background). Il est important de faire ressortir certains éléments (mais sans abuser ! Essayer de tout faire ressortir n’a pas de sens et revient… à ne plus rien faire ressortir du tout). Afin de ne pas ennuyer le visiteur, guider sa navigation et attirer son attention sur ce qui est important, faites ressortir certains éléments et donnez ainsi du rythme à vos pages.
Pour que le contraste soit réussi, il ne faut pas hésiter à employer des éléments vraiment différents. Ne cherchez pas à être “légèrement différent” mais plutôt à couper franchement. Par exemple, pour un contraste de couleurs, ne pas hésiter à employer du noir pour contraster avec le blanc. Afin d’accentuer l’effet du contraste, n’hésitez pas à regrouper les éléments similaires ensemble et faire ressortir ce qui est différent. Un contraste fort aidera à séparer visuellement le contenu et rendra le design plus attractif.
Utilisez les effets de contraste sur les éléments d’appel à l’action, par exemple les boutons “achat” ou “contact” ou “inscrivez-vous”. Vous attirerez ainsi plus facilement l’attention des visiteurs sur les éléments avec lesquels vous souhaitez qu’ils interagissent.
C’est pour le respect du principe de Répétition que l’on définit une “charte graphique” avec des couleurs et des styles bien précis à reproduire tout au long des pages du site. La raison? Créer une harmonie, une cohésion. Plus vous répèterez les mêmes styles et couleurs le long des pages, plus la navigation et la lecture de vos pages seront agréables et fluides. Inconsciemment, plus le visiteur se sent à l’aise et “comprend” votre design, plus il sera enclin à interagir avec les éléments du site. La constance dans le design contribue à améliorer l’expérience de l’utilisateur, la confiance, et donc l’action de la part du visiteur.
Répétez les mêmes couleurs, les mêmes typographies, les mêmes boutons, les mêmes blocs, les mêmes styles d’images… dans tous les éléments qui se répètent.
Veillez à respecter les mêmes marges et alignements le long de vos pages. Essayez d’appliquer autant que possible les mêmes marges en haut, en bas et sur les côtés, les espacements entre les blocs. Cela est également valable pour l’alignement de textes: essayez de choisir le même alignement pour les blocs de textes similaires (par exemple: si vous décidez de centrer les titres, faites-le partout, et si vous choisissez l’alignement à droite pour les paragraphes, reproduisez ce même alignement autant que possible). Ne placez pas les éléments au hasard, essayez d’imaginer une grille afin que vos éléments soient toujours alignés à l’une des lignes ou des colonnes de cette grille. Ce détail est justement ce qui fait la différence entre un design professionnel et “amateur”.
L’alignement permet également de connecter visuellement les éléments entre eux, ce qui aide à la navigation agréable et fluide.
Le principe de proximité repose sur le regroupement logique d’éléments communs et donc la séparation claire avec des éléments différents. L’objectif est d’offrir une navigation plus facile et intuitive aux utilisateurs.
Regroupez entre eux les éléments qui doivent être connectés entre eux. N’ayez pas peur des espaces, scindez les gros blocs de textes en différents paragraphes plus digestes.
La proximité permet de regrouper mais également de clairement séparer les éléments qui doivent être mis en avant.
N’hésitez pas à utiliser les “espaces blancs”, laissez des espaces vides pour bien séparer les éléments. L’utilisation des espaces vides est particulièrement utile dans le cas de textes placés au-dessus d’images. En effet, afin que les éléments visuels de la photo en fond ne gênent pas la lecture, n’hésitez pas à laisser beaucoup d’espace autour du texte.
Regroupez et séparez les éléments de manière logique.
Réponse rapide: privilégiez le code hexadécimal, qui commence toujours par un # et contient entre 4 et 6 chiffres et lettres.
Il existe différentes manières d’identifier une couleur, notamment avec des codes.
En impression, on utilise le code CMJN, qui est la quantité de Cyan, de Magenta, de Jaune et de Noir. Suivant les mélanges, on obtient des couleurs différentes, utilisées donc dans les encres des imprimeries.
Pour les écrans, le système est le RVB (Rouge / Vert / Bleu), chaque couleur est exprimée de 0 à 255.
Dans le web, on peut utiliser le système RVB, mais aussi le système Hexadécimal (HEX), composé donc d’un # suivi de 6 chiffres ou lettres.
Si vous avez repéré une couleur qui vous plaît sur un site, vous pouvez inspecter et copier son code couleur. Une extension de votre navigateur Chrome ou Firefox vous permet d’afficher une pipette et de la placer sur n’importe quel élément situé sur votre écran et vous indiquera le code couleur hexadécimal.
Réponse rapide: privilégiez plutôt une nuance foncée de gris, essayez d’éviter le noir 100% surtout pour les titres et caractères de grande taille.
Dans le web, on essaye d’éviter l’utilisation du noir plein 100%, tout simplement car le noir peut être un peu trop violent pour la vue. Il est plus agréable, notamment pour les titres et blocs de couleur, d’utiliser une nuance de gris foncé, qui est un peu plus reposant. Vous pouvez utiliser un noir 100% pour des textes de petite taille et fins, mais pour tout élément très visible, essayez plutôt d’aller dans une nuance de noir un peu moins prononcée.
Concernant la nuance et le ton des couleurs, essayez de rester assez léger, en évitant les couleurs trop brutes. Jouez plutôt dans les nuances. Si vous choisissez un rouge, par exemple, essayez d’éviter un rouge criard, et privilégiez les couleurs douces. Les tons pastel sont très appréciés car ils sont reposants, surtout pour des couleurs de fond, d’arrière-plan.
Les couleurs sont souvent associées à des émotions, des symboles, des connotations. Et leur signification peut différer suivant les cultures. Exemple: le noir peut être associé à la sobriété, le deuil et la tristesse en Europe, alors qu’en Asie le deuil est représenté par le blanc.
Il peut être intéressant de connaître la signification des couleurs pour vous aider à transmettre une émotion particulière à travers votre site.
Étudiez également les couleurs fréquemment utilisées dans votre secteur d’activité et par vos concurrents. Cela pourra également vous aider à décider des couleurs que vous souhaitez utiliser.
Ce site est très complet et présente la signification de nombreuses couleurs.
La psychologie des couleurs – voici quelques indications qui peuvent vous guider:
Réponse rapide: idéalement 1, voire 2 couleurs, mais pas plus de 3
Essayez de rester dans un maximum de 3 couleurs:
Il n’y a pas de règle automatiquement applicable, mais tout est question d’harmonie visuelle et de respect de votre charte graphique afin que le rendu soit agréable et cohérent avec votre identité.
Veillez toujours à la lisibilité des éléments. Si vous superposez 2 éléments (par exemple du texte sur fond de couleur), éviter de superposer 2 couleurs complémentaires dont l’assemblage serait disgracieux et peu harmonieux.
N’hésitez pas à utiliser les tons de couleurs, c’est-à-dire une variante un peu plus claire ou plus foncée d’une même couleur.
On peut créer une palette de couleurs en appliquant des règles d’harmonie:
Un outil très pratique qui vous permet de créer des palettes de couleur et vous inspirer: Adobe Color. Une application en ligne (gratuite), qui vous permet de partir d’une couleur principale et qui vous donne les palettes de couleur suivant le type de combinaison que vous souhaitez (couleurs complémentaires, monochromatiques etc…). Vous pouvez également naviguer dans les onglets “Explorer” (puis choisir dans le filtre de recherche les palettes de thèmes de couleurs les plus utilisés par exemple) et “Tendance” (puis choisir un secteur d’activité) qui vous ouvriront une bibliothèque de palettes qui peuvent également vous inspirer.
Autre outil de générateur de palettes couleurs, ce site (coolors.co) est très agréable à utiliser. Il vous permet de générer des palettes de couleurs harmonieuses, de façon aléatoire ou en choisissant votre couleur principale. Pour sélectionner votre couleur, cliquez sur le code couleur de la palette du milieu et sélectionnez la couleur qui correspond à votre charte (ou tapez son code hexadécimal) puis cliquez sur l’icône en forme de verrou. Appuyez ensuite sur la barre d’espace de votre clavier, et l’outil va vous générer différentes palettes de couleurs harmonieuses. Lorsqu’une palette vous convient, vous pourrez très facilement copier le code HEX des couleurs de la palette pour les intégrer dans votre charte graphique et les appliquer à votre site.
Saviez-vous qu’il existe “la couleur de l’année” ?
Tendance créée par Pantone, spécialiste des couleurs: chaque année une couleur est mise en avant, ce qui donne la tendance de l’année. Chaque année, une couleur est à l’honneur ici. Vous retrouverez donc certainement un usage de cette couleur un peu plus en communication. C’est disons “la couleur du moment, tendance, à la mode”. Attention, ceci n’est qu’une piste et vous devez d’abord vous assurer que la couleur de l’année peut vous correspondre. Si tel est le cas, vous pourrez utiliser son code couleur.
Réponse rapide: choisissez vos polices dans Google Fonts, disponibles directement dans Elementor.
Pour trouver de bonnes combinaisons:
Les typographies sont divisées en plusieurs familles: Serif (avec empattement) et les Sans Serif (sans empattement). L’empattement est représenté par les lignes supplémentaires qui se situent aux extrémités des lettres.
Il est communément admis que les polices sans serif (sans empattement) sont plus agréables à lire sur les écrans, alors que les polices avec empattement (serif) sont privilégiées pour les supports écrits sur papier.
Puisque vous réalisez un site web, vos textes seront donc lus sur écrans. Il n’y a pas d’obligation, mais si vous souhaitez utiliser une police avec empattement, essayez de l’utiliser plutôt pour les titres et privilégiez une police sans sérif pour les paragraphes de texte.
Enfin, le choix de police Serif / Sans Sérif dépend également du style que l’on souhaite donner:
Il existe également d’autres familles de police:
Réponse rapide: Dans l’absolu, vous n’aurez pas ce dilemme si vous choisissez d’utiliser les polices de Google Fonts. Sinon, si vous choisissez d’importer votre propre typographie, privilégiez le format WOFF/ WOFF2 si vous utilisez une police disponible en plusieurs versions.
Il existe plusieurs formats de police:
Les informations recueillies à partir de ce formulaire font l’objet d’un traitement informatique destiné à CreaMentor pour les finalités suivantes : ouverture du compte utilisateur sur Creamentor.com, (ii) proposition de messages et de contenus adaptés à votre profil (iii) inscription aux Newsletters Creamentor.com. En application de la règlementation applicable, vous disposez du droit de retirer votre consentement, des droits d’accès, de rectification, d’effacement, d’opposition, de limitation et de portabilité de vos données vers un prestataire tiers le cas échéant et de la possibilité de définir des directives relatives au sort de vos données après votre décès. Pour exercer vos droits, vous pouvez contacter Creamentor, Aurélie PONS, 474 bd Louis Picon, 83200 Toulon ou à l’adresse email aure@creamentor.com, en justifiant de votre identité. Pour toute information complémentaire, consultez notre Charte Données Personnelles et Cookies. En cas de litige, vous disposez également du droit de saisir la CNIL.
