Copy

How To Use Visual Principles for Page Design

CopyPress

November 5, 2021

Quick Navigation

• What Is Visual Design?
• Primary Elements of Page Design
• Visual Design Principles
• Why Is Page Design Important?
• Types of Pages To Design
• How Do I Design a Page Layout?
• 7 Page Design Best Practices and Tips
• 7 Page Design Layouts
• Page Design Templates

The page design can have a large impact on the perception of your web, print, and digital creations. The primary goal is to communicate information clearly and effectively to the viewer while also being aesthetically pleasing. Appealing page designs also involve accurate element placement and balance.

What Is Visual Design?

Visual design is the arrangement of aesthetic elements to stimulate a viewer’s perception of a graphic or creative project. The focus is how to make unique elements on a page work together to look nice and convey information. You want it to be appealing so people spend time on the page and find it easy to use and view. A good visual design doesn’t take away from the written content but enhances it by engaging users. Three primary purposes of good visual design include:

• Creating a visual hierarchy to understand what’s important on each page
• Defining the functional regions of a web page
• Grouping related elements to create structures of content

Primary Elements of Page Design

The primary elements of page design combine to create the content you see when you visit a website or view a print publication like a magazine, newspaper, or brochure. They include:

• Color: On a page, color can create depth, differentiate items from each other, add emphasis, or organize information. Using the principles of color theory can also help affect how users react psychologically or emotionally to your page.
• Form: This includes three-dimensional objects with volume and mass. You can create form by combining two or more shapes with tone, texture, and colors so they appear raised rather than flat.
• Lines: This element connects two points on a page. Lines divide other elements, define shapes, or create texture.
• Shapes: These are self-contained areas on the page created with lines, color, and texture. You can create other objects with a series of shapes.
• Texture: This is the perceived feel of elements on the page made by creating a repetitive pattern. Texture can attract or deter attention for a specific area.
• Typography: This is the fonts, letter sizing, alignment, color, and spacing of the words on the page.

Visual Design Principles

Visual design principles apply to the elements by bringing them together in a way that makes sense for the viewer and holds their interest. Some of these principles include:

• Balance: This principle creates the illusion of equal distribution among the page elements, but not necessarily symmetry.
• Contrast: This principle makes specific elements stand out from the others by emphasizing their differences, like color, size, texture, or direction.
• Dominance: This principle sets one element as the focal point of the page, with others supporting it. You can achieve dominance through contrast and scale through color, size, shape, and position.
• Gestalt: This principle states that the viewer understands all the individual elements on a page as one overall design rather than singular pieces.
• Hierarchy: This principle helps show the differences among the significance of elements, with those at the top typically being the most important. You can show hierarchy with font size, color, and page placement.
• Scale: This principle defines the range of sizes on a page to create depth and shows how the elements relate to each other in their space.
• Space: The appearance of space helps increase readability or create a particular illusion on a page.
• Unity: This principle states that all the elements on the page appear to belong together in that space while still having enough variety to keep it interesting.

Why Is Page Design Important?

Creating pages that are consistent and organized, but also distinct from one another, helps give viewers or visitors the context they need to understand and engage with the content. By meeting user expectations when they view your pages, it helps to shape brand identity. Having a strong identity gets users to trust your brand and recognize its content both in the digital and physical worlds.

Design consistency makes visitors feel settled as they browse through different areas of your content, which may make them more likely to return or to complete a conversion, such as purchasing something from your company. Page design is also important for accessibility for people with and without disabilities. It allows you to plan for and execute elements that make it easier for everyone to browse and understand your pages and content.

Types of Pages To Design

There are a variety of pages and projects that benefit from page design, both on- and offline, including:

About Page (Online)

An “About” or “About Us” page gives visitors more information about a company, product, or service. This can help with organization branding. The page may list the company’s history and the benefits of using the company website or services, and they often include contact information to allow visitors to speak with a representative. These pages may balance images and text to tell a company story.

