Learn more about this project on our GCDigital Design System wiki page!
Read about the goals of GCTools at GCTools
Kanban Planning (requires login): Zube
The Digital Collaboration Division (GCTools) is building a design system to standardize the visual language and user experience of our digital collaboration tools. The system will encompass visual elements, user interface components, branding and writing guidelines.
This project is happening parallel to the rebuild of our digital products, including moving our suite of tools to a micro-service architecture. These projects will inform each other and work together to update the developmental framework, user interface and design of our tools.
The design system project was started by the Digital Collaboration Division (GCTools) in collaboration with with multiple teams and departments:
- Canadian Digital Service
- Immigration, Refugees and Citizenship Canada,
- Treasury Board Secretariat: Web Experience Toolkit and Canada.ca
- Talent Cloud, and
- other partners across the Government of Canada and externally
A design system is a catalogue of everything that makes up your digital product including user interface elements, writing style, guiding principles, coding standards, visual design, etc. The system provides information about your product or set of products, and reusable components for easy development.
Building a design system is a collaborative effort, and requires expertise across all fields of web and application design. A design system takes into account all aspects of the product and encompasses all levels of the user’s and the creator’s experience.
Our design system includes a resources section and user interface (UI) kit. Here you can download Photoshop, Illustrator and Adobe XD files. We will also have all of our code for each element available.
Some files include specific assets or typefaces, others are full layouts, grids and prototypes.
The #GCDigital design system is open for anyone to use! It was originally created to help guide digital collaboration tools used within the Government of Canada, but the system can be adapted to create citizen-focused services or external digital products.
The design system is a guide. Our team follows it closely for our products but many elements can be adapted for your own brand or product - only use the parts that are useful to you!
We recommend that while building a new product you begin by following the system as closely as possible, then you can adapt certain elements (i.e. colours, language style, icons) to suit your own product or brand.
- Consistency across applications and platforms, particularly taking into consideration the rebuild of the GCTools or other digital collaboration services.
- Partnership opportunities with interested communities, including the Canadian Digital Service, Talent Cloud, other teams in CIOB, and the design team at IRCC.
- Saves development and design time since components are reusable and effectively organized. Would complement the agile development process by removing the need for multiple design and UI iterations.
- Specifications for designing new features are determined right from the start, so more time can be spent on business and complex decisions. Less focus on repetitive design problems throughout the process of new development.
- Ability to stay current with external design and technology trends, especially with rapid change in the industry.
When contributing, post comments and discuss changes you wish to make via Issues.
Feel free to propose changes by creating Pull Requests. If you don't have write access, editing a file will create a Fork of this project for you to save your proposed changes to. Submitting a change to a file will write it to a new Branch in your Fork, so you can send a Pull Request.
If this is your first time contributing on GitHub, don't worry! Let us know if you have any questions.
(french text needed here)
Le système de conception #GCnumérique est le fruit d’un partenariat entre divers concepteurs, développeurs et rédacteurs du gouvernement du Canada:
- le Service numérique canadien
- Immigration, Réfugiés et Citoyenneté Canada
- le Nuage de talents,
- Le Conseil du Secretariat du Tresor: Canada.ca et OneGC
- d’autres employés du gouvernement du Canada et externe.
Un système de conception est un catalogue de tout ce qui constitue votre produit numérique, y compris les éléments de l’interface utilisateur, le style d’écriture, les principes directeurs, les normes de codage, le design visuel, etc. Le système fournit des renseignements sur votre produit ou ensemble de produits, ainsi que les composants réutilisables qui facilitent le développement.
La création d’un système de conception repose sur un effort de collaboration exigeant une expertise dans tous les domaines liés au Web et la conception d’applications. Un système de conception tient compte de tous les aspects d’un produit et englobe tous les niveaux d’expérience de l’utilisateur et du créateur
Notre système de conception comprend une section de ressources et une trousse d’interface utilisateur (IU) et vous pouvez télécharger Photoshop, Illustrator et Adobe XD.
Certains fichiers comprennent des ressources ou des polices de caractères particulières tandis que d’autres sont des mises en page complètes, des grilles et des prototypes.
Le système de conception #GCnumérique est ouvert à tous! Conçu au départ pour aider à orienter les outils de collaboration sur le numérique utilisés au sein du gouvernement du Canada, il peut être adapté pour créer des services axés sur les citoyens ou des produits numériques externes.
Le système de conception est un guide. Notre équipe l’utilise pour effectuer un suivi serré de nos produits, mais de nombreux éléments peuvent être adaptés à votre propre marque ou produit — n’utilisez que les éléments qui vous sont utiles!
Lorsque vous élaborez un nouveau produit, nous vous recommandons d’utiliser le système le plus fidèlement possible et d’adapter ensuite certains éléments (couleurs, style linguistique, icônes) à votre propre produit ou marque.
- Permet d’assurer la cohérence entre les applications et les plates-formes, notamment en tenant compte de la reconstruction des OutilsGC et d’autres services de collaboration sur le numérique.
- Crée des possibilités de partenariat avec les collectivités intéressées, tant à l’intérieur qu’à l’extérieur du gouvernement du Canada.
- Permet de gagner du temps aux étapes du développement et de la conception, car les composantes sont réutilisables et organisées efficacement. Ces systèmes complètent le processus de développement agile en éliminant la nécessité de produire de multiples itérations de conception et d’interface utilisateur.
- Les caractéristiques de la conception de nouvelles fonctionnalités sont définies dès le début, ce qui permet de consacrer plus de temps aux affaires et à la prise de décisions complexes. Par conséquent, les problèmes de conception répétitifs exigent moins d’attention pendant l’ensemble du processus de développement de nouveaux produits.
- Permet de se tenir au courant des tendances externes dans le domaine de la conception et de la technologie, en particulier en fonction de l’évolution rapide de l’industrie.
Lorsque vous contribuez, veuillez également publier des commentaires et discuter des modifications que vous souhaitez apporter par l'entremise des enjeux (Issues).
N'hésitez pas à proposer des modifications en créant des demandes de tirage (Pull Requests). Si vous n'avez pas accès au mode de rédaction, la modification d'un fichier créera une copie (Fork) de ce projet afin que vous puissiez enregistrer les modifications que vous proposez. Le fait de proposer une modification à un fichier l'écrira dans une nouvelle branche dans votre copie (Fork), de sorte que vous puissiez envoyer une demande de tirage (Pull Request).
Si c'est la première fois que vous contribuez à GitHub, ne vous en faites pas! Faites-nous part de vos questions.