Css Ninja

Une marketplace qui vend des UI kits et des sets de templates HTML à des développeurs. La page d’accueil doit montrer 156 produits sans devenir un catalogue, et prouver la qualité en affichant les produits plutôt qu’en les décrivant.

Site webUX / UIInterface produit

ClientCss Ninja

Année2022

RôleDesign + UI

Durée7 semaines

Demander un audit ↗Parler d’un projet similaire

La page d’accueil, de haut en bas : le collage de composants réels, les gammes de templates, les meilleures ventes, la sélection, les dashboards, les landing pages et le produit mis en avant.

Détails du projet

TypeSite marketing · marketplace

SecteurUI kits · templates HTML

ClientCss Ninja

RôleDesign du site, UI et système de cartes

Année2022

Durée7 semaines

StatutLivré

LivrablesSystème de page d’accueil, carte produit, quatre rails de listing

Polices

InterRoboto Mono

Couleurs

Réalisé avec

Figma

Vue

Tailwind CSS

TypeScriptSwell

Stripe

Une seule carte produit porte tous les listings — prix, badges de framework, tag, vignette — donc un nouveau rail est une requête, pas une mise en page.

Le besoin

Vendre des composants à ceux qui jugent les composants.

Les acheteurs sont des développeurs et des designers : ils évaluent un kit en quelques secondes et ne pardonnent aucun détail. Une page de marketplace qui leur est destinée court deux risques opposés : un haut de page qui ne dit rien de concret, ou une grille si dense que les produits deviennent du papier peint. Et avec 156 articles entre dashboards, landing pages et freebies, la page devait rendre l’étendue visible sans obliger personne à fouiller le catalogue.

Ce que j’ai fait

Haut de page

La promesse tient en une ligne, et la preuve est à côté : un collage de composants réels — carte de profil, ligne de notification, calendrier, barre d’outils, panneau de messages. Les produits sont l’illustration ; rien n’est dessiné.

Carte

Une seule carte produit partout : vignette, nom, badges de framework, tag, prix et bouton d’achat sombre. Le prix est toujours au même endroit, et c’est ce qui rend une grille de neuf cartes lisible au lieu de décorative.

Rails

Quatre sections de listing avec leurs propres titres — meilleures ventes, sélection, dashboards, landing pages — chacune avec un lien voir tout : le catalogue est échantillonné, pas déversé.

Gammes

Entre les rails, deux blocs explicatifs alternés (templates HTML élite, templates admin) montrent une pile d’écrans réels en perspective, ce qui donne à l’œil un point de repos entre les grilles.

Mise en avant

Un produit obtient une pleine largeur avec son prix posé sur l’image, et la page se termine sur les freebies — l’entrée sans risque pour un premier achat.