Scaling, Proportioning, and Sizing your Website Layout for Better User Experience

Dark and light, large and small, loud and soft, all of these are relative measurements on a scale. Just like a day cannot exist without a night, website elements cannot exist without contrasting each other on a scale.

In website designing, we usually talk about scale when we are referring to size and its relationship with different design elements. Designers may also consider proportions that indicate how well the design has been scaled.

In this blog we will understand the related concepts of Size, Scale and Proportion.

Scale

Scale is a relative measurement of an element or object. It is a progressive classification of some quality like size, rank, amount or importance. In website designing, when we talk about scale, we are typically concerned about the size of the element.

Everytime we make a comparison between the objects, we scale them. When we say something is big it’s immediately seen on a scale and compared to something smaller in size. A single object has no scale unless it is viewed in comparison to another object. Scale needs the context of another object to exist.

For example, the image above shows short, mid-sized, and tall men. We can only compare these because the other is present, if we remove any 2 figures, we can no longer say which one is tall or short.

The moment we place an element on the layout, we have something to compare it with. We can compare it with the webpage or browsing window, with other elements, space around the element that would create a figure/ground relationship between the element and whitespace or to a common standard like size of a table or the television.

Scale communicates the relationship between elements. Two elements of the same dimension when placed on the same point on a scale of size is communicative of that they are similar in some. Similarly, two elements with different dimensions at different points on the same scale communicate that they are not the same.

Scales are paramount and are used across many design principles. Through scale, we can show contrast between different elements as well as similarity in groups of varied elements. Scales communicate relationships between elements. Two elements of the same size are perceived as related in some way. Two elements with notable differences in size are perceived as different.

Through scale, designers can create a variety of varied visual weights that would lead to:

• Dominance and focal points
• Visual hierarchy
• Balance
• Flow and
• Rhythm

Scales can be used to create an illusion of depth as larger elements/objects tend to overpower and advance while the smaller elements/objects tend to recede into the background. Larger elements appear to be closer and smaller elements appear to be further away thus creating illusions. Scaling creates perspective in the layout.

Image source

It can also be used to create icons, for example, the icon below denotes a series of three curves that are scaled in relation to a dot.

Scale can also imply the meaning of an element. For example, in the image below, the larger square dominates and confronts the smaller square communicating pressure. It imposes its will and exerts its influence on the smaller square.

Important information can be communicated through scale alone. By adding a relative contrast in size designers can create an interesting association between two design elements. A composition where contrast exists along a scale creates a comparison that communicates meaning. The layout becomes active by adding contrast and implies meaning.

Image source

Image source

Lack of scaling would lead to a static and boring design thus hampering user experience. It would also create competition between the elements and leave the user to determine and create a relationship in the composition.

Although contrasting is interesting, the similarity of scale is important. When everything contrasts, it may get tedious and confusing for the user to determine the scale and perceive the layout. A perfect blend between contrast and similarity works better. The designer should determine how much of each should be used and scale them effectively.

Size

Size refers to the physical dimensions of an object. Size is an absolute information.

Web designers make a lot of choices about the size of the overall page entailing the size of the sidebar, header, font size, content area, images, footer and main menu. Every element on the page is displayed at some size. Designers size the elements and images to fit within their design, set the text on the page, and build a perception of mass through size.

Sizing can also help the website users and potential customers to find what they are looking for quickly and easily. Size can also be used as an effective design tool to draw user’s attention to key website features and important information by using visual hierarchy. The designer could make the most important content larger and position it at the top of the page.

Image source

Users expect everything to appear in absolute measurement. These measurements may vary as the designers resize the webpage or when viewed through a tablet or mobile that includes different dimensions. But at any discrete point, all the elements are displayed with fixed dimensions and size.

Image source

Image source

Image source

Proportion

Proportion refers to the relationship between the elements on a scale with respect to a comparative magnitude. Proportion is the ratio between parts of the elements and the whole layout. When one element changes, the other must also vary in the same proportion to create a better user experience.

Proportion is usually defined as a comparison of dimensions or distribution of forms. Proportion can help create symmetry and visual weight. It can also help ease the tension and cognitive load of a user.

Certain scalar relationships in the layout may be pleasing and attractive while others are off. If the different sizes of elements are arranged in proportion they are likely to enhance user experience and create balance and harmony.

Image source

Proportion done well creates unity in the composition. The universal way a human would apply proportion to a standard of measurement is the human body. Users tend to judge the size of the objects by their own experience of human proportion.

Image source

Generally proportion is only noticed when one or more elements are out of proportion with other elements in the layout.

Users respond to proportion emotionally. When something is out of proportion it can evoke feelings of disorganisation and confusion. Designers should note that they are communicating varied messages by placing elements in and out of proportion and making appropriate decisions based on what they want to communicate.

Image source

However, designers should also note that elements that are out of proportion grab the users attention, just like in the image below.

One aspect of the website design where proportion is present is the layout. Designers need to identify if their layout is fixed, fluid or elastic. Do the elements of the design also scale when the browser is resized? How large is the header in comparison to the footer? Are they in proportion with each other and the content they contain?

Think of a web page or a blog where drastically increasing the size of a header has no impact on the content body of the blog. The heading text grows while the size of the content body remains the same. This way the entire blog will look out of proportion. If the size of all the elements were changed in the same proportion as the header, the blog would have been more appealing and user-friendly.

Image source

Conclusion

Size, scale and proportion are interrelated concepts and subtly enter design thinking and website layout. These elements allow the designer to manipulate the ideas of many design principles.

In designing when we talk about scale, we refer to size. We often compare and contrast objects with their opposite ends on the scale. Objects contrast through a scale; greater the difference along the scale, greater and better is the contrast.

When the scale is in harmony, it is in proportion. Proportion helps to create unity and harmony in a design. Elements out of proportion evoke emotions, drag attention and sometimes make the design look shabby. However, a purposely done out of proportion element can communicate varied meanings.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]