One great pleasure of working in a creative environment like an art museum is that on occasion, we actually get to create things that are unique, tangible, and if we’ve done our job… useful.

Matt Gipson - Web Designer Extraordinaire

It’s one of the reasons I love to cook.  The process of pulling together all the right ingredients and a little skill to create a delightful experience that can be shared with others seems so personal, meaningful, visceral.  In short, very different from most of what keeps me busy on most days. So, it was a great honor to have the chance over the last six months to work together with so many talented staff from around the museum in creating and reformulating a new website for the IMA.

Over the last several years, the IMA has invested a lot of energy and resource in understanding and making use of the web in ways that help the museum meet its goals and carry out its mission.  Along the way, we’ve learned a lot.  We are constantly learning from our audience and visitors – watching the way they interact with content, reading comments, and listening to feedback.  We’ve learned immensely through our relationships and collaborations with other museums about what has worked and not in the past and about new thoughts, strategies and approaches we might try.  If I’m honest, we’ve definitely learned the most from our failures.  Hopefully, we’ve disguised most of them cleverly, but come join us for a beer in the cafe and we’ll share a bunch of the “less-than-superstar” moments.

In talking about how we might launch this new site we’ve been working so hard on, it only seemed right to give the first sneak peeks and behind-the-scenes privileges to our online followers.  So, like any great dish, this one’s hot off the grill and just for you!

One of the first things you’ll notice about the new website is that we’ve gone with a completely different design-feel from our earlier site.  Part of this is inspired by a new brand for the IMA which you’ll notice featured prominently across the site.  We wanted to shoot for a design that is clean and well structured, but still very visual and full of color.  You’ll notice that we stuck to a consistent grid layout on the site which lets us be pretty modular in the way we mix and match content.

As you dig deeper into the site, you’ll see that we kept the visual stimulus going, using a mix of video, photography and some interactive elements to capture attention and provide an engaging experience.  On most pages, you’ll notice a sidebar called “More Like This”.  This sidebar features content relations from across the web that relate to the to the current page content.  These relations are a mix of automated suggestions as well as hand-picked content that relates to the page you’re looking at.

One of the issues we wanted to address with this redesign was to make it easier for online visitors to find content on the site. One primary focus of this work was the simplification of the menu navigation.  The IMA is an organization with an amazing breadth of programming and collections, so it was a challenge to streamline the navigation of the site and make it easier to find information. You’ll notice a single layer of top-level menus that expand when you roll over them. These menus are the same across every page of the website and provide a consistent anchor for visitors to turn to as they navigate around the site.  Since many of our visitors enter the site from search engines, a significant number of them might not ever reach the front page of the site. You’ll see that we expanded a few of the menus to include additional information and tools.  These Mega-Menus provide an easy way for visitors across the site to access tools for searching the collection, getting directions to the museums or linking to featured pages of content.

One of the core areas of the site that has undergone a complete transformation is the underlying search engine technology.  This is one of those features that can’t be explained in a glossy image or paragraph of techno-jargon.  You really have to experience it to understand its power.  One of the easiest ways to play around with the search engine is with the Live search feature in the upper right-hand corner of the site.  You’ll notice that as you start typing, the Live Search automatically provides a number of suggestions for you that might match your query.  You’ll notice that these are broken out by type (Artwork, Exhibition, Artist) and provide thumbnail images when appropriate.  What you may not notice at first is that in addition, this search can also access videos on ArtBabble, posts on our Blog, even images from Flickr.  Every time you press a key, we’re searching over 60,000 pages of content to return the best answers to you.

Another area of the new website that benefits from the work we’ve done on the search engine is the Collection Search Page.  We wanted to provide an experience that would let someone who has a specific search in mind, find what they want quickly… but also an interface that could support an enjoyable browsing experience that is both visual and simple.  As you roll over the thumbnail images on the page you’ll notice that we add more information about the work you’re hovering on and show the full thumbnail of the work.  From this roll-over you can easily tell whether the work is on view today, access a magnified image and link to a page with the full information about the work.

You’ll notice that when you type in a search, the left-hand menu expands to allow you to filter your results by creator and also by descriptive tags added by other users.  Doing so provides a really powerful way to combine the information from our collection databases with the way these works are experienced and understood by visitors.

If you click on the “More+” button on the collection search toolbar, you’ll unroll some additional tools which let you restrict your search by department, materials, object type and a few sliders which let you set a date range you’re interested in.