Article Page (Online)

Article pages share more in-depth or scholarly long-form content with readers and visitors. They’re like blog pages except in content and some of the structure. While blog pages may be more fun and casual, article pages are more professional. They make better use of white space to make the text easier to scan and digest.

Blog Page (Online)

Blogs can serve as their own websites or become a feature within another site. The purpose is to share timely, trending, or interesting short-form content with readers and visitors. Blogs are popular features on websites that use content marketing and put a focus on search engine optimization (SEO). These layouts are highly customizable to create individual branding and adapt to the exact type of content the company wants to share.

Brochures (Print)

Brochures or trifolds deliver a grouping of information succinctly. They’re helpful at in-person events like trade shows and sales meetings. Brochures are also excellent tools to display at in-person stores or offices for customer and client browsing. They often answer common questions or give background information about a topic. Layouts combine images and text to tell a story.

Business Cards (Print)

When you design business cards, you’re using page design and layouts. Most business cards include important information about the professional they represent, such as their:

• Name
• Job title
• Company name
• Email address
• Phone number
• Company logo or another image

The design for business cards is often clean and uncluttered, so the recipient can find and digest the contact information quickly.

Cart Page (Online)

Cart pages allow users on e-commerce websites to review their items before making a final purchase. These pages show a list of items, typically with a picture of the product, saved within the form. The cart page may give users options to remove items from their cart, change the quantity, save items for later, and proceed to the checkout to complete the purchase. The design is often minimalistic to help shoppers review their list without distractions.

Feed Page (Online)

Feed pages appear on websites with content that updates often, such as social media outlets. The stream lets users scroll through content from the most recent to the oldest to check for updates. Many feed pages allow users to customize the content they see, such as from sources they follow, topics they enjoy, or other sorting means. The pages may be simple in design and show just text or links. Some may be dynamic and show video and other media.

Flyers (Print)

Flyers help advertise events, products, or services. They combine text, images, charts, graphs, and other elements to give the most important details about the topic. Similar to other page designs, because of their vast reach and purposes, you can use many original designs for flyers, as long as the focus is always on clarity and comprehension for the viewer.

Home Page (Online)

The home page is the first page a visitor sees when they click on the main link to your website, and it contains navigation to other important pages within the site. The home page usually contains a search field or bar to help visitors find the exact content they’re looking for on your site.

The first page of your site may include information about your latest products, sales, or most recent updates. It also features your company slogan and logo. For sites with user logins, the home page may prompt users to register or sign in to access more content.

Landing Page (Online)

You can use a landing page as part of another website or as a single-page website of its own. The main purpose of a landing page is to present content with a goal in mind. For example, a company trying to get people to sign up for an event may direct visitors to a landing page with date and time details, benefits, and the option to register. Because of their wide range of uses, the design options for landing pages are seemingly endless.

Portfolio or Services Page (Online)

Portfolio pages display creative content, often visual, such as photographs, videos, art, or articles. They’re popular on personal websites for artists and photographers. Portfolios also work for websites for organizations like art galleries or service-based businesses. The page design for a portfolio depends on the individual or industry represented by the website. Some are simple and others are highly artistic.

Services pages may use a more professional design and include more text and images to describe the services a company offers. They give customers all the information they need before making a purchase or calling the company for a service quote.

Product Page (Online)

Product pages give all necessary information about an item for sale online. They list specifics like the height, weight, colors, and availability of each item. Other functions include the ability to choose the quantity, rate the item, leave a review, or add the product to a cart or wish list. Product pages often follow a template to ensure they include all the right images, information, and functionality.

Registration Page (Online)

The registration page is the location where people can sign up to access content locked behind a login. They’re also useful for lead collection, contest entries, surveys, and other purposes where the company collects information from respondents. Registration pages allow for data input, such as names, phone numbers, email addresses, and passwords. Because of their specialized purpose, many registration pages use text, buttons, and input boxes in a minimalistic layout to help visitors focus on the conversion task.

