Couleurs pour webdesigners et graphistes web

Pour faire un site efficace, il faut aussi qu'il soit "zouli tout plein". Si le contenu est crucial en référencement naturel, il l'est d'abord pour l'internaute! Mettez de la couleur, et des formes pour donner envie de lire... Bref, faites du graphisme web: un autre travail d'expert internet.
Abandonnez la version encyclopédie 26 volumes de grand-maman façon pages blanches, index et définitions. Pour faciliter la tâche ô combien ardue des graphistes et webdesigners, la toile regorge d'outils fort utiles pour gérer les couleurs d'un site. Vite et bien. Voici ma sélection.

Revenez-y: mises à jour au fil de mes découvertes.

Faire un joli site: c'est mieux...

Écrire: l'épice indispensable au bon  positionnement d'un site dans les résultats naturels. Ne jouez pas les Mickey dans Fantasia: les épices, faut savoir s'en servir et bien doser. Pareil pour les textes. Bien sûr, votre indéniable talent d'écrivain rédacteur SEO alimente votre site de contenus uniques et originaux.

...Pour sa performance sur internet

Encore faut-il pour que votre internaute chéri ait envie de la lire,  la prose en question. Cerise s'il interagit avec: Google aime ça!
Que dire du portefeuille du patron si son R.O.I monte en flèche... R.S.I version fr (cf table d'équivalence des termes de l'économie et de la finance).

Pour réaliser une interface de site agréable à l’œil, avec une ergonomie facilitant la navigation (et la transformation), le webdesign s'appuie sur la charte graphique. Une bonne gestion des couleurs est déterminante: contrastes, lisibilité des textes, clarté de la navigation, parcours de l’œil, sémantique visuelle, sans oublier l'harmonie des couleurs pour l'esthétique... Tout compte. C'est du cognitif: on  n'y peut rien.

Pour vous faciliter la vie, j'ai planché. De longues heures -> aimez ou plussez ma page, ça mérite... (je ne me fâcherais pas si vous likez).
Résultats de mon prémâché: Ze dossier du mois Couleurs pour webdesigners et graphistes web

Choisir un outil pour créer les couleurs d'un site

Les meilleurs outils de gestion des couleurs pour le design web se répartissent en plusieurs catégories, suivant l'étape de création de site.

• Au stade de la maquette graphique, vous devez choisir une palette de couleurs pour commencer à plancher sur l'interface avec votre Photoshop préféré. Ou Gimp si vous avez pas les moyens, mais assez de patience pour remplacer les euros (cf astuces webdesigner en bas de page).
• Au stade des prototypes HTML / css qui établit la charte graphique (codes couleurs etc.), il faut récupérer les codes RVB ou hexadécimal pour vos feuilles de style, sans avoir à retaper constamment dans les outils de votre logiciel d'imagerie numérique. Sauf si le concept "coût de production" n'est pas inscrit dans votre prévisionnel... Là, il vous faut d'autres outils:
  • les sélecteurs de couleurs
  • les générateurs de css (ben oui, c'est quand même la feuille de style qui gère le style graphique de la planète web aujourd'hui)

Palettes de couleurs pour vos sites web

Quelques générateurs en ligne impressionnants pour rechercher une palette de couleurs. Pas tous faciles à prendre en main. Certains génèrent des modèles à partir de vos choix, ainsi qu'une planche / nuancier avec les codes couleurs.

