GB

Lancé · Logiciel Windows · Open source

PowerOFF. Un utilitaire Windows. Livré en deux jours.

Minuteur d’arrêt automatique pour PC. Sprint design et développement, en collaboration continue avec un développeur. Open source, gratuit, sans publicité.

Rôle
UI Designer · Web Developer
Contexte
Utilitaire Windows open source
Livrables
UI design Figma, landing page (IA + HTML/CSS/JS)
Durée
2 jours, en binôme
Voir le site(nouvel onglet)
La landing page de PowerOFF et l’interface du minuteur, sur un ordinateur portable

01 · Brief

Un minuteur. Un écran. Pas plus.

Le besoin tient en une phrase : programmer l’arrêt d’un PC sans cliquer dans dix menus. L’utilisateur définit un minuteur ou une heure, choisit l’action (arrêt, redémarrage, veille) et valide. C’est tout. Le piège classique aurait été d’en faire une mini-app avec onboarding, profil utilisateur et paramètres avancés. Refusé.

02 · Décisions

Trois décisions pour livrer en deux jours.

La vitesse n’est pas un accident, c’est une suite de choix. Trois décisions ont permis de couper le scope sans couper la qualité.

  1. 01Composants WinUI natifs.

    Approche classique

    Bibliothèque UI sur mesure

    Composants maison : plus de contrôle sur le design, mais 3 à 4 fois plus de temps d’implémentation.

    PowerOFF

    Design system Windows intégré

    Familiarité instantanée pour l’utilisateur, implémentation directe pour le développeur.

  2. 02Dark mode uniquement.

    Approche classique

    Light + Dark

    Deux thèmes à designer, deux à tester, deux à maintenir. 50 % de travail en plus.

    PowerOFF

    Dark only, assumé

    L’app tourne sur un PC, souvent le soir. Le sombre s’aligne sur l’usage réel.

  3. 03Exécution en parallèle.

    Approche classique

    Design puis Dev puis Landing

    Séquentiel : chaque étape attend la précédente. Goulots d’étranglement garantis.

    PowerOFF

    Dev ∥ Landing IA puis personnalisation

    Le développeur code l’app pendant que je génère la landing avec l’IA, puis la personnalise en HTML/CSS/JS.

03 · Workflow

Trois temps. Deux personnes. Aucun goulot.

Le sprint tient grâce à un workflow strictement parallèle : pas d’attente, pas de passation formelle, pas de goulot. Pendant que le développeur code l’app .NET, je code la landing en HTML/CSS/JS. On se synchronise en continu sur Discord.

Sprint en 3 temps

  1. 01

    Design Figma

    Jour 1. UI dans Figma, composants WinUI natifs, dark mode unique. Décisions de scope envoyées au développeur au fil de l’eau.

  2. 02

    Dev ∥ Landing IA

    Jours 1 et 2. Le développeur implémente l’app .NET pendant que je génère la landing avec l’IA, puis la personnalise en HTML/CSS/JS. Travail 100 % parallèle.

  3. 03

    Lancement GitHub

    Jours 2 et 3. Documentation, page GitHub, release open source. Pas de phase « QA + correctifs » : on a testé en continu.

04 · Interface

Cyan sur noir. Familier sur Windows.

Une palette qui s’efface devant la fonction. Le cyan vibrant pour signaler l’action, le noir profond pour s’ancrer dans l’écosystème Windows. Trois niveaux typographiques en Segoe UI, la police système : le choix logique pour rester natif.

Palette

  • Background#0A0A0AFond principal · ancrage
  • Surface#1A1A1ACards · panneaux secondaires
  • Cyan Blue#00D4FFAction · CTA · accents
  • White#FFFFFFTexte · icônes

Typographie

  • Titre · Segoe UI 32/40 · Semibold

    PowerOFF

  • Minuteur · Segoe UI Light 48/56

    01:30:00

  • Body · Segoe UI 14/20 · Regular

    Segoe UI parce que c’est la police système de Windows. Pas de téléchargement, pas de texte invisible au chargement, pas de friction.

05 · Implémentation

Deux écrans dans l’app. Une landing pour porter l’open source.

Trois livrables visibles : la configuration et le décompte côté app Windows, et la landing qui sert de vitrine open source pour l’adoption sur GitHub.

Configuration2 écrans · paramétrage

Tout sur un seul écran.

  • Sélecteur d’action (arrêt, redémarrage, veille) en haut, minuteur en dessous, bouton de validation en bas. Un parcours linéaire, lisible en deux secondes.
  • Composants WinUI natifs : familiarité instantanée pour l’utilisateur Windows, aucune courbe d’apprentissage.
  • Pas d’onboarding, pas de tutoriel. L’app fait exactement ce qu’elle dit.
  • PowerOFF : écran principal, heure d’arrêt et raccourcis 5 min, 30 min, 1 heure
  • PowerOFF : sélection du minuteur

Feedback1 écran · décompte

Le compte à rebours en grand.

  • Compteur géant en Segoe UI Light 48 px, visible depuis l’autre bout de la pièce. Pas besoin de revenir vérifier.
  • Bouton d’annulation toujours visible : réversibilité immédiate, zéro stress.
  • Cyan vibrant pour signaler que l’action est en cours, pas qu’elle a échoué.
PowerOFF : compte à rebours avant l’arrêt, avec bouton d’annulation

Distribution1 page · open source

Une landing pour porter l’adoption.

  • Génération initiale par IA (structure et premier jet du texte), puis personnalisation en HTML/CSS/JS pour le ton et l’identité visuelle.
  • Hébergée sur GitHub Pages : aucun coût d’infrastructure, déploiement immédiat depuis le dépôt.
  • Même direction artistique que l’app (cyan sur noir), pour la cohérence entre la vitrine et le produit.

Voir la landing en ligne (nouvel onglet)

Landing page de PowerOFF

06 · Bilan

Deux jours. Un sprint à deux.

Sprint design et développement, en collaboration continue avec Thomas P. Voici ce qui a été livré, ce qui a marché dans la méthode, et ce que je referais autrement.

  • Livré

    App Windows, landing et GitHub.

    • UI Figma complète (configuration et décompte)
    • Landing page (IA puis personnalisation HTML/CSS/JS)
    • Page GitHub avec documentation
    • Lancement open source, gratuit, sans publicité
  • Ce qui a marché

    L’exécution en parallèle paie.

    • Composants natifs = vitesse. Réutiliser le design system de Windows a divisé le temps d’implémentation par 3.
    • Dev et landing IA en parallèle. Pas d’attente, pas de goulot. On s’envoyait des mises à jour en continu.
  • Ce que je referais

    Un test utilisateur, même rapide.

    • Aucun test avant la sortie. Pour un outil aussi simple, ça passe, mais 15 minutes avec 2 ou 3 personnes auraient confirmé que le sélecteur d’action est bien compris.
    • Le mode clair, oublié. Décision assumée, mais quelques retours sur GitHub le demandent. À ajouter en v2.

Un projet similaire en tête ?

La suite, on l’écrit ensemble

Écrivez-moi quelques lignes : je vous réponds personnellement sous 24 h ouvrées.

Me contacter