Livrer 23 thèmes et 23 icônes d'app en un week-end

Les thèmes devaient être un travail de samedi après-midi. Ils ont pris le week-end, et la partie intéressante n’était pas les couleurs.

Le point de départ

L’app utilisait déjà des jetons sémantiques plutôt que des couleurs brutes : fond, panneau, texte, atténué, filet, accent, et une échelle d’opacités d’accent de 8 % à 85 %. Rien dans l’interface ne renvoie à une valeur hexadécimale. Cette décision, prise tôt pour des raisons ennuyeuses, est ce qui a fait de 23 thèmes un week-end plutôt qu’un mois.

Un thème est donc un seul enregistrement : un nom, un fond, un accent, et l’échelle dérivée. Midnight, Graphite, Matcha, Cobalt, Amber, Rosewood, Paper, Terminal, Slate, Plum, Sand, Nord, et onze autres. La dérivation est du code : un nouveau thème demande une quarantaine de secondes de travail une fois les deux couleurs d’ancrage choisies.

Le piège, c’était le contraste. Générer l’échelle d’opacités mécaniquement produit un thème Terminal où le texte pâle est invisible et un thème Paper où l’accent est trop clair pour se lire sur du blanc. Deux des 23 ont demandé un réglage à la main sur quatre jetons chacun, et Paper a eu besoin de sa propre échelle inversée, parce qu’assombrir un accent presque noir ne se comporte pas du tout comme éclaircir un accent vif.

La chaîne de production

Trois scripts, aucun malin.

Le premier lit la table des thèmes et émet un bloc de propriétés personnalisées CSS par thème. La sortie est versionnée dans le dépôt plutôt que générée au build, parce qu’un diff lisible vaut mieux qu’une étape de build à laquelle il faut faire confiance.

Le deuxième produit un rapport de contraste : chaque jeton de texte contre chaque jeton de fond, avec le rapport et un réussi ou un échoué. Deux thèmes ont échoué au premier passage. Le rapport fait maintenant partie des vérifications qui tournent avant une sortie.

Le troisième dessine le jeu d’icônes.

Pourquoi l’icône a pris plus de temps que les thèmes

Une icône d’app n’est pas un échantillon de thème. Elle fait 1024 sur 1024, elle doit rester lisible à 60 pixels sur un écran d’accueil, et c’est la seule partie de l’app que les autres voient.

La marque est une matrice de points de cinq sur cinq, la grille dont tout le produit est fait. En pleine taille, c’est évident. À 60 pixels, trois des premiers dessins sont devenus une bouillie grise, parce qu’une grille de points avec des espaces perd sa structure dès que les espaces passent sous le pixel.

Ce qui a survécu : moins de points, des points plus gros, et plus de contraste entre l’accent et le fond que ce qui semble juste en pleine taille. La version qui se lit le mieux sur un téléphone paraît un peu grossière sur un site, et c’est le bon compromis, parce que personne ne choisit une app à partir d’un rendu de 1024 pixels.

Quatre concepts sont passés, et le raisonnement est sur la page des assets App Store : une diagonale pour la progression, un chevron pour la lecture « outil de dev », un bloc de chaleur recadré pour la silhouette la plus forte, et le glyphe du logotype inversé pour les écrans d’accueil sombres.

Ce que j’ai eu faux

J’ai supposé que le thème était la fonctionnalité et l’icône la décoration.

Les messages après la sortie ont dit le contraire. Les gens écrivaient au sujet de l’icône. Laquelle ils avaient choisie, si elle s’accordait à leur dock, si le vert Terminal jurait avec leur fond d’écran. Presque personne n’a parlé du thème à l’intérieur de l’app, et ceux qui l’ont fait en parlaient parce que l’icône choisie ne s’y accordait pas.

Avec le recul, c’est logique. Vous voyez l’icône chaque fois que vous prenez votre téléphone. Vous voyez le thème pendant les onze secondes par jour où vous consignez vos habitudes. L’icône est la partie de l’app qui vit sur votre écran d’accueil, et l’écran d’accueil est une chose que les gens arrangent délibérément.

L’ordre a donc changé : les icônes sortent avec le thème, appariées par le nom, et choisir un thème propose l’icône assortie dans la même feuille. Les icônes alternatives sont deux lignes dans la configuration de l’app et un asset chacune, ce qui en fait l’une des fonctionnalités les moins chères par unité d’affection que j’aie livrées.

Les chiffres

Vingt-trois thèmes, 23 icônes assorties, deux jours de week-end, un script de contraste qui tourne maintenant à chaque sortie, et 4,1 Mo ajoutés au bundle. Les assets d’icônes représentent 3,4 Mo de ce total.

Quatorze heures de travail réel, dont environ neuf sont allées aux icônes et deux aux échecs de contraste. La table de couleurs elle-même, la partie qui ressemblait à la fonctionnalité, a pris moins d’une heure une fois la couche de jetons en place.

Huit thèmes sont dans le palier gratuit. Le reste vient avec Pro, à 25 € par an ou 34,99 € une fois, et ce partage existe parce que l’app n’a ni publicité ni revente de données, et qu’il faut bien que quelque chose paie le week-end.

Ce que je ferais autrement

Construire le rapport de contraste avant les thèmes plutôt qu’après. J’ai écrit 23 thèmes puis découvert que deux étaient illisibles, ce qui est le mauvais ordre et a coûté une heure de réglage.

Et dessiner l’icône à 60 pixels d’abord, puis agrandir. Toute marque qui survit à cette contrainte est très bien en grand. L’inverse n’est pas vrai, et je l’ai appris au bout de trois dessins.