Style Guide - Confédération Suisse

Corporate design et corporate identity

Afin d’être instantanément identifiable, une entreprise doit maintenir une uniformité visuelle et textuelle sur tous les supports sur lesquels elle se présente. De plus, elle doit garantir l’accessibilité et la compatibilié de son site et ses extensions.
Pour les petites et moyennes entreprises dont les publications sont centralisées par un service, la cohérence de l’identité visuelle est relativement facile à maintenir. En revanche, lorsque l’entreprise est ramifiée et développée en départements et services, fonctionnant de manière indépendante, parfois même localisées sur plusieurs sites, il devient difficile de maintenir cette uniformité. 
Des guides de corporate design et de corporate identity qui formalisent les règles à appliquer sont disponibles à l’usage des collaborateurs. Ces documents sont souvent descriptifs, en format pdf, et difficilement utilisables rapidement dans l’opérationnel du daily business. De plus, ils sont rarement mis à jour.

Le Style Guide - solution web reproductible et fonctionnelle

La Confédération suisse et ses nombreux offices et départements se trouvent face au défi permanent du maintien de la cohérence visuelle, tout en actualisant en permanence le contenu et un fonctionnement adéquat de chaque page internet. 
Dans ce but, la Chancellerie fédérale et Liip SA, poursuivant le travail de deux agences, ont amélioré un outil répondant, pour le développement web, de manière simple et efficace à ces difficultés. 
Le coeur du système est basé sur un module qui s’appelle Fabricator auquel a été ajouté la possibilité de faire du multi-langues. Le tout est compatible avec tous les systèmes d’exploitation de la Confédération. Tous les éléments d’interface sont écrit en HTML; après sélection, le système les met en page, et il est possible de les tester en trois langues, de vérifier le code afin de pouvoir le reproduire sur son propre site. 
Le Style Guide se présente donc sous forme de site internet, dont le contenu est composé de texte de remplissage. De qualité supérieure techniquement, il est absolument conforme du point de vue du CI/CD et surtout accessible et compatible quel que soit le navigateur ou support utilisé, pour autant que les rédacteurs respectent les consignes au niveau textuel.

Cohérence visuelle, compatibilité et accessibiité assurées

Il s'agit de composants mis à disposition par la Chancellerie, à organiser, puis personnaliser avec le contenu souhaité. Chaque bloc de contenu est accompagné de son équivalent en code, qu’il suffit de dynamiser. Tout type de bloc est à disposition - tableaux, image avec légende, bloc de texte, etc.
L'utilisateur cherche par exemple le module de contenu 'Liste d'éléments'.

styleguide_en_1.png

Il obtient le design avec du texte de remplissage. Il peut prendre le bloc, le déplacer dans son propre site internet et le compléter avec les images et le texte désirés.

 styleguide_en_1.png

La création d’un Style Guide permet de se concentrer exclusivement sur tous les aspects graphiques d’un site. Toutes les difficultés relatives à l’accessibilité  et à la compatibilité sont résolues. En d’autres termes, par l’utilisation du contenu du Style Guide, l’utilisateur créera, de A à Z, un site compatible avec toutes les tailles d’écrans, les types d’appareil et les navigateurs, d’une accessibilité optimale, tout en repsectant le CI/CD de l’entreprise.
Ainsi, la cohérence visuelle et technique des sites web des différents départements est assurée, tout en optimisant le temps nécessaire à leur réalisation.
 

Pour plus d'information, le blogpost de Ludovic Turmel, développeur, explique à quoi sert et comment fonctionne un StyleGuide!

«Un Style Guide web est un outil puissant mais aussi complexe. Le potentiel de synergies est grand, mais le nombre d’aspects à considérer l’est aussi, et il est essentiel d'être bien accompagné au niveau technique et méthodique. LiiP nous a offert les compétences et outils nécessaires et nous a permis d’avancer de manière efficace dans ce processus.»
Citation Matthias Brüllmann, Conseiller métier, E-Government, Chancellerie Fédérale, Section communication

«Le Style Guide est la solution idéale à toute moyenne ou grande entreprise souhaitant optimiser la création de contenus web. Avec un investissement de départ, elle s’assure un site web accessible, compatible sur tous les supports, parfaitement en ligne avec le CI/CD.»
Cédric Hofstetter, Product Owner

Client

Résultats
swiss.github.io/styleguide