The Government Design System 🇫🇷

[@jimmy.vrgrll]

Item, label et radio sont des mots du dictionnaire français haha. Beaucoup de mots anglais viennent du français, d'ailleurs le mot "fonts" en anglais vient de « fonte de caractère » en référence aux caractères en métaux employés pour l'imprimerie. Bon par contre tout mettre en français c'est vraiment trop, c'est pratique pour personne je suis d'accord ^^

[@BastiUi]

Sans oublier le terme Desktop 🥸🇫🇷

[@jimmy.vrgrll]

@@BastiUi Pardon my french 🤣

[@jeremie_avec_ie]

En soit qu'un mot soit ou pas dans un dictionnaire ne change rien à sa "crédibilité", le but d'un dictionnaire est de recenser les mots et leurs utilisations, pas de dire quels mots existent ou pas.

[@quentincolas5280]

C'est un peu une question de principe pour un gouvernement de faire dans sa langue, c'est l'un des rares cas ou ça va pas me choquer trop trop. Après écrire en anglais ca montre une adaptation et une ouverture sur le monde du numérique aussi en reprenant les codes. Chacun son opinion 🤷‍♂️ Je connais quelqu'un qui a travaillé sur le design system, ils avaient trop de contraintes genre des centaines c'est abusé. Et l'une des requête était justement de TOUT mettre de manière exhaustive. #chefdeprojetpower lol Je pense pas non plus que ce soit très pratique

[@Jesuisjusteunchat]

Hello, J'utilise cette charte (qui a été mis à jour depuis) tout les jours et à mon sens, c'est très bien réalisé, Je connais beaucoup de clients qui ne font pas mieux hélas. Merci pour ta vidéo ^^

[@amanuelderesse398]

WHAAAAA LE DESIGN SYSTEME DU GOUV, pour moi la meilleure video de Basti c'est les interactive components LOVE

[@mksdrm9252]

l'estonie a aussi son système de design . il est 🔥🔥🔥magnifique . ils ont une library libre de fonts , de photos , videos etc . c'est hyper complet

[@Ryse93]

Salut, C’est écrit sur leur site que ce sera bientôt dispo sur Figma, du coup voilà

[@BastiUi]

Oh really !? Énorme comme info !

[@Ryse93]

@@BastiUi Bah je cite « Un travail est en cours pour proposer une bibliothèque officielle sur Figma »

[@valcheprod.7326]

@@Ryse93 Ah ouais donc quelqu'un dans l'equipe a reussi a convaincre le responsable de passer sur Figma et maintenant ils doivent tout recommencer mdr

[@kiwimen]

@@valcheprod.7326 amha c'est surtout que si c'est pas eux qui le font "officiellement", c'est Jean-Michel Déterre qui le fera. Puisque de toutes façons on peut importer un .sketch sur Figma (avec 2 ou 3 modifs à prévoir par-ci par là je pense 😅) et partager le fichier Figma..

[@valcheprod.7326]

@@kiwimen Ah ok j'ignorais qu'on pouvait ^^

[@SebastienWozny]

Tellement d'accord avec toi, quel enfer ça a dû être à produire et pire encore à utiliser. Je n'arrive même pas à comprendre une telle quantité de composants. 😱 À mon avis dans cette équipe il manquait un lead vraiment rodé design system pour cadrer l'ensemble, outre le fait que Sketch complexifie un peu les choses, on voit clairement que c'est allé trop loin là, le gars des boutons était beaucoup trop chaud. 😆

[@anthonydegroote3216]

Ils pourront retravaillé la page page du paiement des cartes grises ; j'ai crus que c'était une arnaque.

[@zogzog5009]

Je reviens 1 an après. Ils ont du t'écouter. Maintenant ils ont renommé les composants. Ils sont en VF et en anglais. Je trouve ça top. COmme ça tout le monde est content?

[@BastiUi]

Ah ouais ? Intéressant !

[@antoinepuig3364]

