The Frist has a special place in our hearts here at Paramore. We were responsible for the design of the previous site way back when and the site has stood the test of time, remaining relatively unchanged over the past many years. This time around we wanted to give visitors a better sense of all the activity that occurs at the Center. They have exhibitions, music, galas, events, theatre, classes and much more. Read on to understand how we took a fresh look at presenting this content to allow the site’s visitors to grasp all that The Frist offers.
Fig. 1 - The building exterior with Nashville’s Union Station next door.
Fig. 2 - The museum uses flat neutral colors as a backdrop to showcase the art without distraction.
Leveraging the Old Site
Because the site has been used for so many years, it was important not to stray too far from the old site. And while the two may seem an ocean apart, there are a few elements and styles that are sticking around for the redesign. The color palette, vertical navigation and much of the structure served as inspiration for the new framework. What goes into that framework, however, has definitely gone through some major rework.
Fig. 3 - The old site was launched back in 2004 and was in need of a redesign.
A More Organic Approach to Content
After some digging around, we came up with the idea of presenting The Frist online much as it is experienced in person. Even the exterior of the building is grey and neutral with rectangular shapes that serve as an excellent example of the Art Deco style of the 20s and 30s (see Figure 1 above). Keep everything as minimal and clean as possible, and allow the activity to take center stage. We really wanted the content to shine.
Fig. 4 - The wireframe needed to communicate the masonry model more than anything else.
This led us towards blending all the activities together in a more organic, unified stream of information that visitors to the site can enjoy on their mobile device as easily as they can on a desktop computer. We leveraged jQuery Isotope to make it all come to life.
The next challenge was determining the correct style for the design. How do you design for a center that holds some of the world’s greatest art? During the design phase, the museum was housing some of Impressionism’s greats including works by Renoir and Degas. During the time of the site’s launch, the featured exhibit is Warhol Live, which presents a comprehensive exploration of the artist’s work as experienced through the lens of music and dance. So it would be a little presumptuous to overdesign a site that houses such great art from throughout history. Instead, we designed the site to be neutral which hopefully allows the content to take control of the experience.
As mentioned earlier, the color palette needed to stay pretty neutral to allow the artwork and photography to serve as the visual focus of the site. We developed an alteration of the previous site’s palette which did the trick nicely. All the font colors were knocked back a bit too to keep any of the elements from feeling too harsh or strong.
It was important to align the font closely with the brand. When we built the existing site several years back, there were quite a few limitations on web fonts. It kept us from being able to leverage any fonts that supported the brand. So this time around we wanted to bring in custom fonts through the use of Cufon, and used Franklin Gothic for the main headers and navigation. The font was developed by Morris Fuller Benton in 1902 and reached its pinnacle in the 20s during the Art Deco movement. With The Frist’s building tied to the same style, Franklin Gothic seemed like a good choice. Helvetica and Verdana were used elsewhere for body and caption text.
Fig. 6 - Example of the type treatment from an exhibition detail page.
The site basically uses just two templates. The first is the masonry layout that is flexible from a big screen monitor, all the way down to a mobile device. We utilized this layout for the Homepage, Calendar and Multimedia sections. The second layout is the general interior layout that is used for basic content, like exhibition detail pages, news items and general information. Images are big and there is a wide use of white space to make the entire site experience feel like you’re walking through a museum.
Fig. 7 - The layout presents feature exhibits, regular exhibitions, events, news, video, audio and more.
Fig. 8 - The Calendar section shows the current month’s events by default.
Fig. 9 - The basic information and exhibition detail pages allow for big imagery and easy reading.
Exercising restraint in design can be rewarding. And the result of all this hard work is a site we’re proud of. We’re excited to see how the site manages content in the years to come and we’ll be ready with fresh new ideas in another five years when it’s time to evolve again.
* Keep your eyes on the blog over the next week. Jesse Bunch is going to take us through the development process for the new Frist site. He threw in a few nice touches that make maintaining the site easier and more enjoyable.Share Article