Elements of Design — Proportion

Wel­come to the first install­ment of Ele­ments of Design! I’ve decided to write up a whole series of arti­cles for on-page opti­miza­tion for both Search Engine Crawlers and your loyal readers.

These guides will address a range of issues com­monly found in blogs/websites around the net today. If you can invest the time, you should care­fully fol­low the guide­lines set by these arti­cles to ensure a warm wel­come for your read­ers and an opti­mum wel­come for the crawlers!

The first instal­la­tion will cover an on-page tech­nique called “Pro­por­tion” which ranks aspects of your web­site with pri­or­ity. This will ensure that your read­ers get the max­i­mum out of your web­site and is able to reach the con­tent they are look­ing for. A rule of thumb is that –you only have 8 sec­onds when a vis­i­tor enters your site and before they leave. Respec­tively, gives you a time span of 8 sec­onds to con­vince them to stay longer.

Pro­por­tion

Pro­por­tion refers to the visual hier­ar­chy of a page on the screen. You, as a designer must ensure that the most impor­tant pieces of infor­ma­tion have visual promi­nence on the page, with less vital infor­ma­tion tak­ing a less promi­nent posi­tion in the visual hier­ar­chy.  Head­ings, logos or links may be vary in impor­tance, as per web­mas­ter and there­fore imple­ment­ing pri­or­ity on parts of the site you con­ceive impor­tant is crit­i­cal. On the other hand, infor­ma­tion such as “over-priced cost-tags” that you do not want to empha­size as much can be in a smaller font in a less notice­able part of the screen.

When design­ing your page — one of the con­sid­er­a­tions you must take into account is which ele­ment of the page will load first. For instance, you might have not noticed this but Google loads the search field first, then the Google logo. Users are seek­ing to con­duct a search, and they do no wish to wait for a logo to load before they can begin search­ing. However,the logo is impor­tant to the Google com­pany, and hence it quickly loads after the search field, tak­ing a promi­nent place on the screen. It comes a “close sec­ond” on the visual hier­ar­chy of the screen.

For many web­sites, ban­ner adver­tise­ments are the first thing to load. These many include flash­ing items or other ani­ma­tion to draw atten­tion. This could have been a delib­er­ate action, as while the rest of the page loads — the user is exposed to adver­tis­ing. In this care, the adver­tise­ment is the high­est ele­ment of the visual hier­ar­chy of the page.

If this isn’t the intended effect, the unplanned load­ing sequence of var­i­ous page ele­ments may not have the desired results. For instance, a large file-size graphic may be the first page ele­ment to load. If the user has a slow inter­net con­nect, they may quickly lose inter­est in the slowly load­ing pic­ture before them, and click away to another web­site. The user would not see any of the impor­tant ele­ments of the page such as con­tent, adver­tis­ing or links.

Most inter­net users are impa­tient, and that is a fact. They are not tol­er­ant of web­sites that take along time to load, and many will click away to another site if the page doesn’t load within 8 sec­onds. As a designer, you must there­fore ensure that all files used on a web-page are as small in the file size as pos­si­ble. Image files can be com­pressed by for­mat­ting to JPG or GIF for­mat. As a gen­eral rule of thumb, all images should be less than 20k in mem­ory size on your front-page.

Finally, make sure the load­ing sequence works as you intended by test­ing it through a range of browsers and inter­net con­nec­tion speeds.

Go to top