08. Les bonnes pratiques pour réussir le Design d’un site web: Fondamentaux Webdesign

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

Contenu

Réservé aux membres

illustration webdesign facile
Exclusif

Formation Elementor + accès illimité à toutes les ressources

20€ /mois
Sans engagement

Accéder à la Formation Elementor

Pour voir les étapes, Connectez-vous

Fondamentaux et astuces pour réussir le design de votre site web

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.

Les 4 principes fondamentaux en design: CRAP

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.

08. Les bonnes pratiques pour réussir le Design d'un site web: Fondamentaux Webdesign CreaMentor 1

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.

08. Les bonnes pratiques pour réussir le Design d'un site web: Fondamentaux Webdesign CreaMentor 2

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.

08. Les bonnes pratiques pour réussir le Design d'un site web: Fondamentaux Webdesign CreaMentor 3

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.

08. Les bonnes pratiques pour réussir le Design d'un site web: Fondamentaux Webdesign CreaMentor 4

Couleurs

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:

  • Jaune: couleur de la joie, de la chaleur, de la lumière et de l’amitié.
    • Signification positive : confiance, chaleur, jeunesse, intelligence, vivacité, puissance, fête, enthousiasme, ego
    • Signification négative : anxiété, tromperie, lâcheté, trahison, orgueil, mensonge
    • Secteurs qui utilisent souvent cette couleur : immobiliers, jeux, arts, loisirs
  • Orange: symbole de communication, la création, la sécurité, favorise les rapports humains.
    • Signification positive : stimulant, convivial, antidépresseur, réconfortant, ambition, générosité, créativité, sécurité, optimiste,
    • Signification négative : malveillance, kitch, populaire
    • Secteurs qui utilisent la couleur orange : tourisme, divertissements, sports
  • Rouge: symbole de la vie, de la puissance, de l’énergie et de la passion.
    • Signification positive : passion, désir, sensualité, amour, vitesse, force, énergie, dynamisme, chaleur, joie, triomphe
    • Signification négative : sang, colère, violence, danger, interdiction, agressivité
    • Secteurs qui utilisent le rouge : publicité, média, mode, luxe
  • Marron: symbole de la terre, la chaleur et la fiabilité.
    • Signification positive : solidité, force, densité, virilité, nature, douceur, neutralité
    • Signification négative : boue, pauvreté, médiocrité
    • Secteurs qui utilisent le marron: Menuiserie, Nature
  • Rose: féminité et sentiments.
    • Signification positive : amour, sexualité, stimulant, chaleur, tendresse, bonheur, sentiments
    • Signification négative : réservé aux filles
    • Secteurs : féminin, lingerie
  • Violet: symbole de la spiritualité et de la créativité.
    • Signification positive : pouvoir, puissance, créativité, connaissance, rêve, délicatesse, méditation
    • Signification négative : religion, deuil, mystère, crainte, mélancolie, solitude
    • Secteurs qui utilisent le violet: communication institutionnelle classique, arts, domaines culturelles
  • Bleu: symbole de la fidélité, de la confiance, l’intelligence, la sagesse et de la communication
    • Signification positive : réflexion, intelligence, confiance, froid, rêves, apaisement, tranquillité, propreté, fraicheur, loyauté, sagesse, liberté
    • Signification négative : sédatif, mélancolie, dépression, doute, obscurité
    • Secteurs qui utilisent le bleu: nouvelles technologies, haute technologie, informatique, médical, réseaux sociaux
  • Vert: symbole de la nature, de la vie, de la concentration, de la stabilité et de l’harmonie.
    • Signification positive : nature, détente, équilibre, repos, relaxant, paix, espoir, prospérité, chance, concentration
    • Signification négative : jalousie, envie, échec
    • Secteurs : loisirs, détente, tourisme, nature
  • Gris: symbole de neutralité.
    • Signification positive : élégance, autonomie, tempérance, futuriste, calme, douceur
    • Signification négative : monotonie, tristesse, indécision, ennui, malheur, mélancolie
    • Secteurs qui utilisent le gris: arts, design
  • Noir: symbole de la rigueur, de la puissance, de l’élégance et du prestige
    • Signification positive : sobriété, élégance, chic, luxe, protection, sécurité, distinction, impénétrabilité, humilité, austérité, design, rigueur
    • Signification négative : peur, mort, deuil, méchanceté, mystère, oppression, obscurité, désespoir, silence éternel, tristesse
    • Secteurs qui utilisent le noir: design, luxe, photos, milieu alternatif
  • Blanc: symbole de pureté
    • Signification positive : innocence, propreté, naissance, sagesse, perfection, clarté, repos, paix, anges, sophistication, bien-être, relaxant, précision
    • Signification négative : vide, fantôme, mutisme
    • Secteurs qui utilisent le blanc: luxe, nautisme

