Page layout design, also called page composition, combines eye-pleasing aesthetics with compelling text to communicate a message. However, perfecting the on-page user experience (UX) isn’t as easy as it sounds. Instead, human-centered UX designers rely on fundamental design principles to achieve their goals. Learn how the following design elements help create an effective page layout and why it matters to your users.
Seven Page Layout Design Elements to Improve UX
Whether you’re designing for print or online, the page layout design should convey your message. Although designers learn and use the same design principles, each project can be completely different and unique.
Layouts differ according to the purpose of the page or type of asset. Regardless if you’re creating a cloud software landing page or a restaurant beverage menu, the design elements and best practices are similar.
1. Use Grids
Nearly all projects start with the most basic of grids—page margins. Page boundaries may differ for print versus digital assets and some may require larger header or footer areas. The rest of the page is open space. A designer may be tempted to eyeball the placement of textboxes or images but this can lead to inconsistencies.
While minor differences won’t be noticeable for smartphone users, once it’s projected to a large screen at a conference or printed for distribution, slight variances will look unprofessional. Moreover, if the project includes more than one page, the variations can distract or confuse users.
Using a layout grid is critical in order to achieve alignment and balance. Grids are vertical and horizontal lines used to organize the page layout design. Many design programs allow users to view or hide the grids. Some creatives prefer to start with a blank page and lock elements to the grid as they move into the next step of their process.
2. Select a Focal Point
A focal point is the first image, or message, a user gets when they land on a page and, according to design principles, should be emphasized. There are various ways to draw attention to a focal point, but all depend on the project’s purpose and what the end-user needs to know immediately.
In some cases, UX designers must make this decision themselves, based on the brand’s goals. For instance, if a downloadable checklist should focus on brand awareness, the designer can choose to emphasize the brand’s name and logo. On the other hand, a concert venue may want the words “Tickets on Sale Now” and a prominent “Order Now” button as the focal point, and designers should adjust what they emphasize accordingly.
3. Apply the Rule of Thirds
Similar to using a grid, the rule of thirds provides guidelines for page layout design. The rule of thirds involves overlaying two equally spaced horizontal lines and two equally spaced vertical lines over the page you are designing, which creates nine identically sized boxes.
The rule of thirds helps simplify object placement because designers can start by placing design elements at or near the four, centralized intersection points of the nine-box grid. Doing so gives a sense of balance to the page and can save designers time.
4. Leave Plenty of White Space
Along with margins, all page design requires ample white space. Also called negative space, white space is the empty area between columns of text or the padding around an image. Too much white space hinders the ability of viewers to scan a page comfortably, whereas too little creates a feeling of chaos, instead of harmony. Additionally, incorporating white space into the page design is essential for readability on mobile devices.
Micro white space includes the spacing of letters, words, lines, and paragraphs. It “affects your content legibility, the user’s reading speed, and comprehension.”1 Good UX gives just enough room to guide the user through the page without creating a tedious or overwhelming experience.
5. Repeat Page Layout Design Elements
Repetition is critical to page layout design and a core design principle. It creates the consistency the human eye craves and makes it easier for people to scan or view your page. A project may include the best call-to-action or a stunning focal point but confuse the audience with too many different fonts or colors.
The rule of repetition applies to several design elements, including:
- Font selection for headers, subheaders, content, captions and pull quotes
- Colors for text, hyperlinks, borders and background
- Alignment of bullet points and headers
- Location of page numbers or document dates
- The use of the same objects, like a circle or square bullet points
6. Understand Content Hierarchy
Even the most flamboyant brands understand the power of an organized page. Designers should judiciously use size, color, alignment and fonts to enhance the user experience. Naturally, the human eye looks for a more prominent headline followed by smaller text. In marketing, brands generally want their name, product, or call-to-action (CTA) to stand out, not the fine print about the warranty; brand-related items and CTAs are usually large whereas fine print is tiny.
In addition, UX designers should understand the psychology behind design decisions and how methods, such as content hierarchy, support eye movement patterns. For example, English-speaking users read pages from left to right, whereas the Hebrew language is right to left. Patterns may include the F or Z pattern, found by performing heat map testing on web pages.2
7. Consider Contrast, Scale and Harmony
Contrast, scale and harmony are the design elements that add emphasis needed for communicating your message. Moreover, contrast is crucial to creating accessible user experiences.
All page layout designs require these three elements:
• Contrast: While bolding a word adds emphasis, nothing stands out if all page text has the same weight. Use contrast to amplify your message with a pop of color or thicker text.
• Scale: Making your focal point the largest element on the page draws the eye to it immediately. In comparison, using two equally-sized parts symbolizes equal importance.
• Harmony: Also called unity, this design principle ties your page design layout together, ensuring a balance of order and variety.
A balanced page layout means your design elements don’t get in the way of your message. Instead, each one guides the user and has a purpose for the page layout design. Well-composed pages that follow the fundamental design principles provide satisfying and exciting user experiences.
Explore the Principles Behind Design
Page layout designs are only one part of the user experience. Designers require advanced skills to compete in today’s competitive market, including knowledge of information architecture, strategy and user research. Unlike boot camp programs, an Online Master of Science (MS) in User Experience Design (UXD) provides the comprehensive training and robust tools needed to excel in this field.
If you’re interested in UX and creating intuitive experiences, consider how an online Master of Science in User Experience Design from Kent State University can help you achieve your goals.
Sources
1. Retrieved on June 17, 2021, from shopify.com/partners/blog/white-space-design
2. Retrieved on June 17, 2021, from interaction-design.org/literature/article/visual-hierarchy-organizing-content-to-follow-natural-eye-movement-patterns
