The Government Design System đ«đ·
VloĆŸit
- Äas pĆidĂĄn 11. 09. 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 ^^
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 ^^
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
WHAAAAA LE DESIGN SYSTEME DU GOUV, pour moi la meilleure video de Basti c'est les interactive components LOVE
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. đ
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 !
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) ??
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
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 !
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 CZcams 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 đ
VidĂ©o top, maintenant il sera intĂ©ressant de voir comment l'ĂTAT "forcera" l'usage de ce Design System :p
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 ! ;-)
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
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.
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 đ€Ż
Ta position est toujours nuancée c'est trop cool, bravo :)
je trouve que c'est pas mal, merci pour la vidéo ;)
merci pour cette vidéo de L'ETAT
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.
Pour répondre à une question, le déploiement sur des sites de l'état a commencé avant la diffusion publique
Ah parfait pour un petit PHISING âšđ»đŒ đ'đŒđđžđâš
Test
Mais... depuis quand tu te mets Ă l'UI/UX ???
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
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Ă
Ce design Ă Ă©tĂ© mis en place sur Services Publics đ
Je suis étudiant an technique informatique au Québec et nos professeurs disent font (fon)
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 !
J'aime trop le UI đ„đ„
Tellement dommage qu'ils ne soient pas allĂ©s jusqu'au bout : "SystĂšme de Conception" đ
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
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)
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 đ€
Jâai adorĂ© la vidĂ©o DE LâĂTAT!
Nomenclature en français c'est đ„
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
Le design system est enfin sur `Figma
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.
The word font derives from Middle French fonte "melted; a casting"
Par contre partant pour tes conseils de structure de design systĂšme entre sketch et figma
Les actus de BASTUUUU
đ
J'ai l'impression qu'il est déjà dispo sur www.gouvernement.fr
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...
Le son de l'intro ?
Maman je passe à la télé !
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
Tu mĂ©rites beaucoup plus d'abonnĂ©s đ
Oh merci đ
"Imagine ils codent en français " . "Kuf kuf , win dev kuf " .
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 đ€Ł
Hello, y en Ă un qui c'est plaisir au gouv.
En vrai au Québec, "Font", c'est Police d'écriture :D
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
Je pense qu'il font corriger les arborescences et les simplifier.
Pourquoi ils ont mis ça en public ?
+1 abo de l'ETAT
Le system design de l'avc
LâĂ©tat ne veut plus rien dire pour moi mtn
Merci đ
Je que j'ai retenu : "L'Ă©tat"
pour faire des sites de l'Ă©tat dans l'Ă©tat de l'art :D
L'EEEEEETA
Deux ans aprĂšs, le Design SystĂšme de l'Ă©tat est beaucoup plus utilisable: czcams.com/video/5q88JgXUAY4/video.html
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.
si jâutilise ça en "l'Ă©tat" je finirait dans un sale Ă©tat
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.
De l'Etat ! xD
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
Hello Basti Ui,
Quand tu dis "⊠sur Firgma tu peux en faire qu'un" au lieu de dupliquer 27 fois le composant sur Sketch (czcams.com/video/RPHOwvDIlSE/video.html)⊠Tu peux me donner un exemple ? Merci :)
Cherche « Figma variant » sur Google đ
ok
Basti Ui
21,9 k abonnés
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 !
Tiens, dans la boutique de lâĂlysĂ©e, il n'y a pas de masques...
je suis débile ou ils ont oublier d'écrire quelle est la licence de c'est font???
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 đ
Oh non mais l'ETAT de la video! :D
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
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.
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 đ„
Il y a une vidéo sur le systÚme design allemand : czcams.com/video/nMwUOWCnQ6Q/video.html
Dutch c'est 'néerlandais' en anglais. Deutsch c'est 'allemand' en allemand.
Figure toi que j'ai découvert ton existence dans une baladodiffusion de tiret du bas
La fameuse Ă©mission đ
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 !
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 đ
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.
L'ETAT fois infinie
au secours, je veux pas travailler pour « lâetat », jâose par imaginer les rĂ©unions đ€Ș
Mariane Typo đ€Łđ€Łđ€Ł
Le concept est repris avec celui Suisse HELVETICA
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
Et tu nâas pas vu le design system dâAirbus ;)
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
Team tiret du bas (pardon « Ă©quipe ») arrĂȘtez de faire vos connaisseurs đ
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)
oui Zeroheight c''est Francais. C'est Jerome le CEO
Ceci est un commentaire DE L'ĂTAT.
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
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.
balado oui balado diffusion non
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.
omg imagine tu combine l'ecriture inclusive avec le fait de tout francise, l'HORREUR
Item c'est français