Hello, si tu sépares une lib light et dark comment tu maintiens ? Ça fait deux fois (ou presque) plus de boulot si t'as une modif à faire. En mettant tout dans une tu peux mutualiser tous les éléments structurels (pas les couleurs qu'il faut en effet modifier deux fois).

[@BastiUi]

C'est la même chose dans leur cas actuelle. Ils doivent modifier deux fois. Si tu utilises des couleurs sémantique il te suffit de swap une lib Ligth avec une lib Dark et le tour est jouée.

[@hugzts]

Salut a toi je viens de découvrir ta chaine je suis dans une école de digital et vrmt tout ton taffe me donne tellement envie de travailler la dedans. Merci à toi !

[@ailevaika]

Trop cool le design system de L'ÉTAAAAT !

[@l.graphics7605]

C’est vrai x)

[@clementgiraud5330]

Ta position est toujours nuancée c'est trop cool, bravo :)

[@jddmeledje9480]

Super vidéo comme d'habitude ! J'ai lâché un pouce avant même d'avoir regardé mdr. Merci Basti ! Dis... tu pourrais nous faire une vidéo sur comment créer un design system (un tout petit design system stp) ??

[@Adrienthefan]

Vidéo top, maintenant il sera intéressant de voir comment l'ÉTAT "forcera" l'usage de ce Design System :p

[@gabclarexxfrhardware8751]

merci pour cette vidéo de L'ETAT

[@BryndilleYT]

Pour répondre à une question, le déploiement sur des sites de l'état a commencé avant la diffusion publique

[@myosotisalderson]

je trouve que c'est pas mal, merci pour la vidéo ;)

[@quentin3361]

Hâte d’avoir des méthodologies UX de l’état : comment détourner l’information pour l’utilisateur

[@0xNothing]

J'aime trop le UI 🔥🔥

[@Neonstriped]

Petite question, pourquoi ils présentent et mettent à disposition leur design system ?

[@r.s5918]

Je me pose la même question. Je ne vois pas l'intérêt, à part pour les arnaques... Si quelqu'un pouvait m'éclairer 🤔

[@bachxl4804]

Le son de l'intro ?

[@justinhankem4474]

Stp le lien de ton générique du début le 1er générique et non celui que tu as monté. Stp C'est du lourd

[@walty5513]

Ah parfait pour un petit PHISING ✨𝔻𝔼 𝕃'𝔼𝕋𝔸𝕋✨

[@laboriefabien]

Prochaio étape : le feat avec Macron leeeessssgoooo

[@BastiUi]

Je l'attends toujours dans le Discord là

[@kelk1237]

@@BastiUi je lui ai envoyé une demande la semaine dernière, il ne me pas répondu... honteux pour ce président qui ne répond pas à ses messages discord 🤯

[@Charles-Albert]

J’ai adoré la vidéo DE L’ÉTAT!

[@OlivierKrakus]

Pour un truc comme ça je trouve dommage que l'ETAT ne propose à la sortie qu'une version Sketch... tous le monde ne bosse pas/plus que sur sketch . En tout cas toujours aussi cool comme vidéo, merci pour la review :D

[@DartyytradNeveux]

Ce design à été mis en place sur Services Publics 😉

[@AlexisMorin]

Nomenclature en français c'est 🔥

[@lucaslantrua2021]

salut mec ça fait 2 mois que je regarde ce que tu fais et j'adore vraiment ce que tu fais. Etant au lycée j'ai décidé grâce au concept de ta chaine de présenter a mon oral de bac sur l'expérience utilisateur avec les outils ux et ui. J'avais juste une question: est ce que t'aurais pas hasard des algo de machine Learning en python pour de l'ux ou de l'ui parce que je dois avoir un algo dans ma présentation. En tout cas merci

[@BastiUi]

Hello, trop cool pour ton oral. Malheureusement je ne peux pas t'aider sur ça. Va demander de l'aide dans mon Discord sinon ;)