In my experience, one of the most frustrating things about museum websites is that they frequently have really terrible calendars!  Our own website was a prime example of that phenomenon.  I must admit, it just wasn’t very good.  In our defense (and the defense of all the museum webmasters screaming into their laptops), the problem is that museums have crazy calendars.  The problem is just pretty darn hard.  Some events repeat, some don’t.  Some events (like exhibitions) last for months, others last only one hour.  Events like classes meet many times over the course of a few weeks.  Our desire, is that all of these events be accessible on one nice neat little page of boxes…  aint gonna happen.

We’ve decided to take a little bit different approach for our calendar this time around.  Instead of a traditional list, or box-based calendar, we’re opting for more of a timeline.  In our design process, we found that timelines supported the kind of variation in events that we see in our museum much better than any of the more traditional options.  In one eyeful of timeline, we can show you an entire month’s worth of events at the museum.  Pairing the somewhat novel timeline interface with a traditional date picker on the left will be a nice fall back for those who prefer a more traditional interface, and provides a nice way to index directly to dates you’re interested in.  The scrollable action of the timeline will let users browse to find out more about the pattern of offerings here at the IMA.    A clickable legend in the right sidebar, lets visitors filter events down to see only the ones they’re interested in.  Every event is available at your fingertips and it’s easy to see what exhibitions will be on while you’re here.

One of the things I think we’re all aware of is how much the mobile web is changing the way we seek and access information.  As we’ve watched our web statistics, we’ve seen a steadily increasing number of users coming to our website from mobile platforms.  We can only anticipate that this trend will continue.  As such, we wanted to be sure to offer a specialized experience for mobile users which still let’s them bail-out easily to our full website.  The new website features a specialized mobile page with information you might want to check while you’re on the go… hours, directions, showtimes etc…  If you’re looking for the main site, just click the button on the bottom of the page.  You can always toggle back to the mobile site by using the call out from the IMA homepage (note: this mobile page icon only appears in mobile browsers)

In addition to the calendar, the other area that was not very good on our old site was the way we handled ticket sales and memberships online.  Not that there was anything insecure or hacky about the software, just that it was darn hard to use.  We’ve done an extensive amount of work since that time to replace those systems with a new one that we’ve integrated in-house and customized to make this process as easy and painless as possible.  Why should it be hard?

Finally, one of the new areas of the site that I’m most excited about is called “Interact”.  Maybe this is preaching to the choir since you ARE reading this on the IMA’s Blog… but we’ve been doing some really amazing stuff around the web in the last few years.  We’ve been sorting out the kinds of content and social media tools that give audiences an inside scoop on a pretty amazing institution.  We’ve also been learning a TON from YOU.  I think all of us here get totally jazzed when we see a really insightful comment on the Blog or when someone tells us a really cool story about experiences they’ve had at the museum.  You also take us to task occasionally which is good for us, and helps us grow and get better!

The problem is that most of that content was really buried on our previous sight, and unless you knew where to look, you probably missed it.  The Interact section is a much stronger attempt at providing a home where many of these efforts can live.  Interact will be an easy place for you to find links to our social media efforts, comments you’ve left for us on twitter, on the site, or tags you’ve added to describe your favorite works of art.

Stay tuned to Interact for some pretty fun ideas we have about how to continue to give you all more and better sneak peeks and insider info on what’s next at the IMA.

One of the things that we’ve been dying to put together for a while is called TagTours.  This new area of content on the site gives you a novel way to bring together works from across the collection that might not otherwise be thought of as connected.  Need a way to impress a date?  Like Sports? Animals?  These tours provide a unique way to experience the IMA’s collections online.

Enough of the chatter, let’s get on to the good stuff… but first a word from our sponsors. Click through and watch this video to get the super secret and ever-so-clever username and password to access our new site

Click through to watch this video and get access to the new site

Over the next few weeks staff from the IMA’s webteam will go into a bit more depth on each of these features to explain a little bit more about how they work and why they do what they do.  As always, the IMA is committed to continuing to help other museums develop better tools and techniques for succeeding online.  We’ll be examining which of these features might be released as open-source tools that can be picked up and used by any museum that needs them.

Thanks for sticking with this rather lengthy article.  As always, please leave comments / questions / suggestions for us in the comments.  As I mentioned above, we learn a ton from you and your input and would so much appreciate your thoughts!  -Rob

What a year. I can’t believe it is almost over. We have covered a lot of ground at the IMA. There are now 21 partners on ArtBabble! The IMA has been rolling out a new brand and I’m so excited to share that with you in 2010 with the launch of our new website.  Stay tuned for updates on that soon! We created an iTouch application in-house for Sacred Spain. The 100 Acres Art & Nature Park is getting closer every day to being ready for the 2010 opening (see The Launch of Eden II). We revealed the Indianapolis Museum of Art is adding a scientific research and analytical laboratory to its existing paintings, paper, objects and textiles conservation laboratories. For all of those reason’s I’m pretty excited to get started in 2010. But before I forget, seems like this would be a good time to reminisce over my favorite/worst things of the year.

