Les outils que j'ouvre chaque matin

On me demande souvent quels sont « mes outils secrets », comme s'il existait une application miracle qui ferait le travail à ma place. La vérité est plus modeste, et plus rassurante : j'utilise chaque jour la même petite poignée d'outils, presque tous gratuits, et je les connais par cœur. C'est précisément ce qui les rend efficaces.

Parce qu'un outil n'est jamais qu'un pinceau. Il est au service de la méthode, jamais l'inverse. On peut peindre un chef-d'œuvre avec trois couleurs et une brosse usée, et rater complètement une toile avec une palette de cent teintes. Ce qui compte, ce n'est pas la richesse de la trousse : c'est la main qui la tient. Voici donc, très simplement, ce que j'ouvre chaque matin — et le pourquoi de chaque choix.

Pour dessiner : Figma

C'est le premier onglet que j'ouvre, tous les jours. Figma est devenu la table à dessin par défaut du web design, et pour de bonnes raisons. Il fonctionne dans le navigateur, sans rien à installer ; il est collaboratif, ce qui veut dire qu'un client peut venir commenter une maquette en direct, à sa main ; et surtout, il repose sur des composants réutilisables.

Ce dernier point change tout. Vous dessinez un bouton une fois, vous le transformez en composant, et il se répercute partout où vous l'utilisez. Modifiez l'original, tout le reste suit. C'est exactement la logique de cohérence dont je parle à longueur d'année, mais outillée. Et le meilleur : Figma est gratuit pour commencer, largement suffisant pour un site vitrine ou un petit projet.

Pour la typographie : Google Fonts & Fontshare

La typographie porte l'essentiel de ce qu'on voit sur un site. Autant la choisir avec soin — sans se ruiner. Pour ça, j'ai deux sources que je rouvre sans cesse. Google Fonts reste la bibliothèque la plus vaste, entièrement libre, facile à tester et à intégrer. Et Fontshare, plus confidentiel, propose des caractères contemporains d'une qualité remarquable, eux aussi gratuits pour un usage commercial.

Mon réflexe : je tape mon vrai titre et mon vrai paragraphe dans l'aperçu, pas un « Lorem ipsum » abstrait. Une police se juge sur vos mots à vous. Si le sujet du choix des polices vous intéresse, je détaille toute ma démarche dans la méthode des trois voix.

Pour les couleurs : Coolors + un testeur de contraste

Composer une palette à l'œil, c'est possible, mais lent. Coolors me fait gagner un temps fou : on verrouille une couleur qu'on aime, on appuie sur la barre d'espace, et l'outil propose des harmonies autour. En quelques essais, on tient une base cohérente de trois ou quatre teintes.

Mais une palette n'est pas finie tant qu'elle n'est pas lisible. C'est là qu'intervient mon deuxième réflexe : un testeur de contraste. On y colle sa couleur de texte et sa couleur de fond, et il indique le ratio. L'objectif est simple à retenir : au moins 4,5:1 pour un texte courant (le standard d'accessibilité WCAG AA). Une belle couleur qui ne se lit pas n'est pas une belle couleur.

Pour les images : Unsplash / Pexels + un compresseur (Squoosh, TinyPNG)

Pour les visuels libres de droits, deux banques me suffisent : Unsplash et Pexels. Gratuites, de belle facture, utilisables commercialement. Je choisis mes photos avec la même exigence qu'une police : elles doivent servir le propos, pas simplement décorer.

Mais une image, sur le web, ne s'arrête pas à son cadrage. Une photo magnifique de 5 Mo qui met trois secondes à s'afficher fait fuir plus de visiteurs qu'elle n'en séduit. D'où l'outil que je n'oublie jamais : un compresseur. Squoosh (de Google) ou TinyPNG allègent un fichier de 80 % sans perte visible. C'est le geste le plus rentable de tout le processus : la vitesse est une composante du design, pas un détail technique.

Le meilleur outil, c'est celui que vous connaissez par cœur.

Pour s'inspirer sans copier : Awwwards, Godly, et son propre carnet de captures

Nourrir son œil fait partie du métier. Je passe régulièrement sur Awwwards, qui distingue les sites les plus aboutis, et sur Godly, une galerie plus pointue, plus éditoriale. On y voit ce qui se fait de mieux, on comprend des tendances, on repère des idées de mise en page.

Mais attention au piège : s'inspirer n'est pas copier. La différence tient à ce que j'appelle mon carnet de captures — un simple dossier où je range les détails qui m'ont marquée, avec une note sur le pourquoi. « Cette transition parce qu'elle est douce. » « Ce blanc parce qu'il laisse respirer. » Digérées ainsi, les trouvailles nourrissent votre propre style au lieu de le remplacer. Et quand vient une refonte de site, ce carnet vaut de l'or.

Ma matinée type, en résumé

Concrètement, voici la boîte à outils minimale que je rouvre presque tous les jours. Cinq entrées, pas une de plus. Si vous débutez, commencez par celle-ci : elle couvre l'immense majorité des besoins, sans rien débourser.

1. Figma pour dessiner, avec ses composants réutilisables.
2. Google Fonts et Fontshare pour trouver et tester les polices.
3. Coolors pour la palette, doublé d'un testeur de contraste.
4. Unsplash / Pexels pour les images, Squoosh ou TinyPNG pour les alléger.
5. Awwwards, Godly et mon carnet de captures pour l'inspiration.

Rien d'ésotérique, rien de coûteux. Juste des outils sobres, choisis pour ce qu'ils font bien, et pratiqués jusqu'à ce qu'ils deviennent des prolongements de la main. Ajoutez-en un seulement quand un vrai besoin le réclame — jamais parce qu'il brille. Car au bout du compte, ce n'est pas l'application qui dessine un beau site. C'est vous, et l'attention que vous y mettez. L'outil, lui, se contente de ne pas vous ralentir.