Introduction

Astro Nova est un projet né d’une frustration personnelle : voir l’interface mobile d’OGame — jadis une référence — se dégrader au fil des années. Avec l’ambition de moderniser cette expérience, j’ai lancé Astro Nova, un projet personnel orienté design system et mobile-first. L’objectif : réinventer une expérience utilisateur fluide, tactile et esthétique, en phase avec les standards actuels.

Contexte

L'HÉRITAGE D'OGAME : UN MODÈLE À BOUT DE SOUFFLE

OGame a marqué toute une génération grâce à son gameplay addictif et sa profondeur stratégique. Pourtant, son interface, pensée initialement pour le desktop, a peu évolué. La version mobile, simple adaptation responsive, souffre aujourd’hui d’un manque d’ergonomie flagrant qui nuit à l’expérience utilisateur.

UN BESOIN DE MODERNITÉ : LE MOBILE-FIRST COMME RÉPONSE

Face à ces limites, Astro Nova s’inscrit dans une logique inverse : partir du mobile pour proposer une expérience native, pensée dès la base pour les usages tactiles. Cette approche permet, selon notre expérience, de repenser les mécaniques d’interaction et de navigation avec une attention particulière portée à la lisibilité et à la fluidité.

Interface de jeu spatial futuriste avec écrans de recherche et de construction — Version mobile de OGame

Construire une interface moderne

UNE PHILOSOPHIE MOBILE-FIRST ASSUMÉE

Astro Nova ne se contente pas d’être responsive : tout est pensé pour une expérience fluide sur mobile. La navigation s’appuie sur des composants “card-based”, des modals intuitifs et des interactions naturelles qui renforcent la sensation d’utiliser une application native plutôt qu’un simple site web compressé.

TAILWIND CSS : L’ACCÉLÉRATEUR DE DÉVELOPPEMENT

Pour garantir rapidité et cohérence, Tailwind CSS a été la pierre angulaire du projet. Ses classes utilitaires permettent une grande granularité dans le design (typographie, couleurs, espacements), tout en assurant une cohérence parfaite grâce à un design system rigoureusement appliqué.

Un design system structuré pour la scalabilité

COMPOSANTS RÉUTILISABLES : LA CLÉ DE LA COHÉRENCE

Dès le début, l’interface a été construite autour de composants modulaires : boutons, cartes, menus, onglets… Chaque élément a été conçu pour être réutilisé facilement, garantissant à la fois rapidité d’implémentation et cohérence graphique sur l’ensemble du projet.

UNE IDENTITÉ VISUELLE FORTE : PHOSPHOR ICONS EN PILIER

Le choix de Phosphor Icons n’est pas anodin : cette librairie open-source propose une grande richesse d’icônes au style uniforme et épuré, parfaitement adapté à l’univers spatialisé d’Astro Nova. Ce choix permet une lecture rapide des informations, indispensable pour un jeu de gestion.

Interface de jeu spatial avec écrans de base planétaire et ressources — Version actuel de Astro Nova

Du développement au design

DU CODE VERS FIGMA : UN RETOUR STRATÉGIQUE

Contrairement aux méthodes classiques où le design system précède le code, Astro Nova a pris le chemin inverse : l’interface a d’abord été développée avec Tailwind et Bolt, avant d’être rebasculée dans Figma via le plugin HTML to Design. Cette approche a permis d’affiner la direction artistique après coup, avec une vision globale et unifiée.

FORMALISER LES FONDAMENTAUX : TYPOGRAPHIES, PALETTES, COMPOSANTS

Une fois dans Figma, l’ensemble du système graphique a été structuré : palettes de couleurs, grilles, typographies, composants atomiques… Cette étape a permis de stabiliser l’identité d’Astro Nova tout en préparant les futures extensions du projet (cartes bâtiments, recherches, défenses…).

Notre expérience avec cet outil

Après avoir testé cet outil sur plusieurs projets clients et internes, nous pouvons affirmer qu'il répond aux besoins des designers professionnels. Notre équipe l'utilise régulièrement dans son workflow quotidien, ce qui nous permet, selon notre expérience, de valider son efficacité en conditions réelles de production.

Points testés en détail :

Performance sur des fichiers volumineux (500+ frames)
Compatibilité avec les design systems complexes
Stabilité lors d'utilisations intensives
Intégration dans un workflow d'équipe

Points d'attention (testés en conditions réelles)

Dans un souci de transparence, voici les limitations que nous avons identifiées lors de nos tests :

Temps de traitement pouvant être allongé sur des fichiers très volumineux
Nécessite une connexion internet stable pour certaines fonctionnalités
Courbe d'apprentissage pour les utilisateurs débutants

Conclusion

Astronova est bien plus qu’une simple refonte d’interface : c’est un manifeste pour un design repensé, où chaque décision est guidée par l’expérience utilisateur mobile. En partant du tactile, en s’appuyant sur des outils modernes comme Tailwind et Figma, et en structurant chaque élément autour d’un design system cohérent, Astro Nova offre une nouvelle vision des jeux de gestion — plus fluide, plus élégante, plus adaptée aux usages contemporains.

‍