La Libre —
le journal
dans la poche.
Le journal, dans la poche.
L'app La Libre News est l'application officielle du quotidien : l'entièreté des contenus et des formats du journal, plus des nouveautés qui n'existent que là — podcasts, vidéos, directs, résumé de l'actu en stories. Elle est gratuite, avec l'abonnement en achat intégré, et tourne sur iPhone comme sur iPad.
Mon rôle : la conception produit et le design d'interface, du design system aux écrans, pour les deux plateformes. Le fichier de design compte aujourd'hui 207 planches réparties en cinq pages, dont une page de charte graphique qui sert de source unique aux développeurs iOS et Android.
Trois états d'un même écran.
La home se décline selon que le lecteur est abonné, connecté ou de passage, et selon le thème du système. Les maquettes ci-dessous sont rejouées en CSS à partir des tokens réels du design system : ce sont les vraies couleurs de rubriques et le vrai magenta de marque.
Le magenta, et neuf rubriques.
L'app reprend le magenta de marque et le graphite du journal, avec une échelle de gris complète qui porte les deux thèmes : les mêmes douze valeurs servent le mode clair et le mode sombre, en s'inversant.
Chaque rubrique porte sa couleur, dans la variante conforme AA définie par la charte de marque : c'est elle qui colore le surtitre d'un teaser, l'en-tête d'une section et la barre de progression d'une story.
Deux familles, la même voix que le journal.
Manuale pour les titres, Libre Franklin pour tout le reste. Deux polices libres sous licence SIL Open Font License, auto-hébergées en woff2 variable et partagées avec le site : l'app et lalibre.be parlent exactement la même langue typographique, ce qui est le minimum qu'on attende d'une marque de presse.
Manuale
Les titres. Graisses 600, 800 et 800 italique. L'ExtraBold porte les titres d'articles, de pages, de chaînes et de modales, l'italique les citations, le SemiBold les titres de teasers dans les listes. Repli Georgia. Dessin : Omnibus-Type.
Libre Franklin
Le texte et l'interface. Graisses 400 à 700. Le Medium est la graisse par défaut du corps et des chapôs, le SemiBold tient les menus, boutons et surtitres, le Bold les titres de box en magenta. Repli Helvetica Neue. Dessin : Impallari Type.
SF Pro · Roboto
Ce que le système apporte. Barre d'état, claviers, menus de partage et libellés natifs restent dans la police du téléphone, SF Pro sur iOS et Roboto sur Android. Une app qui se fond dans son système se lit mieux ; la marque, elle, s'exprime dans le contenu.
Une seule échelle de corps pour les deux plateformes — 10, 13, 16, 18, 20, 24 et 25 px — que le réglage de taille de texte vient ensuite multiplier.
Ce que contient le fichier.
Cinq pages, 207 planches, et une bibliothèque de symboles qui tient l'ensemble.
Une page charte qui fait foi
Couleurs et élévations, logo et ses zones de protection, polices et pictos, boutons, teasers et leurs tailles, widgets iOS, publicité, footer, menu : vingt-sept planches de référence. C'est le document que les développeurs ouvrent, pas les maquettes.
Quarante-six symboles
Couleurs, barres de navigation, composants de teaser, blocs de match en direct : les écrans sont assemblés, pas dessinés. Changer le magenta met à jour cinquante-quatre écrans d'un coup.
Les états, pas seulement les écrans
Abonné, connecté, de passage, paywall, mode sombre, taille de texte augmentée, picture-in-picture, notification sur écran verrouillé, lecteur de podcast réduit : le fichier documente les cas réels plutôt que la version idéale.
Le projet, par les chiffres.
Ce que ce projet a changé.
L'app est le projet qui a rendu le design system nécessaire. Difficile de maintenir cinquante-quatre écrans, deux thèmes et deux plateformes avec des couleurs recopiées à la main : c'est ici que les tokens ont cessé d'être une bonne idée pour devenir une obligation. La charte de l'app et celle du site se répondent aujourd'hui rubrique par rubrique, avec des variantes AA explicites quand les deux ne peuvent pas porter exactement la même valeur.