In a previous post, I discussed how Notre Dame’s dated web brand standards led to a variety of problems: branding & wayfinding inconsistencies across our network along with wasted time and money. It’s time for improvement.
To address this concern, the ND Web Team has developed the Notre Dame Web Theme - a design system based on www.nd.edu intended to improve the web design process for new websites.
Developing one system that serves the entire University is a daunting task; our units have a variety of audiences and purposes, and our websites take many forms. As a result, the Notre Dame Theme needed to be flexible and simple, providing a baseline of consistency that could be applied to various page layouts in unique ways. A strictly-applied templated system would be too rigid for the variety of websites the University needs designed.
Why a Design System
"Design systems have the ability to solve real-life problems by establishing consistency in design and code, promoting efficiency when creating products, communicating usage guidance, encouraging reuse instead of rework, increasing the accessibility and usability of digital properties, and so much more." - Ben Callahan, SparkBox
A web design system will help Notre Dame in the following ways:
- Efficiency and Costs. Repeatable patterns save time. In some cases, it can lower the cost of a project by almost 40%.
- Branding. Users tend to subconsciously lose trust in your brand when their experiences are inconsistent. A consistent design platform across our network reinforces brand trust.
- Accessibility. Web accessibility lawsuits jumped by 181% from 2017 to 2018. And building your website with strong accessibility practices is just the right thing to do. By building strong accessibility practices into the design system, we ensure that each new website meets standards.
- Usability. The most basic purpose of a website design is to help users accomplish their goals. If we solve challenging usability issues once, we won’t have to reimagine with each new website. Creating consistent experiences across our network is helpful to our users.
A design system allows us to focus on doing outstanding work, and leveraging that work at scale to impact our entire network, which saves costs. Along the way, our users are treated to a more consistent, branded, uniform experience, which bolsters both the credibility of the unit and Notre Dame’s overall brand experience.
Notre Dame’s Design System
The Notre Dame Web Theme was designed to include the following elements, which can utilized in a variety of ways:
- Standard Colors
- Typography
- Buttons, Links, and Cards
- Headers and Footers
The goal of the system is unity, not uniformity. The following are areas where we encourage website designers to be creative in addressing the needs of their audiences:
- Supplementary Colors (augmenting Notre Dame’s traditional blue and gold)
- Layouts (creating unique page layouts to address new and different content strategy)
- Patterns, textures, and backgrounds (subtle design touches relevant to the unit or audience)
The details of the Notre Dame Web Theme are available at webtheme.nd.edu, which includes resources for communicators, designers, and developers, including:
- Overview of the theme, detailing the primary components and proper usage.
- Example layouts and components, so designers can get a better feel for how the components work together on page.
- A gallery of live websites, to see the theme applied in working settings.
- A documentation section, which gives developers and content creators the tools they need. This includes codes samples, downloadable design kits and starter themes (HTML and Wordpress, Drupal coming).
Although developed internally by Notre Dame’s central marketing team, the Notre Dame Web Theme was designed for use across agencies and systems. Units working with outside agencies can use the theme as a starting point for design, no matter the CMS (Wordpress, Drupal, or otherwise). The majority of campus units continue to contract their web design and development with the ND Web Team, typically using Conductor as the base CMS.
We’re excited to formally launch the Notre Dame Web Theme. We’ve been working with it (unofficially) for a year, and events of spring 2020 (COVID-19 pandemic) delayed it’s introduction. University leadership is excited about the idea, and we’re thankful for the partnership of many campus communicators in working through details. It’s encouraging to finally release this work to the campus community. Credit to Taylor Packet, Nevin McElwrath, Aaron Greene, and Shawn Maust for their outstanding work.
Here are some examples of websites developed in the last year with the theme:
- Nd.edu
- Admissions.nd.edu
- Klau.nd.edu
- President.nd.edu
- Search.nd.edu
- Commencement.nd.edu
- Tour.nd.edu
- Provost.nd.edu
- Industrylabs.nd.edu
- Fanning.nd.edu
- Facilities.nd.edu
- Green.nd.edu
For more questions or information about this initiative, or to get your current website upgraded, contact the ND Web Team.