McGill DS (or MDS) stands for McGill , a collection of web design and development standards and resources offered by the Web Services team.
What it's for
is for McGill-branded websites and applications which are designed and built "from scratch" - in other words, projects that are custom-coded outside central platforms like the WMS or blogs.mcgill.ca. These McGill-branded custom projects are typically designed and built by freelance designers and developers or by full-service agencies.
McGill DS isn't a replacement for the work of these professionals. Their expertise is key to achieving a polished result! McGill DS helps these professionals do faster, better work by offering brand-aligned, standards-compliant code assets that can be used on any website or application. These assets accelerate the frontend design and development process:
- Developers can copy and adapt quality-tested code to quickly and accurately build the foundations of the site or application
- Designers can drag and drop the design components into Sketch files to accelerate creation of hi-fi mockups or prototypes
Why we built it
McGill DS is intended to fix two problems that we commonly see with custom projects. The biggest issue is workflow: since these projects are often built with external or temporary resources, they typically follow a linear path that ends with implementation. They're less likely to benefit from testing, refinements, or evolution over time.
Second, custom sites and applications must follow McGill's Digital Standards and Visual Identity requirements. However, it can take time to learn the requirements and identify creative ways to honour them within each project's constraints. When compliance issues are discovered late in the project, they can be harder to fix - which may generate delays or additional work.
We built McGill DS to help connect these projects with the Web Services team's cyclical workflow and deep knowledge of McGill's standards and brand.
What's in it
McGill DS gives freelancers and agencies a head start on the basic building blocks of any project. It provides flexible, reusable code for common features like:
- Form inputs (such as date picker and checkbox, radio button, and text input) with labels, hints and help text
- Show/hide (aka accordion)
- Buttons
- McGill's global footer (required by our Visual Identity Guide - and shown above)
It also includes key assets like:
- The McGill logo (in multiple formats)
- UI icons
- Code variables for brand colors (shown below), borders, transitions, and spacing
These assets and variables can be used to build almost any feature. They're also faster to use, easier to update, and more consistent than individually coding these attributes.
The entire system is built to offer:
- Rigorous accessibility and quality testing for all code
- Compliance with all applicable institutional standards*
- A simple update path to apply improvements in response to ongoing user testing and institutional evolution
* In some cases, standards compliance will depend on how the designer or developer uses the component. Each component comes with complete documentation so it's easy to make standards-compliant choices or identify better alternatives.
How you'll benefit
We give you the basics, but what you really gain from McGill DS is more time for the value-added work in your project. Here are some great ways to use it:
1. Understand your users
One of the best things you can do with your time is to understand your users and what constitutes an excellent experience for them. Since you can do literally anything with a custom project, user research and testing activities are key to using that freedom well.
2. Build new or niche features
Most vendor-built or self-hosted sites exist because they need a feature that isn't offered by an existing resource like the WMS. New features are faster and easier to build with McGill DS's variables for brand colors, typography, transition animations. The variables let you spend less time worrying about overall brand alignment and allows more time to evaluate and refine the features you want.
3. Design a unique brand experience
Did you know that humans tend to (even if they aren't actually easier to use)? Consider this a scientifically valid reason to invest in the aesthetic experience of your project. The basic components and variables are just the baseline. They're great supporting actors for more elaborate features, animations, dramatic color palettes, or anything else you can think of. (Just keep it user-focused, please.)
4. Get more out of your maintenance plan
A maintenance plan is necessary to keep your website or application stable and secure, but most maintenance plans don't deliver visible improvements. (For a custom project, updates to branding and user experience are often too complex to include in a fixed-fee plan.)
McGill DS is updated regularly to make sure components stay aligned with our institutional requirements, brand identity, and user needs. These visible, meaningful improvements are conveniently packaged so that applying them is fast and easy - comparable to other tasks in a typical maintenance plan. By building with McGill DS, you're able to take advantage of these ongoing updates...and they can make a big difference for your users.
Ready to learn more?
with the McGill DS team. We'll show you how to use McGill DS and address your specific needs or concerns.Â
