Back to Homepage

Emulsify Design System Demo

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.

Western University of Pennsylvania (fictional university)

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.

Western U Homepage

University Website

For this demo, we created a website for the university in Drupal, which shows what typical visitors would see when they come to the website.

Western Style Guide

University Brand style guide

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.

Western U Storybook Card Grid

University component library

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.

School of Studio Arts

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.

Arts Demo

Studio Arts Website

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.

art storybook new

Studio Arts component library

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.

School of Law

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.

Using Emulsify to build higher education websites

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.

Benefits of the

The new Emulsify Design System contains the following tools that help higher education institutions develop a consistent and easy-to-maintain online presence:

  • Prototyping tools to quickly build/iterate new user interfaces leveraging Storybook
  • Starterkit themes for Drupal, Wordpress, React and more to quickly bring prototypes to life as projects
  • Fully customizable style guide leveraging Gatsby to unify all teams around your organization’s new design system
  • Tools and best practices to connect organization and property projects together to reuse components and best practices, saving time and money.

Need help creating a design system for your university website?

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