• Favorite Web Design Moment – @font-face. Move over sIFR and Cufon… typography on the web is about to get totally awesome.
• Favorite App – Tweetdeck. This app alone makes Adobe Air worth the download. I think this was my favorite app last year, but each release makes this thing better and better so i’m still saying this is the best. Now would be a good time for me to plug TAP too.
• Favorite YouTube Video – DEADLINE post-it stop motion
• Favorite Flickr Photo – Tap into it
• Favorite Community Activism Moment – Indy Culture Matters rally. Check out photos of this proud moment for arts & culture  in Indianapolis.
• Favorite ArtBabble Video – Type A, In the Factory
• Favorite News Story – This is pretty easy. Balloon Boy takes this one by a mile. I was in the office when this went live on cnn.com and we watched in horror as that poor boy crash landed to the ground… wait, there was no boy. Doh! The father who concocted this shenanigan made John Gosselin look like a saint. Coming in at a close second, Larry King’s tongue twister.
• Favorite Reality TV Star – Russell H. Though he got robbed in the final vote, this guy was the best thing to ever happen to Survivor, period.
• Most Influential Person of ’09 – This guy. You have to watch the the whole thing… amazing.
• Worst Fashion Trend – Ed Hardy.
• Favorite Meme – Keyboard Cat.
• Favorite Quote – “Who gon check me boo?” – Sheree
• Favorite Band – Chin Chin. If you don’t know, now you know.
• Best Beard – Kevin from Top Chef.
• Worst Re-branding – AOL
• Best Re-branding – IMA (duh!) Seriously though…
• Best Font/Type Story – Ikea Changes Its Font

Hopefully this list will help you get through the light work week. See you next year!

So how did ArtBabble get to where it is? I’ll let the graphics do the talking. We have posted a handful of interface design mockups which were considered for this project in a Flickr set. What started off a slick techie look (I was way off!) morphed into the hand drawn, yet clean and casual website you see today.

Below is a punch list of essential tools I used to create the ArtBabble design.

1. Bamboo Fun Tablet – I used this to create the header sketches, and various interface elements and icons. Having barely ever used a Tablet before, this was a great tool to learn on, and produce exactly what we desired.

2. Adobe Web Premium – Photoshop for the hand drawn and organic elements, Fireworks for page layout, interface elements, and image optimization, Dreamweaver for HTML & CSS editing, and Flash for the video player.

3. The Internet – The web was a great source for inspiration and more importantly graphic resources such as Photoshop brushes, and the hand written font we are using, Soli.

4. Caffeinated Beverages – I need these to survive in general.

ArtBabble is currently available via invitation and in beta mode, but you can still sign up while we’re polishing things up and adding content.

I’d been aware of the COLOURlovers site for a while and always thought it was cool.  The site is a bit like social media meets the paint chip display at your local hardware store.  I’m always amazed at the variety of colors and associations on display at these when I’m shopping for paint.  Whether its something obvious like “Slate Blue” or mysterious like “Dusty Cairo”, I’ve always thought that the guy/gal that names the colors has a great job!

That’s why I was pretty intrigued by the COLOURlovers post about Van Gogh and the Colors of the Night. This post is a great example of how inspirational some of the works of art in our collections can be for designers and artists looking for their muse.  Somehow, to me, pulling these colors out of their context makes me think about them differently?  I decided to give it a try myself!  Setting up and account and creating palettes turned out to be a really easy and enjoyable experience.  Check out my colour lovin’ palettes!

Not to knock on Van Gogh, but I think there are a lot of great works of art to get your color inspiration from here at the IMA! I picked out several of our favorite works from among the web folks here and created palettes for them.  You can even feature images and descriptions of the things that inspired your color crafty-ness.  I used these to link back into our collection and provided images of the works of art.  I’ll admit, it was a lot more fun than I thought it would be and it did cause me to pay more attention to the artist’s choices. 

Is anyone else up to the challenge?

I’d love to see some other posts from people using their favorite works of art as inspiration for new color palettes.  Feel free to use works from IMA’s Collection if you like, or just show us something that inspires you!

Best part? I pulled out some colors that had not been cataloged by the system yet.  So I got to name them!  Say hello to Egungun Red and Egungun Gold, Red Shirt and Homer Sky!  Ok, the last one wasn’t all that original, can you do better? Post your’s in the comments and show us what colors really stand out for you!

	Artist Homer, Winslow Title: The Boat Builders Creation date 1873 Materials oil on panel Dimensions 6 x 10 1/4 in. 13 3/4 x 17 3/4 in. (framed)
