Design systems are meant to provide a single source of truth for an organization’s design — whether that’s one website or many. As the size and number of websites and products grow, it becomes even more important to have a design system that provides guidelines and developer tools — so new websites and pages can be built quickly and consistently.
We created a fictional higher education institution, Western University of Pennsylvania, to show how Emulsify can effectively manage a design system where there are overarching branding guidelines and schools with separate sub-branding.
The brand style guide contains all the documentation and assets needed for staff and students to properly use official university branding when creating future websites or materials.
Many universities maintain this style guide completely separate from any website guidelines, which means they can easily get out of sync. With Emulsify, the shared elements of the style guide and component library never get out of sync, because they’re all part of the same design system.
The university component library, powered by Storybook, is the tool developers use to build reusable components to use across all of the various university websites. These components include everything needed to create a web page: paragraphs, buttons, images, forms, menus, etc.
Developers can also prototype page templates right inside the component library — such as a calendar, faculty directory, or course listing. We know accessibility compliance is important to universities, so we’ve included tools to perform accessibility testing on every component.
The Studio Arts demo is an example of a typical school or college website within a university. You can see the website follows the university’s brand style guide for its use of color and typography. It also shares common web components such as the header and footer.
Being an art school, they should be given the freedom to customize the look and feel of their website. One example is customizing the appearance of cards for linking to articles — in this case using an asymmetrical layout and text overlays instead of the standard university card grid. Because of this, the arts school has its own component library (also in Storybook) to document any components that deviate from the primary style guide.
The Studio Arts website was also built using Drupal, so it can share both the Twig component markup and styling with the parent. All that was needed to create this website was to create the custom components specific to the Stuido Arts project.
You can choose what you want to show in the component library (any combination of organization and property components). In this case, we chose to show only the components unique to the Studio Arts project.
The School of Law demo is another example of a typical school or college within a university. The interesting part about the School of Law is that it is built using React and Gatsby. This means that while it cannot share the markup used in the Drupal projects because those were written in Twig, it can still leverage styling from the parent project because that has been logically separated out into its own package. The School of Law website just needed to match the University's branding exactly, which left us free to reuse the design and styles, so all we had to do was write the new React components. And since those have been separated out into their own package as well, we can reuse them on any future React projects.
Want to learn more about how a design system can benefit a university’s ecosystem of websites? Check out this article on Emulsify and higher education, which outlines the benefits of modularity, parallel development, faster onboarding, and accessibility/visual regression testing.
The new Emulsify Design System contains the following tools that help higher education institutions develop a consistent and easy-to-maintain online presence:
Four Kitchens, creators of Emulsify, creates digital experiences that delight, scale, and deliver measurable results. If you need a design system for your university or educational organization, the Web Chefs have you covered.Get in Touch