Why is proportion important in UI?

You have heard the word proportion in Architecture. If you want to call a Architecture classical, the key concept should be proportion, i.e, correlation of one element to another. Same in the case of UI. User Interface(UI) acts as a medium of interaction between the User and the Web. In a web application the most important aspect is the user interface, because this is the only part end users are going to view.

Before we start, I want to you to know how we reached to this article"Why is proportion important in UI".

When we create a web-design or an any other UI you have to remember and follow these four rules

1. Ensure Consistency in your site
2. Use perfectly paired Symmetry in your design
3. Use proper Alignment in your design
4. Use proper Proportion in your design

In this article I will be explaining only important of Proportion in a UI. So what is Proportion and how its related to web design.

If you go through following three images you can understand why proportion is important for your website.

When we design a website it mainly consists of three parts

• Structure - HTML comes in this.
• Presentation - CSS comes in this.
• Behavior - Java Script comes in this.

Proportion principle applies to both in case of structure and presentation.

When we create the structure for your design keep following tips in your mind

• For every page there must be an outer most div.
• Now if you want to divide the page to two regions use separate divs for each region and arrange width accordingly.
• Now if you need to add sub regions in these two regions use separate divs for each sub region and also make sure inside the parent region comes the corresponding sub regions, so that if a common change has to be made, only parent region has to changed.

Now comes the presentation part. If you have designed the structure correct then the presentation parts comes very easy.

• Based on the divs like outermost region, parent region and sub region we can adjust width accordingly and also the margins and so on. To maintain the proportionality the width of outermost div should be larger than parent div should be larger than sub region. For identical regions it would be better if we gave same width.
• Make sure each region is in proportion to its corresponding region.
• Title should be in h tags based on the importance and order like first comes h1 then comes h2 then comes h3 and so on. All the paragraph content should be in p tags. If you create a 'Typography' you can view how contents are displayed in each tag and correct it accordingly.

Hope my words helped you to know about why proportion is important for your web page. If you follow these 4 simple rules, you will be able to create a web page quickly and error free.