This installment of the GraphicsIQ Champions of Graphic Design series features New York-based The Chopping Block, Inc.  The firm has been designing cutting-edge Web sites for organizations such as Nascar, LEGO and NASA since 1996. But when Sony Pictures Classics approached them to design the site accompanying its soon-to-be released movie "Fog of War," the designers knew they were in for a challenge. Chopping Block’s Senior Design Technologist Chandler McWilliams and Project Manager Rachel Bell took some time recently to discuss the design strategies they used in the site’s development.

GraphicsIQ: How long have you been using Photoshop in your design work? What are the biggest changes (good and bad) you've seen in the application over the years?

Chandler McWilliams: We’ve been using Photoshop since The Chopping Block was founded in 1996. Over the years, Photoshop has become an increasingly important part of our workflow. Its exceptional speed and stability helps us work fast and complete high-quality work. What’s also important is that Photoshop has become a great bridge between the worlds of still photography, motion graphics and the Web. Since Photoshop was introduced, Adobe has become increasingly attentive to designers’ needs. For example, we like what Adobe has done to streamlining the interface by adding the toolbar to the top—a change that uncluttered the interface and made it easier to access the necessary tools. Adobe has also beefed up the scripting capabilities with Photoshop CS, making it faster and easier for us to deal with media assets and automate manual tasks. In terms of bad changes, Adobe has made decisions with Photoshop over the years that we didn’t like at first, but we were able to circumvent the changes with tweaks to our workflow. Overall, the changes have been positive. Photoshop continually gets better and enhances our workflow.

GraphicsIQ: What were the key new features in Photoshop CS that helped with the making of the Fog of War site?

McWilliams: For the Fog of War site, we were given hundreds of images—at least 800 or more—that we had to sift through, organize and decide how to use. We used enhanced scripting in Photoshop CS to add metadata to the images. Then, using support for metadata in the enhanced File Browser in Photoshop CS, we were able to organize images by date, subject and other criteria, and then later find images that were appropriate to each section of the site quickly and easily. If we had not been able to use scripting for this, we probably would have had to hire a full-time intern just for this purpose.

Rachel Bell: We were given 10 CDs worth of images, almost too many to deal with, ranging from shots from the National Archives and old newspapers to McNamara’s family pictures. Scripting and support for metadata in Photoshop CS were essential to the success of this project.

GraphicsIQ: Did you take advantage of any of the new synergies between Photoshop and other Adobe applications in the making of the site? What were they? How did it work out?

McWilliams: A lot of the general shapes for the site, such as the stars and the wheel-shaped timeline for navigation, were created in Adobe Illustrator CS. It is getting easier and easier to move between Photoshop and Illustrator, making our workflow more efficient. We used to have to convert Illustrator files into an intermediate format before bringing them into Photoshop, but now it’s just a matter of copying and pasting. It seems like a small thing, but it’s a big time saver.

GraphicsIQ: Anything missing in the new Photoshop? What's your wish list after putting together the Fog of War site (pretend you have Adobe sitting right here)?

McWilliams: It would be nice if there were better tools for reviewing comps with clients over the Web. The Photoshop Web Gallery is good for staging items quickly, but we’d like to see more interactive capabilities that would allow clients to comment right on the Web vs. having to call or e-mail us.

GraphicsIQ: How did the use of photos contribute to the design goals of the site? Could this project have happened without Photoshop?

McWilliams: I suppose the site could have been done without Photoshop CS, but it would have taken twice as long and honestly, it would not have been much fun. One of the main goals was to link the site closely with the film by making the site very photo-intensive, with a lot of primary-source photography used to add validity. Without Photoshop CS for image processing, it would have been a nightmare.

GraphicsIQ: Is it difficult choosing the proper type design to go with the photo-intensive and interactive nature of the site? How did you go about it?

McWilliams: We really don’t have much trouble with type. All of the designers at The Chopping Block have so much experience working with type and interactive design that it has become second nature knowing what classes of typefaces will work in different situations.

Bell: Here at ‘The Block,’ selecting type is more intuition than analysis. It depends on the subject matter and the project, as well as the client’s tastes. Most of the type for the Fog of War site is from the DIN typeface family.

McWilliams: We like the DIN typeface because of the numbers—the distinctive fours especially. DIN looks great on the main timeline, which calls out specific years. We also like the fact that DIN is easy to read on screen and works well in Flash.

GraphicsIQ: Where do you see site design headed in the future? I noticed the site is pretty Flash-heavy. Do you see interactive media like this becoming more of a given in the near term in Web design? Why/why not?

McWilliams: Sites are definitely moving in an interactive direction, but especially when compared with a few years ago, there’s somewhat of a backlash against heavy use of Flash. Some sites just don’t lend themselves to Flash well, especially content-heavy sites with a lot of text. A few years ago, we were creating sites that were so Flash-heavy that content was almost immaterial. Now Web developers are becoming more mature and realizing which technologies should be used in which situations.

Flash was a good option for the Fog of War site because it let us embed stock video footage easily into the site and to tie everything back to the look and feel of the film. For a movie site, it’s nice to be able to show footage rather than having something like a list of images and thumbnails on an HTML page. The integration between Flash and Photoshop CS definitely helped in easily showing footage of the film.

GraphicsIQ: How difficult is it to splice still photos and streaming media type data together like you did with the McNamara photos and the newsreel footage? Can you offer some tricks of the trade?

Bell: We actually didn’t splice the still photos and streaming media—the post-production house, Global Department Store, did. Now more than ever with movie projects, we receive completed, edited materials that are reviewed heavily and approved before they are released to us. Our job is to put everything together and decide which assets are best for the Web.

GraphicsIQ: What do you see as some of the biggest pitfalls today's designers fall into as they look to put together sites similar to Fog of War? Did you find yourself pulled toward a particular look or technology - and then having to pull back so that it didn't mess with the overall design?

Bell: With this site, the biggest pitfall was figuring our where to start because there were so many assets and so much content. This film is a mirror of the history of the 20^th Century, so it’s no surprise that it was difficult to figure out how to organize and present all the content. We did a lot of brainstorming to figure out the best way to present the assets. We also worked closely with the studio, Sony Pictures Classics, and the director, Errol Morris, who had a lot of good ideas. We had to distill that and come up with something that would please everyone and still make the site engaging for viewers. We wanted to be sure that we reinforced the film but also further educated viewers with content that wasn’t presented in the film.

McWilliams: At The Chopping Block, many of our designers come from strong illustration backgrounds. Some of our first comps were heavy on illustration with wavy lines and other vector-oriented elements. We had to pull back on our heavily illustrated comps and make this more of a photo site to synch better with client desires and with the film itself.

GraphicsIQ: What do you think is the best feature of the new site? Why?

McWilliams: Everyone here really likes the circular timeline. It works like a large video scrub wheel that lets users "scrub" back and forth through different years. It is a dominant feature in the design and it illustrates the overlap between McNamara’s life and the 20^th Century.

GraphicsIQ: Can you explain how the site mirrors the overall design of the movie? How do you go about ensuring a consistent look and feel across both media? Any words of wisdom?

McWilliams: We’re always challenged to make a site stand on its own but not interfere with the film content. Obviously the fact that the site is photo-heavy is one way to tie back to the film. The use of stock footage from the film also brings the two together. At the same time, users can jump around to different points in McNamara’s life to create their own unique experience.

We spent a lot of time with the imagery—both still and moving—to be sure that we transferred the style, look and feel of the film over to the site, not necessarily verbatim, but in a more interpretive way.

Bell: In working on film sites, we get a chance to see some really great films. It is one of the great perks of the job.