Project 3: Ad + GIF


Part 1: Brainstorm

Below are some idea I had for brand and the ad/gif:

  • use toy car and edit to make it seem like a full size car (maybe a sports car – ferrari, etc.)
  • powerade – hand grabbing it, light streaks to show “power” coming from bottle into the hand -> “feel the power”, “power up”
  • apple vs windows – long waiting lines for help or on hold w tech support vs not waiting bc system is good
  • gatorade -> hand grabbing, thunder connects hand and bottle -> “fuel like a god”, “god fuel”

I really liked the idea of taking something small or miniature then editing it to look like a full size object.

Part 2:  Process Work

Here are the original photos I used.

I originally planned on using this picture:

But trying to remove all the lines would take too much time. I tried cropping but it was too low resolution. I found an old picture I took in NYC which had really nicely shaped clouds. It was a high resolution photo, so cropping that area worked(A). However, using only that small part did not show symmetry and balance, so I copy and pasted it to create radial balance, and using clone stamp tool and brush to  make certain parts look different. (B)



Since I did not have a full gatorade bottle, I decided to edit the picture to look full. I used the pen tool to create the lightning bolt shape then filled it with dark orange, then brought down the opacity, and did the same for the logo on the bottle.



When I first started the gatorade ad, I began with a hand grabbing the bottle, and a lightning strike (A). I wanted the sky to be a background to give a heavenly effect (reference to god), but the light from the thunder blended in with the blue skies so I inverted it.(B) I made the background black and white, and I achieved the look I got. While working on the final touches, I remembered about the painting, “The Creation of Adam” by Michelangelo. It represents God and Adam. I decided to change the hand gesture from grabbing the bottle to one similar to God’s in the painting.

Final Products




Web Mockup

Part 1: About my website and Inspiration

The website that I am creating in my Interaction Design: Interface class is called GimmeFood!, a gourmet food delivery service. I wanted the design to be modern, elegant, and simple.

Part 2: Style Tile

I decided to use the Marion font because it is similar to the fonts that chic and elegant magazines use. It is a sans serif font, so I paired it with a serif font, Lato. My first colour palette was yellow, orange, blue, turqoise, and brown. When paired together, these colours look fresh and remind me of food-related products. However, when creating my mockup, I realized that there were too many colours to incorporate. I tried only using two or three colours, but what I found was that it was best to use keep it simple by using black and white with a pop of colour to show elegance.

Part 3: Mockup

In one of my earlier mockups, I tried using yellow as the background. In my opinion, the yellow was too bright as a background and would make a nice pop of colour. Instead of showing elegance, it shows whimsy, playfulness, and boldness.

I changed the background colour to white and changed the main header fonts to Marion, and it already look more elegant. I also changed my “pop of colour” to blue. Using yellow as an accent colour against white was too bright, I need a colour that would look good against black and white fonts, and vice versa.

I changed all the header fonts to Marion and all sub-header fonts to Lato and added top and bottom borders for the navigation menu. I also added borders to other text elements which gave a sense of harmony and balance.

Part 4: The Final Mockup + Wireframe