• • • Articles - Design Rules • • •

• Correct use of fonts • Design rules • Like in magazines •



Of course, in matters of design there can never be any rules. However, there are "norms", crossing which, will cause inconvenience for millions of surfers. By means of the technical structure there is a strict rule that says - no horizontal scroll bar at 800 * 600 resolution (nor, naturally, on higher resolutions). The scrolling at the button of the page spoils the surfing experience, and therefore must not interfere. Always fix your table on less than 780 pixel width, and if you use percentage (e.g. width="100%"), make sure your graphics do not exceed 790 px. In order to stay on the safe side, try not to exceed the 750 pixels in both your graphics and tables' width.

The second, technically essential rule, would be a pleasant colors scheme, good contrast between the background and the text, and, no catching and eyes-tiring effects. Everything is good in proportion. Try to avoid writing in colors like red (#FF0000) on black, yellow or lime on white, or placing the text over a colorful background that disallows reading. If you have pages of quality content such as stories, poetry, history pages, etc - you are, most likely, inviting your visitor to spend some time reading through your site. In this case, you have to make sure nothing will interrupt his visual experience, specially if your visitor is visually impaired.

Obviously, you visitor should not lose himself in your big site. On each page at least a basic navigation should take place, together with a link to your "home" page, and your Site Map. Site map, as an alternative way of navigation, is also highly effective, even for websites that have a well laid-out navigation. Make sure you have an option to contact you or the webmaster, and if you include this option, don`t forget the 'Privacy Statement' to ensure your guests that you do not collect personal information for any malicious intentions.

Another norm, that is good to make a note of, is consistency of layout. Even if each of your pages deals with different issues and moods, don`t get tempted to create a few distinct layouts for one site. Same graphics can appear in different color on each page, or be replaced with other graphics, nonetheless, never change the background color , header's structure and the technical scheme of the site. This would only confuse your visitor and give him the illusion that he has left site. Another aspect that may create the illusion of "going to another URL", is opening any of your website pages in a new window. All the pages that belong to the body of your site must open in the same browsers window, while external links (links to other sites) should open in a new window, to ensure your website will not get automatically closed.

Last essential factor are the illustrations, but it's very important to use them in the best possible way. How to illustrate your site? First of all, there are two ways of illustrating: neutral illustrations and example displayers. Let's say you have a website about Meditations. you can combine the written material with neutral illustrations such as landscapes, blurred images of people, stones, nature and so on. Or, if you are describing a particular position of a body, suitable for a meditation -- you may want to place a picture of a person in that exact pose, to visualize the matter. Weather you choose to work with neutral or targeted images, always optimize them for fast loading (at least below 50 Kb) and make sure they are of an excellent quality, as poor and pixelated graphics ruin the entire design.

In conclusion... Provide as pleasant environment as you can for your visitor. Avoid, blinking and animated backgrounds (you will not impress anyone with it in the year 2006!), avoid text that blends with the background texture / color, or on the opposite - creates an irritating contrast. Don`t use irrelevant images and try to make your website design to accompany your written text in the best possible way. Don`t forget, that the design of your site is just a "frame" or a "background" to the real treasure of your website -- your content.

Back to the main categories of our tutorials:

• Articles • HTML • Graphical Tutorials •