Web Design
  • The Fold-line
  • Maintaining Context
  • Concealing Magnitude
  • Using Sub-Pages
  • Using Frames Wisely
  • Using Font Faces / Sizes
  • Breaking the rules
  • Recommended Don'ts!
Introduction HTML CGI
       
 
There have been many requests for a lesson regarding web design. We'd like to first say that we understand that this is a very bias area of discussion, and that the following recommendations express STIMULUS's opinion of web design. We hope that you find them helpful. Please feel free to send us your comments and or suggestions.

First things first - The Fold-Line

One of the most important rules in web page design is the realization of the Fold-Line. This is an imaginary line that divides a web page from the top 400 pixels to the all the information below the top 400 pixels. This is considered the most likely information to be viewed by the web browser before having to scroll down. Provided this area is correctly done, people will continue to explore your web site to find the information that you are providing them.

If you are working with a company that wishes to promote their product on a web page, you might hear them say they want their information displayed above the Fold-Line. This means (aside from any fancy definition) close to the top! If you haven't designed your web site with the Fold-Line consideration in mind, you might find it very difficult to deliver on this request.

If you have information that you are displaying below the Fold-Line, consider putting this information in subsequent pages for separate review. This will allow you to better present this information and maintain context, which brings us to our next topic.

Maintaining Context

"then I walked it over the trash can and painted it blue!"

Okay, what the heck are we talking about? Don't know? That means that we didn't provide enough information before our statement. This is called "out of context" information, and is a common mistake when laying out web pages.

If you only remember one thing from this lesson, make sure you understand that information must maintain context before anyone is going to quickly understand it. Remember, you don't have hours upon hours to explain the information to the viewer. In fact, you are lucky to have even a few seconds before their attention span is gone. And please don't make the mistake of thinking that your customers are more intelligent and thus have longer attention spans. Intelligent people are usually very busy people and don't like to waste time with their lives. They would rather be finding information more accurately, hence the reason they're probably on the internet in the first place. Try not to let them down.

So how do you maintain context? Easy, refine your text (also known as "Copy"). Use simple to understand words that are easy to read in a glance. Obviously don't insult the reader's intelligence, but make is easier for them to assimilate the information. Use bold titles to announce your subject matter. Perhaps use a graphic to announce a paragraph of information, and then use HTML text to finish the topic off.

Also, don't try to cram too much information on a single page. Just think, a newspaper could send you an entire scroll of all their content, but how would you tab to the sports section quickly? How would you give dad the stock section? Tear it out? You need to make sure that separate areas are kept separate.

Tips and Techniques of Layout and Design

Concealing Magnitude

How many times have you gone to someone's web site and been REALLY impressed by the number in their counter? Usually if it's a low number, you figure that the site isn't that interesting, and that you're wasting your time in the first place.

If the number is high, then you probably suspect that the number was set to some high number to begin with. In any case, avoid putting counters on your web pages. It only reminds the world of how low your web traffic is. You'll also find that no major site on the planet Earth promotes such numbers. Perhaps when you've reached McDonalds numbers you can add the phrase "Billions and Billions served." Until then, conceal your magnitude. Look bigger!

Use Sub-pages

We've already covered many rationales for this in the Context section of this lesson, but we'd like to stress again, USE SUB-PAGES! It will make your site look much more professional, and make it a LOT easier to move information around for you. Putting everything on one page is like having a chalkboard you can never erase. If your web site is presenting information that is interesting, then you should probably strongly consider storing that information for people who haven't read it yet. It will allow your site to gain depth, and make your site look larger to new comers. Plus, remember that the internet is all about referencing information. At some point in time, your obsolete information might come in handy to someone years from now. Keeping information posted for the world community is a great advantage to society.

Use Frames Wisely

Frames were designed for one thing; to allow the user to load certain elements of a web page ONCE. Not to reload them time and time again. If you are presenting a navigation bar inside of a frame, LEAVE IT THERE! Don't make the user reload this area. If you want the state of a button to animate after they push a button, use JavaScript to flip the image.

Use Font Faces

You don't always have to use the default font type. You can change the font face using the face command inside the <FONT> tag. If you are running a more modern site, why not use a more round modern font typeface? Try Arial. Try Helvetica. Make sure to use VERY standard typefaces, not many people have tons of fonts installed on their computer, but don't be bashful about enforcing a look an feel on your web site.

Use Different Font Sizes

One easy method of keeping your information categorized, is to vary the size of the text. Make headers larger, and subsequent paragraphs smaller. This will assist your viewer in gathering topic headers quickly and read only the detailed information they wish.

Above all, Break the Rules!

Remember, this is the internet. This isn't like any other media we've every had before. You can click images and text to go to more detailed information about a particular topic. Don't let your brain stop with what you see on the internet. Invent new ways of using the same technology to present information in a way that is easy for the user to understand. If you don't succeed in your first try, continue trying. You will succeed.

Recommended DON'TS!

Don't center your entire web page! We call this the "Geocities Homepage Decease." For some reason the first time that people learn how to apply styles to their web page text, they invariably centered the entire site. This is the first method of losing everyone's attention span.

Avoid large numbers of images! How fast is your connection the internet? Always keep in mind that some people (who really would like to visit your site) still have to run on slower connections. STIMULUS uses a lot of art, because we focus on art for artists who are looking for that type of thing. Even then, we are ALWAYS trying to find ways of loading our images faster and more efficiently.

Avoid large links! Don't make entire paragraphs of text a link to a sub-page. If the entire paragraph is underlined, it diminishes the user interface effect of an underlined link. Try to use key phrases in the paragraph as your links. If all else fails, write very direct copy that says something like, "If you want more information, click here" (although we recommend you try to avoid gross text like this, always try to work with your current text before making it read like web text.)

Cut down on newspaper layout techniques. So many new web sites are trying to look just like newspapers. For some people, it makes them feel like they've created something familiar. The problem is, it defeats the purpose of the web. The web allows so many methods of laying out information. We suggest you cater to the web and its advantages. Offer the viewer something they don't already know.

Avoid cheesy clipart! We realize that not everyone owns an $800 copy of Photoshop, but there is no clearer way of boring people to death, then putting bad clipart on your web site. Try to avoid stealing other peoples art unless it PERFECTLY meets your needs. And of course make sure you're not stealing copyrighted work, because it's pretty easy to find it, and you don't need a lawsuit over something so silly. Remember, text is good!

VIEW SOURCE!

If you are trying to learn more about web page design, this should be the most widely used feature of your web browser. Look around, you'll find it! If you see a web page you love, view the source and don't go to bed until you know how it was done. We guarantee you'll figure it out.

Good luck!

This concludes our Web Design lesson.

Recommended Books:
cover
cover
cover
cover


Home Next

©Copyright 1996-06, TWIN MONOLITH. All Rights reserved.