Astronova : créer une UI mobile-first inspirée des meilleures pratiques

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 de repenser les mécaniques d’interaction et de navigation avec une attention particulière portée à la lisibilité et à la fluidité.

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.

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…).

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.

‍

LIENS PRATIQUES

Jouer à Astronova
Tailwind CSS
Phosphor Icons
Figma
Plugin HTML to Design
OGame