Nouveau design ZoneIA : refonte complète de l’annuaire IA

ZoneIA, l'annuaire francophone des outils d'intelligence artificielle, adopte un nouveau design. Accueil, annuaire, fiches outils et navigation mobile ont été repensés pour trouver et comparer plus vite parmi plus de 280 outils IA. Voici ce qui change, ce qui reste identique, et la stack technique derrière cette refonte.

Mise à jour du 2 octobre 2026 : la page d'accueil adopte un style plus éditorial, avec un nouveau bandeau et des catégories plus compactes.

En bref

• Quoi : une refonte complète du design (accueil, annuaire, catégories, fiches, mobile).
• Pourquoi : filtrer, comparer et décider plus vite dans un catalogue qui grandit.
• Ce qui change : un accueil plus éditorial, des filtres avec compteurs, le classement N°1 à N°3, des aperçus en capture d'écran, une fiche outil structurée et un menu mobile en tiroir.
• Ce qui ne change pas : les adresses des pages, les contenus, les avis et le référencement gratuit.
• Sous le capot : Next.js 16, React 19, Tailwind CSS 4, Prisma 7 et shadcn/ui.

Avant / après : ce qui change d'un coup d'œil

L'ancienne page d'accueil centrait tout sur un titre et quatre compteurs. La nouvelle va droit à l'action : une promesse, une barre de recherche, une sélection d'outils et les catégories en un coup d'œil.

À gauche l'ancien accueil, à droite le nouveau.

Une page d'accueil plus éditoriale

La page d'accueil s'ouvre sur « Trouvez l'outil IA idéal pour passer de l'idée à la réalisation. », composé dans une police à empattements au ton plus éditorial. Juste en dessous : une barre de recherche avec un vrai bouton « Rechercher », puis des recherches populaires en un clic.

À droite, une illustration présente quatre outils phares (ChatGPT, Midjourney, Notion AI et Runway), avec une annotation manuscrite : « Des outils sélectionnés et analysés pour vous ».

Le nouveau bandeau : titre, recherche et sélection d'outils.

Le style gagne aussi en sobriété : moins de halos lumineux et de dégradés, des bordures fines, des ombres discrètes et moins de pastilles. La page enchaîne ensuite :

• Six catégories en cartes compactes : icône, titre, courte description, nombre d'outils et flèche, les autres catégories restant listées dessous ;
• Les outils en tendance, avec des badges N°1, N°2 et N°3 fondés sur les votes de la communauté (7 derniers jours, complétés par les plus plébiscités) ;
• Les derniers outils ajoutés.

Les catégories, chacune avec son icône, sa description et son nombre d'outils.

Un annuaire plus facile à filtrer

L'annuaire s'organise autour d'une colonne de filtres et d'une liste de résultats. Chaque ligne affiche logo, note, description, catégories et, quand elle existe, une capture d'écran de l'outil.

• ① Filtres à cases à cocher (catégories, type de tarif, plateformes) avec le nombre d'outils concernés.
• ② Onglets : Tous, Les mieux notés, Nouveautés, Les plus populaires.
• ③ Tri par popularité, note, date ou ordre alphabétique (popularité par défaut).
• ④ Date de dernière mise à jour de l'annuaire.
• ⑤ Filtres actifs, retirables d'un clic.

Les filtres sont de simples liens : une recherche filtrée se partage par URL et fonctionne même sans JavaScript.

Une fiche outil mieux structurée

La fiche est la page où se prend la décision. Elle réunit l'essentiel sans défiler : note, catégories, tarif et bouton « Visiter le site ».

• ① Navigation collante : Présentation, Avantages et limites, Médias, Avis, Alternatives, Ressources.
• ② Bouton « Visiter le site », avec le lien partenaire signalé le cas échéant.
• ③ Galerie de captures placée en premier pour voir l'interface.
• ④ Informations pratiques : tarification, catégories, plateformes, site officiel, mise à jour.

