10 Design Basics

In helping people design pages for eBay, we came up with these ten Design Basics for better pages. An eBay workshop and additional guides were created to expand these ideas. While they focus on About ME pages, these recommendations can be applied to any web or auction page.

1.  How wide?

People viewing your page may have a different screen resolution than you do, so what looks good on your screen may be too wide on their screen. By width, we mean the number of pixels, not the width in inches. All of the web content is displayed in pixels (dots), and giant screens just have fatter dots. Over a quarter of viewers still have screens that are set to 800 pixels wide, so it is a good idea to make sure that your photos and content are no wider than that, or they'll have to scroll sideways.

2.  Breaking up your Page

A page should not run on and on. A page is easier to navigate if it is broken into groups of ideas, or sections with headings, making it easier for the viewer to skip around to the areas that most interest them. A page can be broken with titles (as with this tutorial), horizontal divider lines, photos, tables, or colored sections.

3.  Photos

Photos are wonderful to have on a ME-page. eBay Picture Services will host two photos on your ME-page, but if you would like more (or a background) you would need to put your photos online where they can be seen by others. Frequently your own internet service provider offers free web space along with your subscription. Alternatively, you can use eBay Picture Manager or an image host to store your online photos. Fortunately, viewers can not peek into your home computer to see photos, so that is why online hosting is necessary.

4.  Fonts and Lettering

Some people have a huge variety of fonts installed on their machines, but most users only have the handful of fonts that came with their computer. A viewer can only see the font styles that are actually on their own machine, so it is fruitless to design a page using spiffy fonts that others can't see. eBay's page-designer provides the basic fonts that almost all viewers can see.

What happens if you use a font style that no one else has? Each browser has a default font setting that is initially set to Times New Roman. If the viewer never changes that setting, your unique font will be seen as Times New Roman.

5.  Text Colors and Sizes

When users first discover that they can add color to their text, the rainbow effect follows. It's fun to play with and exciting to see mastery over the results. However, once the discovery phase has passed, there are a few tried and true guidelines. Color should be used to help the reader navigate or pass through a transition in content. Two or three font colors are the maximum one should use on a page - one color for titles, one for body text, and a third for highlights or a change in theme. Colors have a brightness to them, and the eye instinctively goes to the brightest color first. Therefore, you don't want your "fine print" to be in the brightest color.

The size of your text is also important. Headings should be big enough, or in a different color, so that they stand out against the rest of the text. Just like having too many text colors, one can have too many sizes and too many font styles. Stick with just a few basics on your page. Change the size, color, or style only when it is important to emphasize or otherwise convey meaning.

6.  Paragraphs and White Space

In advertising, white space is king. There should be a margin of empty space all around your page and text. Writing in paragraphs, and leaving gaps between blocks of text, provides a resting point that allows the reader to absorb what has been written before continuing to the next idea. Paragraphs should be short and contain a complete idea.



Another problem is text that is too wide. If the eye can not pan the text without moving the head, the text is too wide, and the reader can lose their place on the line. The solution is to bump up the text size, or decrease the page width, or create columns of text (as in magazines and newspapers).

7.  Page and Background Colors

This is where you can get the most impact for very little design effort, but it is important to understand how the eye reacts to colors. The easiest reading is dark text on a light background. Light text can be used on a dark background if the light text is a little bolder than normal. There are certain color combinations that can not be used together because they cause eye-jitter (used on some pages to agitate the reader). Those are some complementary colors, or colors with the same intensity, like red on green. Also be aware that color-blind people may not be able to distinguish between colors of the same intensity (red and green being the most difficult combination).

8.  Borders

Borders are used to contain the content and the eye. White space can do that quite well, but sometimes you might want just a little more. Borders can range from a simple single line around a photo, paragraph, or page, to full-blown multi-layered picture-frames that inject the owner's personality or a seasonal theme. When getting extravagant, it is wise to keep in mind where you want to call attention - to the border or to the content.

9.  Music

Background music is a theme that attracts many folks, and irritates others. Adding sound to an auction may help sell a fog horn or old vinyl recording, but may be distressful to buyers who open such auctions surreptitiously at work, or when the household is asleep, or even when they have their own background music playing. Another sad fact is that not everyone appreciates your taste in music. So when users ask about sound in an auction, we always recommend a play/stop button. For a ME-page, we would also recommend a play/stop button, but since, unlike an auction, a ME page is a personal statement, that is really up to the individual. Keep in mind that a music clip needs to be a very small file; otherwise your viewer will be long gone before the music has even downloaded.

10.  Whizzy, Twirly, Blinking Gizmos

One word - distraction. These gimmicks suck in the newly-initiated like a quicksand trap. They are so fun and mesmerizing when first encountered that we just can't go forward until we get one on our own page. But do you remember the tiniest thing about the page where you first saw one? No, the distraction was so overpowering that the page content was forgotten or totally ignored. Filling up a page with such gratuitous images and scripts can slow down page loading for your viewers, and some viewers find them so obnoxious that they immediately close the page. So, our advice is, keep them out of auctions, but go ahead and try them on your ME-page for a little while. Then remove them after the fun and newness wears off.

Need More?

All of thes basic concepts are further detailed in the Design Basics workshop series, listed below. We invite you to read through them to learn more.
 
Also, please visit my ME page for a wealth of tips and resources contributed by other helpful board members. You will find links to designers and free templates for a faster About ME page layout.

The Design Basics Workshop Series

Design Basics 1  - Getting the most from Color
Design Basics 2  - Using Fonts
Design Basics 3  - Effective use of White space
Design Basics 4  - Using Photos
Design Basics 5  - Backgrounds and Borders
Design Basics 6  - Multimedia
Design Basics 7  - Top 10 Common Mistakes

 

Copyright © 2004-2005 shipscript