Palette Boat Builders

	Culture or people Yoruba people Title Egungun masquerade costume Creation date 1901-1990 Materials cotton, beads Dimensions L: 64 in.
Palette Egungun

	Artist Scott, William Edouard Title Rainy Night, Etaples Creation date 1912 Materials oil on canvas Dimensions 25 1/2 x 31 in. 33 x 39 1/4 in. (framed)
Palette Etaples

	Artist Toulouse-Lautrec, Henri de TitleMoulin Rouge – La Goulue Creation date 1891 Materials color lithograph Dimensions 67 x 46 3/4 in.
Palette La Goulue

	Creation date 701-800 Dynasty Tang dynasty Title tomb guardian Materials earthenware with lead glaze, ink, gold Dimensions 42 1/8 x 19 x 9 (approx.) in.
Palette Tomb Guardian

The site will feature some cool new media stuff.  Dan Dark, Senior New Media Producer, is currently working on a series of videos that will give you the inside scoop about some featured objects from the show presented by the curators from the Asian Art Museum of San Francisco.  (They organized the show.)

In addition to the video, we have pulled together a selection of IMA objects that you can find in our permanent collection. Along these same lines, the Nugget Factory is working with IMA curator, Jim Robinson to record an audio tour of our Asian Art galleries.

You will also be able to download free wallpapers (ala To Live Forever) and of course, get the skinny on programs and events.

We will give you a heads up when the site officially launches…we are shooting for Monday.  Hold your breath and cross your fingers

Ever wondered how web designers make those little icons up in the address bar? Can’t figure out how to make a glossy button, complete with faded out reflective web 2.0 goodness? Or how about how to create those little badges and buttons you see gracing the sidebars and footers of your favorite blogs? I’m here to help.

Contrary to popular belief, you don’t have to own an $3,000 software package and a bleeding-edge beefed up computer. In fact you can pass as a pro without even opening up Photoshop… for, dare I say, free! Thanks to the advancement of web technology and all of the love being spread by the web design community, you should have no problem convincing your friends you’ve spent back-breaking hours creating a pixel-perfect masterpiece.

I’ve compiled a list of 10 great online tools to help you become a web design (insert musical genre of choice here) star.

favicon.ico Generator
This tool is great for creating favicons. You have the option of importing an image to trace over with a very intuitive user interface making this task a snap. Favicon.cc even gives you the ability to create an animated icon! What more do you need? I’ll answer that, nothing.

Button Maker
This Button Maker by Adam Kalsey is the perfect tool for creating your own zany badge & button images. Choose your own custom messages, colors, and crispy pixel perfect positioning options.

Websnapshot 1.0
This is an Adobe Air application, which means you have to download and install it, but it’s free. This tool takes snapshots of any given website and creates 3 different sizes on your command. Perfect for bloggers and web content publishers.

Photoshop Express
Did you know Photoshop has an online web application that let’s you “Upload, tweak, rotate, edit, share and store your photos” for free? I’ve used this in a pinch a few times, and it’s very handy. There are a few filters as you see in the thumbnail.

Silk Icons
This set from famfamfam.com has over 700 icons you can use for any purpose, and make any changes you like. We use these on our in-house project management system, Athena. This is the most expansive free icon set I’ve seen.

stock.xchng
I can’t stress enough how great this site is. Users get hundreds of thousands of high quality, hand picked stock photos and graphics – all free! It’s also a great way for you to share your own self-produced stock art as a way to give back to this wonderful community.

Squidfingers’ Patterns
The web design community truly is a sharing bunch these days. Squidfingers has been sharing these beautiful pixel patterns for years, before it was trendy to be so giving. If your looking for web page background ideas, don’t sleep on this site.

Web Developer Firefox Extension
This tool comes in pretty handy if you dabble in html and/or CSS at all. It gives you easy access to actions such as: validating html and css, displaying image information, clearing your browser cache, viewing outlined css page elements, and much, much more.

ColorZilla Firefox Extension
This tool is perfect for grabbing a color for inspiration in your own designs. With two clicks you’re armed with the HSB, RGB, and Hex values for any given color on a webpage.

MeasureIt Firefox Extension
All too often we need to know the dimensions of areas on a web page. This is the rich man’s version of “print-screen, fire up Photoshop, paste, selection marquee”. If you understood that last sentence, congratulations, you are just as geeky as me.

I hope you find these gems as useful as I have. Feel free to share your favorite tools I left out in the comments!