Extreme Makeover – Web Site Edition: The Maine Lobster Festival
Monday, May 23rd, 2011Last fall, after I gave a guest lecture to George Larou’s Web design class at the Maine College of Art, I told him about a crazy idea I had for a project. One in which Web design students could collaborate with experienced mentors to give an organization a new site while getting some real-life experience in how a Web site gets built.
Larou was excited, and graciously agreed to allow 4 willing students in his class to participate. The result was Extreme Makeover: Web Site Edition.
The students, Scott Lyle, Matt McGilvray, Meg Woods and Kelsey Raymond, teamed up with information architect Ellen Kanner, Web designer Suzy Massey and yours truly. The first task was to pick the subject of our makeover.
We finally settled upon a Pemaquid Client: the Maine Lobster Festival. All things considered, they weren’t in desperate need of a redesign, but it had been five years since the site had gotten a facelift. More importantly, because they already had an established relationship it was easier to approach them with our unconventional plan. Holly Sherburne and the rest of the Festival board enthusiastically agreed to be our guinea pigs.
For several weeks we met on Friday to plan our project. We reviewed and adjusted the site map and the students were tasked with creating their own looks based on a simple creative brief. We looked at similar festival events, including the Sundance Film Festival. We discussed the content strategy for the Web site, which needed to be simple so that it could be well maintained with minimal effort.
After a lot of experimentation and trying several approaches, former MECA student and graphic designer Walter Craven joined us in January and contributed the design concept that formed the basis for the look of the site. It was important to me that the look be really captivating, have the feel of a magazine, and look good on an iPad and other tablets. Walt’s look does that in spades.
Once we got the look nailed down, we started coding. We use four jQuery plug-ins on the site for various effects. Cycle is used to rotate the scenes from the festival on the home page. Accordion is used for the Main Events sliders on the home page. jCarousel is used to scroll through the Gallery thumbnails (also on the home page), and Fancybox is employed to display the large image overlays seen when you click on those thumbnails.
Since social media is all the rage, Meg added a Facebook Fan Page widget and a Twitter widget to most pages, along with ShareThis chicklets to the top of the right sidebar of back pages.
Kelsey helped produce all the sponsor graphics to spec and did quite a bit of the CSS, under my direction. We used opacity for the home page banner effect and used the @font-face technique to render the Chunk Five font from Walt’s comp, which we got from Font Squirrel. She also learned the joys of browser-testing and the art of adjusting her code to fix the look in every designer’s favorite browser, IE7 (nah, we didn’t worry about IE6 since it garners only about 1% of the traffic). She also ran the site through the W3C validator and found a few things we’ll be adjusting over the next week or so.
Content Management was the easy part. The site had already been set up on the Django Content Manager we use for most Client projects here at Pemaquid now, along with the Satchmo e-commerce package, which really gives you a lot of flexibility in setting up an online store. The Lobster Festival is selling their famous posters sets, and they’ll soon be able to add tickets for the live nationally recognized entertainers when those performances have been firmed up. Hats, T-shirts and other merchandise are on the way as well.
The one regret I have is that I wish we had been able to move through this project more quickly because two of our students, Scott and Matt, weren’t able to stay involved throughout the project due to other obligations. But overall I’m very happy with the way things turned out, as is the Client.
We’ve left the old site up for awhile at: http://old.mainelobsterfestival.com in case you’re curious to see what it looked like before this spring’s metamorphosis.
So that’s this edition of Extreme Makeover: Web Site Edition. Overall it went well, and I’d do it again with another group of students, because we can’t ever have enough good Web designers here in Portland, Maine.
Know of any good sites out there that need a makeover?














