Imagination is our power

Loud and soft, dark and light, big and small. Each is a relative measurement of some quality on some scale. Day doesn’t exist without night and up doesn’t exist without down. Each exists in contrast to the other and contrast occurs on a scale.

In design when we talk about scale we’re usually talking about the quality of size, bigger and smaller, and the relationship of different design elements at different sizes. We’re also talking about proportion, which tells us how well we’ve scaled our design.

Size, scale, and proportion are all related concepts. Let’s define them quickly and then talk about each in a little more detail.

  • Size: the physical dimensions of an object
  • Scale: the relative size of different objects or of an object to a common standard
  • Proportion: harmony of scale

dots of different size

Size

Web designers make a lot of choices about size. We determine the size of the overall page. We think about the size a sidebar should be as well as the size of the header and footer and main content area. We size images to fit within our design, set the size of the text on the page, and build the perception of mass through size.

Size is an absolute measurement. Your page might be 960px wide. Your font size might be 14px. Your header might have 150px of height. Every element on your page will display at some size.

We even need to consider the size of the files we create in order to speed up download times.

We aren’t limited to using absolute measurements when designing of course, but when your audience is viewing your design everything will appear in absolute measurements. Those measurements may change as the browser is resized or from one person viewing the page to the next, but at any discrete point in time all of your elements are displayed with fixed dimension and size.

On it’s own size isn’t very interesting. To say something is 200px wide is mostly meaningless until we compare that 200px with another measurement. Big and small are more interesting than 200px. In fact you can’t even say much about 200px by itself. It’s neither big nor small until compared with something else.

Things get more interesting when we talk about scale.

Rectangles in scale with each other to create rhythm

Scale

Scale is a relative level or degree. It’s a general measure of how much. Scale is a progressive classification of some quality like size, amount, importance, or rank. In visual design when we talk about scale we’re typically concerned with the quality of size, however color is also on a scale, as is anything you can speak about in contrasting terms.

Anytime you can make a relative comparison between objects you have scale.

Again scale is about relative measurements. A single object has no scale until it’s seen in comparison with something else. Of course the moment we place an element on the screen we have something to compare it to.

We can compare it to the format (the printed page, the browser window) the element is placed within. We can compare it to the space around the element as placing a single element on the page immediately creates a figure/ground relationship between element and whitespace. We can compare it to some common standard. The important thing to keep in mind is that scale needs comparison. It needs to measure something in relation to something else.

Scale is used across many design principles. It’s one way we can show contrast between different elements as well as showing similarity in groups of elements. Scale communicates relationships between elements. Two elements of the same size are seen as being equal in some way. Two elements with a clear variation in size are seen as different.

Through scale we can create variety in visual weight which leads to:

Scale can be used to create the illusion of depth as larger elements tend to advance while smaller elements tend to recede into the background. Scale creates perspective in a composition. It can also be an effective way to create icons. Think of the standard rss icon. It’s a series of three curves in scale all in relation to a dot.

Scale can imply meaning as in the image below. The larger circle confronts the smaller circle communicating pressure and intimidation. The larger circle dominates the smaller circle. It imposes its will, it exerts its influence on the smaller circle. The smaller circle might be seen to be afraid or it might be seen to be timid.

Large dot intimidating a small dot

All of the messages above are communicated through scale alone. Through a relative contrast in size we’ve created an interesting association between two circles. The composition becomes active with the contrast and implied meaning. A lack of scale leads to a static and boring design. It’s the difference between things that makes them interesting.

When contrasting 2 elements we usually want to make the difference a big one. Make the contrast in size obvious. A lack of scale creates competition between elements and leaves the reader to determine their own entry point into your composition. Your elements compete for attention with a lack of scale.

Typographic scale

Typographic Scale

Typography needs to be legible and readable at different sizes. Typographic scale creates hierarchy in information. Scaling the space between lines of type creates a vertical rhythm through your text.

As in music scale creates rhythm in typography. It creates tempo through the size of the text and the size of the space between the text.

When you set type in ‘px’ you create a scale relative to the resolution of the screen. When you set type in ‘em’ you create a scale relative to the text itself, based on the width of the letter ‘m’ of your font choice.

 

Scaling Fallacy

The scaling fallacy is a tendency to assume that a system that works at one scale also works at a larger or smaller scale. Different scales bring with them a new set of challenges that require a new solution.

Think of a small building. The effect of wind against any of the building’s planes may not be a significant problem. As the building grows in size, as it’s scale increases, the surface area of those planes increases and the wind against them has a much greater impact.

Different building materials might need to be used or at the very least the same building materials would need to be used at different sizes and strengths. A greater depth of concrete used to protect against the horizontal forces of wind add more weight, more vertical force. It’s possible the small scale design may not work at the new larger scale.

Think back to typography, Helvetica is a beautiful font that renders well, until you look at it on a Windows machine where the font is displayed at less than 16px. Some fonts look great when big and are unreadable when small. Some fonts work well at smaller sizes and yet look awful at a larger scale. A new scale means new challenges and new design decisions.

About these ads

Comments on: "How To Use Size, Scale, And Proportion In Web Design" (1)

  1. [...] This post was mentioned on Twitter by Stoyan Shishev, Pranav. Pranav said: How To Use Size, Scale, And Proportion In Web Design: http://wp.me/p1bxMZ-p [...]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 61 other followers

%d bloggers like this: