 |
| Online Tools » Best Practices of Online Design |
|
The notion of what constitutes good design is subjective, as people are attracted to various things. Nevertheless, in online advertising, the most compelling ads are those that have a concrete message and follow sound design principles. Below are common practices that help to maximize the performance and success of your ad creative. |
|
Focal Point
|
|
|
Ads should always have a focal point; one main point of entry that grabs the viewer's attention, and leads the eye through the composition. The challenge is to create a balance of visual interest and sense of order that is achieved through contrast and scale. If the focal point is overpowering, the eye will remain on that one object and ignore the rest of the creative. Furthermore, if each design element has the same scale, the eye becomes confused not knowing where to continue and where to stop, consequently, the advertiser’s message is lost. |
| |
| Figure 1 |
|
|
 |
|
 In this example, Figure 1 has multiple graphic elements, of equal proportion. The ad appears cluttered and the message is lost. By combining some of the graphics to form a point of entry and scaling down the content, the clutter is eliminated and the composition becomes orderly. This places less stress on the eye and the message is delivered. |
| |
|
| Figure 2 |
|
 |
|
|
|
Color Palate
|
A contrasting color palate can either help to promote an advertiser’s message or completely nullify it. Color plays a considerable role in how your ad is perceived, and is used to convey meaning, evoke emotion and prompt interaction. Too much contrast is overwhelming and insufficient contrast can be unexciting. A balanced composition, achieved through use of harmonious color themes, is not only engaging, but also makes your message clear.
Notice the striking differences between the ads on the top and those at the bottom. The color themes used in bottom are not only unappealing, but also difficult to read; thereby, making the message undeliverable. Furthermore, unharmonious color palates also imply a lack of sophistication and prompt strong emotional reactions. If a potential consumer has a negative reaction to your ad, they’ll be reluctant to obtain more information and even less likely to try your products/services. Positive viewer experiences yield higher conversion rates. |
|
Figure 3: Harmonious vs. Non-Harmonious Palates
 |
| |
|
|
Standard Themes to Consider
A. Monochromatic-Varied light and dark shades of a single color; looks clean and consistent. 
B. Analogous- Uses adjacent colors on the wheel, wherein one color is dominant and the others are used as accents; offers more nuances than the monochromatic.
C. Complimentary- Uses two colors opposite on another on the wheel; provides high-contrast and works well when the warm color is on top of the cool color, appearing to advance forward. 
D. Split Complimentary- Variation of the complimentary scheme in which one color is used along with the two colors adjacent to its compliment, similar to the complimentary, not as abrupt. 
E. Triadic- Three colors equally spaced around the color wheel, providing strong visual contrast. Not as contrasting as the complementary, but appears more balanced. 
F. Tetradic (Double complimentary)- Uses two complimentary color pairs, but if used in equal amounts, can look chaotic. |
|
Figure 4: The Color Wheel
 |
| |
|
|
|
Font Usage
|
As with print design, the right typeface can enhance your creative. Try limiting font usage on the web to three typefaces or less, as excessive use appears unbalanced (Figure 5A). For smaller ad units (banners, tiles, towers, etc.), utilize san-serif fonts. While serif and script fonts appear attractive in print, resolution on the web is four times smaller, making them illegible. Avoid using varied font heights, as this will also affect readability. Finally, try stay away from placing light copy on a complex and/or light background, as this affects legibility as well.
In this example, 5A’s message is lost, 5B’s message is clear. Making the fonts one size and one typeface, moving them down from the logo, we’ve provided typographical balance. In addition, placing the copy on top of a simple, darker background makes the content legible. 
|
|
 |
| |
|
| |
General Guidelines
|
A. Negative (White) Space (Figure 6)
The use of negative space is a simple, but important technique that is often overlooked. Providing enough white space between design elements provides visual balance and guides the eye from one point to another. Furthermore, it reduces eye strain by giving the eye a chance to rest.
B. Content (Figure 6)
Online users are inundated with a barrage of ads and attention spans are short, therefore it’s imperative to include only the most relevant information. Keeping this in mind, avoid putting an abundance of content into a single banner; entice the viewer to click-through and seek more information with a call to action.
C. Animation Effects
Avoid distracting animated effects such as blinking and strobbing, as they are often regarded as intrusive, moreover, most sites disallow them. Excessive distractions prompt viewers to disregard creative, undermining the goal of engaging the consumer.
|
|
Figure 6:
 |
| |
|
Compression
|
This is especially important when saving an image to be published on the web; as each format can significantly affect the quality of your creative. The higher the compression rate, the lower the image quality so please be cognizant of the following when saving your ad.
- GIFs contain up to 256 colors, resulting in smaller file sizes. Given it’s color limitations, GIFs should be reserved for maintaining the clarity of vector graphics and not photographs. This format is best used for images that have minimal shading and/or color variation.
- Unlike GIFs, JPEGs do not limit colors, making it preferable for maintaining the quality of complex images. JPEGs use what’s called “lossy compression”, meaning all irrelevant pixel data is deleted when saving. High amounts of lossy compression result in decreased image quality.
|
|
Figure 7:
 |
| |
|
|
| top |
|
| LAST UPDATED: 6.17.07 |
|
|
|
|
