Online Design Cheat Sheet 

 

This is not the article I started out to write for AdVents “Integrated Marketing” issue. However, after talking with industry folks, I uncovered a real need for somebody to take the mystery out of this new-fangled “online stuff.”

This reference guide is my solution. This information found here isn’t hard per se. On the other hand, it is hard to find everything you might need in one place. That's what I’ve compiled, along with some advice on how to use it.

Color And DPI (dots per inch)/PPI (pixels per inch)

Print images need to be 300 dpi for gray scale or color images. 600 to 1,200 dpi for   line art.

Online is 72 dpi for everything.

1 dot/inch [dpi] = 1 pixel/inch [ppi]

Print we have grayscale, CMYK, and spot color. Online is grayscale, RGB, and Index color.  Index colors for GIF files; grayscale and RGB files for JPEG files.

If you want to find a close match to a PANTONE® Color look for the HEX number, there are many online resources, just search for  “PANTONE to online colors.”

Online Ads

Interactive Advertising Bureau Standard Ad sizes:

Here are the basic ad sizes you’ll need.

Medium Rectangle: 300 x 250 pixels  (Mobile Optimized Size)

Leaderboard: 728 x 90 pixels

Wide Skyscraper: 160 x 600 pixels

Rectangle: 180 x 150 pixels

Most of the clients for whom I design online ads use only the top three IAB sizes.

Other sizes:

Large Rectangle: 336 x 280 pixels

Half Page: 300 x 600 pixels

Mobile Leader Board 320 x 50 pixels (Mobile Optimized Size)

Square: 250 x 250 pixels (Mobile Optimized Size)

Small Square: 200 x 200 pixels (Mobile Optimized Size)

Most sites require that your ad be a maximum of 40 KB.

Google accepts 150 KB or smaller.

Animated files should be 30 seconds or shorter in length. Most sites limit your animation to three loops and must stop after 30 seconds at five frames per second or slower.

Compelling Images

The easiest but least inspired way to convey your message is a collage of photographs, but that muddles your message—no one thing grabs the eye. Go for one compelling image. The most compelling images often are of the human face.

Page Gravity

At least for us in the West, we read left to right, top to bottom. The eye is naturally drawn to the lower right. This is Page Gravity. That means there are two important locations on the page, email, ad, or lightbox: the upper left and, most important, the lower right. Bottom of the page and lower right are where you should put your call-to-action and your take action/donate button. And that call-to-action should be in an accent color so it stands out from the copy when scanning the page.

Type Size

Just like the printed page line lengths are important.

For online, 65 characters at 18 point is optimum for body copy. Different browsers change your width automatically. 18 point sounds large, but with the average user sitting at least 24 inches away from the monitor these days, this is a really good rule. Yes, that means you probably have to cut down your copy for better response.

And I recommend 35 point headlines for online.

Serif vs. Sans Serif.

Who would read a novel that was completely set in a sans serif face? Your eyes would tire quickly and, since we recognize words not by letters but by their shapes, the serifs or little feet on the letters lead the eye and are easier on the eye for body text.

The argument for sans serif online body text was that serifs tended to stair-step on the monitor and decrease legibility. However, that was before more modern dual use serif typefaces like Georgia, Cambria even PT Serif that have a large x-height (height of the lowercase “x”) were optimized for web. This and higher resolution monitors mean you no longer are limited to sans serif online.

SOCIAL MEDIA SIDEBAR:

Facebook

Cover Image size: 851 x 315 pixels

Facebook adds a narrow semi-transparent gradient to the bottom of your cover image, so keep that area free from type and important small details. The profile image will be knocked out of your image, on the lower left, so you’ll also want to keep important details out of that section.

Profile Image size: 500 x 500 pixels

This will be scaled down to 32 x 32 pixels for the thumbnail that accompanies your posts.

Timeline Images: 504 x 504 pixels square

Twitter

Twitter is more complicated.

Header Image based on Twitter’s recommended size is 1500 x 500 pixels, but Twitter will resize this, so you can actually get away with 126 x 421 pixels.  Here’s the important caveat—Twitter uses “responsive design,” which means your header image will be scaled and resize based on the user’s browser. Usually the top and bottom if the image disappears, so keep all your important visual information (like your logo, etc.) centered vertically in the image. The profile image will be knocked out of your image on the lower left, so you’ll also want to keep important details out of that section as well.

Profile Image size: 400 x 400 pixels

However, this will automatically be given rounded corners and a white border.