[@IStMl]

les algos qui calculent des couleurs contrastée pour Material You (il y a un repo), ou alors pour Adobe Sprectrum

[@skymer7471]

Y a pas de francisation : Une fonte : "font - Borrowed from Middle French fonte, feminine past participle of verb fondre (“to melt”)." Wikitionary -> Le sens typographique vient du fait que les premières fontes de caractères étaient faites d’un alliage de plomb et d’antimoine fondu afin de reproduire plusieurs caractères identiques à partir d’un moule unique.

[@FredoMkb]

Bonjour et merci pour cette vidéo intéressante et instructive ! 🙂 Au fait, petite question : "Design Système" = "Charte Graphique" ??? (si ce n'est pas le cas, c'est quoi la différence ? … désolé, je suis de la vieille école moi 😉 ) Sinon, une petite remarque "constructive" : j'ai constaté chez plusieurs chaînes de vulgarisation et de découverte que, lorsque la vidéo évoque différents outils ou services, il n'y avait aucun lien dans l'espace infos faisant référence à ces solutions, et je trouve cela bien dommage car, même si Google est notre ami, parfois on a du mal à faire une recherche efficace avec le bon orthographe, surtout lorsqu'il s'agit des produits anglophones ou dans d'autres langues… Bref, ce serait sympa si à l'avenir on pouvait trouver dans les infos des liens vers toutes les solutions évoquées dans la vidéo ! Pour la peine, je m'y colle cette fois-ci (les deux autres liens sur le message suivant)… Les outilis design : - Figma : www.figma.com/ - Sketch : www.sketch.com/

[@FredoMkb]

Bon, visiblement KZbin n'accepte qu'un nombre limité de liens dans les commentaires… c'est bien dommage… du coup, ce sera à vous de chercher sur Google les deux autres outils de gestion de contenus qui sont : ZeroHeight et Confluence 😉

[@JyVers]

Maman je passe à la télé !

[@julientroquereau4353]

The word font derives from Middle French fonte "melted; a casting"

[@christophercarpepassion3444]

Tu mérites beaucoup plus d'abonnés 👌

[@BastiUi]

Oh merci 😊

[@monsieurm2904]

Super maintenant les hackeurs vont pouvoir créer un site qui ressemblent parfaitement à un site du gouvernement !

[@clemradio]

Si le hackeur est vraiment investi, s'y connait en dev et en UI/UX, et s'il a un QI un minimum élevé. Avec ça on élimine la majorité déjà

[@monsieurm2904]

Pourquoi ils ont mis ça en public ?

[@odalanoix]

Comment ça « francisation du mot fonte » !! On dirait l’imprimerie vient de la silicon valley ! 🤯😂 Si ma mémoire est bonne : police de caractère c’est la famille, exemple Marianne, et la fonte, c’est le style et taille précise (mais ils disaient pas style en 1500), exemple Marianne 12 points italique. Une fonte renvoyait à un tiroir précis de l’atelier (quand c’était encore du metal vous voyez ?) et une police renvoyaient à une commode (j’exagère parce qu’ils n’avaient parfois que 2-3 tiroirs par police, comme avec dafont lol)

[@GeoffreyCrofte]

Tellement dommage qu'ils ne soient pas allés jusqu'au bout : "Système de Conception" 😅

[@XavierMaire1]

Salut, je viens de découvrir ta chaîne, je suis pas familier avec cet univers, je sais même pas ce que ça veut dire ui ux etc, un bon quart de ce que tu dis je comprends pas, mais franchement je kiffe alors bon merci !

[@itshaping7559]

au moins ça fait plaisir de voir que ça avance même si c'est pas parfait. Espérons qu'on aura des champs de licornes bientôt lol Trop gros, trop lourd => à simplifier pour un design System. Faut savoir que beaucoup de Français parle pas un mot d'anglais encore. Au moins ça reste accessible à tous.

