DESIGN TIPS

 

Even if you are already a talented artist, the web will present you with some unique challenges. How many links should be on a page? What fonts are most easily readable? We will face these question and others in design tips!

 

New to Design?

Buy this book: The Non-Designers Design Book, by Robin Williams. It rocks. In a simple and straight forward way, this inexpensive book engrains beginners with four basic design principles, which are:

Proximity: Objects that have a relationship should be spatially grouped together. Objects that are not part of the same intellectual group (idea) should be separated with space.

Alignment: Every design element should have a strong linear alignment with other design elements. Basically, youll want to line things up on each other. Beginners often make the mistake of centering everything they deem important.

Repetition: If you use a design element once, use it again on other like objects. This is especially important in web design as you must make the site feel like a "whole".

Contrast: Things that are different stand out and bring interest to your piece. A good rule to follow with contrast is that if youre going to make something different, make it really different. For example, if youre going to increase font size to make a word stand out, make the font really big! Dont be wimpy.

Again, I cant emphasize how much The Non-Designers Design Book can help beginners design nice looking pages. The book is a quick, easy read, and only costs about $12.00. Buy it.

 

Page Size

According to the Association of Internet Research, 80% of people never scroll down when first viewing a website. Users are searching for answers and dont have time to scroll through your big ol page.

What does this tell us? Keep your pertinent information "above the fold". The standard browser window is 760 pixels wide, by 420 tall. Make sure that the important parts of your site are above the 420 pixel line.

If you positively must place more information on the screen than can be displayed at one time, make it very obvious. I dont know how many websites Ive seen that have "hidden" information below the bottom of the screen. The easiest way to make your pages obvious is by making sure that a graphic is cut in half at the bottom of the page.

If 80% of people never scroll down, how many people do you think scroll to the side? The easiest way to appear un-professional is to build a website that requires side scrolling at 800x600. Remember, that images do not resize even when placed in a percentage-based table. If you have an image that is too large it will push the screen out.

 

Checking Your Site on Different Screen Resolutions

You should check your pages these different screen resolutions to see how it looks:

640x480
800x600
1024x768

You may have to re-open your browser after adjusting the screen resolution to allow the page to resize correctly.

On the PC you can change your screen resolution by:

1. Click START
2. Go to SETTINGS
3. Click CONTROL PANEL
4. Click DISPLAY
5. Click SETTINGS
6. Adjust the Desktop Area

 

Using Color In Your Website

If your colors dont look good, your website wont look good. Web designers need to think about the psychological impact of colors and their readability. Although, Ive covered the important basic points below, color theory is a vast subject and would require a separate book. For an excellent, easy to read book on color theory, try:

