Visual Design for Our Course Catalog Software

The visual designs for our course catalog software are fully customizable: if you have a vision for what you want your catalog to look like, we can work with you to achieve it. Some clients, like Windward Community College, send us PhotoShop files to implement. Others, like Northwest-Shoals Community College, ask us to follow the design their website uses. And others, like Kauai Community College, meet with us to workshop and iterate over designs until it looks exactly how they want it.

That said, we've found that it's best to start with a tested front-end design, and customize from there. We want our software to be easy to adopt, and part of that is minimizing the number of decisions that stakeholders have to make, while still allowing them to customize anything unique to their organization. For some clients, like Villanova University, sticking close to our base designs works perfectly for their needs, and they don't do much customization beyond standard brand fonts, colors, and logos.

Here's a little bit more about how we've refined our software to build a flexible, elegant design that maximizes readability and emphasizes your college or university's branding.

Focus on Typography and Readability

Because catalogs are primarily text-based, our designs focus on typography to emphasize hierarchy and organization. We put a lot of thought into things like font size, letter spacing, and margins and padding around text; we want the document structure to be intuitive to anyone who views it.

For pages with large blocks of text — like policies, student handbook content, or anything that's not a course or degree — narrowed the content body to an easy-to-digest line length that makes even long blocks of text readable. See here for an example. For courses, we divided up the text information and the smaller lines — like credits, program, etc. — into easy-to-scan blocks. See this course listing page for an example.

Emphasize the College or University's Branding

Across the board, colleges and universities we work with have excellent brand packages, and we're able to rely on those to make sites look distinctive and great. Using the college's brand colors in the header, an accent color for links, and their primary brand font throughout, the site is clean and easy to read, but still conveys the college's identity.

Keeping our designs clean (which is in our company name, after all) also allows flexibility for how and where you want to display information. Eliminating almost all clutter from the page allows users to easily find and digest what they're looking for.

And, as a small touch, we have a place for an alternate logo or seal in the footer, as another subtle way to emphasize the college's brand, an easy-to-use link back to the homepage.

Prioritize Accessibility

Meeting accessibility requirements — usually WCAG AA 2.0 — is a must for any digital product in higher education. Achieving high enough contrast is often one of the trickiest parts of web accessibility — often you can only use a few very specific combinations of brand colors for text and backgrounds. With that in mind, we built our designs to use the brand's heartiest color as a background for any reversed-out text and one accent color, if possible with contrast. We think we came up with something that looks great, is readable, and meets strict accessibility requirements for contrast.