Difference between revisions of "Aurora"

	; 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

Latest revision as of 09:12, 5 December 2018

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]

Shopify Polaris

Designers Italia

Oracle Alta UI

List of awesome design systems

Difference between revisions of "Aurora"

Latest revision as of 09:12, 5 December 2018

Contents

Overview[edit | edit source]

Mission Statement[edit | edit source]

Principles[edit | edit source]

Project Team[edit | edit source]

Versions[edit | edit source]

Version 1[edit | edit source]

Components in Version 1[edit | edit source]

Content and data[edit | edit source]

Future Updates[edit | edit source]

Version 1.2[edit | edit source]

Fixes[edit | edit source]

Updates[edit | edit source]

Version 1.3[edit | edit source]

Updates[edit | edit source]

Version 2[edit | edit source]

Identity[edit | edit source]

Resources[edit | edit source]

Layouts[edit | edit source]

Research[edit | edit source]

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

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

Navigation menu

Search

@@ Line 1: / Line 1: @@
-{{DISPLAYTITLE: Aurora design system}}
+{{DISPLAYTITLE: Aurora}}
 {{Translation to follow}}
 <multilang>
-@en|__NOTOC__
+@en|
 <div class="plainlinks">
@@ Line 35: / Line 35: @@
 |data6   = [https://design.gccollab.ca/ design.gccollab.ca]
 |label7  = UI kit
-|data7   = [https://github.com/gctools-outilsgc/design-system/blob/master/master_ui_kit.aié]
+|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]
@@ Line 166: / Line 166: @@
 ==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.
-====Components in version one====
+====Components in Version 1====
-Version one included HTML code, design elements and documentation for the following components:
+Version 1 included HTML code, design elements and documentation for the following components:
 [[File:Tagsdesignsystem.PNG|700px|thumb|right|Example of Tags component with HTML code]]
@@ Line 226: / Line 226: @@
 ====Content and data====
-Aurora contained content guidelines and data visualization styles, and best practices for the following topics:
+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"
@@ Line 290: / Line 290: @@
 Bottom aligned legend
 |}
+==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.
+===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.
+====Updates====
+* Drawers and accordions
+* Header and Footer
+* Sidebar
+* Tabs
+* Alternative Text article
+* Research page for design system-related studies
+===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.
+====Identity====
+* Values and mission statement
+* Logo
+* Brand colours
+* Taglines
+* Voice and tone
+====Resources====
+* Inclusive design
+* Research and best practices
+====Layouts====
+* Site navigation
+* App navigation
+* Login page
+* Stats dashboard
 == Research ==
@@ Line 328: / Line 380: @@
 <!-- French Starts here -->
-@fr|__NOTOC__
+@fr|
 <div class="plainlinks">
 <div style="float: right;">
@@ Line 357: / Line 409: @@
 |label6  = Site Web
 |data6   = [https://design.gccollab.ca/ design.gccollab.ca]
-|label7  = Répertoire GitHub
+|label7  = Trousse IU
-|data7   = [https://github.com/gctools-outilsgc/design-system Répertoire GitHub]
+|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;
@@ Line 373: / Line 427: @@
 ===Énoncé de mission===
-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.
+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===
@@ Line 393: / Line 447: @@
 {| class="wikitable"
-!Role
+!Rôle
-!Name(s)
+!Nom(s)
-!Team
+!Équipe
-!Contact Information
+!Personne-ressource
 |-
-|Project Leads
+|Chefs de projet
 |[https://gccollab.ca/profile/Genevieve.Lemieux Genevieve Lemieux]
 [https://gccollab.ca/profile/Sduff Sierra Duffey]
-|Digital Collaboration Division
+|Division de la collaboration numérique
 |genevieve.lemieux@tbs-sct.gc.ca
 sierra.duffey@tbs-sct.gc.ca
 |-
-|UX Researchers
+|Chercheurs sur l’expérience-utilisateur
 |[https://gccollab.ca/profile/Rebecca.Jeong Rebecca Jeong]
@@ Line 412: / Line 466: @@
 [https://gccollab.ca/profile/Donna.Monbourquette Donna Monbourquette]
-|Digital Collaboration Division
+|Division de la collaboration numérique
 |rebecca.jeong@tbs-sct.gc.ca
@@ Line 419: / Line 473: @@
 donna.monbourquette@tbs-sct.gc.ca<br>
 |-
-|Front-End (UI) Developers
+|Développeurs d’interfaces frontales
 |[https://gcconnex.gc.ca/profile/Ethan.Wallace Ethan Wallace]
 [https://gcconnex.gc.ca/profile/Nicholas.Pietrantonio Nick Pietrantonio]
@@ Line 428: / Line 482: @@
 Daniel Spence
-|Digital Collaboration Division
+|Division de la collaboration numérique
 <br>
-Health Canada
+Santé Canada
-Canada Revenue Agency
+Agence du revenu du Canada
 |ethan.wallace@tbs-sct.gc.ca
 nicholas.pietrantonio@tbs-sct.gc.ca
@@ Line 445: / Line 499: @@
 daniel.spence@cra-arc.gc.ca
 |-
-|Graphic Designers
+|Concepteurs graphiques
 |[https://gccollab.ca/profile/Michael.Martel Michael Martel]<br>[https://gccollab.ca/profile/Sabrina.Rowland.Cote Sabrina Rowland Côté]
 Chuma Asuzu
-|Digital Collaboration Division<br><br>IRCC
+|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
 |-
-|Technical Writers
+|Rédacteurs techniques
 |[https://gccollab.ca/profile/Marianne.Aubrey Marianne Aubrey]
 Nneka Nnagbo
-|Digital Collaboration Division
+|Division de la collaboration numérique
-Canada Revenue Agency
+Agence du revenu du Canada
 |marianne.aubrey@tbs-sct.gc.ca
 nneka.nnagbo@cra-arc.gc.ca
 |-
-|Partnership Liaison
+|Liaison avec les partenaires
 |[https://gcconnex.gc.ca/profile/Heather.Laird Heather Laird]
-|Digital Collaboration Division
+|Division de la collaboration numérique
 |heather.laird@tbs-sct.gc.ca
 |-
-|Consultants
+|Experts-conseils
 |Sean Boots
 Thomas Gohard
@@ Line 473: / Line 527: @@
 Gerardo Escandon
-|Canadian Digital Service
+|Service numérique canadien
-OneGC (TBS)
+Secrétariat du Conseil du Trésor du Canada
-OneGC (TBS)
+Secrétariat du Conseil du Trésor du Canada
-Talent Cloud
+Nuage de talents
 |sean.boots@tbs-sct.gc.ca
@@ Line 487: / Line 541: @@
 ==Versions==
-===Version un===
+===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 un====
+====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 :
@@ Line 628: / Line 682: @@
 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]]
+* [[: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]]
+* [[: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]]
+* [[: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]]
+* [[: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====
@@ Line 665: / Line 777: @@
 [[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]]

Aurora design system
Aurora design system logo
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