The MGM website was a true labor of love. After several years of honing our skill and feature sets on other MGM sites like Stargate, American Gladiators and MGM HD, it was finally time for the MGM dev team to dive into a complete overhaul of both the back-end and front-end of the legendary studio’s official website.

The main problem to be solved here was how to keep users on the site for as long as possible in order to connect with the deep library titles of MGM’s over 4100 movies. Thanks to our friends at Hulu, and the amazing dev team at MGM, we were able to come up with an incredibly compelling site with an infinite amount of info and media for visitors to soak in and enjoy.

A dedicated “Watch Now” section allows users to watch close to 200 titles instantly, right on the site. This was accomplished with an integrated Hulu player and AJAX to allow users to browse, click and watch without having to reload the page.

The “Movies” section features infinite scrolling that continuously loads more movies once the bottom of the page is reached. This allows the user to view all the movies on the site and click through to their title pages.

Title pages allow users to view stills, clips, synopsis, cast & crew lists and awards for each title. Buying and viewing options are also available whether it’s on DVD, Blu-Ray, digital download or free-on-demand, such as Hulu or YouTube (both which play directly on the title page). Users can also share the title on their Facebook profile.

With all this in mind, I invite you to go get lost in the movies. Go have fun at the new MGM.com!

Print design has never had a very strong presence at my current day job. I usually only get to work on it at home for a freelance client or for friends.

Needless to say, I was like a pig in shit when I was asked to create a print ad to promote the Stargate Website.

The ad needed to communicate to all fans of all three Stargate series — SG-1, Atlantis and the new Stargate Universe. It also needed to hard sell all of the great features the site has to offer fans on all levels, however deep or not-so-deep their fanaticism may be.

When asked to create the landing page for our new iPhone apps, we were given screenshots of the apps that were in development at the time. Being the design snob that I am, I was taken aback by their seemingly arbitrary and non-standard construction. Not to mention its overall sloppiness (hard to read colored text, stretched or squashed button labels, poorly resized and uncorrected imagery, etc.).

I just needed to make a stink about it, but instead of just complaining about the design, I ended up taking on the job myself over the weekends and evenings that followed.

The options and soundboard screen’s orientation were turned to portrait view for better one-handed usability and to avoid the iPhone’s speaker from being covered by the user’s hand during playback of the sound. Overall design was completely re-thoughtout for a more standard experience. The images for the slideshows were retouched for best possible color representation, taking into consideration the age of the assets.

Once the app was redesigned it was a matter of creating assets for the 5 features that were getting companion apps: Rocky, Fargo, Robocop, Silence of the Lambs and Army of Darkness. Included in those assets were the icons that appear in the app. Those I took creative license, creating Ash’s chainsaw from Army, Hannibal’s mask from Lambs, Rocky’s hero pose, Robocop’s mechanical head, and of course, the woodchipper from Fargo:

The apps went on to be downloaded more than 100,000 within a relatively short period of time, and are still going strong. So far, the most popular app has been the Army of Darkness, based on the last of the Evil Dead trilogy films. It’s such a classic flick with some great quotes.

Check out the apps in iTunes: Army, Rocky, Lambs, Fargo, Robocop

Below are before and after shots of the original app design, the icons, and samples of the finished app.

The MGM logo is one of the most recognized brands in the world and is synonymous with Hollywood.

With the release of the films Valkyrie and Quantum of Solace, the new motion version of the MGM logo was issued for use before feature films. Although not much different from its predecessor, the new logo was considerably cleaned up, using original elements from decades ago.

The same original elements were used here in the revision to the static logo. Using ultra-high resolution scans of the film ribbon and Leo, I ended up with a massive working file measuring 20,000 pixels wide and weighing in at over 3GB in size once all of my retouching was done. Pretty friggin’ big for a guy who’s used to working with web graphics.

Special attention was payed to the texture of Leo’s hair which in the original painting, did not exist. Purists may call me crazy for adding it in, but they were subtle enough and added much more texture and depth that I decided it was for the better. I also needed a good alpha channel for blending purposes. This meant hand painting in all of the hair at the edges of Leo’s mane. Fun!

Overall color was graded to a more natural golden tone, away from the yellow and orange of the preceding logo.

The end result is one of subtle but much needed enhancements.

In 2010 MGM is set to release the remake of Robocop. For fun I created this spec teaser one-sheet using Cinema 4D for the 3D logo and Photoshop for the rest of the typesetting and finishing.

I should probably do a few hundred more since that’s usually how many comps a studio would get for a movie poster before deciding on a final version. I sure wish I had that kind of time.

Until then…

The Stargate site was the first project I worked on when I was hired at MGM. But that was the version before this one.

For the revision of the site the project was outsourced to a vendor who, fortunately for us, was unable to complete the task. This gave the MGM web team a great chance to do some spectacular work. Since design direction was already set, the task of thinking out the rest of the UI and UX was left up to me and the team.

In addition there was a new series that was going to start airing. This meant that the site was going to play an important role in supporting the series.

Besides design, I was also responsible for user experience design and functionality, media player functionality and video content graphics and style. Among about a million other things.

Enough of my yappin’. Boogie on over to the site and have fun:
OFFICIAL STARGATE WEBSITE

]]> http://jameskocsis.com/portfolio09/archives/244/feed 0 http://jameskocsis.com/portfolio09/archives/203 http://jameskocsis.com/portfolio09/archives/203#comments Sat, 31 Oct 2009 00:34:43 +0000 James http://jameskocsis.com/portfolio09/?p=203

OK, this was one of the coolest things I’ve ever worked on, and not just graphically.

This concept for Impact Video on Demand (an MGM service for cable and satellite providers), was truly unique in that it used some tricky javascript to filter movie titles. Users would drag ‘Action Elements’ from a periodic table into this vat of acid and the site would deliver movie titles tagged to that element. The more elements you dragged in, the narrower your search results ended up being. Unfortunately the feature never went live for a few reasons.

Luckily however, I get to share the artwork I did for it with you :) This graphic, like most web graphics, had a final size of about 200 pixels wide. Being detail obsessed, I made sure to create it at about 10 times that size.

It started with a hand drawn sketch that I then recreated in Illustrator adding some basic shading. Once I was happy with that I brought it into Photoshop and added all the texture and details.

The end result was a completely over the top vat of orange acid (to match the Impact brand.

Impact’s website: http://www.impactvod.com/

This was a fun little piece I did as part of a background image for the Impact site for MGM.

The ax started out as a flat 2D illustration in Illustrator. I then angled it, added some perspective and extrusion, then did some basic shading in Illustrator before bringing it into Photoshop for final texturing and finishing.

I wish I had done this one at a large size, but alas I didn’t :(

See it in action (refresh til you see axes): http://www.impactvod.com/

The Stargate Network Player was going to be a way for fans to watch full episodes of the Stargate franchise directly on the Stargate website.

The player never came into existence thanks to Hulu but I still like the icon I created for it.

All work done in Illustrator.

More about Stargate: http://stargate.mgm.com/