The following principles guide our decisions when making WVU-branded websites and apps.
Accessible & Inclusive
Our goal is to make digital products for everyone who would want to use them. This inclusivity supports WVU’s mission. Every part of this system is fully accessible and conforms to WCAG guidelines. To ensure this, we ask our designers to test their sites using SiteImprove’s accessibility checker.
All WVU websites must also be submitted for approval to University Relations - Digital. If accessibility errors are found, the site is rejected until all issues are remedied.
Collaborative
This design system is built on open iteration and collaboration. It is available to anyone who wants to see or use it. Collaborators should be able to easily understand and use our system to develop great user experiences.
We provide tools that allow collaborators to run and test the system locally, for example by providing the sources files of our system, as well as local hosting environments for CleanSlate developers. This encourages iteration and forward progress.
We also follow common conventions. Where appropriate, our design system uses open source projects that have been battle tested and are widely know. For example, our system piggyback’s on Bootstrap. We have also made it easy for other designers to submit new components to the system.
User-focused
Always start with user needs. If you don’t understand user needs, you won’t be able to build the right product. Whenever possible, do research, analyze data, talk to users, and don’t make assumptions. Structure your site so users can access the content in a way that feels predictable, natural, and easy to discover.
Prioritize performance over flashy javascript components or animation.
All of our components solve a problem. This is described on each of our component pages.
Our designs should have no needless parts or overwhelm the user with visual clutter. Each element must have a purpose and contribute to the larger purpose of its containing element(s). If you can’t explain what an element is for, it shouldn’t be there. This allows users to quickly scan for information and find what they are looking for. We prioritize clarity of message over bold, experimental design.
Unbreakable
Our templates, patterns, and components should be unbreakable. On any given device or screen size, our designs should look like they were made for that context. Elements that are meant to be grouped together should stay grouped together. Elements should be sized appropriately for the context. For example, users should not be able to mis-tap on touch screen devices because elements are too small or grouped too closely together.
Each of our components is shown with live examples that demonstrate how they work. Check them out.
Consistent
Interface components, icons, fonts, animations, grid and colors should all be consistent to create predictable user experience. Consistency applies to those who develop websites as well as web apps by following our coding conventions. We should all be using the same grid, spacing units, sizing, and so on. This creates unity across our websites.