Search Page (Online)

A search page displays search results for a specific site. There are many options for variety in the display, depending on what type of content users can view in the search. Simple designs may show just a link to relevant content. More advanced designs may show previews of page content, images, videos, or other dynamic content. Many also leave the search bar and original query visible on the results page to allow users to see if they typed in the correct term or to make a secondary, more refined search.

How Do I Design a Page Layout?

Use these steps to learn how to design a page layout:

1. Brainstorm and Research

When creating a page design, first think about what you want the page to achieve. What’s the most important thing you want people to know or do when they visit or see the page, and how can you convey that information? To get ideas, you may research other webpages or designs online. Do this by looking at both templates and fully formed websites. Consider sites in your niche and in other industries.

Take notes about the colors, text, and other features you like. You may combine elements from multiple sources to work best on your page layout. It’s also important to remember the user’s journey on your page. What’s going to draw their attention? Why are they looking at your page in the first place? These questions can help you decide what’s important and what might work best for your design.

2. Create a Style Tile

A style tile is a mockup, or a sample sheet, that defines some elements you intend to use in your page design. It takes the information you collected during your research and turns it into actionable choices and a design guide. Elements to include on your style tile are:

• Brand-related visuals
• Buttons
• Color palettes
• Headers
• Icons
• Logos
• Typefaces
• Words and phrases, like slogans

3. Create a Wireframe

A wireframe design also goes by the names “page schematic” or “screen blueprint.” It’s how the elements you collected from brainstorming should appear and connect on the finished page. The wireframe rarely includes items from the style tile, like colors and typography, because the focus is on the functionality of the page and content. Wireframes can be static sketches or drawings.

For digital designs, wireframes can take the shape of interactive collages. These show you how the site should function when it’s live, with working buttons, links, and navigation. Either option lets you understand how things may work and look when the page goes live. These rough drafts allow you to make changes and try different layouts and design options before you start official work on the project.

4. Start the Design

Once you’ve done all the planning and you know what you want from your design, you can get to work. During design, you place images, text, and other content to achieve the design from the wireframe, using the elements from the style tile. As you’re building, if you find certain strategies from the wireframe don’t work or items from the style tile don’t look right, you can make changes. Those documents are just guides. The actual design process may highlight things that clash or work better together. It’s helpful and expected to make changes when you notice them.

5. Review the Design

When you’ve finished the design, give it a review. Check the written content for spelling and grammar mistakes. Can you read the fonts? Is the focal point of the page clear? For interactive pages, do the links, navigation, and other similar elements function properly? Consider asking a colleague or friend to review the design before it goes public. Consider the services of a copyeditor or a tester for interactive sites. If you work with CopyPress for your written content or custom designs, they go through a rigorous editing and quality assurance process to make sure delivery is top quality.

6. Publish the Design

Depending on the type of page design you’re doing, publication may differ. For print pages, publishing entails printing out your finished hard copies, potential assembly for things like magazines, and distribution to retailers or subscribers. For online pages, publishing includes setting each page to be “live” online, meaning anyone searching the internet can find it. With print designs, once you’ve published your pages, they’re complete unless you make changes and go through the publishing process again. For online pages, you can unpublish one at any time to make changes and then republish it when you’re finished.

7 Page Design Best Practices and Tips

Use these tips to help create your page designs:

1. Create a Mood Board

A mood board is a collage of text and images that helps you better understand a concept or brand, and they typically have an informal design without hierarchy or organization. When you look at the mood board as a whole, you can see themes and patterns among the individual elements. Creating a mood board while brainstorming can help you communicate the important values and elements of a brand visually.

2. Create a Living Style Guide

