---

---

---

---

Tools used in this assignment:

• Document Profiles
• Artboards
• Graphic Styles
• Workspaces
• Symbols
• Paragraph Styles
• Pixel Grids
• Slices

---

Concepts Explored in this assignment:

• Colour modes
• Resolution vs pixel dimensions
• Anti-aliasing
• Grids
• Web standards
• Type for the screen

---

Where will my recipient list come from?

You would build your list yourself or buy one. You'll want to start with running a blog which features your work and design happenings. You'll post about your blog on social media sites to have people subscribe to your e-mail newsletter.

You can also buy a list of e-mail addresses based on custom criteria.

---

Tips:

• Don't hyphenate short amounts of text.
• Re-consider every new style of text you create. Is it necessary? Could you re-use an existing style?
• Take advantage of your grid and mood board. Stick to them.
• Name your placed images logically.

---

E-Mail Marketing Campaign

---

---

The Project

This project will entail building comps for an email marketing campaign. E-mail marketing is an effective way to reach people who are receptive to your message.

The message for your project will be to ask people to follow you on social media sites. That is, you the designer, not the personal you. Imagine that you have a professional presence on the web as a designer. You'll want people to visit your blog, your portfolio site, Like your FaceBook page, connect on LinkedIn or follow you on Twitter.

Basically, you are asking them to join the conversation and stay on top of what you're up to as a designer.

Consider this a brand awareness campaign for yourself as a designer. The payback won't necessarily be in cold, hard cash. It will be your relationship with those who receive your message. You're building your social network as a professional designer.

For this to be an effective campaign, you need to define the image you wish to portray. Is it serious, or casual? What does your professional persona look or sound like? Once you decide, stick with it. A consistant image will increase your recognisability.

Your project will consist of a series of three comps for e-mail messages. They will represent the first three editions of an e-mail newsletter you would send to subscribers.

---

Timeline

Week One:

WEEK OF APRIL 4TH — We'll intro the project. I'll walk you through setting up your document. We'll look at re-colouring artwork and the Colour Guide.

We'll go through the process of designing a Web page for e-mail

Week Two:

WEEK OF APRIL 11TH — At the start of class, you'll hand in Illustrator files with three artboards. You'll have a grid set up on each with a description for each cell.

Collect and hand in images, portfolio pieces and any other graphics you think you'll want to include in your campaign.

We'll review your grids to make sure they're built in a way which will translate well to DIV tags in a web page.

During class today, you'll create a mood board for your campaign. You will also write the copy for the various cells in your e-mail messages.

Week Thee:

WEEK OF APRIL 18TH — By now you have wireframes drawn, copy written and mood boards mooded. It sounds like a recipe for a design. Let's assemble it today.

Week Four:

WEEK OF APRIL 25TH — Your project is due. I'll firm up the exact deadline as we progress.

---

Illustrator CS5 for Web Design

Illustrator provides benefits for interactive design because art can be re-purposed for various uses, like print or video. You can take artwork from Illustrator into other applications. With Illustrator, you can be assured that your artwork is portable.

It's easy to experiment in your design in Illustrator because it's object-based.

Illustrator CS5 introduces Align to Pixel Grid, better slicing and Symbols. It is capable of building dynamic web page, Flash content and web apps, but we'll limit ourselves to a comp for an e-mail marketing campaign.

The biggest benefit is that you're already familiar with Illustrator.

This is an absolutely riveting video about aligning your artwork to the pixel grid to ensure sharp-edged graphics.

---

Resolution & Pixel Dimensions

There's an old misconception which says that web graphics should always be created at 72dpi. This is absolutely false. Just look at your iPhone 4. It's screen is over 150 ppi. When designing for the screen, resolution is absolutely irrelevant. Pixel dimension is what counts.

A graphic which is 640 x 960 will fill the iPhone 4's screen. It will occupy less than half the width of my 1440 x 900 pixel MacBook Pro's screen. This is what counts.

The point is that raster images always use one of the screen's pixels to display one of the image's pixels at 100% magnification. That's what the 100% means.

We're working in Illustrator for this assignment, but just like in Photoshop, we're going to set up our workspace to measure a certain number of pixels across. We don't care about resolution when working for the screen.

---

Anti Aliasing

Our Macintosh displays have a resolution of about 96dpi. That's pretty low compared to printers or presses. This is why computers use anti-aliasing. This is when the computer adds pixels along curved lines to make them look smooth.

You can turn this on or off in your Illustrator Preferences. This doesn't affect your work, only it's on-screen display.

When examining our work, anti-aliasing may have a worse effect on straight lines than on curved lines. We want curved lines to be anti-aliased, so they look smooth. But straight lines can be made to look blurry by anti-aliasing.

Align to Pixel Grid

We can align objects individually to Pixel Grid in the Transform palette by checking the box. We can also align all new items to the Pixel Grid from the same palette's fly-out menu.

The best way to align objects to the grid is to choose the option from the New Document dialogue to start with. This will make all content on our screen align for the whole project.

Pixel Preview

We can turn on Pixel Preview under the View menu. This displays your artwork as if it were raster image. It displays how our image may anti-alias after export. This can be very useful.

---

Illustrator Prefs

These are some settings we want in Illustrator's Preferences:

• General: Use Preview Bounds: Export for Web to see why.
• Units: Change all to pixels except for type, which stays as points.
• Guides & Grids: Check "Show Pixel Grid..."

---

Workspaces & Document Profiles

These are the palettes we want for working on Web pages inside of Illustrator:

• Appearance
• Symbols
• Transform
• Artboards
• Layers
• Info
• Character & Paragraph Styles

We'll want to choose Web in the New Document dialogue to ensure we're working with the right settings in our file.

Let's create a new New Document Profile for e-mail marketing.

We'll run the "Delete unused panel items" action to delete all those useless swatches in the Symbols, Graphic Styles and Swatches.

---

Building the Page

We'll use artboards to lay out variations of the web pages. This makes it really easy to test variations on one layout.

If you have repeating artwork, you should make it a Symbol, so all instances can be affected at once.

If you have elements which share graphical appearances, you should save them as a Graphic Style so they can be changed at once.

You should define all your type with Style Sheets.

The Grid

Before you get started building your page, you'll design a grid upon which your design will be based. This is equivalent to the <DIV> tags in the HTML/CSS in your live web page.

We'll work on a page which is the right final dimension. Create rectangles which represent the cells on my page. We'll use the Transform palette to size everything to pixel-perfect dimensions.

Remember that you can do mathematical operations in the Transform palette. Type in 140+40 and hit Tab. It will pop into a value of 180 pixels.

---

Mood Board

During class #2 of the project, you will create a mood board for your campaign. I believe you've done this before.

In it, we will include:

• Font families
• Colours (Kuler!)
• Photography treatments
• Similar site designs for inspiration
• Individual design elements (i.e.: page curls!)
• Include three specific/precise words on your board which describe it. (i.e.: edge, soft, elegant, illustrated, bright, etc…)

Usually, a mood board is created to help the client visualise the final design. In this case, we’re creating one to help you visualise the final design.

Create your mood board in any application you want. You'd probably use Illustrator or InDesign. Photoshop just isn't meant for this.

The dimensions don't really matter. I'd suggest a tabloid-sized page in Illustrator. You can save the whole thing as a PDF to submit it.

---

Writing

We will have to produce content for this newsletter. Some of it will be imagery, but some of it will be text. You have to write it.

When writing commercial copy, we want to make sure it's short and punchy, even punny. Take a gander at this zingy snippet from Banfield Seguin's recent e-mail newsletter:

The Weight of the Widget, Volume 1

In today's marketing world, the widget is proving its place as an effective media strategy. Such tools have been successfully weaved into marketing plans for brands like Adidas, Cingular, Sony Pictures, V05, and AT&T Wireless, along with countless others. But are widgets appropriate for every marketing strategy? Behind every brand, is there a widget waiting to happen?

There's nothing magical about this. It's simply writing with impact. It gets to the point with an economy of words.

Everything in your text needs to be positive. Don't hedge. Everything you do is fantastic. Show it.

Finally, we need to make sure our copy is error-free.

---

SPAM, yum

We have a CAN SPAM Act in Canada, which dictates the rules for e-mail marketing. In order to conform with these laws, we need to include the following in our message.

Notice of Advertisement & Advertiser

"This e-mail was sent to you because you asked to receive updates and promotions from INSERT COMPANY NAME.

Privacy Policy

Unsubscribe

short version - Unsubscribe or Click here to Unsubscribe

long version - If you would like to be removed from our mailing list, please click here or use the following link: INSERT UNSUBSCRIBE LINK.

Physical Address

Place this at the bottom.

To improve delivery rates, we also recommend that your message contains something similar to the following:

Add to Address Book

short version - Please add us to your Address Book (company@example.com). Thank you.

long version - To ensure ongoing optimal receipt of these communications, please add our "From" address (company@example.com) to your Address Book. Thank You.

Hosted Page (optional)

short version - Having trouble viewing this message? Just click here.

long version - If you have images disabled or have trouble viewing this message, please click here.

---

How to get an A

Deliverables

Technical/Software Requirements

• No spelling errors.
• Proper grammar.
• Correct document size, use of Artboards.
• Deliverables: all support files are included.
• Use of Symbols were possible/appropriate.
• Use Paragraph & Character Styles throughout your work
• Create text frames as demonstrated in class.
• Deliver files as directed above.

Concept

• Sketches are a clear illustration of the final product.
• Effective portrayal of you to your audience.
• Appropriate for target audience.
• Writing and graphics: proper tone.
• Professional.

Aesthetics

• Appropriate use of colour.
• Consistent feel to three editions.
• Appropriate use of type. (Font selection, treatment).

Marketing Approach

• Clear call to action.
• Creative call to action.

Assignment Parameters

• Milestones were met promptly.
• Conformity to deliverables guidelines.
• Logically organized files.