[@gabin85]

J'ai l'impression qu'il est déjà dispo sur www.gouvernement.fr

[@justafrenchkidtryingtospea9462]

Pourquoi est il si beau 😍 Mais bref j'aime bien cette chaine que j'ai découvert hier

[@paypal-support]

De qui ? @Basti Ui ou le Design System ?

[@justafrenchkidtryingtospea9462]

@@paypal-support non le youtubeur ptdrr 🤣

[@superflameur]

Test

[@paypal-support]

Mais... depuis quand tu te mets à l'UI/UX ???

[@corvanders2.053]

"Imagine ils codent en français " . "Kuf kuf , win dev kuf " .

[@eldab]

Par contre partant pour tes conseils de structure de design système entre sketch et figma

[@sebastienocana8097]

Le design system est enfin sur `Figma

[@monsieurpicacouic6403]

Tiens, dans la boutique de l’Élysée, il n'y a pas de masques...

[@RealBabyBiscuit]

En vrai au Québec, "Font", c'est Police d'écriture :D

[@modo_discord]

Je que j'ai retenu : "L'état"

[@maxence12091994]

Je pense qu'il font corriger les arborescences et les simplifier.

[@dukenuggets]

si j’utilise ça en "l'état" je finirait dans un sale état

[@monsieur404]

+1 abo de l'ETAT

[@ThibautDaumont]

Business analyst utilisant JiRA et confluence tous les jours. Je n'ai pas trouvé mieux pour spécifier et faire des liens entre JiRA et x-ray et les requirements. Par contre ce n'est pas fait pour du design c'est clair

[@volpatogabin]

Je suis tombé récemment sur une offre UX/UI de la DGFIP pour travailler sur leurs outils donc je pense qu'ils ont lancé une full refonte

[@levraipumba]

En fait je trouve ca sympa ce qu'ils ont fait, documenter leur nouvel UI etc, mais ca reste utilisable uniquement pour les sites de l'etat donc quel interet de l'ouvrir au public

[@FredGreuillet]

Hello, y en à un qui c'est plaisir au gouv.

[@Chad_Dev]

Je suis étudiant an technique informatique au Québec et nos professeurs disent font (fon)

[@witele]

je suis débile ou ils ont oublier d'écrire quelle est la licence de c'est font???

[@ts98mlv]

Franchement la police marianne est belle, mais j'ai peur qu'elle soit copyright et qu'on ne puisse pas l'utiliser sur nos travaux

[@BastiUi]

Oui c’est même évident !

[@witele]

wow imagine nos impôts qui sont passé dans ce délire.... à mon avis y'a une école qui est passé ou un bon gros service d'hôpital. netflix, c'est 1M$us que pour la font...

[@User-xn47-fgh8]

Je suis assez novice en UX/UI, du coup ça explique peut être mon incompréhension, mais quel est l’intérêt de rendre ce design system public? Pourquoi ne pas le garder en interne? Parce que c’est prendre de gros risques.

[@louiskle6276]

ok Basti Ui 21,9 k abonnés

[@ThePrimeTech]

Je me suis demandé quel logiciel le gouvernement utilise pour faire les incrustations d'informations Covid lors du discours du président... Si quelqu'un à l'info je suis preneur 🔥

[@jbwejman]

Le system design de l'avc

[@djebarhammouche3237]

Confluence est un système de documentation simple

[@BastiUi]

Mais pas spécifique au Design System et au design d'interface malheureusement. Jette un oeil à Zeroheight

[@ChristopheGasmi]

pour faire des sites de l'état dans l'état de l'art :D

[@josephgarronegj]

Deux ans après, le Design Système de l'état est beaucoup plus utilisable: kzbin.info/www/bejne/a6KbaX2djbp0j5Y

[@quentin8762]

De l'Etat ! xD

[@Baraka0369]

L’état ne veut plus rien dire pour moi mtn Merci 😂

[@tructruc9360]

Figure toi que j'ai découvert ton existence dans une baladodiffusion de tiret du bas

[@BastiUi]

La fameuse émission 💙

[@Zefling]

C'est l'inverse l'anglais “font” vient du moyen français « fonte ». fr.wikipedia.org/wiki/Fonte_de_caract%C3%A8res

[@BastiUi]

Tout à fait. Ma ca reste bien rigolo de le voir écrit comme ça 🙃

[@malikacollet5364]

Question con mais je suis assez surprise que le design système de l’ETAT soit à la dispo de tout le monde ? Comme tu le dis dans la vidéo, y’a des risques de reproduction pour du phishing nan ? Ma question est valable pour d’autres grandes entreprises ! Très bonne vidéo comme d’hab

[@BastiUi]

C’est une stratégie de communication calquée sur les boîtes techs

[@florianchambolle4453]

Pour l’Etat Français il s’agit d’un positionnement global dans le cadre de l’open data comme le fait de pouvoir consulter les ventes des biens immobiliers avec leurs prix...

[@symeons1145]

En plus si tu veux faire du phishing tu peux juste inspecter l'élément et tout copier donc ça change un peu rien de ce côté

[@symeons1145]

(ne faites pas de phishing)

[@BodyAlhoha]

Euh fontes ? Je crois qu'il voulaient dire polices 🤣

[@zxenon_]

Fonte de caractères. Ça se dit bien. Sinon police et fonte ne veulent pas dire la même chose.

[@ThierryVilaysith]

Hello Basti Ui, Quand tu dis "… sur Firgma tu peux en faire qu'un" au lieu de dupliquer 27 fois le composant sur Sketch (kzbin.info/www/bejne/iIGrgKqsea6fiac)… Tu peux me donner un exemple ? Merci :)

[@BastiUi]

Cherche « Figma variant » sur Google 😗

[@makeyourweb]

Oh non mais l'ETAT de la video! :D

[@GleekOff]

Après c'est aussi le rayonnement culturel nationale et la défense du patrimoine d'utiliser la langue française. Certe c'est pas pratique parce que malheureusement tous le monde a abdiqué à utiliser l'anglais en informatique en général mais c'est dommage car la compréhension n'est pas forcément aisé pour les non-initiés. On peut voir une porté à la fois accessible et de conservation culturel francophone

[@stephanenicolas6250]

au secours, je veux pas travailler pour « l’etat », j’ose par imaginer les réunions 🤪

[@amanuelderesse398]

L'ETAT fois infinie

[@BlackPxL]

Ceci est un commentaire DE L'ÉTAT.

[@MrJonathan76300]

le pire c'est que ca ne sera pas utiliser car ca va perturber tout les designer, developers, etc... on est bcp trop habitué a dev en anglais

[@louis18071957]

Le design system et déjà utilisée sur tous anti covid et le site de santé publique France.

[@BastiUi]

Justement j'ai pensé à Tous Anti Covid, les couleurs semblent appartenir au DS, la font aussi j'imagine. Mais les CTA sont carrés sur le DS et rounded sur Tous Anti Covid 🧐

[@louis18071957]

@@BastiUi il se sont rendu compte après coup que c'était plus jolie comme sa 😂. Mais sinon oui la font c'est bien la Marian.

[@rollandmadisson7889]

Bonne initiative de l'état même si le design reste perfectible dans la création des composants. 😉 C'est une super idée de vidéo, bravo! 👏 Tu parles beaucoup de Sketch et de Figma mais moins d'Adobe xD, tu as une dent contre ce logiciel ? 😛 Ils ont pas mal évoluer avec le temps. Ça serait sympa d'avoir ton avis sur xD en vidéo si ça te tente 😉

Il y a une vidéo sur le système design allemand : kzbin.info/www/bejne/pH7ahoKNeNOEbLM

[@clemradio]

Dutch c'est 'néerlandais' en anglais. Deutsch c'est 'allemand' en allemand.

[@974Dump]

L'EEEEEETA

[@Pleiode]

Et tu n’as pas vu le design system d’Airbus ;)

[@guedelplayer202]

C'est pas des développeurs qui ont fait ça. Au lieu de décliner sur toutes les variantes, pourquoi n'ont ils pas fait un système paramétré ? Cela reflète bien la lourdeur administrative. Pourquoi faire simple quand on peut faire compliqué ? Et puis c'est francisé qu'à moitié. Design au lieu de conception; item au lien d'élément; label au lieu d'étiquette… Palm face. Pardon. Main dans la face 😁. Si l'idée de tout traduire part d'un bon sentiment, dans la pratique c'est un enfer. Les accents ne passent pas partout et posent parfois des problèmes.

[@JulienGuia]

Cette identité graphique date de Février 2020 ;)

[@BastiUi]

Attention à ne pas confondre identité graphique et design système

[@JulienGuia]

@@BastiUi Oui oui, pas d’erreur ;)

[@BastiUi]

C’est étonnant car selon le site du gouvernement je cite : « Septembre 2020 - Lancement Bêta »

[@JulienGuia]

@@BastiUi Je parle bien de l'identité graphique, pas du design system ;) Un moyen simple de s'en apercevoir est de reprendre une attestation dérogatoire de mars 2020 qui utilise déjà la "Marianne" et le nouveau logo de l'ETAT !!! 😂😅

[@BastiUi]

Bien sure. Mais ici on ne juge pas de l’identité graphique, mais bien du Design System ce qui est complètement différent.

[@HollyKinglund]

Team tiret du bas (pardon « équipe ») arrêtez de faire vos connaisseurs 😆

[@AfricanAds]

Mariane Typo 🤣🤣🤣 Le concept est repris avec celui Suisse HELVETICA

[@benmol_]

Je bosse pas du tout dans ce domaine, mais pour utiliser régulièrement un logiciel avec des sous-sous-sous-menus à dérouler, je plains ceux qui vont devoir l'utiliser Par contre le mélange Fr/En ne me gène pas plus que ça, mais c'est peut-être parce que je bosse avec un soft qui est "normalement" traduit en français, dont les menus un peu détaillés sont en anglais, et dont les messages d'erreurs les plus graves sont en allemand !

[@HackerFull666]

oui Zeroheight c''est Francais. C'est Jerome le CEO

[@Arrow_1205]

ca manque de menu avec de la viande, salade, tomate, oignon, entre deux tranche de pain. .. #translate #BurgerMenu

[@Faguoyo]

En vrai il vaut mieux utiliser des mots comme "têtière", déjà utilisés dans le print depuis des décennies, plutôt que d'employer des mots anglais prononcés à la française...

[@BastiUi]

Je pense l’inverse. Il faut se calquer sur les termes anglais utilisés ensuite dans les languages de développement pour assurer la continuité de ton designs system. Ou alors tu es extrémiste et tu note courriel et info nuage à la place de mail et cloud mais j’y crois moyen

[@witele]

balado oui balado diffusion non

[@suppomanable]

Item c'est français

[@kahinadg4652]

ils ont mis 3 ans à le faire... je plains les UX/UI qui ont bossé dessus...

[@akuseru609]

omg imagine tu combine l'ecriture inclusive avec le fait de tout francise, l'HORREUR

[@quentin_bz]

J’apporte ma petite analyse économique, en faisant remarquer, que tout le temps passé à fournir un travail inutile, à été soustrait aux entreprises, qui répondent à nos besoins et créent de la valeur.

[@Sam_S0ul]

coherence entre les sites de l'etats? aucun des 36 millions de sites de l'education nationale ne se ressemblent et ils sont tous moins utilisables les uns que les autres...

[@amanuelderesse398]

Le site graphique de l'Etat avec le Figma de l'Etat utilisant les design tools de l'Etat avec Confluence de l'Etat qui pue eurkk