Toutes les sections sont sur la même page, rien n'est masqué derrière un onglet : la lecture reste fluide et la page reste complète pour les moteurs de recherche. Exemple en direct : la fiche d'ElevenLabs.

Pensé pour le mobile

Le menu passe dans un tiroir latéral et, sur l'annuaire, les filtres s'ouvrent dans un panneau dédié avec les mêmes compteurs. Sur l'accueil, le titre et la recherche restent en tête, et l'illustration des outils passe sous la barre de recherche.

Sous le capot : la stack technique

ZoneIA repose sur Next.js (App Router) et React, avec Tailwind CSS 4 pour le style, Prisma pour l'accès à la base PostgreSQL et TypeScript partout.

Mises à jour majeures

• Next.js 16.2 → 16.3 et React 19.2 → 19.3.
• Prisma 5.22 → 7.10 : nouveau générateur de client et connexion via l'adapter natif pg.
• TypeScript 5.9 → 6.0. La version 7 a été testée, mais l'outil de lint n'est pas encore compatible : nous restons en 6.0.
• lucide-react 0.575 → 1.49 (icônes de marque remplacées par des SVG), sharp 0.35 et les types Node.js alignés sur Node 24.
• Le lint reste sur ESLint 9 : plusieurs plugins ne gèrent pas encore la version 10.

Un design system plus cohérent

Les composants reposent sur shadcn/ui et Radix UI (tiroirs, menus, listes déroulantes), accessibles au clavier, avec class-variance-authority pour décliner boutons, badges et cartes. La palette devient un jeu de tokens Tailwind : un seul endroit pour changer les couleurs.

Côté typographie, les titres restent en Plus Jakarta Sans et le texte en Manrope. Le grand titre de l'accueil passe en Source Serif 4 et l'annotation manuscrite en Caveat : ces deux polices ne sont chargées que sur la page d'accueil.

Au passage, un bug a été corrigé : 463 occurrences d'une ancienne syntaxe Tailwind ne produisaient aucun arrondi, boutons et cartes restaient carrés. Elles utilisent désormais les utilitaires Tailwind 4.

Performance

• Les compteurs des filtres sont mis en cache 5 minutes, au lieu de quatre requêtes à chaque clic.
• Le visuel du bandeau pèse 66 Ko en WebP, décliné par Next.js à la taille de chaque écran.
• Les 19 visuels sont des WebP de 11 à 68 Ko, optimisés avec sharp.
• Les tags des cartes sont rendus côté serveur, sans mesure du DOM dans le navigateur.

SEO et GEO

Les adresses, les balises canonical et les données structurées (CollectionPage, ItemList, FAQPage, SoftwareApplication, BreadcrumbList) sont conservées. Chaque page garde un seul <h1>, et les pages filtrées ou triées restent en noindex. Les fiches exposent toujours leur contenu en HTML complet, lisible par les moteurs de recherche comme par les moteurs de réponse IA.

Comment les visuels ont été réalisés

Les captures sont réalisées avec Playwright, puis montées avec sharp (recadrage, repères numérotés, avant/après) et hébergées sur Cloudflare R2. Les illustrations des catégories ont été générées par IA (outil d'image de ChatGPT), puis optimisées pour le web. Le visuel du bandeau d'accueil a été généré avec gpt-image-2 à partir d'une maquette : c'est une illustration, ses notes et nombres d'avis ne reflètent pas ceux de l'annuaire. Les logos et captures des fiches restent ceux des outils référencés.

Questions fréquentes

Les adresses des pages ont-elles changé ?

Non. Vos liens, favoris et le référencement existant restent valides.

Mes avis, votes et favoris sont-ils conservés ?

Oui. Seule l'interface change, pas les données.

Le référencement d'un outil est-il toujours gratuit ?

Oui. Vous pouvez référencer votre outil IA gratuitement, après validation éditoriale. La mise en avant sponsorisée reste optionnelle et toujours signalée.

Un détail vous gêne ?

Écrivez-nous via la page de contact. Pour tester le nouveau parcours, rendez-vous dans l'annuaire des outils IA ou sur la page d'une catégorie.