Why do we need a design system?
Design systems provide a common set of principles to follow when designing projects on the web, a library of proven, reusable design components that are accessible, and guidelines on how to use them. This helps us achieve higher efficiency and consistency when building WVU-branded design projects on the web. For more, see Here’s Why You Definitely Need a Design System.
Who is this for?
The WVU Design System is for anyone who builds WVU-branded projects on the web, and has a basic knowledge of HTML and CSS.
If you want to be able to style elements or create complex layouts, and have basic knowledge of HTML and CSS, get familiar with Bootstrap’s documentation to use utility classes. You can also use WVU’s utility classes the same way.
If you are building WVU-branded themes or templates for a content management system, you should know Sass and be familiar with version control software such as Git, along with task managers such as Gulp. See our Beginner’s Guide for more info.
How is this different from Brand Patterns?
A few years ago we created Brand Patterns. This was a pattern library based on Bourbon and Neat. Brand Patterns was very limited (it contained very few utility classes, for example). It was an ad hoc solution to provide a tool for designers at WVU to create WVU-branded websites. It was not paired with any set of principles, guidelines, or best practices. This often allowed for inconsistencies across WVU websites.
The WVU Design System solves this problem. It was built with input from other designers across campus to meet their needs, establishes a clear set of principles and guidelines, and offers a more robust pattern library to help common design design and usability problems. It also offers waaaaaay more flexibility to create new components and style elements on the fly, or for designers to submit new components to our library.
How is this different from Super Theme?
Super Theme was a theme created for WVU’s in-house CMS, CleanSlate. It was meant to let designers get sites up quickly if they had a tight project deadline, for those who do not have the technical skills to build their own theme using HTML and CSS, or for those without experience creating themes for CleanSlate. The WVU Design System, in contrast, is meant to be agnostic to the system it is used on. The WVU Design System is meant for everyone, no matter what type of project you are working on or what type of technology you are using.
Why is this not part of the Brand Center website?
The Brand Center website has general guidelines for branding. You can find guidelines for typography, color, etc., as well as guidelines for messaging for specific audiences, and so on. You can also find things like PowerPoint templates, stationery, and examples of environmental graphics. The WVU Design System has a narrower focus. It is meant for web designers and front-end developers. The content is specialized enough that it warrants its own sub-system and a website to explain it.