Design

Design 101 Fundamentals: Principles of Page Layout

This article is the second in the Design 101 Fundamentals series. This series gives you an overview of the basics of design so that you can make more informed decisions about how design enhances your business.

Check out the other articles in the series:

You Can Design Your Pages Like a Pro

Applying these six basic page layout principles will transform your boring copy into insanely engaging content. Page layout is a major component of your web and print design.

Page layout determines where your copy and graphics are on a page. And the way these things are arranged play a large part in how your reader perceives your content, interacts with your contact, and how long they stay on the page.

Beautiful page layout creates an environment in which your reader can interact with your content in a way that converts them from visitors to customers.

Effective page layout helps customers consume and grasp your material more easily. Don’t make their experience like deciphering a secret code because your website or print material is jumbled and disorganized.

Poor layout repels readers.

The internet is a very competitive place. There is tons of competition and information out there vying for your customers’ attention.

People are used to choices. If your information is presented in a poor manner, your potential customer will hightail it off your site and find another one that is not as visually offensive to get the information she or he needs.

You don’t want that.

The following outlines six simple principles of page layout design that will keep readers enthusiastically engaged in your content.

Subheadings

The first principle is the use of subheadings. Subheadings aid in the organization of your content.

Subheading help you order your content so that you can communicate clearly, be that topically, chronologically, or order of importance. Subheadings give your content structure, which allows your audience to consume information easier.

People love structure and order, and building structure and order into your web or print material saves the reader the burden of trying to make sense out of your content.

One Bite at a Time

Subheadings break up your content into digestible chunks. Just think: people hardly ever put a whole sandwich in their mouths. Most people take bites of food, chew on it, then swallow it. People do not consume information in on big gulp. They like to take in new information at bit at a time.

Even a snake will consume its prey one centimeter at a time.

Make your copy like delectable little morsels that get tastier as the reader moves on. That way your copy is more easily digested. It makes a greater impact. Subheadings set the pace for readers to consume your information.

Scan-ability

Subheadings also help readers scan your content and give them an overview of the topic. Additionally, subheadings provide predetermined pacing of information by supplying it in bite-sized chunks. Subheadings allow readers to skim your content and get the general gist of your material.

It’s important to use subheadings that are descriptive and give some idea about what the next block of information will cover. Subheading should be catchy but not vague. Their purpose is to draw the readers interest and keeping them engaged in your content.

Subheading can be catchy, provocative, and descriptive, but they should never be vague. Vagues subheadings will cause your reader to lose interest and either leave your page or possibly your site.

Hierarchy, Proximity, Alignment, and Repetition

The Principle of Hierarchy

Items placed in a hierarchical manner help the reader determine which information is primary, secondary, and so on. Words or phrases are given a hierarchal significance by how they are displayed on the page.

Usually, bold words or words in larger font sizes signify a sense of hierarchy. Hierarchy shows the reader which material is primary and which is secondary. It also shows us which is most important and which is least important.

A heading or subheading is usually set apart by applying a heavy weight to the letters or by making them larger. Or perhaps by setting them in all caps. These indicators show the reader to pay attention; the information is important.

Usually, the following text is written in regular font style and sentence case and gives an explanation of the bold heading. The font style and weight indicate that the information supports the heading.

Keep Your Friends Close: The Principle of Proximity

Proximity groups together related information. This principle shows the reader which elements of the content belong together.

For example, a restaurant menu will list all of its appetizers together in one section, its salads in another section, its sandwiches in their own section, and so on. Grouping related content makes it easier for the customer to locate the dish she or he wants to order.

“To the Left, To the Left”: The Principle of Alignment

Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page—Robin Williams

Align page items in various ways. The most common are left, center, and right alignments, each with their own advantages.

Typically, anything aligned flush left or flush right gives your eye a stronger vertical line to follow and can be used to great effect. Left or right alignment gives your layout a cleaner and more focused appearance.

Center alignment usually produces a softer focus, particularly on the edge of the page.

Birds of a Feather: The Principle of Repetition

Repeat visual elements in your design to create unity in your page layout composition. You can and should repeat colors, typefaces, font sizes, shapes, textures, spatial relationships, etc.

You already use repetition when you use the same font and font size for your headings, subheadings, and body copy. Repetition creates consistency, making the elements on your page look like they belong in the same publication.

White Space is Your Friend

White space is a by-product of organization. It is the space on a page not occupied by any text or graphics.

Many people fear white space. They erroneously believe that all blank spaces must be occupied. A prevailing attitude that empty space is wasted space persists. Nature abhors a vacuum.

On the contrary, white space is necessary to good design because it gives room for your content to have an impact. (Williams 235). White space provides “breathing room” for your content. No one wants to read a wall of text or tons of pictures slapped on a page. White space helps readers appreciate what they do see. It gives room for more.

White space intensifies the desire to see more.

White space reduces eye strain and gives your readers’ eyes a break. Headings and subheadings, which help break up your content, naturally produce white space. Not only does white space aid in the organization of your work, it makes it readable—essential in today’s digitally driven world.

Some Key Takeaways

Applying page layout principles helps you create designs that customers can more easily consume. Poor layout repels readers.
Headings and subheadings help organize your content, break it up into digestible chunks, and make your content more scannable for web readers.
Hierarchy, proximity, and alignment help your reader determine the importance of your information.
Repetition creates cohesion in your design. It Unifies the information and gives it a professional look.
White space is a by-product of organization, it provides breathing room for your content, and it reduces readers’ eye strain by providing spatial relief.
White space, when used effectively, increases a desire for more.

If you want to learn more about the importance of page layout and how to use it effectively for your print and web publications, take a look at these resources. Also, let me know what are your go-to resources for learning good design in the comments below.