Big and Small

by Zack on June 1, 2009

Big and Small

Everything on your screen is two dimensional. There is no perspective, no depth of field, and nothing changes size when you move. Despite all of this some elements on your screen look much larger than they have any right to while others fade away.

Big items grab our attention while small ones fade into the background. Making something larger by making it take more pixels on the screen is easy but limiting. Make everything too large and people won’t be able to see your UI without scrolling. So how do you make something look bigger without actually being bigger? In this article we’ll look at three examples of UI elements that look larger despite being smaller than their peers.

Visually huge

Whenever you try to create a visual effect on a computer screen it is good to learn from other visual mediums. Let’s start by looking at two examples of representations of size in photographs.

andrewmaccoll

Andrew Maccoll gives us an intimate view of this couple getting into their stretch limo. The large building looming over the couple makes everything small and intimate. The image is reasonably large on the screen, but it feels small.

Andrew creates a feeling of oasis with his use of contrasting lights and darks. His picture also contains people, but here they provide less of a scale than a counter-point. The small pool of the light in this otherwise dark image.

gregwilson

In contrast to Andrew’s subtle imagery Greg Wilson presents us with largeness and a sense if immediacy. It looks at us as a peer. It is roughly the same size as the previous example, but it grabs us and pulls us in.

Greg creates his effects with a command of the composition. He cuts the cow to show us its enormity. The subject is incomplete. It extends well beyond the frame; our imagination fills in the rest.

Big fonts

The two photographs in the previous example use light, contrast, and scale to appear big and small, but you can achieve these effects by simpler means.

bigandsmall

In this example set in Hypatia Sans Pro the small is actually smaller than the big text by about 25 percent. The small text only appears larger because of the relative density of the fonts.

Big form fields

In forms you often have some fields that take precedence over others. It could be the required fields vs. the optional fields, or just that some fields matter more to the user. You can give the user visual clues which fields are more important by making them appear larger.

Name:

URL:

In this simple, and admittedly a little garish form, makes it clear that the name field is larger than the URL. Perhaps the URL is optional. At 225 pixels the URL field is about 25 percent larger than the name field, but the red border makes it look larger. The brightness of the red draws in the eye.

Creating big and small

A computer screen is a strange medium. A painting is fixed in relation to you, the same with a newspaper. But a computer screen is always shifting, always changing. It forces you to change your perspective constantly. By choosing this fluid medium we consent to a certain loss of control. Providing visual cues to the size and importance of objects on your screen is an important tool when communicating with the user.

Here are a few tips to get you started.

Darker is bigger. Our eyes are drawn to dark spaces. Bold fonts look larger because they have more black pixels.

Brighter is bigger. The same quality that draws us to dark spaces draws us to bright ones, but only if they are bright and strong. Red text looks larger, and pink looks smaller.

Big is proportional. Elements only look big next to smaller elements. The limousine in the photograph only looks small in the shadow of the larger building.

Scale matters. We start analyzing and image by looking for reference points we already recognize. Common objects. An element next to a soda can will appear much small than one next to a mountain.

Perspective influences perception. A bug looking down at you appears larger than a horse looking up at you.

The photographs

Andrew Maccoll and Greg Wilson are finalists in the Hasselblad Masters 2009 competition. Their photographs are used in this article with their kind permission. Unlike the rest of the content on this site their photographs are copyrighted material and may not be reproduced without their consent.

Leave a Comment

Your Comment

Your Comment Preview

Previous post:

Next post: