Elements of Design – Proportion & Orientation

The post will address a range of issues commonly found in blogs/websites around the net today. If you can invest the time, you should carefully follow the guidelines set by article to ensure a warm welcome for your readers and an optimum welcome for the crawlers!

The first segment will cover an on-page technique called “Proportion” which ranks aspects of your website with priority. This will ensure that your readers get the maximum out of your website and are able to reach the content they are looking for. A rule of thumb is that -you only have 8 seconds when a visitor enters your site and before they leave. Respectively, gives you a time span of 8 seconds to convince them to stay longer.


Proportion refers to the visual hierarchy of a page on the screen. You, as a designer must ensure that the most important pieces of information have visual prominence on the page, with less vital information taking a less prominent position in the visual hierarchy.  Headings, logos or links may be varying in importance, as per webmaster and therefore implementing priority on parts of the site you conceive important is critical. On the other hand, information such as “over-priced cost-tags” that you do not want to emphasise as much can be in a smaller font in a less noticeable part of the screen.

When designing your page – one of the considerations you must take into account is which element 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 seeking to conduct a search, and they do not wish to wait for a logo to load before they can begin searching. However, the logo is important to the Google Company, and hence it quickly loads after the search field, taking a prominent place on the screen. It comes a “close second” on the visual hierarchy of the screen.

For many websites, banner advertisements are the first thing to load. These many include flashing items or other animation to draw attention. This could have been a deliberate action, as while the rest of the page loads – the user is exposed to advertising. In this care, the advertisement is the highest element of the visual hierarchy of the page.

If this isn’t the intended effect, the unplanned loading sequence of various page elements may not have the desired results. For instance, a large file-size graphic may be the first page element to load. If the user has a slow internet connect, they may quickly lose interest in the slowly loading picture before them, and click away to another website. The user would not see any of the important elements of the page such as content, advertising or links.

Also See: Audials Radio App: Simple & Quick Recording from Favourite Radio Stations

Why Keyboard Keys Are Not Arranged Alphabetically. Here Is Why!

Most internet users are impatient, and that is a fact. They are not tolerant of websites that take a long time to load, and many will click away to another site if the page doesn’t load within 8 seconds. As a designer, you must therefore ensure that all files used on a web-page are as small in the file size as possible. Image files can be compressed by formatting to JPG or GIF format. As a general rule of thumb, all images should be less than 20k in memory size on your front-page.

Finally, make sure the loading sequence works as you intended by testing it through a range of browsers and internet connection speeds.


It’s the technique of arranging objects on the screen and deciding the direction that each screen element will face. An important consideration is the aspect of each screen element in relation to other objects on the screen, and to the screen overall. To put it in simple words; Orientation refers to the direction and aspect of the elements on a screen, for example, the positioning of frames at left or right.

The orientation and juxtaposition on screen elements become extremely important, as the user naturally will not be satisfied with the product if the file cannot be easily viewed and understood.

Types of orientation range from the direction that a logo face to whether an image should be rotated to the justification of text and the direction they are facing. The size of an on-screen page needs to be considered in the design for orientation of various screen elements. Some pop-up notifications, such as newsletter sign-ups, are not always viewed full-screen, but as a smaller floating box, with another page usually loading behind.

You as the designer must consider the size and shape that the pop-up will default to when first viewed. For instance, if the newsletter sign-up  is to be viewed as a short, squared box floating on the screen, the screen elements of the pop-up need to fit into that shape, yet still be clearly legible to the user.

Author Bio:-

Neeraj is an avid professional blogger who writes about websites, mobile technologies, analytics and eCommerce. He works for SEO Vancouver Pros.

Neeraj is an avid professional blogger who writes about websites, mobile technologies, analytics and eCommerce. He works for SITE123 – free website builder tool. The application lets you easily create stunning websites using built-in responsive templates.