Over the last year, I’ve had the chance to participate in a wonderful project: the website redesign for the Maryland Institute College of Art. To date, it’s been one of my favorite projects ever. Here’s a look at some of the intricacies behind this new site.
The initial concept behind this design is driven by leading with the artwork the school produces. More than the just a large element on the home page, the artwork does more than just take up a significant amount space; it acts as a filter that starts to permeate the site-wide experience. Choosing a piece from the home page changes the tone through the colors of just about everything on the site, from links to background colors. (The idea was that this choice followed you as you navigated to the sub-pages, but this functionality hasn’t made it in to the rest of the site yet. I’m hoping that’s something that gets updated in the near future.) Think of it as a subtle user-driven art-direction. (Look for more writing on this site about this topic shortly.)
Technically, this proved more challenging than you would think. For qualities like link and background colors, on the fly color switching is a piece of cake. Throw sIFR into the mix, dynamically generated colors chosen by administrators of an XML-based content management system, and the ability to do this not 1 but 4 times, and it’s a different ball game.
But what about elements that have been replaced on the client-side like headlines? Because those elements are now Flash, they would need to re-render in order for the color change to take effect. This is deceivingly easy too. In sIFR3, there’s a largely undocumented method named
There’s one last component that proved a bit tricky. Have a look at this image:
Notice anything particular? That’s right; the background behind the logo is slightly transparent, allowing you to see through to the artwork behind it. That’s a cinch; we’ll cut the logo as a semi-transparent PNG file, and be done with it.
We can do that with the borders surrounding the logo too. Or can we? Remember, these colors have to change on the fly, sometimes as often as several times a day. That means an administrator would have to manually cut a new PNG file every time the artwork updates. From a production and workflow standpoint, that’s a huge hurdle. (Not to mention the fact that color matching a PNG file to fade into a solid color is an art form in itself.)
To make life easy for site administrators—I can’t stress enough how much I resisted the urge to say “webmasters”—you’ll see that the borders are actually an inconspicuous Flash file. This file accepts a hex value and programatically draws the border with the correct transparency in the right spots. Because you can create Flash files with transparent backgrounds, some simple CSS positioning achieves the effect we’re looking for.
There are a few more trinkets like this sprinkled across the site, but I’ll leave it to you to discover them. Happy Cog also has a case study on this project, so mosey on over there when you get a chance for a different perspective.
Hope you enjoyed this insiders’ look!