On Target with Banner Ads

During Tuesday night’s lecture this week we learned about banner ads and their importance as the principle form of revenue for site owners.  We also learned about the different types of banner ads and ways in which they were displayed. These ads are a great source of outreach for businesses with higher engagement than tv ads and outdoor ads. With banner ads you get a huge return on your investment.

For our design showcase this week we were tasked with designing a banner ad series for a brand of our choice for a third quarter campaign. Thinking about the months in the third quarter: July, August, and September, fall and back-to-school immediately came to mind. The idea of going back to school really stuck with me and I thought of places that I would normally shop at for school supplies. My go-to store for school supplies = Target!  I love Target so I decided to use this as my brand choice.

To research for this assignment I first went to Instagram (it’s my social media of choice) to looked at the images Target posts and noticed a trend of solid background colors that were somewhat bright with real images placed on top. I wanted to incorporate these elements in my ad and I was able to download Target’s logos from their website.

@target Instagram photos

I first searched stock image sites for photos of school supplies without much success. I then did a Google search for the words “cool school kids” and “cool school supplies” and found images of children that I thought about using. When I started working with these in Photoshop I thought my ad was looking too busy so went back to focusing on just school supplies. I found an image of a stack of books on this website and knew I wanted to use it. I saved the image and pulled this into Photoshop to remove the background and other elements to focus on the books.

Once I had my main image I started thinking about background colors for my banners. I decided a lighter blue shade would work well with Target’s red logo and looked at a few shades of blue. Once I had those two elements I wasn’t quite sure where to go. I started thinking about school and remembered the chalkboard assignment from earlier in the semester and thought it would be nice to bring in a chalkboard with my promotion text on it.

The four different banner ad sizes that we had to create a design for:

1. Leaderboard: 728 x 90
2. Rectangle: 300 x 250
3. Skyscraper: 160 x 600
4. Button: 320 x 75

The first banner I designed was the rectangle. From there I created the other required files. I had to edit the chalkboard size and text but for the most part the elements worked in each layout. I did have the most trouble with the button ad: 320×75 size, designing a few variations.

With this assignment we were required to turn on one of our banners into an animated 3-panel .GIF banner ad.  I went with the first banner I designed (rectangle) to set this up in frames in Photoshop with a 3x loop.

*Disclaimer: I am not employed by or affiliated with Target (I just love it!). The ads presented are for educational purposes only.

Rectangle Ad: 300×250

Leaderboard

Skyscraper

Button: 320 x 75

 

 

3-Panel .GIF Banner Ad

Building a Foundation Wireframe Style

During this week’s lecture on Tuesday we were introduced to wireframes and their importance in the web design process. A wireframe is an image or set of images that display the functional elements of a website while helping to establish a site’s structure and hierarchy. There are many reasons a wireframe is important, one of the most valuable being their ability to help you save time and money in the long-run.

With our design showcase we were tasked with choosing our favorite restaurant and designing a wireframe for them with a set of features. It was hard for me to choose a favorite restaurant but I immediately thought of the food delivery service, Blue Apron. My fiance and I have been using Blue Apron for over nine months and love it. Every Tuesday we receive a box of ingredients and recipe cards for three meals (usually dinner). The wonderful thing about Blue Apron is that we receive the exact amount of food we need, usually measured out for us so we never have too much or end up throwing food away.

Blue Apron has a great website so I didn’t choose the company because I thought their site could use a redesign, I instead chose the company because I have a personal connection to it. The assignment required the format be: 1280 x 972 pixels and I chose to have my site centered with text falling within 1,000 pixels wide. Another requirement for the assignment was too use these elements on the homepage:

• Logo
• Navigation menu
• Social media icons
• Rotating slideshow image
• Upcoming events/specials
• Three feature areas (pictures and/or copy)
• Contact Us area
• Another feature of your choice

Blue Apron has a great logo and I also love that the text on their site is in dark blue and not black which I would keep with a homepage re-design. Currently the logo is on the left with the navigation panel immediately following (below).

Blue Apron Current Site

I would keep the logo in the same location but include a tagline/few words that describe what Blue Apron is about beside the logo. I would then place the navigation panel immediately below (my wireframe example below).

With keeping in mind that most people read a site from left to right then top to bottom I wanted to include important details in the upper left portion. Most sites have a sign in or register section to the right so I wanted to keep this the same. A change from their current homepage is including a video below the navigation panel. I find the concept of Blue Apron to be great and  quick video that tells the viewer what it is about and how it could be beneficial for them would work well on the homepage.

I am including an image of my new wireframe and will go through the additional choices made for item placement.

Blue Apron Wireframe
*Disclaimer I am not affiliated with Blue Apron and this is solely for educational purposes.

To the right of the video I wanted to include a rotating image of different Blue Apron meals. Below the video I have a section for events, this is more of a placeholder at the moment and can be replaced with a different type of announcement. Underneath the rotating images I wanted to have three sections with images and text. I chose to have these areas to really breakdown what Blue Apron is all about. Currently on Blue Apron’s homepage you have to scroll down to get to these sections whereas with my re-design the information is presented without having to scroll so much.

Blue Apron has gotten a lot of great press so I wanted to include a section that highlights this on the homepage. With Blue Apron the goal is to get clients to sign up for the service and while social media is important for them, I would not view it as their top priority. With this in mind, I placed the social media icons in the footer section. The social media icons I used were found on this site.

I really love the blue color that Blue Apron currently uses so I would keep that while also incorporating a beige color and greys that would work well with this blue. I took screen shots of the images below from Blue Apron’s site and used my Eyedropper Tool in Photoshop to get color reads on the tomatoes. I wanted to incorporate accent colors that you would find from food and went with an orange/brownish tone and a red tone.

As I mentioned earlier I am not affiliated with Blue Apron but if you are a looking for a great way to save on time, food costs, and waste, I highly recommend them!

Color Inspiration

Color Inspiration