November 5, 2021 (Updated: May 4, 2023)
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.
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:
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:
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:
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.
There are a variety of pages and projects that benefit from page design, both on- and offline, including:
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 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.
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 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.
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:
The design for business cards is often clean and uncluttered, so the recipient can find and digest the contact information quickly.
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 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 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.
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.
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 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 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.
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.
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.
Use these steps to learn how to design a page layout:
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.
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:
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.
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.
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.
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.
Use these tips to help create your page designs:
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.
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.
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.
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.
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.
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.
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:
While there are many page designs to choose from, some popular choices include:
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.
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.
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.
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.
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.
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.
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.
There are many places across the internet where you can find page design templates. Consider sources such as:
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.
More from the author: