overheadviewsm

Web Design: Creating the Savannah Mall Interactive Tour

savannahmall_logo

Savannah Mall is a million-square-foot retail shopping mall on the south side of Savannah, GA. As part of the new website design, Clark Creative wanted to create an interactive home page image that would give viewers an idea of the many businesses located on the Savannah Mall property: three banks, an urgent care medical facility, two multiplex movie theaters, an eatery, a gas station, and a branch of the Live Oak Public Library.

The site already included an interactive directory of the interior of the Mall, but how to portray the outside and environs? We all know what shopping malls look like – big buildings surrounded by even bigger parking lots.

overheadviewsm

We wanted to give a street-eye view and creatively arrange all of the businesses so that they could be seen from one perspective point – something that isn’t really possible. The creative direction was to create an illustration that would attractively group the surrounding businesses and use the anchor stores of the Mall (Target, Bass Pro, Burlington Coat Factory, Dillard’s, Virginia College) as reference points.

Our creative director Cari Clark Phelps took a trip to the Mall and photographed all the buildings on site. She worked with Jen Young, senior designer at Clark Creative, to develop an interesting way to represent the relationship of all the structures.

target

Using Adobe CS5 Perspective Grid Tool, Jen laid out a perspective.

gridexsm1

Then she began to create the individual stores as illustrations. She used some of the on-site photography as basis for her illustrations of the stores (or in CS5 terminology, models), ending up with vector files that could be scaled and edited. Many models needed to be built step by step, with signage, doors, columns and wall detail.

vc-blogjpg

After some experimentation, Jen determined that it was more efficient to create the models as “flat-to-camera” images, then slide them into perspective.

2_blog_image

She built and added store models until she had a basic shell layout of the Mall building with anchor business reference points.

4_blog_image

Then she began building and adding the models of the surrounding buildings. Finally, she added details of the surrounding area (clouds, shadows, birds, landscaping, and other fun details.)

5_blog_image

The next task was the interactive rollovers. We wanted information about the Mall and Mall businesses to be available from the home page, providing the visitor an information snapshot as well as a hyperlink for more detailed information.

We assembled information for each business, and if necessary, built internal pages to house dynamic content such as (constantly changing) movie theater times.

6_blog_imagerev

We also wanted the illustration to have some animation, but didn’t want to slow down how the page would load, or use Flash for the main image on the homepage. Cari’s solution? Design slightly larger images of the “hot spots” that would display when rolled over, covering up the base image and giving the impression of animation.

We filled in areas with additional details – like a car in the parking area. In the future, we’re able to display parking options, shuttle info, and/or driving information needed for festivals and events (like St. Patrick’s Day shuttles and Savannah Morning News’ Ultimate Yard sale). Check it out at SavannahMall.com and let us know what you think!

7_blog_image

Leave a Reply

You must be logged in to post a comment.