If you’re working with pages across an entire site, keep them consistent. A living style guide can help. A style guide is a set of guidelines or rules for creating a written or visual piece of work. Writers use them to create cohesive brand content across a publication, but designers also use them to create unified websites. Consider making the document accessible and easy to update for the entire design team.

Include things like the correct font names for the project, hex colors, content length, page templates, and any other information necessary for consistency. This helps anyone creating new pages or updating existing ones to follow the established rules.

3. Use a Grid

When designing unique elements on your page, use grids, grid lines, or a rule to create balance. This helps you learn the distance between elements on the page. Snap guides in programs like Adobe Photoshop can help you make sure the elements are mathematically and accurately aligned. Using grid tools can help create a sense of order on the page.

4. Choose One Focal Point

If you’re looking to create balanced pages, having a single focal point around which to place other content can help. The primary focus is often the largest or brightest element on the page, and it lets you orient other images, text, and objects to align them just right.

5. Use the Rule of Thirds

The rule of thirds, also called the golden ratio, states that dividing the page into thirds vertically and horizontally and noting where the lines cross provides the natural focal points for a page. If you align your key elements to these points, you can create a pleasing visual for your audience. This may work more naturally than clustering all the important information in the center of the page.

6. Rely on White Space

Using too much of the space on a page makes for a cluttered design. Take advantage of white space between or among the other elements. Ways to do this include enlarging the margins and gutters for the page. You can also add additional spaces between headers and paragraphs or padding around images to create more white space.

7. Design for a Scanning Pattern

There are two main eye-scanning patterns that people use when looking at a page: the F-shape and the Z-shape, both named for how the eyes move across the page to review information. Those who scan in the F-shape show preference to content on the left of the page, while the Z-shape helps viewers look across the entire design. You can place your elements to encourage Z-shape scanning. Include two anchor elements on both the left and right sides of the page. Ways to encourage this type of scanning include:

• Adding the most important information in your first two paragraphs
• Using a heading and subheadings
• Bolding important words or phrases
• Using bulleted and numbered lists

7 Page Design Layouts

While there are many page designs to choose from, some popular choices include:

1. Big Type Layout

Image via DeviantArt by shojikoto

The big type layout uses text and typography as the focal point of the design. It’s popular in magazine page design to focus on the piece title. It’s also popular in advertising to draw attention to the brand name or a product word or phrase.

2. Copy-Heavy Layout

Image via HubSpot

The copy or text dominates copy-heavy layout design. It may have headlines and some complementary images, but the primary focus is the written word. This type is popular for articles, blog pages, newspapers, and brochures.

3. Frame Layout

Image via Graphic Design Institute

Frame layout designs use shapes to frame other content. The balance of lines, shapes, and white or negative space put the visual focus in one area.

4. Mondrian Layout

Image via Behance

The Mondrian layout uses square and rectangle shapes to show an ordered collage or overlay that takes images, pieces of images, and text and aligns them together.

5. Multi-Panel Layout

Image via Graphic Design Institute

The multi-panel layout uses both large and small square and rectangle shapes, separated with lines, and arranged in neat rows or columns.

6. Picture Window Layout

Image via Smashing Magazine

The picture window layout is vertical, with the principal focus on a large image or illustration that dominates the page. It may include headlines and copy above or below the image. This style is popular for movie posters and album covers.

7. Silhouette Layout

Image via Behance

The silhouette layout uses the outline of a shape as the focal point of the design. The highlights and shadows offset the image from the other elements on the page.

Page Design Templates

There are many places across the internet where you can find page design templates. Consider sources such as:

• 50 Landing Page Templates For All Websites by CopyPress
• Free Templates by Canva
• 9000+ Free Website Templates by nicepage
• Free Graphic Design Templates for Every Need by Visme
• Free Graphic Design Templates by Crello

You have about 50 milliseconds to make a first impression with your page. Having a well-planned design can help you make the most of that time. Use these tips and tools to help capture your audience’s attention.

CopyPress

November 5, 2021