logo.svg

projects/hero/bringyourownmagnum.png

Bring Your Own Magnum

Project description

While working for M. Shanken communications I was put in charge with coming up with the creative for Wine Spectator's annual Bring Your Own Magnum. We create a microsite and a couple of promotional materials. The goal was to create a website that would pull in images from Instagram and Twitter based off the hashtag #WSporsche.

My Role

  • Creative Directors
  • Designer
  • Frontend Dev

The website

The website evolved along the way as we found out new requirements and once we received Porsche's Style Guide. For example, the white header came along later in the project once we discovered that the Porsche logo had to be on a white background. We used Twitter Bootstrap for the base of the site because it is easier for the developers to work with and the short deadline. Originally we were going to just pull images from Instagram, but we later decided that including images from Twitter would be a great addition. Because of this there was a bunch of different sizes so we use Masonry to help build a dynamic grid.

Texture

Since this was a promotional website for the brand new 2014 Porsche Cayman and I wanted to add a lot of the texture from the car. I decided that I would focus on the inside as most the of the pictures on the site would be of the outside. I don't want to get into a debate about skeuomorphic, but this was my first of my designs in that direction.

projects/bringyourownmagnum/texture.png

Loading animation

As a final little touch I wanted to create a custom loading animation. My first thought was either make a gage or a steering wheel, both have moving parts that everyone knows. After looking at the interior of the Porsche for a while the steering wheel really stood out to me. For such a small icon I am very happy that I was able to fit in the details of the wheel, such as the grips, cutouts, and the basic shape of the logo.

projects/bringyourownmagnum/porsche.jpg
Image credit Porsche. Photo of a Porsche Cayman interior that I used for inspiration.

When I first started to build the animation I debated between just doing it in CSS3 or making a gif in Photoshop. CSS3 would have been the easy way out, but it would not necessary looked the best. I could not have gotten the same rotating results as I did in Photoshop.

After building the first version I noticed that something looked off. I realized that I was spinning the wheel on the outer axis, but the Porsche steering wheel's center hub is not perfectly centered. I then had to figure out how to transform and rotate the wheel from the center hub. The diagram to the right you can see that the center hub is slightly off center. Check out the gifs below and can see something looks off on the first draft. It helps if you focus your eyes on the center hub to see what I am talking about.

projects/bringyourownmagnum/lines.jpg

First draft

projects/bringyourownmagnum/bad.gif

Final

projects/bringyourownmagnum/good.gif

Promotional material

We ended up only created two promotional material. A 11"x17" board that would be used to display the main information and a 3"x3.5" that looked like a Polaroid with information they could take home.

Front of the Polaroid sized card
Back of the Polaroid sized card