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 three web ads for one product/client. These web ads will also communicate the same message.

---

Grading checklist

• You will design 3 web ads for one product/client
• Focus on your product and the benefits it provides to the people who use it
• Have one large, emphasized image to draw the viewer in
• Use consistent brand guidelines across all three ads (logos, colors, typefaces, design elements, photos/art)
• Be sure to have a call-to-action button/ text link
• Size: Design for these three common Google web ad sizes:
  • Leaderboard
    728 x 90px at 72ppi, RGB
  • Medium (Inline) Rectangle 
    300 x 250px at 72ppi, RGB
  • Wide Skyscraper
    160 x 600px at 72ppi, RGB
• Use Illustrator or Photoshop to design your ad (download the template below)

---

The Design Critique Process

We’ll follow these steps to critique your design work. It’s always good to get constructive feedback on your work to improve it along the way.

First Critique – Use AI

I want you to get familiar with AI and see how it can critique your design work and help you grow as a designer. It’s a comfortable way to ease into getting your work critiqued and seeing how your design is progressing. Also, many of you may work in smaller marketing departments where there aren’t a lot of other designers to ask for feedback. AI can help in these situations.

Second Critique – Small Groups in Class

This is a helpful process where you’ll get into groups and have each group member give you feedback on your design work.

Here’s a graphic to illustrate how I’d like you to critique your design work in my classes.

---

Template for the Three Web Ads

Download and use this template to design your three web ads.
(Choose the Photoshop or Illustrator template below).

---

Web Ad Best Practices

---

Web Ad Placement on a Website

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. It also makes your website look like you put ad revenue over content delivery.

Google also offers an in-text ad that displays between paragraphs. I find these completely annoying as they greatly reduce the delivery of content.

---

Student Web Ad Examples

---

Industry Web Ad 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

---

Call-to-Action Buttons/links Examples

---

Tutorials to help design 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!