Responses by Amy Schwartz, creative director and Ken Barrios, lead developer, Bright Bright Great

Background: Cranbrook Academy of Art is the nation’s top-ranked school devoted to graduate education in art, architecture, craft and design. Our goal was to capture the unique spirit of this iconic institution and explain the unconventional academic structure to potential applicants.

Highlights: We captured the feeling of living and working in this artistic community. The pages are white and open, like a critique room wall or a blank slate. Student work is given equal prominence. The Academy’s logotype is on the home page, reflecting that Cranbrook is a living community, ever evolving and changing with the times. Small linework details also reflect the architecture of the physical space, allowing the website to be a stand-in for the Academy itself.

Challenges: Definitely the navigation. The designs for the navigation required us to build out four different navigations—for mobile, small tablet, large tablet and desktop. We successfully managed to make them seamless, but it required a lot of patience and measuring to get the functionality and presentation to morph from one screen size to the next.

Favorite details: We designed the site to be airy and minimalist, like an art gallery. We built in the ability to “highlight” certain sections of pages by adding red borders and section titles. We also created sections/modules that are a list of department links. We built functionality on the backend that allows users to choose three photos per department. On the front end, when users hover over the department names, they can see the department’s chosen images set against the grid.

Navigational structure: The site is mainly intended for recruitment, so the goal was to quickly get users to the information they seek. Within that navigation, we wanted to bring in the art that is so fundamental to Cranbrook. Therefore, we added the ability for top-level links to be assigned a single image to represent it. However, due to spacing constraints and abundance of information, we restricted this feature to be only visible to casual users when they view the website at a desktop screen size.

Technical features: The website is mainly WordPress with a custom application built for the Alumni section. We primarily worked with PHP, but also included Vue.js for our Javascript. We also focused on building out each section of the website as a reusable module that can be populated with its own unique information. We also took the “atomic” approach to writing the CSS for this site so that future updates would be simple.

Alternative approach: We would take the time to figure out how to more cleanly turn certain elements into templates to be reused across the four different instances of the navigation.