Cosmopoly

Un jeu de simulation de vie en ligne

La refonte v2 d'un jeu de rôle social où chaque joueur incarne un « pol » et écrit sa propre vie dans une ville vivante.

Jeux vidéo·Réseau social

À quoi ça ressemble

Cosmopoly est un jeu de rôle social multijoueur : chaque joueur incarne un « pol », un habitant qui étudie, travaille, se marie, fait fortune ou bascule dans le crime.

La v2 réinvente l'interface historique du jeu en une application web moderne, fluide et responsive, sans rien retirer à la profondeur du gameplay d'origine.

Une identité visuelle unique

Couleurs

Typographie

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0 1 2 3 4 5 6 7 8 9 & @ # %

RegularMediumSemiboldBoldExtrabold

Titres qui portent le message

Sous-titres qui structurent

Un texte courant lisible sur tous les écrans, avec des interlignes généreux.

Construit avec des technologies qui durent

Les technos les plus utilisées au monde, qui font tourner Airbnb et Netflix.

Next.jsReactTypeScriptTailwind CSSFramer Motion

Le projet écran par écran

La carte de ville, hub central du jeu
Mon pol : jauges de besoins et situation
Classements des pols et des familles
L'annuaire des pols et leurs interactions
Arbre généalogique et lignée du pol
Les entreprises de la ville et l'emploi
Progression par niveaux et objectifs
1 / 7

Des enjeux concrets, des réponses concrètes

Les enjeux

Rajeunir un jeu culte sans trahir ses fans

Les défis initiaux

Interface d'origine datée, dense, illisible

Nos solutions

Refonte UI complète, gameplay conservé

Les enjeux

Rendre une ville entière lisible d'un coup d'œil

Les défis initiaux

Des dizaines de lieux, métiers et actions épars

Nos solutions

Carte de ville interactive comme hub central

Les enjeux

Retenir le joueur dès ses premières minutes

Les défis initiaux

Univers si riche qu'on s'y perd sans repères

Nos solutions

Objectifs guidés et jauges de besoins visibles

Les choix qui comptent

Trois décisions de conception prises sur ce projet, et pourquoi.

UI

Une ville entière comme terrain de jeu

La ville est le hub central du jeu : une carte interactive où chaque bâtiment (banque, université, tribunal, entreprises, casino...) ouvre sa propre mécanique.

On glisse pour se déplacer et on clique un lieu pour y entrer, au lieu de fouiller des menus.

Un univers dense reste ainsi lisible et explorable dès le premier écran.

UX

La boucle de vie visible en permanence

Chaque pol a des jauges de besoins (faim, soif, vitalité, propreté, stress...) et une fiche de situation (argent, métier, diplômes).

Le joueur voit en un coup d'œil ce qui va bien ou mal et agit depuis les actions rattachées.

C'est le cœur du gameplay de simulation, rendu immédiatement lisible.

UX

Une progression guidée par niveaux

Le joueur gravit une échelle de niveaux (Touriste, Habitant, Citoyen, Notable, Expert), avec une progression chiffrée toujours affichée.

Des objectifs concrets orientent les premières minutes et débloquent de nouveaux privilèges.

De quoi retenir le nouveau joueur sans le noyer dans la richesse de l'univers.

Rapide, mesuré, prouvé

La vitesse n’est pas une promesse : elle se mesure.

Performances : 96 sur 100
Performances
Accessibilité : 93 sur 100
Accessibilité
Bonnes pratiques : 100 sur 100
Bonnes pratiques
SEO : 100 sur 100
SEO

Chargement immédiat

Le contenu essentiel s’affiche en une fraction de seconde : rendu côté serveur, HTML léger, JavaScript réduit au strict nécessaire.

Images optimisées

Formats modernes (WebP/AVIF), dimensions adaptées à l’écran et chargement différé hors de l’écran : aucun octet gaspillé.

Stabilité visuelle

Pas de saut de mise en page pendant le chargement : les tailles sont réservées à l’avance, l’interface reste calme sous les yeux.

Une sécurité qui ne dort jamais

Ce qui tourne en arrière-plan pour que votre projet reste debout, quoi qu’il arrive.

Sauvegardes quotidiennes sur serveur distant

Procédure de reprise testée mensuellement

Monitoring automatique toutes les 5 min du service, alerte auto si service down

Chiffrement SSL

Isolation des environnements de développement

Étape 1 sur 5 : Cadrage

5 étapes pour concrétiser votre projet

Cadrage

Client
PDFcahier-des-charges.pdfPDF · 14 pages
ou

On tient un cabinet d’ostéopathie. L’idée : que nos patients réservent en ligne, sans appeler.

CyberScale

Reçu ! On vous prépare un prototype sous 3j

Vous décrivez votre projet

Un cahier des charges si vous en avez un, quelques paragraphes libres sinon.

0 €libre, le prototype reste à vous

Vous avez lu jusqu’ici ? Continuons ensemble.

Avant de signer, on vous offre sous 3j un prototype de votre projet.

Ajustements illimités, sans surcoûtLivraison et rapport hebdomadaireSatisfait ou remboursé, contractuel

Sans engagement

Questions fréquentes

Parce que nous limitons volontairement notre charge à 3 projets simultanés.

Résultat : des maquettes en 72 heures, 90% des messages répondus dans l'heure, une livraison chaque semaine et des délais garantis contractuellement.

Si nous sommes en retard, vous recevez gratuitement 2 mois de maintenance, d'hébergement, d'articles de blog et de social media.