The New Celebrationcinema.com!

By Jeremy Bronson
E-Marketing Coordinator

If you haven’t noticed yet, we just launched our new website this week. You can check it out at celebrationcinema.com! So what went into the design and development of this big project for us?

 

An early draft of the new home page.

 

Goals and the Process
Why do people visit our site? What are they looking for when they visit? How can we improve that experience? These were the questions we asked when determining the look, layout, and functionality of a new site. We wanted to provide easier and more prominent access to current features, as well as quicker load times to allow better navigation between pages, titles, and days.

The design process began earlier this year with some sketches of layouts, discussion with managers over functionality needed, and consultation with others on the Marketing team to figure out how this site could reflect our current branding. I mocked up all the designs in Photoshop, created the front-end code and basic jQuery functions, and handed it off to our web developers at Springthrough. After a few weeks of adding content and testing, it was ready for release this week!

 

Mockup of the menu.

 

The “Now Playing” dropdown featres the 12 most recent releases. The “locations” menu offers links to all the theatres. Both of these menus are accessible from any page on the site. The home page has a large call-to-action for finding showtimes. Want to see what’s coming soon? We display 4 weeks’ worth of upcoming releases right on the home page.

The artwork gets more focus, too. Larger images are used for movie posters as well as around to let the artwork stand out. Let those multi-million-dollar ad campaigns shine!

Behind the Scenes

 

Golden Ratio overlays on the home page

 

Without getting too technical, the technology that runs the site makes it way easier for us at Celebration! too! This means our movie and event information will be more accurate and up to date than ever before. Now, some technical notes from the design & development side:

CSS3 techniques were used for drop-shadows, text-shadows, and rounded corners.

Sprites were used for the buttons on which roundedness and shading could not be sacrificed.

The home page featured image is sized to the golden ratio, as is its relative size to the body copy.

Museo is implemented via @font-face in the menu and headers.

The jQuery carousel on the home page is powered by the Nivo Slider.

The contact forms are powered by Wufoo.

The site is powered by Springthrough’s proprietary .NET CMS.

 

My handy image creation guide

 

And we’re not done yet
We consider this new site a big step, not a destination. The new website will serve as a platform on which we hope to introduce new and improved functionality. How about Big Screen Movie Club member profiles where you can see all your points and the movies you’ve watched? That’s coming soon! How about a monthly concession coupon – and maybe the ability to purchase concessions online? We’re looking into that too. Same with integrating this blog into the site so it’s not externally hosted. And, an improved social experience with better Facebook integration is in the works as well, so you can easily share and talk about the events we offer.

See below for some images from the website design process… and stay tuned for more great things at celebrationcinema.com!

An early draft of the new home page.

Mockup of the menu.

My handy image creation guide

Golden Ratio overlays on the home page

Advertisement