If you have spent nearly as much time as we have examining museum websites, you’re bound to encounter a couple that use similar design patterns and aesthetics. Even so, it recently seems that more and more sites in this space look increasingly similar. In some cases, if you were to remove the logo and any distinguishing artwork, you might not be able to differentiate between some of these site’s homepages.
We have two suspicions why this might be occurring.
- Due to the nature of museums, there is a tremendous overlap with mission statements of many individual museums (we’ve written on this exact subject before). When the core mission statement frames out the goals and objectives of a digital strategy, there are bound to be some similarities–if not repetition– from museum to museum.. And if two museums have the same goals and objectives in their digital strategy, it’s unavoidable that many sites will implement similar solutions to solve these problem sets.
- Museums are also a close-knit band of cultural enthusiasts. They enjoy talking with peers and observing what is being done within their space, especially when its groundbreaking in the field. It’s only natural that when an industry leader launches a new site design, others take note. Often, the same list of museums appears in “Sites We Like” portion of a digital strategy. Imitation is the most sincere form of flattery but it also creates a lot of sites that look similar.
So if several thought-leading museums have found design solutions that work for their type of museum, is it a problem for other museums to follow suit? It is, if your site’s branding becomes muddied in a pool of similarly-designed websites. Why? Because you just put up another hurdle between your users and your museum’s unique brand story. With so many online destinations asking for attention, being unique in this digital frontier is more important than ever.
However, it’s true: form should follow function. The content of your site should be paramount and it should be the lead influencer of your site’s design. You might argue that with so much similar content (exhibitions, collections, events, digital stories, etc.), museum sites are bound to start looking similar. But let’s take a look at human faces. We all have eyes, ears, noses, and mouths and, for the most part, they’re all in the same places. It’s the variations of these elements that make you unique and discernible from others. Most often, it’s just a few subtleties of a couple of features that make the lasting impression and make you look like you.
In this post, we wanted to showcase a couple of museum websites that do a great job of standing out from their peers. Not because these sites have revolutionary and never-before-seen layouts or design directions, but because they took a chance with a few select design decisions. Decisions that strategically focused on reinforcing the museum’s brand, not just the ones that might make the museum stand out visually at first glance.
With MOCA GA, let’s first start by breaking down the overall homepage elements. As far as content and layout, it’s got many of the familiar elements of modern art museum sites:
- L-to-R navigation across the top
- Large hero area devoted to artwork
- 3-columns of quick-info below header (location / hours / what’s on)
- Minimal aesthetic with significant whitespace
- Simple black & white text and graphic buttons
However, with just a bold design decision that trickles down into their site, MOCA GA feels completely new and different, despite the layout and content being quite familiar. It is this stylistic decision that conveys the message: our brand is unique and our story worth telling.
This is evident as soon as you see how MOCA GA has chosen to merge its logo and hero area into one graphic. On first glance, there’s no logo immediately apparent and the hero area almost looks broken. This is a risk that pays off by presenting something unexpected and delightful.
We see the logotype not as a logo, but as fragmented pieces of type, pieces of a not-yet-apparent whole. It’s not until you scroll that the magic begins to happen. The hero image minimizes into a big strike-out bar over the bits of type, now unified into the proud declaration, “MOCA GA”. Not just visually interesting, we see the makings of a design language emerge. The new image of a text with a visual line striking through the logo reappears as a rollover element for many CTAs throughout the site.
By using this design element along with the bold typeface decision that references their logo’s font, MOCA GA has reinforced its brand. The site creates the same feeling one might experience when standing in front of a piece of contemporary art; to be taken back and forced to ask the question “why”? One thing is certain: from the very first page-load, the user is treated to an unexpected, challenging and a rewarding experience. This museum has something interesting to say and they’re willing to take risks to say it. It only needs to last for a couple seconds, but it’s worthwhile and–most importantly—memorable.
When the Field Museum launched its rebranding and accompanying website redesign earlier this year, we absolutely loved their approach (check out their old branding still on their store). Their homepage may use many elements you see far too often within the museum space…
- Large hero section with rotating carousel of images
- 3-columns of quick-info below header (plan your visit / become a member / what’s on)
- Minimal design elements with plenty of whitespace
However, it’s how they implemented just two signature design elements from their brand that makes this site such a rewarding one and a fresh look for the museum. The Field Museum has gone all-in with the use of a large blocky sans-serif font and a poppy cobalt blue set of color fields. The logo on the site can even be downplayed as the decisive use of these two elements speak volumes to their new brand and clearly separates their site from any competitors.
Sure, the text size of their header font might not need to be over 100 points tall. However, when your claim to fame is introducing patrons to the “world’s biggest dinosaur” (Máximo the Titanosaur) and the most famous dinosaur on Twitter (@suethetrex), there is no better way than to shout it out as loud as possible by maxing out your heading text with a font borrowed from the letterforms in your logo. The repetition of this same font treatment in all page headers, whether on solid blue or over an image, clearly defines the design language of the museum. As you move further down the page and throughout the site, a continued playful use of this one font in varying weights and sizes still allows for design variety while reinforcing the hierarchy of individual content elements.
Using the signature blue in decisive large color blocks has an almost calming effect. Regardless of amount present on the screen, the site still has a minimal feel as there are no other colors present (excluding the photography). Not over using this tone on every “read more” button and link, keeps its presence feeling fresh. There are also many happy easter egg moments and interactive animations (the rotation of header carousel images, the animation of the mega menu, etc.) that playfully splash this color across your screen even if for just a second. With the focused use of this one color tone, it is cemented as the museum’s signature color and without looking at any other elements, I know I’m on the Field Museum site.
Without the use of these two design elements, the Field Museum’s site might be just another well-structured museum site. However, by taking a calculated risk with a signature color and font choice, their site is an incredibly memorable statement of their brand.
Victoria and Albert Museum (aka V&A)
While it still has many of the same page elements of other museum sites, the V&A has made a three signature design decisions that truly separate their site from others in this space. First, let’s take a look at some of the same page elements they share many other museums sites…
- L-to-R navigation across the top
- Large hero area devoted to artwork
- Quick reference info below header (location / hours / admission)
- Minal sans-serif content font throughout
Yet this site looks completely unique and stands out from any museum site we’ve reviewed. While there are a few other noticeable design decisions, we wanted to focus on three that really make this site memorable: an interchangeable accent color, an overstated logo, and a fixed background image.
Being willing to switch out the color scheme of your site requires a willingness to take risks. Many designers might be worried that it could take the site off-brand or even confuse users. However, when the implementation is well planned and working in tandem with other branding decisions (most notably the overstated logo), it becomes a powerful tool. When used sparingly, color can focus the user on the decisions you want them to make. Too often, we’ve seen color (even those pulled directly from the brand) be removed from potential homepage designs in fear that it might conflict with a future piece of artwork used in the header. The ability to choose an accent color, specifically one that can be tailored to almost any header image, removes that concern. This forces a second look at newly featured content while keeping the site feeling fresh.
If there were any branding fears left over from the decision to allow for varying accent colors, the use of an overstated logo eliminates that quickly. Like MOCA GA, the V&A has provided a sense of play with their logo. The sheer size of the logo covers almost ⅓ of the browser’s height (surprising as excessively large logos have often been a pet peeve of designers). However, it balances out the page perfectly as its moved to the bottom right of the screen (logos are most often seen at the top left) and implements the same interchangeable accent color.
Doubling down on their logo decision, the V&A also implements the same oversized logo further down the homepage. While a simple watermark of the logo appears in the footer, the knocked-out logo treatment in the newsletter box is an absolutely beautiful way to draw attention to this CTA section. While we must admit that these types of treatment wouldn’t work with just any logo, the V&A saw the chance with their oversized seriffed letterforms and really made a grand branding statement.
The final design element that really sets this site apart is the decision to make the background image full width and fixed. Many sites implement a large header image on the homepage but most exert significant caution with any other design elements overtop of this image. The V&A throws that hesitation to the wind as the large exhibition text/button, mission statement, quick reference text, and of course the oversized logo all appear in front. However, by making their image fixed, scrolling up and down will invite exploration, revealing varying sections of the image as you descend through the page’s content. While this technique does initially push the visual weight of the header image back, keeping it fixed will provide a happy chance to rediscover this image further down the page and be reminded of this featured content.
For the V&A, it’s the well-planned execution of these three styling elements working together that really makes this site sing. While each of these design choices might seem a little risky on their own, each plays off the other’s strengths and weaknesses and provides the necessary balance.
We will leave you with this, The Von Restorff effect (also known as The Isolation Effect), which states that “when multiple similar objects are present, the one that differs from the rest is most likely to be remembered.” When a potential visitor is trying to decide how best to spend free time with friends and family, every bit of a memorable online experience will help keep your museum front of mind. If your site provides happy moments of exploration and a unique on-brand story, chances are they will think your physical museum will offer the same delightful experience. When designing your site, we encourage you to take a chance and include a design decision that not only makes your site stand out but reinforces your brand story.