Difference between revisions of "Aurora"

From wiki
Jump to navigation Jump to search
m
m
Line 3: Line 3:
 
{{Translation to follow}}
 
{{Translation to follow}}
  
 +
<multilang>
 +
@en|__NOTOC__
 +
 +
<div class="plainlinks">
 +
<div style="float: right;">
 +
{{Infobox
 +
|name        =
 +
|bodystyle    =
 +
|title        =
 +
|titlestyle  =
 +
 +
|image        = [[File:Aurora_Logo.png|303px]]
 +
|imagestyle  =
 +
|caption      = Aurora design system logo
 +
|captionstyle =
 +
|headerstyle  = background:#5DC1BE;
 +
|labelstyle  = background:#5DC1BE;
 +
|datastyle    =
 +
 +
|header1 = '''Aurora design system'''
 +
|label1  =
 +
|data1  =
 +
|header2 =
 +
|label3  = Developer
 +
|data3  = Digital Collaboration Division
 +
|label4  = Initial release
 +
|data4  = September 24, 2018
 +
|label5  = Latest version
 +
|data5  = V1, September 24, 2018
 +
|label6  = Website
 +
|data6  = [https://design.gccollab.ca/ design.gccollab.ca]
 +
|label7  = GitHub repository
 +
|data7  = [https://github.com/gctools-outilsgc/design-system Github Repository]
 +
 +
|belowstyle = background:#ADE18D;
 +
|below =
 +
}}
 +
</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.
 +
 +
==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. 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===
 +
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=== 
 +
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==
 +
 +
{| class="wikitable"
 +
!Role
 +
!Name(s)
 +
!Team
 +
!Contact Information
 +
|-
 +
|Project Leads
 +
|[https://gccollab.ca/profile/Genevieve.Lemieux Genevieve Lemieux]
 +
[https://gccollab.ca/profile/Sduff Sierra Duffey]
 +
|Digital Collaboration Division
 +
|genevieve.lemieux@tbs-sct.gc.ca
 +
sierra.duffey@tbs-sct.gc.ca
 +
|-
 +
|UX Researchers
 +
|[https://gccollab.ca/profile/Rebecca.Jeong Rebecca Jeong]
 +
 +
[https://gccollab.ca/profile/Alex.Mesley Alex Mesley]
 +
 +
[https://gccollab.ca/profile/Donna.Monbourquette Donna Monbourquette]
 +
 +
|Digital Collaboration Division
 +
 +
|rebecca.jeong@tbs-sct.gc.ca
 +
alex.mesley@tbs-st.gc.ca
 +
 +
donna.monbourquette@tbs-sct.gc.ca<br>
 +
|-
 +
|Front-End (UI) Developers
 +
|[https://gcconnex.gc.ca/profile/Ethan.Wallace Ethan Wallace]
 +
[https://gcconnex.gc.ca/profile/Nicholas.Pietrantonio Nick Pietrantonio]
 +
 +
Simon Roy
 +
 +
Omar Nasr
 +
 +
Daniel Spence
 +
|Digital Collaboration Division
 +
<br>
 +
 +
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
 +
|[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
 +
| michael.martel@tbs-sct.gc.ca<br>sabrina.rowland-cote@tbs-sct.gc.ca
 +
michael.asuzu@cic.gc.ca
 +
|-
 +
|Technical Writers
 +
|[https://gccollab.ca/profile/Marianne.Aubrey Marianne Aubrey]
 +
Nneka Nnagbo
 +
|Digital Collaboration Division
 +
Canada Revenue Agency
 +
|marianne.aubrey@tbs-sct.gc.ca
 +
 +
nneka.nnagbo@cra-arc.gc.ca
 +
|-
 +
|Partnership Liaison
 +
|[https://gcconnex.gc.ca/profile/Heather.Laird 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==
 +
===Version one===
 +
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====
 +
Version one included HTML code, design elements and documentation for the following components:
 +
 +
[[File:Tagsdesignsystem.PNG|700px|thumb|right|Example of Tags component with HTML code]]
 +
 +
{| class="wikitable"
 +
!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====
 +
Aurora 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
 +
 +
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
 +
|}
 +
 +
== Research ==
 +
 +
==== Studies conducted by the Digital Collaboration Divison ====
 +
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Mood Board Survey]]
 +
* [[:File:Results DS Information Architecture.pdf|Card-Sorting: Information Architecture]]
 +
* [[:File:Report typography and data viz testing.pdf|Report: Typography and Data Visualizations]]
 +
* [[:File:Design system architecture final.pdf|Final Architecture for Design System]]
 +
 +
==== Design systems used as inspiration and reference ====
 +
* [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]
 +
 +
[[Category:Digital Government]]
 +
[[Category:GCTools]]
 +
[[Category:User Experience]]
 +
[[Category:Design]]
 +
[[Category:Web Design]]
 +
[[Category:Aurora Design System]]
 +
[[Category:Design System]]
 +
 +
<!-- French Starts here -->
 +
@fr|__NOTOC__
 
<div class="plainlinks">
 
<div class="plainlinks">
 
<div style="float: right;">
 
<div style="float: right;">
Line 321: Line 645:
 
[[Category:Aurora Design System]]
 
[[Category:Aurora Design System]]
 
[[Category:Design System]]
 
[[Category:Design System]]
 +
</multilang>

Revision as of 15:59, 26 September 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
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 one[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 one[edit | edit source]

Version one 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 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

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=5317"