... Beuh, n'é où la liste? Hihihi: dans mes tiroirs. Là, je dois partir: R.d.V oblige.
Mise à jour prochaine. Donc abonnez-vous au fil, mettez la page en favori, ou mieux, suivez mes fans pages FaceBook ou Google+ (z'avez le choix).
Comme ça, vous pourrez m'envoyer un petit rappel en cas de retard à l'allumage (notez que la production rémunérée passe avant...).

Sélecteurs de couleurs pour internet

Un bon générateur de couleur doit permettre de:

• choisir la nuance au pixel près
• gérer plusieurs nuanciers (RVB, CMJN, TSV, CMJ... plus rare, mais possible: Pantone, RAL...)
• générer les valeurs (0 à 255) et les codes hexadécimaux (ex: #ceg7aln), avec copie en presse-papier facile
• et surtout: pomper le code hexa grâce à la pipette, pour reprendre les couleurs d'une page existante!

La boîte à couleurs

Le meilleur des sélecteurs depuis des années est aussi très léger. C'est un petit logiciel gratuit si efficace, que les pages qui le référencent sur internet ne se comptent plus. La mienne en plus ;-).
Rendons ses lauriers à son développeur Benjamin Chartier, également auteur d'un site très instructif sur la couleur. Pourpre.com. Une mine pour les artistes qui souhaiteraient approfondir leur connaissance des couleurs.
Autre gros avantage: son interface est toute petite. Poids plume, et discrétion, avec option "rester devant"... Parfait pour les malades qui travaillent avec 100 fenêtres en même temps, sur un netbook dalle 10 pouces...

• Téléchargez le sélecteur de couleurs La boîte à couleurs

Les extensions de navigateurs

Au chapitre "j'ai tous mes outils sous la main et pas besoin d'aller les chercher à l'atelier", il existe les modules complémentaires à ajouter à votre navigateur préféré. Plug-ins ou Add-ons pour les traîtres à la langue de Molière. Pour toutes les tâches liées à la conception de sites. Ils étendent notoirement la productivité du webmaster et du créateur de sites. Attention, certains peuvent provoquer des ralentissements, voire des plantages.
Il peut être préférable d'opter pour un logiciel indépendant comme la boîte à couleurs, suivant vos habitudes de travail ou l'équipement dont vous disposez.

Colorzilla pour Mozilla (ou Chrome)

En tête de liste des meilleurs sélecteurs de couleurs pour Mozilla, et en français! 284 000 utilisateurs à ce jour, et score de notation 5 étoiles. Un favori des développeurs, qui utilisent le bouton pipette pour copier vite fait le code hexa des maquettes HTML en phase d'intégration... Un favori aussi des webdesigners: en plus du bouton pipette sur la barre d'outils, d'autres options.
Notamment: sélecteur de nuance couleur, chargeur de palettes diverses (W3C, couleurs web garanties....). Et un impressionnant analyseur de couleur DOM, qui restitue l'intégralité du nuancier d'un site, en listant les couleurs par codes, avec leur implémentation dans le source (tags HTML, nom de feuille de style correspondante...). En prime, un clic sur la petite loupe de la référence couleur vous positionne exactement à l'endroit de la page où la couleur est utilisée.
Bémol sur le sélecteur de couleur: grande fenêtre, incompatible sur petits écrans.

• Installer Colorzilla sur Mozilla

Si la copie de code par pipette suffit, choisissez un sélecteur plus light: mot clé "palette" dans le catalogue des modules pour Mozilla.

Générateurs de css 

Ces outils permettent de générer le css associé aux attributs et aux couleurs choisies: bordures, textes, fonds. Et même formes, dégradés et transparence, effets pour les générateurs de css3. Attention, tous les navigateurs n'interprètent pas l'ensemble des propriétés de CSS3 (ni css2 d'ailleurs). De plus, le résultat n'est pas uniforme de l'un à l'autre.Il vous faudra sacrifier le délire graphique à la meilleure portabilité...

Ultimate gradient CSS3 editor

Un générateur de dégradés css3, en ligne, avec de sacrées options: modèles de dégradés pour démarrer, ajout de nuances, orientation, opacité, échelle de dégradé... et coche IE (c'est là qu'on voit que Microsoft, à son habitude, laisse les copains filer devant pour essuyer les plâtres...).
Encore plus fort: import de modèle depuis une image stockée ou un css existant (champ copie-colle) pour retravailler les effets, choix du format (hex / rgb etc.)...
Ceci dit, allez-y molo sur la complexité du dégradé. Au risque de pondre une feuille de style de 50 ko, rien que pour un bouton...
Le bon plan: le générateur est développé par Colorzilla -> accès rapide depuis le bouton sélecteur du navigateur..

• Tester le générateur de dégradé CSS3 de Colorzilla

Astuces de webdesigner

Faux texte au km pour maquettes HTML/css

On pense à se servir d'un générateur de texte Lorem ipsum : indispensable pour voir le comportement de vos prototypes HTML et de vos feuilles css, avec des pages remplies à bloc. Surtout si vous ambitionnez le full responsive. En français, site web adaptatif, qui s'affiche correctement quel que soit l'appareil: écran 21 pouces (gâté va), tablette, smartphone (on peut rêver) ...

GIMP: logiciel gratuit, retouche d'image et dessin

C'est l'un des meilleurs logiciels d'image gratuits. Il permet de faire de la retouche photo, mais aussi de créer vos propres visuels et vos graphismes (internet ou Print).
Issu du monde de l'Open Source (développement communautaire - logiciels libres), il n'y a pas vraiment d'éditeur "officiel".
Tout le monde peut y aller de sa version améliorée, en téléchargeant les codes sources gratuits de GIMP, et en ayant les compétences requises.
En attendant de développer votre GIMP personnalisé:

• télécharger une version en français de GIMP,
• lisez l'article et les avis sur Gimp, sur Commentçamarche.