Using Landmarks Makes Page Layout Easy

A design may have impact. It may have style. But having these isn’t enough.

To work well, a design has to have elements that play off each other’s strengths. Fortunately, every piece of content has inherent guidelines.

Layout, or the arrangement of content on a web page, is critical to a design’s success. Among other things, layout prioritizes content to lead people from one element to the next.

If done right, people will be so interested in the content that they won’t notice anything else.

Read on for more details and tips for creating layouts that work in your designs.

With the example below, most people will notice either the photo or the headline first, then the text and finally the links.

They may not notice that the headline, text and model’s face are set one third and two thirds into the page respectively (honoring the rule of thirds), or that the headline and links are written in colors sampled from the model’s lips, or that the curve of her shoulder leads the eye toward the calls to action.

Text, photo and headline make up a composition. If one falls out of place, the whole piece fails.

page layout with text, photo and headline

 

Arrangement Based on Mutual Respect

Where do we put things? Let them tell us. The quirks of graphics, photos and chunks of text become apparent when they meet on a page. Some work together better than others, and some work only when placed a certain way. For example, our layout technically works in two ways:

page layout diagrams

Figure 1 shows the layout used in our example above. Gray blocks represent the headline, photo and text.

Figure 2 shows how the same principles would apply to its inversion: one large element balanced by two smaller elements. This particular photo looks better on the right, though.

page layouts, reversed

Our model is looking to the left. In figure 1, she’s looking at the text. In figure 2, she’s looking away from the text. That might have worked if she was looking at the camera, but because she’s looking away, it loses some impact. Not much, but enough to matter.

directions in page layout

The model alternately shows interest in the text and, when inverted, ignores it. The arrangement of elements establishes either a positive or negative attitude.

 

Alignment Based on Landmarks

Sometimes the thing that makes elements work a certain way also provides clues about space and alignment. We noted how the model’s eyes point to the left, but the photo and text contain other visual cues.

how alignment and space work in a design

Implied lines between landmarks in the typography and the image abound in this composition:

  • The model’s eye and lips and the edge of her nose meet the edge of the right-hand column of text.
  • The left-hand column of text meets the left edge of the headline. It almost reaches the edge of the model’s hair but falls short to stay consistent with the right-hand column.
  • The model’s face (particularly the eyes and mouth) defines the vertical space of the headline.
  • The bottom of the photo marks the bottom third of the composition (in the rule of thirds).
  • The model’s eyes are one third from the top of the composition.
  • The center of the model’s face and the right edge of the headline meet at the one-third and two-thirds points of the composition’s width.

Some landmarks have more power than others. Designers and photographers could debate, for example, whether the model’s eyes are more influential than her silhouette. But a layout based on any landmarks is better than a layout that ignores them.

 

Using Features to Create Harmony

Non-designers who try their hand at layouts sometimes arrange elements based on how they fit onto the page. Space should be respected, but it doesn’t always lead to the best design.

examples of layout, before and after

Figure 5 aligns elements to the page’s space and bases everything on the boundaries of the canvas.

Figure 6, though, bases its layout on focal points in the photo. The result is a more streamlined appearance.

direction of flow in layouts

Figure 5 is inefficient because viewers bounce around between focal points: to the headline, down to the face, up to the text. The simplest line is straight. Hence, figure 6 guides the viewer’s gaze easily from left to right, from one element to the next. The crux of the second layout is a narrow band running along the headline-face-text alignment.

space and alignment work better in unison

In these images, readers are drawn to the model’s face, the headline and the text—usually in that order. That’s three different areas to look at. Aligning them gives the layout focus.

 

The Right Answer

All three layouts below use the same headline, photo and text elements:

comparing three layouts

The first layout has the most “breathing room.” The second respects the text. The third layout uses negative space to achieve balance. All three use landmarks but in different ways. Is one the best?

Hunting for an answer may blind us to the obvious: that multiple solutions can be equally valid when the elements work together. Visual landmarks are opportunities, not rules. Take another look at the first design.

deliberately breaking the rules

The more the elements conform to implied lines, the more a non-conforming element will stand out. Here, the designer breaks the word “Landmarks” from the other text’s vertical alignment, thus emphasizing the keyword.

There’s no doubt about what the page is promoting. Success isn’t measured by how strictly elements conform to principles of design but by how well the page communicates its message.


Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance writer and designer who solves communication problems with better design.

How do you follow landmarks on your designs? What works best for you and what doesn’t?


