The Government Design System 🇫🇷
HTML-код
- Опубликовано: 26 июл 2024
- Today we are going to discover the brand new French Government Design System. It was made in Sketch, documented in Confluence and uses a 100% French nomenclature... well almost 😅
Tell me in the comments what you think.
#Design #France #DesignSystem 
Наука
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 ^^
Sans oublier le terme Desktop 🥸🇫🇷
@@BastiUi Pardon my french 🤣
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.
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
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 ^^
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
Salut,
C’est écrit sur leur site que ce sera bientôt dispo sur Figma, du coup voilà
Oh really !? Énorme comme info !
@@BastiUi Bah je cite « Un travail est en cours pour proposer une bibliothèque officielle sur Figma »
@@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
@@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..
@@kiwimen Ah ok j'ignorais qu'on pouvait ^^
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. 😆
WHAAAAA LE DESIGN SYSTEME DU GOUV, pour moi la meilleure video de Basti c'est les interactive components LOVE
Ils pourront retravaillé la page page du paiement des cartes grises ; j'ai crus que c'était une arnaque.
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 !
Ta position est toujours nuancée c'est trop cool, bravo :)
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) ??
je trouve que c'est pas mal, merci pour la vidéo ;)
Vidéo top, maintenant il sera intéressant de voir comment l'ÉTAT "forcera" l'usage de ce Design System :p
J'aime trop le UI 🔥🔥
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?
Ah ouais ? Intéressant !
Trop cool le design system de L'ÉTAAAAT !
C’est vrai x)
Hâte d’avoir des méthodologies UX de l’état : comment détourner l’information pour l’utilisateur
Ah parfait pour un petit PHISING ✨𝔻𝔼 𝕃'𝔼𝕋𝔸𝕋✨
J’ai adoré la vidéo DE L’ÉTAT!
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 !
Tu mérites beaucoup plus d'abonnés 👌
Oh merci 😊
Nomenclature en français c'est 🔥
La fonte c'est français oui. C'est un alliage pour fondre les casses. Et pas que des haltères. ;)
Tout à fait, j'ai cru rêver aussi sur "une sorte de francisation de font"... Il faut savoir que "font" est surtout une anglicisation de la "fonte", un mot français qui vient de la fonte des caractères (en plomb à l'époque) ! Evidemment, ça remonte un peu. Les jeunes pensent sans doute que le Web a inventé tout ça... un peu de culture, ça ne peut pas faire de mal ! ;-)
Pour travailler dans un ministère, je vois ça d'un bon oeil qu'il y ait une refont du design system. On avait déjà eu une refonte de l'UI en 2020 qui a fait du bien : changement de logo pour les ministères, de signature dans les emails, de police pour les courriers officiels, .... On a même changé de modèle de powerpoint pour les présentations. Ca a uniformisé tous les courriers / papiers officiels que je peux envoyer. C'est pareil pour les emails, ça fait moins bricolage avec une signature officielle identique dans chaque ministère. Bref c'était déjà un bon rafraichissement par rapport aux vieux trucs qu'on avait et qui devaient bien dater de 2002.
Pour l'UX, le fait qu'il y ait autant de profondeur me semble bien puisque ça se destine à beaucoup d'institutions : les plus grosses (ministères) mais aussi des organismes publics. L'avantage est que ça pourra être réutilisé avec le même design system tout en gardant des éléments distinctifs. Il n'y a qu'à voir les sites minstériels comme l'agriculture (avec du vert), la culture (avec du bleu), la santé (avec du rose). A terme d'autres institutions pourront l'utiliser comme des universités ou des entreprises publiques. Là aussi on rafraichit une interface vieillissante, probablement de 2003, qui ne prenait pas en compte les smartphones.
Enfin concernant le prix, 3M pour un projet national c'est vraiment faible, mais je pense que vous ne vous rendez pas compte de l'échelle du projet, avec ce que ça implique comme travail en amont, de travail pendant, de suivi, correctif etc... Je ne pense pas que ça soit un marché public vu le prix, ils ont dû embaucher du monde. Mais bon rien qu'en estimant le projet sur 4 ans (2018-2022) ça fait 750.000€ par an, soit assez pour embaucher une dizaine de personne qui devront créer un design system unifié pour plus de 350 sites. Bref il y a dû y avoir plus que 3 réunions Zoom sur le projet.
A voir en tout cas comment ils pourront améliorer la librairie du projet mais ça m'a l'air pas mal pour un projet qui est en version 1.0 et qui sera très surement peaufiné d'ici un an.
Bien sure, c’est une super initiative !
Encore une fois : ne pas confondre critiquer la nouvelle charte graphique unifiée et critiquer la documentation et l’organisation du Design System 😉
@@BastiUi pareil ça me paraît pas énorme vu les prix des ss2i qui ont sûrement créée ça + le travail préparatoire etc. Un junior ça fait déjà 450 e la journée donc bon c'est pas étonnant
Maman je passe à la télé !
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.
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.
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
Pour répondre à une question, le déploiement sur des sites de l'état a commencé avant la diffusion publique
Pourquoi est il si beau 😍
Mais bref j'aime bien cette chaine que j'ai découvert hier
De qui ? @Basti Ui ou le Design System ?
@@paypal-support non le youtubeur ptdrr 🤣
Les actus de BASTUUUU
😅
merci pour cette vidéo de L'ETAT
Ce design à été mis en place sur Services Publics 😉
Prochaio étape : le feat avec Macron leeeessssgoooo
Je l'attends toujours dans le Discord là
@@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 🤯
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).
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.
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/
Bon, visiblement RUclips 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 😉
Tellement dommage qu'ils ne soient pas allés jusqu'au bout : "Système de Conception" 😅
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)
"Imagine ils codent en français " . "Kuf kuf , win dev kuf " .
Hello, y en à un qui c'est plaisir au gouv.
Super maintenant les hackeurs vont pouvoir créer un site qui ressemblent parfaitement à un site du gouvernement !
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à
L'EEEEEETA
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
Hello, trop cool pour ton oral. Malheureusement je ne peux pas t'aider sur ça. Va demander de l'aide dans mon Discord sinon ;)
les algos qui calculent des couleurs contrastée pour Material You (il y a un repo), ou alors pour Adobe Sprectrum
J'ai l'impression qu'il est déjà dispo sur www.gouvernement.fr
The word font derives from Middle French fonte "melted; a casting"
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
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...
Par contre partant pour tes conseils de structure de design système entre sketch et figma
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
Le design system est enfin sur `Figma
Je suis étudiant an technique informatique au Québec et nos professeurs disent font (fon)
ok
Basti Ui
21,9 k abonnés
En vrai au Québec, "Font", c'est Police d'écriture :D
De l'Etat ! xD
Oh non mais l'ETAT de la video! :D
Test
Mais... depuis quand tu te mets à l'UI/UX ???
Tiens, dans la boutique de l’Élysée, il n'y a pas de masques...
+1 abo de l'ETAT
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
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 😉
Je que j'ai retenu : "L'état"
Le son de l'intro ?
si j’utilise ça en "l'état" je finirait dans un sale état
Petite question, pourquoi ils présentent et mettent à disposition leur design system ?
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 🤔
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
pour faire des sites de l'état dans l'état de l'art :D
L’état ne veut plus rien dire pour moi mtn
Merci 😂
Le system design de l'avc
Deux ans après, le Design Système de l'état est beaucoup plus utilisable: ruclips.net/video/5q88JgXUAY4/видео.html
Il y a une vidéo sur le système design allemand : ruclips.net/video/nMwUOWCnQ6Q/видео.html
Dutch c'est 'néerlandais' en anglais. Deutsch c'est 'allemand' en allemand.
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 🔥
Hello Basti Ui,
Quand tu dis "… sur Firgma tu peux en faire qu'un" au lieu de dupliquer 27 fois le composant sur Sketch (ruclips.net/video/RPHOwvDIlSE/видео.html)… Tu peux me donner un exemple ? Merci :)
Cherche « Figma variant » sur Google 😗
Je pense qu'il font corriger les arborescences et les simplifier.
Euh fontes ? Je crois qu'il voulaient dire polices 🤣
Fonte de caractères. Ça se dit bien. Sinon police et fonte ne veulent pas dire la même chose.
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.
Pourquoi ils ont mis ça en public ?
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
Oui c’est même évident !
Figure toi que j'ai découvert ton existence dans une baladodiffusion de tiret du bas
La fameuse émission 💙
je suis débile ou ils ont oublier d'écrire quelle est la licence de c'est font???
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 !
L'ETAT fois infinie
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
au secours, je veux pas travailler pour « l’etat », j’ose par imaginer les réunions 🤪
C'est l'inverse l'anglais “font” vient du moyen français « fonte ».
fr.wikipedia.org/wiki/Fonte_de_caract%C3%A8res
Tout à fait. Ma ca reste bien rigolo de le voir écrit comme ça 🙃
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
Confluence est un système de documentation simple
Mais pas spécifique au Design System et au design d'interface malheureusement. Jette un oeil à Zeroheight
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.
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
C’est une stratégie de communication calquée sur les boîtes techs
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...
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é
(ne faites pas de phishing)
Team tiret du bas (pardon « équipe ») arrêtez de faire vos connaisseurs 😆
Ceci est un commentaire DE L'ÉTAT.
est ce qu'un design system c'est l'équivalent d'une charte graphique ??
Je ne suis pas Ui designer. Mais je pense que oui, c'est le terme plus moderne pour dire charte graphique.
Mariane Typo 🤣🤣🤣
Le concept est repris avec celui Suisse HELVETICA
Et tu n’as pas vu le design system d’Airbus ;)
oui Zeroheight c''est Francais. C'est Jerome le CEO
Le design system et déjà utilisée sur tous anti covid et le site de santé publique France.
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 🧐
@@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.
ca manque de menu avec de la viande, salade, tomate, oignon, entre deux tranche de pain. .. #translate #BurgerMenu
Cette identité graphique date de Février 2020 ;)
Attention à ne pas confondre identité graphique et design système
@@BastiUi Oui oui, pas d’erreur ;)
C’est étonnant car selon le site du gouvernement je cite : « Septembre 2020 - Lancement Bêta »
@@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 !!! 😂😅
Bien sure. Mais ici on ne juge pas de l’identité graphique, mais bien du Design System ce qui est complètement différent.
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...
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
balado oui balado diffusion non
Item c'est français
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.