Réponse rapide: idéalement 1, voire 2 couleurs, mais pas plus de 3

Essayez de rester dans un maximum de 3 couleurs:

  • une couleur dominante: que vous utiliserez sur environ 60%
  • une couleur secondaire: à utiliser dans 30% des cas. Vous pouvez choisir une couleur complémentaire à la couleur dominante (dans le cercle chromatique, qui correspondrait à la couleur opposée)
  • une couleur “remarquable”, à utiliser uniquement sur les boutons d’appel à l’action et sur les éléments en survol à mettre en avant ou que vous souhaitez faire ressortir.

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:

  • couleurs semblables: proches dans le cercle chromatique pour créer un jeu de couleurs doux
  • couleurs complémentaires: utilisation de couleurs contrastées pour équilibrer la couleur de base avec sa couleur opposée sur la roue chromatique, pour des jeux de couleurs vifs et énergiques
  • Monochromatique: utilisation de variantes de tons d’une seule couleur pour créer un
     jeu de couleurs relaxant
  • Triade: cette règle d’harmonie crée généralement des jeux de couleurs au contraste doux

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.

Typographie

  • Visibilité (“legible” en anglais): facile à identifier, contraire d’illisible, choisir une police dont les caractères et lettres sont faciles à distinguer individuellement
  • Lisible (“readable” en anglais): faire en sorte que la lecture soit fluide, par exemple soigner la disposition des paragraphes afin que l’oeil puisse aisément parcourir tous les mots et faciliter la lecture du bloc de texte.
  • Contrastes de styles: Lorsque vous souhaitez différencier des types de textes (par exemple différencier un titre d’un bloc de texte), n’oubliez pas d’utiliser les contrastes: la taille de la police, son utilisation en majuscules ou minuscules, son style (manuscrit vs dactylo par exemple) sa couleur.
  • Accessible: l’accessibilité sur les web est un sujet très important. N’oubliez pas que la qualité de la vue n’est pas identique chez tout le monde, surtout en fonction de l’âge. Prenez particulièrement en compte votre cible à l’heure de choisir votre police (et sa taille). Si vous vous adressez à un public jeune, c’est chose relativement aisée. Si votre cible est plus âgée, n’oubliez pas certaines difficultés de lecture qui apparaissent avec l’âge, et en plus du style, vous devrez certainement adapter la taille et la couleur de la police afin qu’elle soit aisément lisible par vos lecteurs. Pensez aussi à l’accessibilité lorsque vos textes sont sur un fond: certaines couleurs de fond peuvent rendre la lecture du texte très compliqué (surtout lorsqu’il s’agit d’une photo ou image en fond). Veillez à ce que vos textes soient toujours clairement lisibles, surtout s’ils sont situés sur un fond.
  • Longueur de la ligne: Pensez à lire vous-même vos textes sur différentes tailles d’écran. Si vous lisez votre texte sur un écran d’ordinateur, notamment, veillez à ce que la lecture de vos textes ne vous pousse pas à devoir tourner la tête pour lire une ligne jusqu’au bout. En effet, veillez à ce que vos lignes ne soient pas trop longues et ne poussent pas vos lecteurs à tourner la tête comme dans un match de tennis pour arriver en bout de ligne. La lecture doit pouvoir se faire par mouvement d’oeil uniquement. Sinon, réduisez la taille de vos lignes en mettant votre contenu sur 2 colonnes, ou en laissant plus d’espace sur les côtés du texte, en réduisant la largeur de vos blocs de textes. 
  • Le ton de la police, son style: chaque famille de police peut inconsciemment suggérer un style ou des émotions. Par exemple, une police classique évoquera un style élégant, une style moderne sera caractérisé par une police plus épurée et simple…

Réponse rapide: choisissez vos polices dans Google Fonts, disponibles directement dans Elementor.

  • La meilleure source de polices est Google Fonts. Il y a presque 1000 typographies différentes et toutes sont gratuites. En plus, en choisissant une police de Google Fonts, vous êtes sûrs que le texte s’affichera bien sur tous les écrans, sur tous les appareils. L’avantage est qu’en choisissant les polices de Google Font disponibles de base dans Elementor, vous n’aurez pas à charger de fichier de police supplémentaire, et cela optimise la vitesse de chargement de votre site et évite les problèmes de compatibilité d’affichage des polices dans les navigateurs. 
  • Da Font est un site qui propose une bibliothèque de polices très variées. Attention toutefois, si vous choisissez une police qui n’est pas dans Google Fonts, il faudra installer le fichier de la police au préalable dans votre site WordPress afin que le texte s’affiche dans la bonne police auprès de tous les visiteurs… et cela rajoutera un fichier lors du chargement de vos pages, donc cette pratique n’est pas optimisée pour le rendement de vos sites. Essayez donc d’éviter l’utilisation de polices extérieures à celles fournies de base dans Elementor (qui sont les Google Fonts), chargez vos polices uniquement lorsque cela est réllement nécessaire et que vous ne pouvez pas faire autrement.

 

