{"id":6375,"date":"2022-05-02T09:45:41","date_gmt":"2022-05-02T07:45:41","guid":{"rendered":"https:\/\/www.luklagroup.com\/sem-categoria\/departement-de-loire-atlantique-refonte-des-sites-orientee-accessibilite-design-system-et-agilite-2\/"},"modified":"2026-11-04T16:47:39","modified_gmt":"2026-11-04T15:47:39","slug":"departement-de-loire-atlantique-refonte-des-sites-orientee-accessibilite-design-system-et-agilite-2","status":"publish","type":"post","link":"https:\/\/www.luklagroup.com\/pt-pt\/web-marketing-pt-pt\/departement-de-loire-atlantique-refonte-des-sites-orientee-accessibilite-design-system-et-agilite-2\/","title":{"rendered":"D\u00e9partement de Loire-Atlantique, refonte des sites orient\u00e9e accessibilit\u00e9, Design System et agilit\u00e9"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong><em>D<a href=\"https:\/\/digiwin.fr\/actualites\/departement-loire-atlantique-presentation-globale-du-projet-de-refonte-des-sites-internet\/\" target=\"_blank\" rel=\"noreferrer noopener\">ans l&#8217;article pr\u00e9c\u00e9dent<\/a>, nous avons expliqu\u00e9 le projet global de refonte des sites du D\u00e9partement de Loire-Atlantique.<\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Retrouvez-ici la suite de l&#8217;article pour comprendre un peu mieux les axes strat\u00e9giques pris en cours de projet. Nous traiterons \u00e0 la fois des enjeux majeurs d&#8217;accessibilit\u00e9 et de Design System qui dessinent cette refonte.<\/em><\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Projet d\u2019envergure&nbsp;: d\u00e9finir son axe strat\u00e9gique<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Initier le projet par le site principal puis d\u00e9cliner les autres sites<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Le p\u00e9rim\u00e8tre technique et fonctionnel \u00e9tant tr\u00e8s large<\/strong>, la cible prioritaire du projet de refonte a \u00e9t\u00e9 naturellement le <a href=\"https:\/\/www.loire-atlantique.fr\/44\/navigation-des-espaces\/c_5025\" target=\"_blank\" rel=\"noreferrer noopener\">site principal du D\u00e9partement<\/a>. Ce site \u00e9tant le plus connu et le plus utilis\u00e9 par les usagers.<br><br>La suite des sites refondus \u00e0 ce jour est&nbsp;:  <\/p>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/archives.loire-atlantique.fr\/44\/archives-numerisees\/c_23000\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/11\/CD44-Archive.png\" alt=\"\" class=\"wp-image-3691\"\/><\/a><figcaption><em>Site des archives<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/handicap.loire-atlantique.fr\/44\/accueil\/j_6\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-11.18.50.png\" alt=\"\" class=\"wp-image-3785\"\/><\/a><figcaption><em>Site d\u00e9di\u00e9 au handicap<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.chateau-chateaubriant.fr\/44\/accueil-chateau-de-chateaubriant\/j_6\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/11\/CD44-Chateaubriant.png\" alt=\"\" class=\"wp-image-3693\"\/><\/a><figcaption><em>Site patrimonial des ch\u00e2teaux de ville Ch\u00e2teaubriant<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.chateau-clisson.fr\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-10.57.28.png\" alt=\"\" class=\"wp-image-3778\"\/><\/a><figcaption><em>Site patrimonial des ch\u00e2teaux de ville Clisson<\/em><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.domaine-garenne-lemot.fr\/44\/accueil-garenne-lemot\/j_6\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-11.21.06.png\" alt=\"\" class=\"wp-image-3786\"\/><\/a><figcaption><em>Site du Domaine de Garenne Lemot<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.jardins-folies-siffait.fr\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-11.10.11.png\" alt=\"\" class=\"wp-image-3779\"\/><\/a><figcaption><em>Site des Jardins des Folies Siffait<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.abbaye-blanche-couronne.fr\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-11.11.31.png\" alt=\"\" class=\"wp-image-3780\"\/><\/a><figcaption><em>Site de l&#8217;Abbaye de Blanche Couronne<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.eglise-saint-sulpice-des-landes.fr\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-11.14.45.png\" alt=\"\" class=\"wp-image-3781\"\/><\/a><figcaption><em>Site de l&#8217;Eglise du Vieux Bourg de Saint-Sulpice-des-Landes<\/em><\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/observatoire.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/12\/Capture-de\u0301cran-2021-12-10-a\u0300-11.16.14.png\" alt=\"\" class=\"wp-image-3782\"\/><\/a><figcaption><em>Site de l&#8217;Observatoire de Loire-Atlantique<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Renforcer notre accompagnement au sein des \u00e9quipes client<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour s&#8217;adapter et s&#8217;assurer du succ\u00e8s du d\u00e9ploiement projet, l&#8217;\u00e9quipe Digiwin a renforc\u00e9 sa m\u00e9thodologie d&#8217;accompagnement pour \u00eatre plus au plus proche du client. Des piliers de la fameuse m\u00e9thode agile a permis de dessiner la r\u00e9orientation du projet :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L\u2019agilit\u00e9 dans un tel projet comprend diff\u00e9rents aspects. La nouvelle approche consiste \u00e0 <strong>r\u00e9aliser la refonte des sites en cascade en sollicitant main dans la main les diff\u00e9rents acteurs du projet<\/strong>, internes et externes. Dans les faits, le dispositif mis en place est le suivant :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Mettre les ressources humaines de Digiwin dans les locaux du D\u00e9partement<\/strong> pour plus d\u2019interaction entre les diff\u00e9rents acteurs et apporter plus de relationnel et de collaboration dans le projet,<\/li><li><strong>R\u00e9aliser la refonte des sites un par un<\/strong> en commen\u00e7ant par la r\u00e9daction des sp\u00e9cificit\u00e9s techniques de chaque site par le D\u00e9partement,<\/li><li><strong>Refondre un site pas-\u00e0-pas avec diff\u00e9rents sprints<\/strong> et r\u00e9ajuster au fur et \u00e0 mesure avec une logique d\u2019it\u00e9ration,<\/li><li><strong>R\u00e9aliser chaque sprint<\/strong> par des phases de conception, d\u00e9veloppement et validation en passant <strong>par<\/strong> <strong>diff\u00e9rents acteurs pluri-comp\u00e9tents pour s\u2019assurer au passage de la bonne r\u00e9alisation<\/strong> de chaque \u00e9tape,<\/li><li><strong>Profiter de la refonte des sites suivants pour ajuster le Design System<\/strong> et les diff\u00e9rents enjeux que composent le projet.<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">La r\u00e9alisation du projet devient <strong>plus fluide en diminuant les temps morts<\/strong> tout en \u00e9tant plus interactive et collaborative. D\u2019ailleurs, ce mode de travail renforce l\u2019aspect humain du projet en soudant d\u2019avantage les \u00e9quipes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Construire un Design System en respectant les exigences d&#8217;accessibilit\u00e9<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pour <strong>d\u00e9cliner les gabarits, optimiser la structuration des contenus et faciliter la contribution de chaque site<\/strong>, Digiwin a envisag\u00e9 de travailler \u00e0 la fois sur l&#8217;architecture de Jalios et sur le Design System. De plus, le D\u00e9partement de Loire-Atlantique a fait le choix de le <a href=\"https:\/\/design.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">rendre accessible publiquement<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Focus sur le Design System<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>D\u00e9finition<\/strong> : Le Design System s&#8217;apparente \u00e0 une biblioth\u00e8que de composants, visuels et de principes au code r\u00e9utilisable. Il devient le kit r\u00e9f\u00e9rentiel UX\/UI.<br><br>Sans oublier que dans le cadre du projet, ce Design System doit r\u00e9pondre \u00e0 d&#8217;autres exigences telles que la conception en Mobile First et l&#8217;accessibilit\u00e9 (dans son d\u00e9veloppement et son rendu visuel final).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>L&#8217;avantage ?<\/strong> Le contributeur r\u00e9alise ses contenus sans se soucier de la mise en page : son choix se porte uniquement sur le gabarit de page. Ainsi, \u00e0 chaque mise \u00e0 jour du Design System, l&#8217;ensemble des gabarits est automatiquement mis \u00e0 jour.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/digiwin.fr\/wp-content\/uploads\/2021\/11\/Capture-de\u0301cran-2021-11-18-a\u0300-17.53.44-e1637315102496.png\" alt=\"\" class=\"wp-image-3696\"\/><figcaption><em>Aper\u00e7u du Design System du D\u00e9partement de Loire-Atlantique rendu public<\/em><\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Quelles sont les \u00e9tapes de cr\u00e9ation du Design System dans ce projet ?<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Concevoir des Wireframe pour structurer les pages types et un UI Kit pour la partie webdesign des diff\u00e9rents composants,<\/li><li>R\u00e9aliser des pistes graphiques pour d\u00e9finir la Charte Graphique finale. Ici, ces pistes ont \u00e9t\u00e9 test\u00e9es et valid\u00e9es par un panel de personnes en situation de handicap (notamment visuel),<\/li><li>D\u00e9velopper, d\u00e9couper et tester les composants en continu par diff\u00e9rents acteurs pluri-disciplinaires.<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Focus sur l&#8217;accessibilit\u00e9<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>D\u00e9finition<\/strong> : L&#8217;accessibilit\u00e9 web d\u00e9signe l\u2019ensemble des techniques et bonnes pratiques ayant pour objectif de rendre un site ou une application accessible&nbsp;\u00e0 tous \u2013 et en particulier aux personnes \u00ab&nbsp;handicap\u00e9es&nbsp;\u00bb au sens large du terme.<br><br>Reportez-vous \u00e0 notre <a href=\"https:\/\/digiwin.fr\/diginews\/rgaa-4-mise-en-oeuvre-dun-audit-daccessibilite\/\" target=\"_blank\" rel=\"noreferrer noopener\">article d\u00e9di\u00e9 \u00e0 l&#8217;accessibilit\u00e9 et aux exigences RGAA4<\/a> pour en savoir plus.<br><br><strong>Les choix effectu\u00e9s par le D\u00e9partement de Loire-Atlantique pour maximiser l&#8217;accessibilit\u00e9 :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Tester les maquettes aupr\u00e8s d&#8217;un panel de personnes en situation de handicap (visuel notamment),<\/li><li>Concevoir une feuille de style dans une logique AAA,<\/li><li>S\u00e9lectionner le framework le plus structur\u00e9 accessiblement parlant,<\/li><li>Auditer les diff\u00e9rentes parties du Design System \u00e0 plusieurs reprises au cours du process de conception et de d\u00e9veloppement,<\/li><li>Publier en ligne le <a href=\"https:\/\/design.loire-atlantique.fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Design System<\/a> et le <a href=\"https:\/\/github.com\/departement-loire-atlantique\/\" target=\"_blank\" rel=\"noreferrer noopener\">code en open source<\/a> pour inspirer et aider les autres collectivit\u00e9s \u00e0 la mise en accessibilit\u00e9,<\/li><li>Former les contributeurs \u00e0 l&#8217;accessibilit\u00e9 pour r\u00e9diger de fa\u00e7on plus compr\u00e9hensible pour tous.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Dans l&#8217;article pr\u00e9c\u00e9dent, nous avons expliqu\u00e9 le projet global de refonte des sites du D\u00e9partement de Loire-Atlantique. Retrouvez-ici la suite de l&#8217;article pour comprendre un peu mieux les axes strat\u00e9giques pris en cours de projet. Nous traiterons \u00e0 la fois des enjeux majeurs d&#8217;accessibilit\u00e9 et de Design System qui dessinent cette refonte. Projet d\u2019envergure&nbsp;: d\u00e9finir [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6376,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[184,185,182],"tags":[211,212,213,214,215,216],"class_list":["post-6375","post","type-post","status-publish","format-standard","has-post-thumbnail","category-change-adopt-pt-pt","category-digital-workplace-pt-pt","category-web-marketing-pt-pt","tag-accessibilite-pt-pt","tag-design-system-pt-pt","tag-mobile-first-pt-pt","tag-public-pt-pt","tag-refonte-pt-pt","tag-site-pt-pt"],"_links":{"self":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=6375"}],"version-history":[{"count":1,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6375\/revisions"}],"predecessor-version":[{"id":3016936,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/posts\/6375\/revisions\/3016936"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media\/6376"}],"wp:attachment":[{"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=6375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=6375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.luklagroup.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=6375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}