0 shares
  • http://angelobeltran.com/blog Angelo Beltran

    Interesting methodology.

  • http://descience.yolasite.com/ bala s murali

    Great post!

    must read and must experiment.

    Thanks Ben Gremillion !

  • http://mchaov.net Martin Chaov

    It is very rare nowadays to read article that isn’t about “45+” somethings from around the web.

    Your article opened my eyes for some forgotten things. It is very good written also.

    Thank you.

    • http://www.lifesub.de Stefan Rynkowski

      You’re right! Nowadays you find everyday new ‘number+’ articles or something like this. But really good articles like this one are very rare.

      ‘ The model alternately shows interest in the text and, when inverted, ignores it. The arrangement of elements establishes either a positive or negative attitude.’

      That’s it !

  • http://www.musings.it Federica Sibella

    Thank you very much! This post is very informative and well written. Keep up! Cheers

  • http://www.trebiano.it Webdesign La Spezia

    Hey Ben,

    tnx a lot for explaining your method in such an easy to understand way…
    I found it extremely interesting and i’m going to experiment with it myself for sure

    Best regards

    fabio

  • http://www.webanddesigners.com Webanddesigners

    Hmm didn’t notice till today, using landmarks can make such a difference.

  • http://www.crearedesign.co.uk/ Web Design Jarkko

    Nice to see some real design side tutorials as well.

    When the model in your example is looking at the headline, I can imagine the article being about beauty or perhaps an advert of a product she’s curious about. When she’s looking away from it, I get the feeling the article is about something that is bugging her mind. Perhaps health or relationship problems.

    I swear she’s smiling when looking at the text, and frowning when looking away from it.

  • http://www.simianstudios.com Kris Noble

    Excellent post – like you say, if done well, most people will never notice details like this – but it will “feel” right, just like using the divine proportion makes things “feel balanced”.

    Not going be applicable/possible in every situation, but worth keeping in mind for sure!

  • Kelsey

    Most blog comments are copy pasted aren’t they? I don’t usually pay a lot of attention to the comments, so maybe I’m just pointing out the obvious… But considering not one of them (as of now) actually say anything specific in relation to the article. *Sigh* :). Maybe some people are genuinely just saying thanks. But they’d have to be in the minority surely…

    • http://outsourcecom.wordpress.com Elizabeth Kaylene

      A lot of those standard looking comments you’re talking about are spambots. I get them all of the time on my blogs and on clients’ blogs. You can always tell by, when in the admin panel, looking at the commenter’s email address or website URL. Their goal is to add something to the conversation and hope that someone will click on their link, which is usually something being sold or something harmful, in a lot of cases.

      WDD should probably invest some time into weeding these comments out. I know Akismet doesn’t keep all of the spam away, so maybe WDD could install some kind of plugin where users like us can flag comments that seem suspicious.

  • http://www.bebop-cafe.com BebopDesigner

    Wow! Great advice, love the result. Funny how a little design decision can make such a huge world of a difference.
    Thanks for sharing

  • http://blog.rochelledancel.com Rochelle Dancel

    Interesting methodology – it’s almost scientific! This article is very clear to follow and takes things a step above the standard 12 or 16 column 960 grid with which we’re all familiar. I’ll have to give it a whirl for my next design. Thanks!

  • http://www.stereohero.se Pontus Ekman

    Loud and clear! Good examples, very informative. Looking forward to more posts like this.

  • http://www.jordanwalker.net Jordan Walker

    Great article, I like the method behind the madness!

  • Federico Totti

    Loved it, reminds me of the ‘Before & After’ magazine analisys style.

    Very clever. Bookmarked.

  • Al Hunt

    Nicely done. I wonder if this arranging of components is intrinsic to the ‘great’ web designers? I suspect so. One thing that caught my eye immediately was the text touching the models bare shoulder. Now, there’s something that makes landmarks sexy!

  • http://benthinkin.net Ben Gremillion

    Thanks, all. To be honest, this was about half of the original article. The other part would have been… well, think about it.

    Meanwhile, if you ever use these techniques in your design work, please share your links here.

  • http://knowledgecity.com Jae Xavier

    I do the same thing in presentation design. very effective in controlling the audiences attention.

  • http://www.khwebdesign.net Kent

    Wow, I never really paid attention to this before, at least not consciously. Thanks for the pointers.

  • http://www.benstokesmarketing.co.uk Ben Stokes

    Very interesting how this all works with psychology of the mind . . . a really good post that will help out many designers.

    Thanks :)

  • http://www.joelemberson.com Joel Emberson

    often overlooked and very important tip… nicely written.

  • http://www.sonnydesign.com Sonny

    important notes often overlooked but very crucial in the initial phases of design and organization of the site. considering this note is good not only for design usability but for seo direction too. great post!

  • http://www.topstyle.com.br/ Web Design Curitiba

    did not know this methodology, interesting, thx for sharing!

  • http://www.erikbigelow.com Erik Bigelow

    Hey Ben, loved the article and I’m trying to use it on my site. http://www.erikbigelow.com/

    What do you think? I made the picture black and white so I could have a decent background to have text on. I’d like to add some more color into it but I’m having trouble figuring out where to put it. I’d love suggestions if you have a moment you can email me “erik” at my site.

    Anyway thanks for the great article!

  • http://zubovo-school.ru/ alex:)

    I too did not pay attention, a good post

  • Daniel

    I would flip her around so she looks into the page.

    Naturally, we read from top left to bottom right. Putting the picture on the left (flipped) would make more sense, as she would look into the headline and text etc.