Difference between revisions of "Aurora"

From wiki
Jump to navigation Jump to search
m
m
 
(45 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{DISPLAYTITLE: Aurora design system}}
+
{{DISPLAYTITLE: Aurora}}
  
 
{{Translation to follow}}
 
{{Translation to follow}}
 +
 +
<multilang>
 +
@en|
  
 
<div class="plainlinks">
 
<div class="plainlinks">
Line 30: Line 33:
 
|data5  = V1, September 24, 2018
 
|data5  = V1, September 24, 2018
 
|label6  = Website  
 
|label6  = Website  
−
|data6  = [https://gctools-outilsgc.github.io/design-system-code/#!]
+
|data6  = [https://design.gccollab.ca/ design.gccollab.ca]
−
|label7 = GitHub repository
+
|label7  = UI kit
−
|data7   = [https://github.com/gctools-outilsgc/design-system Github Repository]
+
|data7  = [https://github.com/gctools-outilsgc/design-system/blob/master/master_ui_kit.ai/ Download UI kit]
 +
|label8 = GitHub repository
 +
|data8   = [https://github.com/gctools-outilsgc/design-system Github Repository]
  
 
|belowstyle = background:#ADE18D;
 
|belowstyle = background:#ADE18D;
Line 39: Line 44:
 
</div>
 
</div>
  
−
'''Aurora design system''' is a central design guide developed in 2018 by the Digital Collaboration Division within the Treasury Board of Canada Secretariat of the Government of Canada. It was built through a collaborative effort between various designers, developers and writers across the Government of Canada. Lead by the Digital Collaboration Division at the Treasury Board of Canada Secretariat, Aurora design system was created in collaboration with the Canadian Digital Service: Talent Cloud, Immigration, Refugees and Citizenship Canada, and other individuals within Government of Canada. Aurora design system was created to standardize the visual language and user experience of the Open Accessible Digital Workplace's online applications and tools.
+
'''Aurora design system''' is a central design guide developed in 2018 by the Digital Collaboration Division within the Treasury Board of Canada Secretariat of the Government of Canada. It was built through a collaborative effort between various designers, developers and writers across the Government of Canada.  
 +
 
 +
Lead by the Digital Collaboration Division at the Treasury Board of Canada Secretariat, Aurora design system was created in collaboration with the Canadian Digital Service: Talent Cloud, Immigration, Refugees and Citizenship Canada, and other individuals within Government of Canada. Aurora design system was created to standardize the visual language and user experience of the Open Accessible Digital Workplace's online applications and tools.
  
 
==Overview==
 
==Overview==
−
Aurora design system is a catalogue of user interface elements, writing style, guiding principles, coding standards, visual design, etc. for use in the Open Accessible Digital Workplace's applications. It was built in the open with contributions from developers, designers, writers and data scientists. Aurora design system is an ongoing project and will continue to be iterated on to increase the number of components available, expand its code and documentation, and improve its user experience attributes.
+
Aurora design system is a catalogue of user interface elements, writing style, guiding principles, coding standards, visual design, etc. for use in the Open Accessible Digital Workplace's applications. It was built in the open with contributions from developers, designers, writers and data scientists. Aurora design system is an ongoing project. Future iterations will be made to increase the number of components available, expand its code and documentation, and improve its user experience attributes.
  
 
===Mission Statement===
 
===Mission Statement===
Line 71: Line 78:
 
|-
 
|-
 
|Project Leads
 
|Project Leads
−
|[https://gcconnex.gc.ca/profile/Genevieve.Lemieux Genevieve Lemieux]
+
|[https://gccollab.ca/profile/Genevieve.Lemieux Genevieve Lemieux]
−
[https://gcconnex.gc.ca/profile/Sierra.Duffey Sierra Duffey]
+
[https://gccollab.ca/profile/Sduff Sierra Duffey]
 
|Digital Collaboration Division
 
|Digital Collaboration Division
 
|genevieve.lemieux@tbs-sct.gc.ca
 
|genevieve.lemieux@tbs-sct.gc.ca
Line 78: Line 85:
 
|-
 
|-
 
|UX Researchers
 
|UX Researchers
−
|[https://gcconnex.gc.ca/profile/Rebecca.Jeong Rebecca Jeong]
+
|[https://gccollab.ca/profile/Rebecca.Jeong Rebecca Jeong]
−
Alex Mesley
+
 
 +
[https://gccollab.ca/profile/Alex.Mesley Alex Mesley]
 +
 
 +
[https://gccollab.ca/profile/Donna.Monbourquette Donna Monbourquette]
  
−
Donna Monbourquette
 
 
|Digital Collaboration Division
 
|Digital Collaboration Division
  
Line 116: Line 125:
 
|-
 
|-
 
|Graphic Designers
 
|Graphic Designers
−
|Michael Martel<br>Sabrina Rowland-Cote
+
|[https://gccollab.ca/profile/Michael.Martel Michael Martel]<br>[https://gccollab.ca/profile/Sabrina.Rowland.Cote Sabrina Rowland Côté]
 
Chuma Asuzu
 
Chuma Asuzu
 
|Digital Collaboration Division<br><br>IRCC
 
|Digital Collaboration Division<br><br>IRCC
Line 123: Line 132:
 
|-
 
|-
 
|Technical Writers
 
|Technical Writers
−
|Marianne Aubrey
+
|[https://gccollab.ca/profile/Marianne.Aubrey Marianne Aubrey]
 
Nneka Nnagbo
 
Nneka Nnagbo
 
|Digital Collaboration Division
 
|Digital Collaboration Division
Line 157: Line 166:
  
 
==Versions==
 
==Versions==
−
===Version One===
+
===Version 1===
 +
Released on September 24th, 2018, the first version of Aurora design system included components, as well as best practices for written content and data visualization.
  
−
Released on September 24th 2018, the first version of Aurora design system included HTML code, design elements and documentation for the following components:
+
====Components in Version 1====
 +
Version 1 included HTML code, design elements and documentation for the following components:
  
−
[[File:Tagsdesignsystem.PNG|1200px|thumb|right|Example of Tags component with HTML code]]
+
[[File:Tagsdesignsystem.PNG|700px|thumb|right|Example of Tags component with HTML code]]
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 214: Line 225:
 
|}
 
|}
  
−
Version one of Aurora design system also included documentation on best practices for written content and data visualizations:
+
====Content and data====
−
+
Aurora Version 1 contained content guidelines and data visualization styles, and best practices for the following topics:
 +
[[File:Graphaurora.jpg|700px|thumb|right|Example of a bar graph in Aurora design system]]
 +
{| class="wikitable"
 +
!Category
 +
!Topic
 +
|-
 +
|'''Content guidelines'''
 +
|Reading level and plain language
 +
Spelling
  
−
== Latest Updates and Key Files ==
+
Addressing users
−
'''June 2018'''
 
  
−
Now in Phase II, the design team has split into smaller working teams, including developers, writers, designers, and UX researchers. We are conducting usability testing on some of our elements, developing style sheets and HTML components, and creating wire-frames to build the first iteration of the design system website.
+
Referring to product owners and the Government of Canada
  
−
The first iteration of the design system is in review. We are making small changes to components, ensuring consistency in our UI kit, and editing documentation. Take a look at our Github for some of our [https://github.com/gctools-outilsgc/design-system/tree/master/ux%20testing research reports] and [https://github.com/gctools-outilsgc/design-system/tree/master/page%20prototypes example prototypes]!
+
Useful tools
 +
|-
 +
|'''Content formatting'''
 +
|Aurora follows the Canadian Press Style Guide:
 +
Capitalization
 +
Dates, numbers and addresses
  
−
Sierra also wrote a [https://medium.com/@s.duffey121/7-things-i-learned-from-leading-a-design-project-7b003d25b5e2][[DCD Blogs/7 Things I Learned from Leading a Design Project|blog pos]]<nowiki/>t outlining some of the key lessons learned from the project.
+
Time
  
−
'''April 2018'''
+
Units of measurement
  
−
The
+
Ampersands
−
<nowiki>#</nowiki>GCdigital design team is hard at work creating a first draft of the #GCdigital
 
−
design system. Browse through our [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/ Gitbook] to see what's been done so far and
 
−
what we're still working on!
 
  
−
The first phase of the design system will focus on key design elements, and a downloadable user interface (UI) kit. We are finishing the last few elements
+
Commas, ellipses, colons
−
related to navigation, data visualizations and animations, as well as reviewing previous work.
 
  
−
Development work for the design elements will start mid-May. Interested in helping us code our components? [mailto:&#x20;sierra.duffey@tbs-sct.gc.ca Contact us!] 
+
Slashes and hyphens
  
−
'''January 24'''
+
Bold and italics
  
−
The majority of the cards from our first design sprint were completed. The DCD team got together and categorized elements into different sprints, for a total of 8 sprints to complete Phase I. We created a project timeline (see below) to determine dates and expectations for Phase I, with the last sprint completing on May 2, 2018. At this point all the elements (incl. design files, documentation and code) will be available on Github. This UI Kit and documentation will be useful for prototyping new products and features.  
+
Quotation marks
−
* '''[[:File:Design System Update Jan 24.pptx|Update_January 24]]'''
+
|-
 +
|'''Glossary'''
 +
|Containing definitions of words commonly used by the Digital Collaboration Division.
 +
|-
 +
|'''System vocabulary'''
 +
|Containing definitions of words appearing in Aurora and its tools.
 +
|-
 +
|'''Data overview'''
 +
|Best practices of data visualization
  
−
'''January 10'''
+
Multiple formats
  
−
On January 10th DCD will be launching it's first design sprint! We will be presenting some work we've done so far (mood boards, typography mock-ups) as well as giving a brief overview of working with Kanban boards, Github and agile development/design.
+
Labels
  
−
We will decide on a theme for our first sprint, and use any remaining time to start brainstorming ideas for specific elements, and uploading these brainstorming documents/inspiration boards to Github.
+
Colours and textures
  
−
Sprint planning and working meetings will continue every second Wednesday at the same time and location.
+
Stylized numbers
−
* [[:File:Design System Update Jan 10.pptx|'''Presentation: Update_January 10_DCD Meeting''']]
+
|-
−
* '''Presentation: Sprint 1_Launch'''
+
|'''Choosing visualizations'''
 +
|Tables
 +
Bar and column graphs
  
−
'''December 5'''
+
Line graphs
  
−
On December 5 the DCD held a second design system meeting with partners. Here we did a quick review of our mission, guiding principles, hypothesis and phases identified in the first meeting. We also collaborated on three key questions: who will use the system? what is the system for? and what are the risks associated with designing this system?
+
Scatterplots
 +
|-
 +
|'''Legends and tooltips'''
 +
|Side aligned legend
 +
Bottom aligned legend
 +
|}
  
−
We also took a look at some great resources such as the design process chart and MVP triangle (see below) to consider throughout the build of the design system.
+
==Future Updates==
 +
As Aurora is an iterative product, updates and fixes will be applied on a regular schedule. All versioning is subject to change based off of changing priorities and user feedback. Currently three iterations have been planned.
  
−
Sierra gave a brief overview of the agile development method and how the DCD development team works on a daily basis. We will be following a similar method when building this design system, with each sprint cycle focusing on a particular theme.
+
===Version 1.2===
 +
Version 1.2 will fix known bugs, as well as add components and content that are in progress from Version 1.
 +
====Fixes====
 +
* Improvements to mobile navigation
 +
* Review of all of the alternative text on the site
 +
* Apply usability and accessibility fixes
 +
* Add proper translations in code blocks
 +
* Fix inconsistency in components
 +
 +
====Updates====
 +
* Download page with distribution file and UI kit
 +
* Contact page
 +
* Help articles formatting
 +
* Comments
 +
* Menus
 +
* Do and don't images
 +
 
 +
===Version 1.3===
 +
 
 +
Version 1.3 will update the navigation elements in Aurora, as well as address fixes from user feedback from Version 1.2.  
  
−
We took some time to identify which roles and contributions are required for Phase I, and who can fulfill them. We decided that DCD will host future meetings and sprint planning/review (although location may alternate).
+
====Updates====
 +
* Drawers and accordions
 +
* Header and Footer
 +
* Sidebar
 +
* Tabs
 +
* Alternative Text article
 +
* Research page for design system-related studies
  
−
The DCD team also presented our key priorities/requirements for Phase I which were based on the parts checklist and a review of our UI inventory. Partners are encouraged to do the same and ensure that our key requirements are aligned prior to our first sprint.  
+
===Version 2===
 +
Version 2 will be a major update to Aurora design system. Content based off the Open Accessible Digital Workspace will be added, as well as additional resources and common layouts. Fixes from user feedback of Version 1.3 will be addressed.
  
−
We will a sprint planning meeting to launch our first sprint in January!
+
====Identity====
−
* [[:en:File:Design_System_Workshop_December_5.pdf|'''Workshop_December 5 Presentation''']]
+
* Values and mission statement
−
* [[:File:Design System Parts Checklist.pdf|'''Design System Parts Checklist''']]
+
* Logo
 +
* Brand colours
 +
* Taglines
 +
* Voice and tone
 +
 
 +
====Resources====
 +
* Inclusive design
 +
* Research and best practices
 +
 
 +
====Layouts====
 +
* Site navigation
 +
* App navigation
 +
* Login page
 +
* Stats dashboard
  
 
== Research ==
 
== Research ==
  
−
==== Our studies ====
+
==== Studies conducted by the Digital Collaboration Divison ====
 
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Mood Board Survey]]
 
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Mood Board Survey]]
 
* [[:File:Results DS Information Architecture.pdf|Card-Sorting: Information Architecture]]
 
* [[:File:Results DS Information Architecture.pdf|Card-Sorting: Information Architecture]]
Line 277: Line 351:
 
* [[:File:Design system architecture final.pdf|Final Architecture for Design System]]
 
* [[:File:Design system architecture final.pdf|Final Architecture for Design System]]
  
−
==== Examples of design systems ====
+
==== Design systems used as inspiration and reference ====
−
As guides, we will often refer to [https://semantic-ui.com/ Semantic.ui] and [https://material.io/guidelines/ Google Material Design]!  
+
* [https://semantic-ui.com/ Semantic.ui]
 +
* [https://material.io/guidelines/ Google Material Design]!  
 
* [https://standards.usa.gov/ United States Gov]
 
* [https://standards.usa.gov/ United States Gov]
 
* [http://carbondesignsystem.com/ Carbon Design System]
 
* [http://carbondesignsystem.com/ Carbon Design System]
Line 296: Line 371:
 
* [https://github.com/alexpate/awesome-design-systems List of awesome design systems]
 
* [https://github.com/alexpate/awesome-design-systems List of awesome design systems]
  
−
==== Articles to read ====
+
[[Category:Digital Government]]
−
* [http://bradfrost.com/blog/post/atomic-web-design/ Atomic Web Design]
+
[[Category:GCTools]]
−
* [https://publication.design.systems/what-i-learned-about-leading-a-design-system-in-2017-46b85e9d7eab What I Learned About Leading a Design System in 2017]
+
[[Category:User Experience]]
−
* [https://medium.com/@NateBaldwin/dummys-guide-to-building-a-design-system-ada311c80d0b Dummy's Guide to Building a Design System]
+
[[Category:Design]]
−
* [https://gds.blog.gov.uk/2017/10/30/building-the-gov-uk-design-system/ Building the GOV.UK Design System]
+
[[Category:Web Design]]
−
* [https://medium.com/@marcintreder/design-systems-sprint-0-the-silver-bullet-of-product-development-8c0ed83bf00d Design Systems Sprint 0]
+
[[Category:Aurora Design System]]
−
* [https://littlethunder.co/showcase/electronic-arts/ Electronic Arts Showcase]
+
[[Category:Design System]]
 +
 
 +
<!-- French Starts here -->
 +
@fr|
 +
<div class="plainlinks">
 +
<div style="float: right;">
 +
{{Infobox
 +
|name        =
 +
|bodystyle    =
 +
|title        =
 +
|titlestyle  =
 +
 
 +
|image        = [[File:Aurora_Logo.png|303px]]
 +
|imagestyle  =
 +
|caption      = Logo du système de conception Aurora
 +
|captionstyle =  
 +
|headerstyle  = background:#5DC1BE;
 +
|labelstyle  = background:#5DC1BE;
 +
|datastyle    =  
 +
 
 +
|header1 = '''Système de conception Aurora'''
 +
|label1  =
 +
|data1  =  
 +
|header2 =  
 +
|label3  = Développeur
 +
|data3  = Division de la collaboration numérique
 +
|label4  = Version initiale
 +
|data4  = le 24 septembre 2018
 +
|label5  = Dernière version
 +
|data5  = V1, le 24 septembre 2018
 +
|label6  = Site Web
 +
|data6  = [https://design.gccollab.ca/ design.gccollab.ca]
 +
|label7  = Trousse IU
 +
|data7  = [https://github.com/gctools-outilsgc/design-system/blob/master/master_ui_kit.ai/ Téléchargez la trousse IU]
 +
|label8  = Répertoire GitHub
 +
|data8  = [https://github.com/gctools-outilsgc/design-system Répertoire GitHub]
 +
 
 +
|belowstyle = background:#ADE18D;
 +
|below =
 +
}}
 +
</div>
 +
 
 +
Le '''système de conception Aurora''' est un guide de conception central développé en 2018 par la Division de la collaboration numérique du Secrétariat du Conseil du Trésor du gouvernement du Canada. Il est le fruit d’un partenariat entre divers concepteurs, développeurs et rédacteurs du gouvernement du Canada.
 +
 
 +
Conçu sous la direction de la Division de la collaboration numérique du Secrétariat du Conseil du Trésor du Canada, le système de conception Aurora a été créé en collaboration avec le Service numérique canadien, le Nuage de talents, Immigration, Réfugiés et Citoyenneté Canada ainsi que d’autres employés du gouvernement du Canada. Le système de conception Aurora permet de normaliser le langage visuel et l’expérience-utilisateur des applications et des outils en ligne de l’espace de travail numérique ouvert et accessible.
 +
 
 +
==Aperçu==
 +
Le système de conception Aurora est un catalogue comportant les éléments de l’interface-utilisateur, le style de rédaction, les principes directeurs, les normes de codage, la conception visuelle, etc. qui peuvent être utilisés dans les applications de l’espace de travail numérique ouvert et accessible. Il a été réalisé à partir d’un environnement ouvert, et des développeurs, des concepteurs, des rédacteurs et des scientifiques des données y ont contribué. Le système de conception Aurora est un projet continu. D’autres versions seront publiées; elles permettront d’accroître le nombre de composantes disponibles, d’élargir le code et d’augmenter la documentation, et d’améliorer les attributs de l’expérience-utilisateur.
 +
 
 +
===Énoncé de mission===
 +
Créer un système de conception pour les outils de collaboration numérique du gouvernement du Canada, qui peut être réutilisé et appliqué à d’autres services et produits numériques internes ou publics. Le système permettra de garantir une expérience fluide aux utilisateurs de toutes les plateformes; il sera facile à utiliser et pourra être mis en œuvre rapidement par les développeurs et les concepteurs. Le système de conception fournira un cadre général ainsi que des principes directeurs et des composantes, adaptables à d’autres marques et besoins.
 +
 
 +
===Principes=== 
 +
Le système de conception Aurora respecte les principes suivants :
 +
 
 +
*'''Simple et flexible''': Offre tous les éléments nécessaires sans être restrictif. Le système de conception Aurora est un système léger, qui peut être adapté à un produit particulier.
 +
 
 +
*'''Agréable à utiliser''': Facilite la tâche des développeurs et des concepteurs plutôt que de leur ajouter un fardeau ou des obligations. Le système de conception Aurora offre une conception esthétique facile à utiliser et à adapter.
 +
 
 +
*'''Réutilisable''': Peut répondre à des besoins divers. Tous les composants et principes du système sont suffisamment généraux pour être appliqués à une vaste gamme de produits numériques. Les éléments du code et de la conception peuvent être facilement extraits pour créer de nouveaux produits, et les lignes directrices en matière de communication sont faciles à comprendre et à suivre.
 +
 
 +
*'''Diversifié''': Couvre une variété de besoins et de types de produits. Le système de conception Aurora respecte les obligations nécessaires du gouvernement du Canada telles que les langues officielles et l'accessibilité.
 +
 
 +
*'''Indépendant des technologies déployées''': Applicable à tout cadre technologique qu'une équipe décide d'utiliser pour son projet.
 +
 
 +
*'''Ouvert''': Ouvert et accessible à quiconque souhaite l’utiliser. Tous les codes sources du système de conception Aurora sont ouverts, et les lignes directrices et autres éléments peuvent être copiés librement.
 +
 
 +
==Équipe de projet==
 +
 
 +
{| class="wikitable"
 +
!Rôle
 +
!Nom(s)
 +
!Équipe
 +
!Personne-ressource
 +
|-
 +
|Chefs de projet
 +
|[https://gccollab.ca/profile/Genevieve.Lemieux Genevieve Lemieux]
 +
[https://gccollab.ca/profile/Sduff Sierra Duffey]
 +
|Division de la collaboration numérique
 +
|genevieve.lemieux@tbs-sct.gc.ca
 +
sierra.duffey@tbs-sct.gc.ca
 +
|-
 +
|Chercheurs sur l’expérience-utilisateur
 +
|[https://gccollab.ca/profile/Rebecca.Jeong Rebecca Jeong]
 +
 
 +
[https://gccollab.ca/profile/Alex.Mesley Alex Mesley]
 +
 
 +
[https://gccollab.ca/profile/Donna.Monbourquette Donna Monbourquette]
 +
 
 +
|Division de la collaboration numérique
 +
 
 +
|rebecca.jeong@tbs-sct.gc.ca
 +
alex.mesley@tbs-st.gc.ca
 +
 
 +
donna.monbourquette@tbs-sct.gc.ca<br>
 +
|-
 +
|Développeurs d’interfaces frontales
 +
|[https://gcconnex.gc.ca/profile/Ethan.Wallace Ethan Wallace]
 +
[https://gcconnex.gc.ca/profile/Nicholas.Pietrantonio Nick Pietrantonio]
 +
 
 +
Simon Roy
 +
 
 +
Omar Nasr
 +
 
 +
Daniel Spence
 +
|Division de la collaboration numérique
 +
<br>
 +
 
 +
Santé Canada
 +
 
 +
Agence du revenu du Canada
 +
|ethan.wallace@tbs-sct.gc.ca
 +
nicholas.pietrantonio@tbs-sct.gc.ca
 +
 
 +
stephanie.lefebvre@tbs-sct.gc.ca
 +
 
 +
simon.roy@tbs-sct.gc.ca
 +
 
 +
omar.nasr@canada.ca
 +
 
 +
daniel.spence@cra-arc.gc.ca
 +
|-
 +
|Concepteurs graphiques
 +
|[https://gccollab.ca/profile/Michael.Martel Michael Martel]<br>[https://gccollab.ca/profile/Sabrina.Rowland.Cote Sabrina Rowland Côté]
 +
Chuma Asuzu
 +
|Division de la collaboration numérique<br><br>IRCC
 +
| michael.martel@tbs-sct.gc.ca<br>sabrina.rowland-cote@tbs-sct.gc.ca
 +
michael.asuzu@cic.gc.ca
 +
|-
 +
|Rédacteurs techniques
 +
|[https://gccollab.ca/profile/Marianne.Aubrey Marianne Aubrey]
 +
Nneka Nnagbo
 +
|Division de la collaboration numérique
 +
Agence du revenu du Canada
 +
|marianne.aubrey@tbs-sct.gc.ca
 +
 
 +
nneka.nnagbo@cra-arc.gc.ca
 +
|-
 +
|Liaison avec les partenaires
 +
|[https://gcconnex.gc.ca/profile/Heather.Laird Heather Laird]
 +
|Division de la collaboration numérique
 +
|heather.laird@tbs-sct.gc.ca
 +
|-
 +
|Experts-conseils
 +
|Sean Boots
 +
Thomas Gohard
 +
 
 +
Paul Jackson
 +
 
 +
Gerardo Escandon
 +
|Service numérique canadien
 +
Secrétariat du Conseil du Trésor du Canada
 +
 
 +
Secrétariat du Conseil du Trésor du Canada
 +
 
 +
Nuage de talents
 +
|sean.boots@tbs-sct.gc.ca
 +
 
 +
thomas.gohard@tbs-sct.gc.ca
 +
 
 +
paul.jackson@tbs-sct.gc.ca
 +
|}
 +
 
 +
==Versions==
 +
===Version 1===
 +
Publiée le 24 septembre 2018, la première version du système de conception Aurora comprenait des composantes, ainsi que des pratiques exemplaires pour le contenu écrit et la visualisation des données.
 +
 
 +
====Composantes de la version 1====
 +
La première version comprenait le code HTML, les éléments de conception et la documentation pour les composantes suivantes :
 +
 
 +
[[File:BalisesAurora.JPG|700px|thumb|right|Exemple de composantes d’étiquettes avec code HTML]]
 +
 
 +
{| class="wikitable"
 +
!Type de composante
 +
!Composante
 +
|-
 +
|'''Visuels'''
 +
|Couleur
 +
 
 +
Icônes
 +
 
 +
Typographie
 +
 
 +
|-
 +
|'''Standard'''
 +
|Images, avatars et vignettes
 +
 
 +
Badges
 +
 
 +
Boutons
 +
 
 +
Cartes
 +
 
 +
Séparateur ou règle
  
−
* [https://medium.com/eightshapes-llc/on-classification-in-design-systems-6b33b97f4a8f Classification on Design Systems]
+
Grilles et espacement
  
−
* [https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/ Design Systems v. Pattern Libraries v. Style Guides]
+
Messagerie du système
  
−
* [https://uxdesign.cc/selling-a-design-system-before-asking-for-buy-in-eeb45e88f66a Selling a Design System Before Asking for Buy-In] 
+
Balises, puces et pilules
  
−
==== Other resources ====
+
Infobulles
−
* An excellent book on design systems [http://designsystemsbook.com/ Design systems]
 
−
* [https://www.microsoft.com/en-us/design/inclusive Microsoft Inclusive Design]
 
−
* [[:File:The Actionable Guide to Starting Your Design System.pdf|The Actionable Guide to Starting your Design System (.pdf)]]
 
−
* [[:File:Uxpin why build a design system.pdf|Why build a design system? (.pdf)]]
 
−
* [https://blog.marvelapp.com/ten-tips-typography-web-design/?utm_source=weekly-newsletter&utm_medium=email&utm_campaign=marvel-newsletter-2017-12-04&utm_term= Ten Tips on Typography in Web Design]
 
  
−
== Planning ==
+
|-
−
==== Mission Statement: ====
 
−
Make a design
 
−
system for the Government of Canada’s digital collaboration tools that can also
 
−
be reused and applied to other public or internal digital services and
 
−
products. This system will help to ensure a seamless experience for users
 
−
across platforms, will be easy to use, and quick for developers and designers
 
−
to implement. The design system will provide a basic framework with guiding
 
−
principles and components, with the ability to be adapted to other brands and
 
−
needs. 
 
  
−
==== Guiding Principles ====
+
|'''Navigation'''
−
* '''Simple and flexible:''' a lightweight system that allows individual teams to adapt branding and other design elements to suit a specific project. The system will provide guidelines for all necessary elements without being restrictive.
 
−
* '''Fun to use:''' the system itself will have a pleasing design that is easy for developers and designers to navigate and adapt to their needs. Using the system will make their jobs easier rather than add an extra burden or obligations to follow.
 
−
* '''Re-usable:''' all components and principles included in the design system are generic enough to suit a variety of needs for multiple teams. Code and design elements can easily be extracted to create new products. Communications guidelines are easy to understand and follow.
 
−
* '''Diverse:''' The design system will cover a variety of needs and types of products. The system will also cover necessary government obligations such as official languages and accessibility.
 
−
* '''Technology agnostic:''' the design system is applicable regardless of which technology framework the team decides to use for their project.
 
−
* '''Open:''' the design system will be open and accessible to anyone who wishes to use it. All code is open source, and other guidelines and elements are free to copy.<br>
 
−
==== Project Phases ====
 
−
* '''Phase I:''' first prototype, design-focused elements and basic UI components. Includes elements that will be useful to all partners
 
−
* '''Phase II:''' improvement on the first version. Includes second priority items such as templates, branding, editorial guidelines, research and data guidelines, layouts, etc. These elements are more specific to the GCTools rebuild.
 
−
* '''Phase III:''' Includes elements that are “nice to haves”.More focus on process and guidelines, as well as customization for various partners/users of the system.
 
−
* '''Phase IV:''' Continuous improvement and updates to thesystem. Promoting and pitching the system to other users. Opportunities for newpartnerships. 
 
  
−
==== Files ====
+
|Fil d'Ariane
−
* [[:File:Design System Phase II project plan.xlsx|'''Phase II project plan''']]
 
  
−
* '''[[:File:Design System Update Jan 24.pptx|Update_January 24]]'''
+
Haut de la page
−
* [[:File:Design System Update Jan 10.pptx|'''Update_January 10''']]
 
  
−
* [[:en:File:Design_System_Workshop_December_5.pdf|'''Workshop_December 5''']]
+
Liens
−
* [[:File:Design System Parts Checklist.pdf|'''Design System Parts Checklist''']]
 
  
−
== Building ==
+
Pagination et défilement
−
* [https://github.com/gctools-outilsgc/design-system '''Github Repository''']
 
−
* '''[https://www.gitbook.com/book/s-duffey/-gcdigital-design-system/details Gitbook for documentation]'''
 
−
* [https://zube.io/tbs-sct/design-system/w/main-workspace/kanban '''Design System Zube board''']
 
  
−
=== Agile Development ===
+
Barre de recherche
−
The DCD team currently works using the agile development model. We will be following this model to build the design system with a specific theme for each sprint cycle.
 
  
−
'''Basic concept of agile:''' deliver products and features based on a set of minimum requirements, then review and improve the product through multiple iterations. Tasks are broken into small chunks that can typically be completed within one sprint (two-weeks).
+
|-
  
−
Work is divided into '''sprint cycles'''. Each sprint cycle lasts 2-weeks and has a '''planning meeting''' to start it off, and a '''review meeting''' to go over work completed during the sprint. Every few sprint cycles there are also '''retrospective meetings''' where the team meets to discuss and review processes and best practices.
+
|'''Formulaires'''
  
−
Each sprint planning is led by a scrum-master (Sierra) who assigns team members to each specific task that has been identified for that sprint. Tasks are categories using a points-system which indicates the amount of effort/time required to complete the task. The goal is to complete as many points as possible by the end of the sprint (ideally all of the points that were assigned). 
+
|Conception et étiquettes globales
  
−
In the DCD team, code is stored and reviewed in a [https://github.com/gctools-outilsgc/design-system Github repository]. This Github repository is connected to a service called [https://zube.io/ Zube], which is a workspace where the scrum-master can manage and assign tasks.
+
Saisies des boutons
  
−
'''Learn more'''
+
Erreurs et validation
−
* [https://en.wikipedia.org/wiki/Agile_software_development Wikipedia: Agile development]
 
−
* [https://www.versionone.com/agile-101/agile-management-practices/ Version One: Agile management practices]
 
−
* [https://www.youtube.com/watch?v=R8dYLbJiTUE Intro to working with Kanban boards]
 
  
−
=== Phase I ===
+
Saisies textuelles
−
==== Sections Completed ====
 
−
* Base Elements (Jan 2 - Jan 24)
 
−
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/typography Visuals] (Jan 24 - Feb 7)
 
−
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/images-and-media Content] (Feb 7 - Feb 21)
 
−
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/forms-overall-design-and-labels Forms] (Feb 21 - Mar 28)
 
−
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/nav-breadcrumbs Navigation] (Mar 28 - April 11)
 
−
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/data-overview Data Visualizations] (April 11 - April 25)
 
−
* [https://github.com/gctools-outilsgc/design-system/tree/master/user%20interface%20kit User Interface Kit] (April 25 - May 15)
 
  
−
=== Phase II ===
+
Indicateurs d'état
−
Starting on May 17, after the Blueprint Innovation Fair, the design system team will kick off phase II of the project. Phase II includes development work for components designed in phase I; writing, branding and accessibility guidelines, as well as user testing and design work for page templates and additional components.  
+
 
 +
Téléversement des fichiers
 +
|}
 +
 
 +
====Contenu et données====
 +
Aurora contient des lignes directrices sur le contenu et des styles de visualisation des données, ainsi que des pratiques exemplaires sur les sujets suivants :
 +
[[File:DiagrammesAurora.JPG|700px|thumb|right|Exemple de diagramme à barres dans le système de conception Aurora]]
 +
{| class="wikitable"
 +
!Catégorie
 +
!Sujet
 +
|-
 +
|'''Lignes directrices sur le contenu'''
 +
|Niveau de lecture et langage clair et simple
 +
Orthographe
 +
 
 +
S’adresser aux utilisateurs
 +
 
 +
Faire référence à des propriétaires de produits et au gouvernement du Canada
 +
 
 +
|-
 +
|'''Mise en forme du contenu'''
 +
|Aurora follows the Canadian Press Style Guide:
 +
Majuscules
 +
 
 +
Contractions
 +
 
 +
Listes numérotées et à puces
 +
 
 +
Heure
 +
 
 +
Unités de mesure
 +
 
 +
Lieux, noms et noms officiels
 +
 
 +
Esperluettes
 +
 
 +
Virgules, points de suspension, points-virgules
 +
 
 +
Barres obliques et traits d’union
 +
 
 +
Gras et italiques
 +
 
 +
Guillemets
 +
|-
 +
|'''Glossaire'''
 +
|Containing definitions of words commonly used by the Digital Collaboration Division.
 +
|-
 +
|'''Vocabulaire du système'''
 +
|Containing definitions of words appearing in Aurora and its tools.
 +
|-
 +
|'''Données'''
 +
|Aperçu
 +
 
 +
Formats multiples
 +
 
 +
Étiquettes
 +
 
 +
Formats des données et abréviations
 +
 
 +
Couleurs et textures
 +
 
 +
Nombres stylisés
 +
|-
 +
|'''Choisir les visualisations'''
 +
|Tableaux
 +
Graphiques à barres et à colonnes
 +
 
 +
Graphiques à bâtons
 +
 
 +
Diagramme de dispersion
 +
|-
 +
|'''Les légendes et infobulles'''
 +
|Légendes alignées sur le côté
 +
Légendes placées en bas
 +
|}
 +
 
 +
==Prochaines mises à jours==
 +
La Division de la collaboration numérique se consacre constamment à actualiser et à itérer le système de conception Aurora afin de l’améliorer davantage encore. Vous trouverez ci-après un bref coup d’œil sur les changements envisagés en vue des prochaines versions.
 +
 
 +
===Version 1.2===
 +
Dans la version 1.2, nous allons appliquer les rustines connues, ajouter les composantes en cours, intégrer des saisies d’écran démontrant les actions à faire et celles à éviter, ainsi que fournir des fichiers de distribution pour les développeurs.
 +
 
 +
La liste ci-après contient les rustines et les mises à jour envisagées :
 +
 
 +
====Rustines====
 +
 
 +
Améliorer la navigation mobile
 +
Réviser tout le texte optionnel sur le site
 +
Appliquer les rustines en matière de facilité d’emploi et d’accessibilité
 +
Ajouter des traductions justes en blocs de code
 +
Corriger les incohérences dans les composantes
 +
 
 +
====Mises à jour====
 +
 
 +
Page de téléchargement renfermant le fichier de distribution et la trousse IU
 +
Page de coordonnées
 +
Formatage des articles du centre de dépannage
 +
Commentaires
 +
Menus
 +
Saisies d’écran affichant les actions à faire et celles à éviter
 +
 
 +
===Version 1.3===
 +
Dans la version 1.3, nous ajouterons des éléments de navigation, ainsi qu’une page renfermant notre recherche EU sur le contenu du système de conception. En outre, nous appliquerons les rustines proposées par l’entremise des commentaires des utilisateurs de la version 1.2.
 +
 
 +
Les éléments ci-après, entre autres, seront actualisés :
 +
 
 +
Classeurs et accordéons
 +
En-tête et pied de page
 +
Encadré latéral
 +
Onglets
 +
Article sur le texte optionnel
 +
Page pour les recherches sur les SD
 +
 
 +
===Version 2===
 +
La version 2 comprend d’importantes mises à jour, y compris une section « Identité » en fonction de la marque « OADW », des ressources supplémentaires et des mises en page communes. Nous appliquerons aussi des rustines en fonction des commentaires des utilisateurs de la version 1.3.
 +
 
 +
Section « Identité » :
 +
 
 +
Valeurs et énoncé de mission
 +
Logo
 +
Titres d’appel
 +
Voix et ton
 +
Section « Ressources » :
 +
 
 +
Conception inclusive
 +
Recherche et pratiques exemplaires
 +
Mises en page :
 +
 
 +
Navigation sur le site
 +
Navigation sur l’appli
 +
Page de connexion
 +
Tableau de bord de statistiques
 +
Les versions énoncées ci-dessus sont susceptibles de changer. Aurora continuera de procéder par itération de manière agile, ce qui signifie que les enjeux seront résolus et des mises à jour seront apportées selon les priorités changeantes et les commentaires des utilisateurs.
 +
 
 +
==Recherche ==
 +
 
 +
====Études menées par la Division de la collaboration numérique====
 +
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Sondage sur les planches de tendance (Anglais seulement)]]
 +
* [[:File:Results DS Information Architecture.pdf|Tri des cartes : Architecture de l’information (Anglais seulement)]]
 +
* [[:File:Report typography and data viz testing.pdf|Rapport : Typographie et visualisation des données (Anglais seulement)]]
 +
* [[:File:Design system architecture final.pdf|Architecture finale du système de conception (Anglais seulement)]]
 +
 
 +
====Systèmes de conception utilisés comme source d’inspiration et de référence====
 +
* [https://semantic-ui.com/ Semantic.ui]
 +
* [https://material.io/guidelines/ Google Material Design]!
 +
* [https://standards.usa.gov/ United States Gov]
 +
* [http://carbondesignsystem.com/ Carbon Design System]
 +
 
 +
* [https://polaris.shopify.com/ Shopify Polaris]
 +
 
 +
* [https://designers.italia.it/&nbsp;(in&#x20;Italian&#x20;haha) Designers Italia]
 +
 
 +
* [http://patternlab.io/ Pattern Lab]
 +
* [https://www.lightningdesignsystem.com/ Lightning Design System]
 +
 
 +
* [http://www.oracle.com/webfolder/ux/middleware/alta/index.html Oracle Alta UI]
 +
 
 +
* [https://docs.microsoft.com/en-us/windows/uwp/design/fluent-design-system/index Microsoft Fluent Design]
 +
* [https://vmware.github.io/clarity/ Clarity Design System]
 +
 
 +
* [https://github.com/alexpate/awesome-design-systems List of awesome design systems]
  
−
All tasks for the second phase will continue to be managed in the [https://github.com/gctools-outilsgc/design-system design system Github.]
 
−
* [[:File:Design System Phase II project plan.xlsx|Phase II project plan]] (seen below)
 
−
[[File:Design system phase II Gantt chart.JPG|alt=Project plan for phase II of the GCdigital design system. The plan shows sprints 8 - 12|left|1118x1118px|Project plan for Phase II of the design system. Sprint 8 - 12]]
 
 
[[Category:Digital Government]]
 
[[Category:Digital Government]]
 
[[Category:GCTools]]
 
[[Category:GCTools]]
Line 394: Line 776:
 
[[Category:Aurora Design System]]
 
[[Category:Aurora Design System]]
 
[[Category:Design System]]
 
[[Category:Design System]]
 +
</multilang>
 +
[[Category:AuroraDS]]
 +
[[Category:GCTools]]
 +
[[Category:DCD]]
 +
[[Category:OutilsGC]]
 +
[[Category:GCDigital]]
 +
[[Category:Design System]]
 +
[[Category:Branding]]
 +
[[Category:OADW]]
 +
[[Category:User experience]]
 +
[[Category:Design]]
 +
[[Category:Development]]
 +
[[Category:Systeme de conception]]
 +
[[Category:Experience utilisateur]]
 +
[[Category:Conception]]
 +
[[Category:Developpement]]
 +
[[Category:L'ENOA]]
 +
[[Category:Division de la collaboration numérique]]

Latest revision as of 09:12, 5 December 2018


Ambox notice.png
 This page is a work in progress. We welcome your feedback. Please use the discussion page for suggestions and comments. When the page is approved and finalized, we will send it for translation.



Aurora Logo.png
Aurora design system logo
Aurora design system
Developer Digital Collaboration Division
Initial release September 24, 2018
Latest version V1, September 24, 2018
Website design.gccollab.ca
UI kit Download UI kit
GitHub repository Github Repository

Aurora design system is a central design guide developed in 2018 by the Digital Collaboration Division within the Treasury Board of Canada Secretariat of the Government of Canada. It was built through a collaborative effort between various designers, developers and writers across the Government of Canada.

Lead by the Digital Collaboration Division at the Treasury Board of Canada Secretariat, Aurora design system was created in collaboration with the Canadian Digital Service: Talent Cloud, Immigration, Refugees and Citizenship Canada, and other individuals within Government of Canada. Aurora design system was created to standardize the visual language and user experience of the Open Accessible Digital Workplace's online applications and tools.

Overview[edit | edit source]

Aurora design system is a catalogue of user interface elements, writing style, guiding principles, coding standards, visual design, etc. for use in the Open Accessible Digital Workplace's applications. It was built in the open with contributions from developers, designers, writers and data scientists. Aurora design system is an ongoing project. Future iterations will be made to increase the number of components available, expand its code and documentation, and improve its user experience attributes.

Mission Statement[edit | edit source]

Make a design system for the Government of Canada’s digital collaboration tools that can also be reused and applied to other public or internal digital services and products. This system will help to ensure a seamless experience for users across platforms, will be easy to use, and quick for developers and designers to implement. The design system will provide a basic framework with guiding principles and components, with the ability to be adapted to other brands and needs.

Principles[edit | edit source]

Aurora design system adheres to the following principles:

  • Simple and flexible: Provides all necessary elements without being restrictive. Aurora Design System is a lightweight system that can be adapted to suit a specific product.
  • Fun to use: Makes the job of developers and designers easier rather than add extra burdens or obligations to follow. Aurora Design System has an aesthetically pleasing design that is easy to navigate and adapt.
  • Re-usable: Suits a variety of needs. All components and principles are generic enough to be applied to a wide range of digital products. Code and design elements can easily be extracted to create new products, and communications guidelines are easy to understand and follow.
  • Diverse: Covers a variety of needs and types of products. Aurora Design System follows necessary Government of Canada obligations such as official languages and accessibility
  • Technology agnostic: Applicable to any technologic framework that a team decides to use for their project.
  • Open: To anyone who wishes to use it. All of Aurora Design System’s code is open source, and all other guidelines and elements are free to copy.

Project Team[edit | edit source]

Role Name(s) Team Contact Information
Project Leads Genevieve Lemieux

Sierra Duffey

Digital Collaboration Division genevieve.lemieux@tbs-sct.gc.ca

sierra.duffey@tbs-sct.gc.ca

UX Researchers Rebecca Jeong

Alex Mesley

Donna Monbourquette

Digital Collaboration Division rebecca.jeong@tbs-sct.gc.ca

alex.mesley@tbs-st.gc.ca

donna.monbourquette@tbs-sct.gc.ca

Front-End (UI) Developers Ethan Wallace

Nick Pietrantonio

Simon Roy

Omar Nasr

Daniel Spence

Digital Collaboration Division


Health Canada

Canada Revenue Agency

ethan.wallace@tbs-sct.gc.ca

nicholas.pietrantonio@tbs-sct.gc.ca

stephanie.lefebvre@tbs-sct.gc.ca

simon.roy@tbs-sct.gc.ca

omar.nasr@canada.ca

daniel.spence@cra-arc.gc.ca

Graphic Designers Michael Martel
Sabrina Rowland Côté

Chuma Asuzu

Digital Collaboration Division

IRCC 		michael.martel@tbs-sct.gc.ca
sabrina.rowland-cote@tbs-sct.gc.ca

michael.asuzu@cic.gc.ca

Technical Writers Marianne Aubrey

Nneka Nnagbo

Digital Collaboration Division

Canada Revenue Agency

marianne.aubrey@tbs-sct.gc.ca

nneka.nnagbo@cra-arc.gc.ca

Partnership Liaison Heather Laird Digital Collaboration Division heather.laird@tbs-sct.gc.ca
Consultants Sean Boots

Thomas Gohard

Paul Jackson

Gerardo Escandon

Canadian Digital Service

OneGC (TBS)

OneGC (TBS)

Talent Cloud

sean.boots@tbs-sct.gc.ca

thomas.gohard@tbs-sct.gc.ca

paul.jackson@tbs-sct.gc.ca

Versions[edit | edit source]

Version 1[edit | edit source]

Released on September 24th, 2018, the first version of Aurora design system included components, as well as best practices for written content and data visualization.

Components in Version 1[edit | edit source]

Version 1 included HTML code, design elements and documentation for the following components:

Example of Tags component with HTML code
Component Type Component
Visuals Colour

Icons

Typography

Standard Avatars and thumbnails

Badges

Buttons

Cards

Divider/rule

Grids and spacing

System messaging

Tags, chips and pills

Tooltips

Navigation Breadcrumbs

Back to top

Links

Pagination and scrolling

Search

Forms Form design and labels

Button inputs

Errors and validation

File upload

Progress indicators

Text inputs

Content and data[edit | edit source]

Aurora Version 1 contained content guidelines and data visualization styles, and best practices for the following topics:

Example of a bar graph in Aurora design system
Category Topic
Content guidelines Reading level and plain language

Spelling

Addressing users

Referring to product owners and the Government of Canada

Useful tools

Content formatting Aurora follows the Canadian Press Style Guide:

Capitalization Dates, numbers and addresses

Time

Units of measurement

Ampersands

Commas, ellipses, colons

Slashes and hyphens

Bold and italics

Quotation marks

Glossary Containing definitions of words commonly used by the Digital Collaboration Division.
System vocabulary Containing definitions of words appearing in Aurora and its tools.
Data overview Best practices of data visualization

Multiple formats

Labels

Colours and textures

Stylized numbers

Choosing visualizations Tables

Bar and column graphs

Line graphs

Scatterplots

Legends and tooltips Side aligned legend

Bottom aligned legend

Future Updates[edit | edit source]

As Aurora is an iterative product, updates and fixes will be applied on a regular schedule. All versioning is subject to change based off of changing priorities and user feedback. Currently three iterations have been planned.

Version 1.2[edit | edit source]

Version 1.2 will fix known bugs, as well as add components and content that are in progress from Version 1.

Fixes[edit | edit source]

  • Improvements to mobile navigation
  • Review of all of the alternative text on the site
  • Apply usability and accessibility fixes
  • Add proper translations in code blocks
  • Fix inconsistency in components

Updates[edit | edit source]

  • Download page with distribution file and UI kit
  • Contact page
  • Help articles formatting
  • Comments
  • Menus
  • Do and don't images

Version 1.3[edit | edit source]

Version 1.3 will update the navigation elements in Aurora, as well as address fixes from user feedback from Version 1.2.

Updates[edit | edit source]

  • Drawers and accordions
  • Header and Footer
  • Sidebar
  • Tabs
  • Alternative Text article
  • Research page for design system-related studies

Version 2[edit | edit source]

Version 2 will be a major update to Aurora design system. Content based off the Open Accessible Digital Workspace will be added, as well as additional resources and common layouts. Fixes from user feedback of Version 1.3 will be addressed.

Identity[edit | edit source]

  • Values and mission statement
  • Logo
  • Brand colours
  • Taglines
  • Voice and tone

Resources[edit | edit source]

  • Inclusive design
  • Research and best practices

Layouts[edit | edit source]

  • Site navigation
  • App navigation
  • Login page
  • Stats dashboard

Research[edit | edit source]

Studies conducted by the Digital Collaboration Divison[edit | edit source]

Design systems used as inspiration and reference[edit | edit source]


Retrieved from "https://wiki.gccollab.ca/index.php?title=Aurora&oldid=6828"