Web Ad Design – Instructions (DF)

1. Read the Overview, Grading Checklist, Best Practices, and Examples

Overview

Companies use web ads to reach customers directly with product announcements, sales, specials, educational information, seasonal promotions, how to use a product, and new uses for a product.

For this project, you’ll design one web ad for the same client you did your email for.

These web ads will communicate the same message as your email too.

Grading checklist

  • You will design two web ads for the client or subject of your choice
  • Focus on products and people
  • Have one large, emphasized image to draw the viewer in
  • Use brand guidelines (logos, colors, typefaces, design elements, photos/art)
  • Be sure to have a call-to-action button/link
  • Size: use one of these common Google web ad sizes (pick two:)
    • Leaderboard
      728 x 90px at 72ppi, RGB
    • Half Page 
      300 x 600px at 72ppi, RGB
    • Medium Rectangle 
      300 x 250px at 72ppi, RGB
    • Wide Skyscraper
      160 x 600px at 72ppi, RGB
    • Large Mobile Banner
      320 x 100px at 72ppi, RGB)
  • Use Illustrator to design your ad
    (Watch the video at the bottom of this page to see how I created my web ad in Illustrator. It shows my entire 15-minute workflow)

Best Practices

Web Ad Placement

Here are three common and popular web ad sizes and where they are usually placed on a website.

I suggest keeping the medium rectangle away from the text as much as possible. It reduces readability and slows your reader. I feel it also makes your website look tacky—like you’ve put ad revenue over content delivery.

Google also offers an in-text ad that displays between paragraphs. I find these downright annoying as they significantly reduce the delivery of content. I’ve gotten rid of them entirely on my websites.

Student Examples

Industry Examples

Only 7 Brand Assets were used to create these ads

The process is fairly simple. Designers create, choose, or are given photos, words (copy), design elements (borders), colors, and typefaces. They arrange these brand assets to create the web ads shown below.

Were used to create these web ads

Web Ad Image

Call-to-Action Buttons/links Examples

2. Create your own Web Ad

Choose two Google ad sizes from the list above. Then, open Illustrator and create your web ads.

Illustrator Tutorials
First, let’s familiarize yourself with Adobe Illustrator, the program you’ll be creating your web ad in. Here are several video tutorials that will introduce you to the drawing and typography tools in Illustrator that you’ll need to know.

Video Tutorial: Drawing with the pen tool

Video Tutorial: Using type, loading fonts, and customizing type by creating outlines

Video Tutorial: Creating a 160×600 pixel Web Ad from scratch (My full 15-min. workflow)

Good work!