In this section we’ll cover how to create page layouts that are thoughtfully constructed and engage your users. You can think of approaching page layouts like other types of writing: who is your audience and how can you connect with them through your content?
You can also reference a copy of the presentation from our page layouts workshop or view a recording of the page layouts workshop.
Why am I doing this?
Creating effective page layouts is the essence of how you communicate important information to your users and will determine whether you’re able to accomplish your website goals or not. To do this, it’s important to think carefully about what you want to convey to your users and what information they are looking for.
What does this have to do with the overall content strategy process?
Effective page layouts are impossible without first developing clear website goals, understanding your users, reviewing your content, and closely examining your website structure. These prior steps in the content strategy process provide a crucial foundation for crafting pages that resonate with your users and are logically connected to the other content on your website. Together, the goal is to provide a seamless experience for your users that allows them to navigate your website with ease and find the content they need.
What steps should I take to create effective page layouts?
Page layouts encompass the decisions you make about what content to include on particular pages, how that content is organized within the page, and how you present that content. The following sections cover these different aspects and stages of creating page layouts.
This may sound obvious, but it is crucial for every page to have a clear intent and goal. This intent will guide everything else you do to create the page layout from deciding which content to use, how to organize it, and how to present it. You should use the following questions to help guide your thinking about the intent of the page:
- What do I hope to convey to my users with this page?
- What information do I want my users to understand?
- What feelings or emotions do I want my users to experience?
- What actions do I want my users to take?
- What do I want my users to do after viewing this page?
- Why might my users be coming to this page?
- What information do my users want to get out of this page?
These questions should help you hone in on a specific intent for your page. It’s important not to try to do too much with one page and to maintain a logical progression. If you struggle with this aspect, reference the understanding your users exercises and think about how your users might approach this page.
Once you understand the intent of the page you’re working on, you can start to think about which content you’ll include on the page and how that content will be organized. You can start by creating an outline based on the page intent.
When putting together your outline, think about the most important pieces of information and deconstruct how you can use your content to focus on the page’s intent. Consider how you want your users to progress from one piece of content to the next as they scan the page.
For certain pages, you might want to develop a narrative flow. If you’re hoping to convince prospective students to apply to your program, you’ll want to set up a story that draws them in and allows them to see themselves in your program. What experiences will they have? What sets your program apart? These are all based on the intent of the page.
For other pages, you might be trying to convey detailed information, and your page’s flow should reflect that. While it’s always good to try to cut down on overwhelming walls of text, sometimes you really do have a lot to say! In these instances, you want to make it easy for users to scan by using headings appropriately, breaking up large paragraphs into smaller, more digestible paragraphs, and adding navigational aids like anchor links.
Selecting blocks and putting the page together
For WordPress at Georgetown websites, once you have a general outline of your page, you can start selecting blocks. The blocks on your page should be selected based on how they help convey the intent of the page (sensing a theme?). You can explore our Block Catalog for inspiration and guidance on how to use particular blocks.
For example, if you want to convey particular emotions you might consider featuring images on your page through the image block, media and text block, or image overlay card deck. It’s important to select high quality images that fit with the intent of the page, and you can reference our where to get images documentation for further assistance.
On the other hand, if one of the goals of your page is to get students to apply to a program or request more information, you’ll want to include a “call to action” on the page. You can do this using blocks such as the media and text block, the call to action card deck, or a callout.
Perhaps you want to highlight the accomplishments of your department or the experiences of people in your department. This could be done through the stats block, the profile block, the profile card deck, the quote block, or a news block.
General tips and best practices
These tips can be integrated into the process described above to help you get the most out of your page layouts.
- Keep your intent in mind. The page layout should serve the goal of the page and should be tightly focused around the questions mentioned above. Always refer back to these questions and think about your users’ needs.
- When in doubt, keep it simple. Pages that try to convey too much information can be overwhelming for users. Do your best to limit your calls to action to one or two per page so it’s clear what the purpose of the page is.
- Make your pages easily scannable. Use headings, lists, and shorter paragraphs to break up long pages. Website users are used to scrolling, but you want to make sure they can easily pick up on information as they scroll.
- Create visual balance on your pages. Try to create symmetry on your pages, which will give them a sense of balance. For example, if you have multiple image or media and text blocks, you can alternate their alignment (left vs right) so they’re not concentrated on one side of the page.
- Get familiar with the available blocks. Becoming more comfortable with the different block options available will help you decide which blocks make most sense for articulating a particular intent. Feel free to email firstname.lastname@example.org if you’re having trouble deciding or don’t see a block that will help you accomplish your particular page goals.
- Maintain consistency across pages. Having standardized and consistent layouts will help users feel more comfortable navigating your website. This principle also applies to language: you should use consistent language across pages such as when creating calls to action (i.e. “Apply Now”) or when describing programs.
- Validate your page layouts. To make sure the narrative and structure of the page make sense, it’s helpful to get feedback. You can do this through exercises outlined in our understanding your users documentation, by talking with colleagues, or looking at your Google Analytics within the context of your broader site goals.
Resources for further reading
Some of the tips in these resources will apply more than others based on the level of control you have over the design and layout of your website, but many are relevant and useful.
- 13 Website Design Best Practices for 2020 – Quicksprout
- Web page layout: website anatomy – Webflow
- Organizing the Page: Layout of Page Elements – Designing Interfaces