After the successful rollout of the Buckeye UX 1.0 Design System (BUX) in spring 2024, the BUX team has been focused on transforming the static PDF design files into dynamic HTML design templates. These will be a much more powerful resource for BUX users, providing a starting point for designers and developers to prototype their sites without starting from scratch. Each HTML template is built with a combination of components that bring BUX to life in an effective, mobile-friendly webpage.
Overview
The first advantage of the HTML templates is that they utilize the BUX layout elements and provide an example of how the Container and Grid are nested together, which can be a bit abstract without a direct example. They also illustrate how each layout looks with and without Sidebar Navigation and demonstrate the use of cell widths to create page column layouts and breakpoints.
The design templates highlight the BUX Design System’s specifications for typography and color and showcase brand photography standards with placeholder images and the proper use of alt text. Global spacing values are set around individual components to ensure visual consistency throughout a webpage.
Left: Landing Page Template. Right: Card List Template
All of the templates have comments throughout the source code so they are easy to navigate and add or remove components to fit user needs. The Blank Page template, both with the sidebar and without the sidebar, contains the required global components with a blank content column providing a simple starting point for creating a new template.
Left: Blank Page Template Without Sidebar. Right: Blank Page Template with Sidebar
Quality Assurance of BUX
Developing these templates gave the BUX team an opportunity to QA test not only the entire library of individual components but the combination of the components by replicating real use-cases. In our original PDF templates we featured a number of elements that were not yet available as components in the 1.0 release. In building our HTML templates we were able to rapidly reverse engineer components. They feature a new variants for events (Featured Card for Event and Cards for Events), the CTA in Page and the Person component.
Event List Page Template and New Component within the Story Page Template
List of Templates and What’s Next
Our list of templates will continue to grow, but most BUX users will find everything they need to get their own website started with the templates already live. We have a dynamic landing page, several interior page layouts, a form page, and several sets of lists and single pages like events, stories, and people. If you have a need for a common, reusable layout that isn’t yet part of our available templates, send us a message at bux@osu.edu. We’re always happy to hear new ideas and continue expanding BUX. In the future, we plan to provide downloadable HTML files for developers to have a faster, more efficient starting point for making sites. BUX has already undergone so much change just since the release of 1.0, and we will keep growing and improving with every new release.
View BUX Design Templates