Typographie et couleur
Ta police raconte plus de choses sur ton entreprise que ton logo, et pourtant huit sites sur dix utilisent la même. Fontshare propose des caractères de qualité fonderie, gratuits en usage commercial, ce qui rend l’excuse du budget difficile à tenir. Côté couleur, Realtime Colors change complètement la méthode : au lieu de choisir sur une roue chromatique, tu vois ta palette appliquée en direct sur une vraie landing page. C’est là qu’on découvre qu’un bleu superbe en pastille devient illisible en texte courant.
- uicolors.app : Transforme une couleur en échelle Tailwind complète, de 50 à 950.
Icônes, illustrations et médias
La règle est simple : un seul pack par projet. Des icônes venues de trois familles différentes se voient immédiatement, même quand personne ne sait dire pourquoi le site fait bricolé. Lucide est le choix par défaut en React, Phosphor gagne dès que tu veux un ton précis grâce à ses six graisses, et Iconify sert de moteur de recherche quand tu cherches une icône vraiment inhabituelle.
Performance, SEO et conversion
Quatre-vingt-dix pour cent du poids d’un site, ce sont ses images, et Squoosh règle ça en quelques minutes dans le navigateur. Ensuite viennent les outils qui répondent à la seule question qui compte vraiment : pourquoi ce site ne convertit pas. Microsoft Clarity donne des heatmaps et des enregistrements de sessions, sans limite et sans carte bancaire. C’est probablement l’outil le plus sous-utilisé de toute cette liste au regard de ce qu’il coûte.
- wave.webaim.org : Audit d’accessibilité en un clic : contrastes, alt manquants, hiérarchie des titres.
- responsively.app : Ton site sur dix tailles d’écran en même temps, scroll synchronisé.
L’ordre dans lequel les utiliser
Ces vingt outils ne servent pas au même moment. La typographie et la palette se décident avant d’écrire la première ligne de code, parce que revenir dessus plus tard veut dire reprendre chaque composant. Les icônes se choisissent une fois, au début, et ne changent plus. La compression et les audits arrivent en dernier, juste avant la mise en ligne.
Une seule exception : Clarity s’installe le jour de la mise en ligne, pas trois mois plus tard quand tu te demandes pourquoi personne ne remplit le formulaire. Sans données de départ, tu n’auras rien à comparer.