Color Theory (Watson-Guptill Artist's Library) by Jose Maria Parramon

 

Color Harmony

If your pages have "color Harmony" it means that your colors "match" and are pleasing to the eye.

There are some basic ideas that are easy to learn about color harmony.

A color scheme based on analogous colors

Analogous colors are any three colors, which are side-by-side on a 12-part color wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colors predominates.

A color scheme based on complementary colors

Complementary colors are any two colors, which are directly opposite each other, such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colors create maximum contrast and maximum stability.

A color scheme based on nature

Nature provides a perfect departure point for color harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for color harmony. Go outside for a while!

 

Matching Color by Color Value

Often, the colors the chosen dont matter as much as their brightness, or "color value". Two colors next to each other will most often look good if they are approximately the same brightness level. You can use software like Adobe PhotoShop or Macromedia Fireworks to adjust the brightness of color before you use it.

Heres a nice tip: In most design software, when youre presented with colors to choose from, the colors in the same row have the same color value, and therefore match.

 

If you have trouble picking out colors to use, there are books that list matching colors and show them in patterns next to each other. I highly recommend this wonderful series of books:

Designers Guide to Color
by Jeanne Allen, Ikuyoshi Haishoku Jiten Shibukawa

 

Color and Readability

Okay, lets get this out of the way:

Very bright background colors are hard to read over. They hurt peoples eyes and no one likes them.

The easiest color combination on the eyes is black over muted yellow.

 

The second easiest color combination is black over white.

White text on black looks cool, but is hard to read.

 

That said, use whatever colors you want. You will have to make your own decisions about page and text color. There are no hard and fast rules. Just make sure that your pages look good, and that text is easy to read so no one gets a headache.

 

Fonts

Your choice of fonts can say a lot about you. You can appear modern or old fashioned. You can excite users or re-assure them. When designing with HTML your font choices are rather limited.

Serif Fonts

A serif font has fancy squigglings and overhangs. Serif fonts were invented for the Guttenberg Press to drive your eye to the next letter.

Sans-Serif

"Sans" means "not". Sans-serif fonts do not have little squigglings.

Psychological studies have waffled back and forth on the readability of serif and sans-serif fonts. After much debate, most experts agree that font sets like "Arial" that incorporate both serif and san-serif letters read the fastest and have the highest level of comprehension.

Fonts Created For On-Screen Display

Most font sets were originally created for high-resolution printing. The intricate squiggles and smooth curves can create readability problems when viewed on a computer screen. To deal with this problem, special fonts were created, specifically made for viewing on a computer.

Verdana is a san-serif font, designed to mimic Arial. Arial has been shown to be the fastest reading and most understood font.
Georgia is a serif font, designed to mimic Times New Roman, the time worn standard typeset.

 

Designing Well Thought-Out Links

Links get your users from page to page. If your links are badly set up your site will be hard to use. Conversely, if your site is easily navigatable users will return again and again. Check out our web design course for an example of well designed links.

 

Chunking Information

Psychological studies have shown that people absorb information in "chunks". At any one given time, most people can think about keep five to seven things in mind at one time. What this means to you is that, if you can, you should shoot for a maximum of five to seven main links on your homepage. Those links can have sub-categorical links as long as theyre well organized. Have you ever tried to read Yahoos Home page? Nuff said.

Label Your Links

Buttons and links must be obviously labeled and easy to understand. Cutesy names are usually a big no-no, as they will confuse many users. You dont want people to have to think about what a buttons means, they should know just by looking at the button. If your website has non-standard features, you will have to enlist your client for help with naming buttons. Dont feel weird about this. Youre only supposed to build a website. Your client should be able to describe their own services in a word or two.

Hidden links are cool if theyre just for fun, but dont expect people to roll over your buttons to find out what theyre for. Most people arent as into the web as you are.

 

Drop Down Menus Vs. Lists

Studies have shown that people prefer well-organized lists to drop down menus, but that they find information more easily with well-organized drop-down menus. Guess its up to you.

 

Nav-Bar Placement

Our visual cortex is designed to scan along the horizon, and therefore most people find horizontal design more pleasing than vertical. Many sites take advantage of this by using a horizontal nav-bar at the top of the screen. Studies have shown, though, that people register individual links better if the links are listed on top of each other in a vertical fashion.

Youll also want to make sure that if your page is long you place a nav-bar at the bottom of the page as well as the top. People dont want to have to scroll up when theyre finished reading.

 

Creating "Whole" Pages

Beginners often create page elements, and then just stuck them in the page, without any real plan for the look of the page. A good page will stand by itself as a work of art, regardless of its content. The page should be pleasing to the eye and should flow nicely.

 

Learning From Others (super important point)

You do not have to be an artist to be a web designer. You do have to have style, and you do have to be able to recognize when things look good. Before embarking on any project, you should spend hours on the web looking at other sites that project the same feeling that you want for your site. What did other designers do to successfully bring about the impact you wish to convey? Take notes and bookmark pages you like. You can borrow ideas from other designers to make sure your pages look good. This is not stealing. When Spielberg came out of film school he didnt just come up with his own brand new ideas about what film should be. He built on previous masters. You should do this too. You can borrow layout, color schemes, font and spacing ideas, and site structure. Dont just make a carbon copy of the other site, though. You might get in trouble.

There is no reason that your first site shouldnt be great, as long as youre not too proud to learn from others. Feel free to interject your own ideas and philosophy. When youre ready, go crazy on your own.

Beginning web designers rarely spend enough time researching design. Search for sites that give the same feeling that youre trying to create. For example, if youre building a site for a security company, you might want to check out other sites that want to appear solid and trustworthy, like financial institutions and insurance agencies.

 

Things to Avoid

There are a couple of mistakes that crop up over and over with beginners, so lets cover them now.

 

Gratuitous Frames

Dont use frames as a design element. Frames should be used only if it is really helpful to keep certain information in front of your reader at all times. Frames take longer to download, are more complicated, are harder for a reader to bookmark, and have search engine drawbacks.

 

Huge Headers

Many beginner websites go crazy with the header size. It ends up taking up the whole screen. As a rule, its a good idea to only use about 25% of your viewable screen size on a page header, including and top nav-bar buttons.

 

Annoying Music

Not everybody loves techno as much as you do. Music can quickly turn off many users. If music is appropriate, like Italian music for an Italian restaurant site, make it subtle and quiet. Youll learn how to stream music and control the volume in later sections.

 

Splash Pages
People want to use your site. Now. Why make users "Click here to enter site."?

I hate that.

If your page cant stand on its own, make it more exciting. Dont subject people to longer load times and frustration. Nobody cares about your logo that much anyway.

If you need to check for a plug-in, there are plenty of free java scripts to do that for you (discussed later). Chances are your user doesnt even know what he or she has.

 

Long Flash Intro Movies

Designers love long Flash intro movies. Users just want to use the site. A short intro can effectively pull a user into the site, but a long one is most often more annoying than anything else. My rule of thumb is that if you need a "Skip Intro" button, the intro is too long.

Check http://www.awdsf.com for an example of a short compelling intro.

 

Continue to Search Engine Submission |