SaaS de création d’icônes

IconiseSaaS de conception d’icônes

Un atelier guidé pour explorer des pistes graphiques, conserver les décisions et affiner une icône d’application jusqu’à son export.

Iconise5 / 8
Step 5

Choose a direction

Keep the decision that guides the next iteration.

Retained decisionOptionC

Vue d’ensemble

Une idée d’application, une icône qui prend forme

Le problèmeCréer une icône cohérente exige de cadrer une identité, comparer des pistes et suivre les choix. Sans parcours structuré, les itérations et leurs décisions se dispersent.

La solutionIconise relie brief, directions visuelles, exploration et affinage dans huit étapes guidées, suivies de la finalisation. Décisions et itérations restent associées au projet.

Workflow utilisateur

Un brief exploitable

Le brief décrit l’application, son identité et ses préférences graphiques ; il alimente les étapes suivantes.

1 / 4: Cadrer le projet. Étape précédente / Étape suivante

Architecture technique

Le serveur Next.js vérifie la session et le workspace, puis appelle les services métier. Les projets sont persistés via Drizzle et PostgreSQL ; Gemini et Stripe utilisent des adaptateurs séparés.

Interface React

React / Next.js

Écrans et interactions du parcours
Requêtes

API Next.js

Next.js

Sessions, autorisation et routes
Services métier

Services métier

TypeScript

Workflow, génération et crédits
Accès aux données

Persistance

PostgreSQL

Projets, états et historique par workspace via Drizzle
  • Interface React: React / Next.js. Écrans et interactions du parcours Requêtes.
  • API Next.js: Next.js. Sessions, autorisation et routes Services métier.
  • Services métier: TypeScript. Workflow, génération et crédits Accès aux données.
  • Persistance: PostgreSQL. Projets, états et historique par workspace via Drizzle

Défis techniques

01

Revenir en arrière sans incohérence

Contrainte

Modifier une décision ancienne peut invalider les choix faits dans les étapes suivantes.

La solution

Un graphe de transitions marque les étapes dépendantes comme obsolètes tout en conservant les itérations précédentes.

02

Fiabiliser les crédits de génération

Contrainte

Une génération distante peut échouer, être relancée ou recevoir des réponses concurrentes.

La solution

Réservations transactionnelles, clés d’idempotence et transitions conditionnelles encadrent les débits et restitutions.

03

Préserver le rendu dans un SVG

Contrainte

Vectoriser un master matriciel peut dégrader les contours, les dégradés ou la taille du fichier.

La solution

Plusieurs tracés sont comparés au rendu source, avec un repli matriciel dans le SVG si nécessaire.

04

Isoler les données multi-comptes

Contrainte

Un identifiant de projet envoyé par le navigateur ne constitue pas une preuve de possession.

La solution

Les lectures et mutations passent par un périmètre d’autorisation centralisé avant l’accès aux repositories.

Stack technique principale

Next.jsTypeScriptPostgreSQLDrizzle ORMBetter AuthGoogle GeminiStripeSharp

Résultats et enseignements

Parcours guidé et versionné

Huit étapes de création, suivies de la finalisation, avec décisions et itérations conservées par projet.

Une génération configurable

Une voie de génération avec Gemini, validation des images et gestion des crédits, activable selon la configuration.

Des exports pour l’application

Téléchargement du master PNG, d’un SVG dérivé pouvant intégrer le raster, et d’un pack de favicons multi-formats.