Pour trouver de bonnes combinaisons:

  • FontPair: site qui indique de bonnes combinaisons de polices de Google Fonts
  • Typ.io: un autre site qui indique de belle combinaisons de polices
  • et enfin cet autre site qui peut aussi vous inspirer

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:

  • Serif: évoque la tradition, les valeurs, la sécurité
  • Sans sérif: évoque la fraîcheur, la modernité, le design épuré, le dynamisme

Il existe également d’autres familles de police:

  • cursive/ manuscrite: simulent une police écriture à la main, évoquant la tradition, l’artisanat, l’authenticité. Si vous optez pour ce style de polices, ne les utilisez qu’avec parcimonie, uniquement dans les titres. Mais évitez de les utiliser dans les paragraphes de textes, car bien que très graphiques, elles ne sont pas très faciles à lire et peuvent fatiguer rapidement la vue et rendre la lecture désagréable.
  • Fantaisies: de la même manière, cette famille regroupe tous types de polices un peu exotiques et originales, qui peuvent très bien être utilisées pour un logo, mais à éviter dans des blocs de texte.
08. Les bonnes pratiques pour réussir le Design d'un site web: Fondamentaux Webdesign CreaMentor 5

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:

  • TTF (TrueType Fonts): format historiquement utilisé, mais assez lourd en poids. Essayez d’éviter de charger ce type de police sur votre site web pour éviter les lenteurs de chargement.
  • OTF (OpenType Fonts): évolution du TTF mais également volumineux pour un site web. Format très utilisé dans le graphisme, mais pas optimisé pour le web.
  • WOFF / WOFF2 (Web Open Font): format adapté pour le web, et compatible avec tous les navigateurs. WOFF2 est une évolution de WOFF, donc encore plus optimisé.
  • EOT (Embedded OpenType Fonts): version compressée de l’OTF, adapté pour le web mais surtout utilisé par Internet Explorer, qui est aujourd’hui obsolète.
  • SVG (Scalable Vector Graphic Fonts): format vectoriel de police, donc très léger et particulièrement adapté au mobile (mais en iOS)
  • Idéal: 2 typographies (max. 3). On peut combiner 2 styles différents: un style manuscrit pour les titres principaux et un style plus “dactylographié” sans sérif et plus moderne pour les titres secondaires et paragraphes. Privilégiez d’ailleurs les familles de police sans sérif pour les longs paragraphes de texte, surtout pour les écrans. Pour les titres, vous êtes un peu plus libres et vous pouvez vous permettre un peu plus d’originalité (sans trop exagérer, bien entendu, il faut que vos titres restent lisibles)
  • Penser à la lecture sur écrans (et sur petits écrans smartphones) avant tout. Donc soignez la taille des polices (pas trop gros, mais surtout pas trop petit)
  • Pour combiner et créer une variation visuelle tout en utilisant la même famille de police: jouez sur les variations de graisse (l’épaisseur), de taille, de style (majuscules, minuscules), utilisez un espace entre caractères différent pour les titres par exemple.
  • Utilisez les espaces: Afin de bien différencier les paragraphes entre eux ou même faire ressortir les titres ou sous-titres par rapport aux paragraphes, n’hésitez pas à laisser de l’espace. Utilisez un interligne (espace entre les lignes) plus serré entre les lignes d’un même paragraphe, et laissez davantage d’espace entre les paragraphes ou entre les titres/ sous-titre. L’idée est de créer des blocs visuels afin d’identifier (sans même lire le contenu) les lignes qui correspondent à des titres, des sous-titres, des blocs de paragraphes.
  • Ne justifier que lorsque c’est vraiment nécessaire. Sur les écrans, éviter la justification, plutôt utilisée dans l’univers journalistique papier.
  • Ne pas toujours tout centrer en version mobile. Un peu, oui. Tout, non, pour éviter un alignement trop répétitif. Vous pouvez très bien centrer les titres, mais privilégiez un alignement à gauche pour les paragraphes de texte, surtout s’ils sont longs.