Bonjour à tous.
J’espère que vos boutiques tournent bien en été et aussi que vous avez appliqué mes derniers conseils en CSS de la semaine dernière pour par exemple changer des petits détails sur votre shop qui ne vous convenaient pas.
Aujourd’hui, je ne vais pas enchaîner sur le CSS et la HTML parce que ce n’est pas tout ce qui fait le WebDesign, mais je vais vous parler des couleurs hexadécimales, comment c’est géré sur ordinateur et aussi comment vous inspirer ou avoir les outils pour vous aider à constituer une charte graphique de meilleure qualité que ce que je vois trop souvent en prestation.
Ce sont des outils très simples que les débutants peuvent utiliser dès aujourd’hui.
Récupérer une Couleur sur le Web
Color Pix
Il y a un outil à installer sur bureau qui ne pèse que dalle et il y a aussi des ressources sur le web que vous pouvez utiliser dès la fin de cette vidéo.
Je suis certain que, même si vous n’avez pas forcément ces outils, que vous avez déjà une charte graphique à peu près établie, avoir ses ressources, les garder sur un favori à l’occasion, ça pourra vous servir.
En tout cas, ce sont des outils que j’utilise plus ou moins souvent, mais je suis amené à les utiliser de manière assez régulière, donc je me suis dit : “Je vais partager mes ressources,” quitte à ce que vous commentiez si vous en utilisez d’autres, ça enrichira le partage de la communauté.
Allez, c’est parti.
Par exemple, je vais démarrer sur le problème de récupérer une couleur en particulier, parce que je sais que vous avez sans doute rejoint une formation, vous connaissez certains shops de mentors, vous voulez parfois vous inspirer, reprendre un petit peu les mêmes codes couleur sans recopier bien sûr, mais vous voulez un peu savoir comment faire.
Là, par exemple ce bleu, comment on fait pour le récupérer ?
Vous pourriez être tenté de faire une impression écran, de copier sur Paint…
Ensuite, j’essaie de recopier, mais ce n’est pas du tout professionnel.
Comment faire ?
CSS
Pour faire le lien avec le CSS de la semaine dernière, vous faites un clic droit et là il y a toutes les informations qui sont notées dans le code.
Vous avez la couleur qui apparaît : 078D7, c’est le code hexadécimal de la couleur.
Vous le recopiez dans la couleur que vous voulez, donc soit dans vos outils de Fastlane, soit autre part sur Photoshop par exemple pour extraire la couleur que vous voulez.
Comment ça marche ce code hexadécimal ?
Hexadécimal, ça veut dire 16, c’est-à-dire que tous les chiffres qui sont après neuf, ça ne revient pas à zéro comme un système de base 10 qu’on utilise dans la vraie vie.
En fait, ça continue avec les lettres A, B, C, D, E, F et ce sont les 10è, 11è jusqu’au 16è chiffre et qui permet de stocker beaucoup plus d’informations.
Là, vous avez six chiffres et au lieu d’avoir un million de possibilités, vous en avez 32.
Ça stocke beaucoup plus de données.
Comment ça marche ?
Par exemple le 000, c’est un noir complet et le FFF c’est du blanc.
Au final, vous savez sans doute que sur ordinateur, il y a les couleurs rouge, bleu, vert qui sont les trois couleurs primaires.
En fait, les deux premiers chiffres concernent la couleur rouge, les deux seconds la couleur verte et ensuite vous avez la couleur bleue.
Exemple, si je fais FF0000, vous avez le rouge qui apparaît.
Si je fais 00FF00, c’est un vert.
Et si enfin, je fais 0000FF, c’est du bleu.
C’est comme ça que se retranscrit le code.
Après, bien évidemment, vous avez tout un scope de nuances de couleur qui est à votre disposition.
HTML Color Codes
Admettons aussi que vous n’êtes pas très confortable avec ce code hexadécimal, mais vous êtes habitué par exemple au système paint ou, etc. qui donne les couleurs.
Par exemple, ici, il y a bien la couleur hexadécimale qui apparaît, mais je sais que si je vais là-dessus, vous avez ce code RGB qui apparaît, donc 245 pour la couleur rouge, zéro pour le bleu et 192 pour le vert.
Vous pouvez notamment le recopier ici, RGB ça apparaît aussi.
Il y a aussi d’autres systèmes de colorimétrie : H, S, L.
Ou encore C, M, Y (cyan, magenta, yellow) : utilisée pour l’impression
Mais je ne vais pas forcément m’étendre dessus.
Ça, c’était un petit cours sur les couleurs.
Pourquoi je fais ce cours ?
Parce que je fais des prestations et combien de fois je vois que par exemple ce bleu-là qui est utilisé n’est pas le même que le bleu du logo ou que le bleu ici.
Tout simplement, ça ne fait pas assez sérieux.
Même si c’est à peu près le même bleu, ça se voit que c’est de l’à peu près et il n’y a pas une image de marque solide qui se détache.
Dans les outils de Fastlane on y accède rapidement, vous avez désormais un accès aux couleurs que vous avez utilisées le plus récemment.
Cela vous évite de mettre des couleurs à peu près qui ne sont pas exactement les mêmes.
Au final, ces outils vous permettent par exemple de vous créer votre charte graphique en amont et de définir des couleurs et de les mettre dans les outils.
Ça fait plus pro que de tâtonner plusieurs fois et de ne pas faire les choses correctement.
Par exemple, je vous parlais de l’outil Fastlane, là vous avez maintenant les couleurs directement disponibles.
Même si vous ne connaissez pas exactement les couleurs hexadécimales, vous n’avez pas besoin de les copier-coller à chaque fois, vous pouvez tout simplement repartir suivant les couleurs.
Ça, c’est vrai que c’est un bon avantage.
Paletton
Un autre outil que je peux utiliser même si honnêtement je l’utilise à 1% de ses capacités, c’est cet outil-là qui est le cercle chromatique.
Avec cet outil, vous pouvez balayer un petit peu les couleurs, voir comment les couleurs sont opposées entre elles.
Vous pouvez faire un code comme ça, après vous pouvez reprendre les codes couleurs qui apparaissent ici.
Vous pouvez jouer ici suivant la blancheur, la noirceur ou des couleurs vives, des couleurs plutôt fades.
Vous pouvez faire absolument tout ce que vous voulez.
Vous avez là la couleur de base, votre couleur primaire potentiellement que vous pouvez réutiliser qui se retranscrit aussi dans cet outil.
Moi, je préfère cet outil personnellement.
Voilà la couleur complémentaire ici.
Là par exemple, l’orange qui est la couleur complémentaire du bleu, vous avez ce fameux système tétraédrique, que je n’utilise pas trop.
Ce n’est pas la mode en WebDesign d’utiliser beaucoup de couleurs, la tendance est au minimaliste.
Mais si vous voulez donner par exemple un effet camaïeu, avec le système camaïeu, vous pouvez avoir des systèmes de nuances ou de teintes qui vous donnent des aspects plus sombres ou plus clairs de la même couleur et ça vous permet si vous voulez avoir cet effet-là un petit peu monoteinte, mais avec une hiérarchisation des couleurs suivant l’importance, ça peut être intéressant.
Material.io
Sinon vous pouvez utiliser l’outil officiel de Google, Material.io, le matériel design qui est dans l’ensemble du minimaliste, etc.
Vous pouvez aussi avoir accès aux couleurs pour ce fameux effet camaïeu dont je vous parlais.
Vous avez par exemple cette première couleur, ensuite une autre, etc.
Vous pouvez vous amuser à prendre la nuance qui vous convient.
L’intérêt de cet outil, c’est qu’il utilise les couleurs de Google, donc les couleurs que Google a testées.
Au lieu d’avoir donc le choix parmi 32 millions de nuances, là vous avez un choix beaucoup plus réduit, donc la rouge avec une nuance 50, 100 du plus clair au plus foncé.
Ça réduit énormément plus les choix et ça vous permet d’avoir des couleurs qui sont professionnelles de base.
Récupérer une Police sur le Web
Un autre outil, mais là, je l’ai testé en amont : WhatTheFont.
Alors, si vous voulez récupérer la police d’un design que vous aimez bien mais vous ne savez pas laquelle c’est, encore une fois, vous pouvez utiliser le code-là quand je vous dis vous faites un clic droit > inspecter.
Voilà, vous avez le font-family et là on voit immédiatement que c’est du Montserrat.
Sinon, admettons que vous n’êtes pas à l’aise avec le code, vous pouvez faire une capture d’écran, vous l’importez ici.
Et là, après il peut vous reconnaître les caractères.
Il faut lui dire quel caractère, puisque là il détecte par exemple le code, il faut lui dire ce que vous voulez qu’il prenne.
Ensuite, si je vais jusqu’à suivant, là après, vous pouvez lui dire “est-ce que telle lettre il reconnaît si c’est un R, si c’est un M, etc.”
Normalement, à la fin, il reconnaît que c’est du Montserrat également.
Alors là, je l’avais testé, il patinait aussi pas mal, donc je ne vais pas m’étendre.
S’inspirer de templates existants
Collect UI
Pour clore cette vidéo, une dernière ressource que j’ai découverte très récemment et que je n’ai pas encore beaucoup explorée, il s’agit de Collect UI.
Collect UI, c’est une bibliothèque d’inspiration pour tous les éléments WebDesign que vous voulez avoir.
Par exemple la page 404, quand vous avez une page qui ne fonctionne pas bien.
Il y a un formulaire de contact, voilà Contact Us ici.
Vous avez du pricing, donc la manière d’afficher les prix.
Par exemple ici, entre plusieurs offres, vous avez le Landing Page qui sera sans doute l’élément le plus intéressant pour vous, donc une page d’atterrissage qui sera bientôt possible de le faire avec le thème Fastlane.
Votre page d’accueil qui est actuellement complètementpersonnalisable avec différentes actions, c’est ce que vous pourrez faire sur une page produit au final, donc n’importe lesquelles de vos pages pourront être des pages complètement personnalisables.
Et vous pouvez notamment vous inspirer de Collect UI pour comprendre comment sont agencés les différents éléments.
Par exemple, ici, il y a cinq colonnes avec une icône à chaque fois, le prix…
Ça peut vous donner des manières de présenter.
Là par exemple, j’ai fait une page de coaching avec des textes assez courts, des images qui sont personnalisées par rapport à mon texte de vente.
Il y a du Slider Parallax, le tout fait professionnel et le produit est montré tout à la fin.
Ce sont des choses qui se font très bien en WebDesign.
J’espère qu’en tout cas avec toutes ces ressources, vous avez eu un bon aperçu que vous pourrez immédiatement appliquer et que ça vous aura permis de comprendre un petit peu mieux le WebDesign et le web de manière générale.
En tout cas, j’attends votre avis.
Si des vidéos comme ça vous plaisent, je ne manquerai pas d’en faire.
Je vous dis à bientôt.
Au revoir.
