Using Scale: Real World Examples

By LaurenMarie

Size is often used synonymously with scale, but there is a distinct difference between the two.

Size is the physical dimensions of an element in the layout (a 6 inch by 6 inch image). Scale is the size of the element as it relates to its usual physical size (it is impossible to get a full size human on an 8.5x11 piece of paper, so s/he would have be scaled down to fit).

Size is relative to the layout. Think about 12 pt font in a magazine vs. a billboard. It’s the same size, but in relationship to its layout, it can seem just right or entirely too small.

Size and Scale are used to

  • Create depth
  • Create perspective
  • Create hierarchy and organize
  • Create interest and variety

I Love Typography

Using size to construct the hierarchy of a layout is probably the easiest way to introduce this element.

Take a look at I Love Typography, the definitive typography blog. It is easy to distinguish the header from the headline, byline, subheaders and body copy. This is because they vary in size and your eye is naturally drawn to the largest element first. Note the drop cap, too; it’s a great way to indicate where the reader should start and an example of using size to direct the viewer’s eye.

Onitsuka Tiger

This Onitsuka Tiger ad is an interesting exploration of scale. The shoe is made up of the elements of the culture they are appealing to. You’ll remember those posters where little photos are put together in such a way that they create a larger image, which is along a similar vein (and what is on the website madeofjapan.com).

The use of scale for this image pulls the viewer in to look at the details. Using small details in this way is a great tactic for holding the viewer’s interest. The effect is that the viewer wants to see all the different pieces, to see if s/he recognizes any of them in order to identify with the ad in a more personal way. The details don’t just have to be in the image, they can also appear in repeating icons in a border or background elements.

Military Museum

Experiment with scale for background elements, texture and patterns. In this Military Museum ad, the planes have been scaled down to create a kind of pattern. Alternatively you can scale something so large that it becomes nearly unrecognizable, and so creates an abstract background (think of most macro photography).

Nikon Vietnam and Foster’s Matchbook

Visual cues are important when relating the size of objects that might be unknown to the viewer. You often see images in ads that show a coin next to an object, or a person next to a product in order to give the viewer an idea of the actual size. Of course the reference point needs to be on the same plane, otherwise it will distort the perspective (Nikon ad).

It can be effective to mess with the viewer’s perceived ideas of how large or small an object should be. Think of rides at amusement parks like Disneyland where you are blown up or shrunk down and your perspective of the world is skewed. Sometimes it’s fun to get a different perspective.

Consider how you crop photos in your layouts, too. For example, would the Foster’s ad have been as effective if it showed the whole person instead of just a hand? Maybe, if the guy was super dorky, but still managed to get a lot of numbers because of Foster’s, but it probably would diminish the shock of the huge matchbook.

Use Scale Wisely

Look at how scale is making your layout more interesting.

  • Add an object or image that is magnified x3 to create an abstract background
  • Shrink the image smaller and duplicate it to create a texture or pattern
  • Would a single large, dramatic image or 6 smallish images that don’t show much detail be more effective?
  • Add to or skew the viewer’s perspective with the use of scale.

And be mindful of possible poor uses of scale.

  • Size of an object can overwhelm the layout.
  • Everything the same size = boring, possibly confusing (hierarchy).

Of course, once you know the rules, you can purposefully break them to create a desired mood or affect!

This has been the fourth installment in Real World Examples of the elements of design. Previously covered have been line, shape and space. Next up will be texture, value, use of color and the color wheel and color theory.

Subscribe to Creative Curio (What is RSS?) so you don’t miss them! Email subscriptions are available, too, and as always, both subscription options are absolutely free!

  1. Posted May 7, 2008 at 11:27 am | Permalink

    Always great seeing Johno’s blog featured. It’s crystal clear how much thought was put into it, and I’m a huge admirer. Don’t tell him that though. Gotta keep him on his toes. ;)

  2. Posted May 7, 2008 at 4:19 pm | Permalink

    I didn’t read David’s comment ;) Thanks for the mention, Lauren. I still have lots to work on, and during the coming months, I hope to tidy-up a few elements that I’m unhappy with.

    Hierarchy, scale, and size are such important elements of design, so I’m pleased you’re covering them in quite some detail.

    What you say about cropping photos/illustrations is especially important, I think; it’s also quite a skill—different crops will indeed elicit different messages. Great article.

    ps: thanks, David. If it wasn’t for you, I’d never have got into blogging.

  3. Posted May 7, 2008 at 4:55 pm | Permalink

    You meant “Scale is used to”, right?

    You saw the header with the window sill that I made before… I’m making a new header now, fairly different, but still with the personal items theme. I think the two hardest things have been scale (mainly for depth) and getting the light right (because a couple of photos were taken at different times of the day).

    I’m not sure that I have either of them really correct, but the whole thing is a little random, so it might not matter. :P

    You chose great examples for this one.

  4. Posted May 7, 2008 at 9:26 pm | Permalink

    David,
    Hehe, yes, can’t let John get to lazy over there at his super fantastic blog!

    Johno,
    David got you in to blogging?? Really?? Cool! As for the elements of design, I’m having a lot of fun writing these articles. It’s been a great exercise for me, too. It’s hard to stick to one element and find good examples of it. All the elements and principles depend on each other so much that you really can’t talk about one without talking about the others.

    Kristarella,
    Hehe, you catch all the mistakes!! Yes, scale. I took that list from my last post, where I called it size. Glad you liked the examples I provided here. Did you learn anything new?

  5. Posted May 7, 2008 at 10:51 pm | Permalink

    Yeah, I thought the idea of using scale to make people look at the details (the shoe, for example) was interesting. Not just making something big enough for people to see it, but making it noticeable enough for them to look at it.

  6. Posted May 8, 2008 at 1:07 pm | Permalink

    Kristarella,
    Yeah, I like using scale to make things really big and kind of abstract. It always makes for an interesting background for a design. Details are interesting, too. Some people think it makes it too hard to understand or too busy, but I think details usually make people come in for a closer look.

One Trackback

  1. By Want to know how to design? Learn The Basics. on June 13, 2008 at 4:01 am

    […] Using Scale: Real World Examples […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Read the Comments Policy.

Have a grey box instead of your picture? Get a Gravatar!

Creative Curio design by LaurenMarie and built on the Sandbox theme. Copyright 2007-2008. Proudly powered by WordPress.