Websites are incredibly versatile. You can use them to sell products and services, blog about your passion, represent your nonprofit, or even catalog your favorite memories and photos.
But no matter the purpose, it’s important that you understand the elements of website design, to ensure that you’re making the most of your WordPres site. There’s a ton we could dive into here, but let’s start with the basics.
1. Color Scheme
The color scheme for your website is the combination of colors you use throughout your design. This is important for several reasons:
- It sets the tone of your site. Different colors and color combinations are associated with different moods and feelings. For example, a site full of bright greens and yellows might say “fun” and “exciting” while one with calm blues and grays may communicate “professional” and “trustworthy.”
- It helps establish brand consistency and recognition. A consistent color scheme across your website, logo, social media profiles, packaging, etc. helps visitors know that they’re on your site the second they get there.
- It helps guide visitors through your site. Colors can be used to call attention to buttons, announcements, headlines, and more. When you use parts of your color scheme appropriately (a single color for all buttons and links, for example) you help people find what they’re looking for and take the actions you want them to take. See “Call to Action” below for more information.
It’s best to stick to two or three colors. Anything more than that can be confusing and overwhelming for site visitors. Remember — simple is often the best strategy! Learn more about the psychology of color.
2. Typography
Typography is the design of the text on your website. This includes the fonts you use, along with details like size and spacing. Without good typography, site visitors can’t easily read your content, which means they also may not purchase a product or service, subscribe to your newsletter, or follow you on social media. Here are some important things to consider:
- Size. Make sure that your fonts are large enough for everyone to read, including those with vision impairments.
- Font types. While decorative fonts can be fun and help set your brand apart, avoid using scripts or anything hard to read for large bodies of text. Save them for headers, instead, and use serif or sans serif fonts for paragraphs.
- Spacing. Make sure your words are legible with proper spacing between lines of text (leading) and the letters in each word (kerning).
- Consistency. Choose just a couple of fonts — perhaps one for headers and another for body text — and stick to those. Otherwise, your site may seem disconnected.
Want more info? Read How to Choose the Right Font for Your Website.
3. Page Structure
Page structure is how the content of your page is organized. Think through each page logically. How can you arrange content so it’s easy for site visitors to find and navigate? For example, you might put your most important information at the top of the page (also called “above the fold”) so people see it immediately.
You may find it helpful to map out your pages before building them so you can visualize their flow:
What’s great is that the Block Editor makes it easier than ever to restructure content until you find the perfect fit. Learn more about organizing your page layouts.
4. Taxonomy and Navigational Structure
The navigational structure of your website (sometimes called taxonomy) is the way in which your pages are organized across your site. While page structure deals with individual pages, taxonomy deals with the website as a whole.
The goal of your navigational structure should be to make it easy for visitors to find what they’re looking for. But a well-organized site is also important to help search engines understand how your pages relate to one another.
Here’s an example navigational structure:
- Homepage
- About
- Meet the Team
- Our Story
- Services
- Digital Consultations
- Interior Design
- Staging
- Portfolio
- Blog
- Contact
- About
Creating the proper site structure sets you up for success. You’ll want to focus on properly using WordPress categories and tags, creating an intuitive main navigation, and effectively using your site’s footer to guide visitors to more specific content.
5. Menu Design
The primary menu of your website typically lives at the top of every page, and serves to help people navigate through your pages and posts. Your menu may have several levels that reflect the navigational structure of your site. For example, you might have five pages listed in the primary menu, with several that drop down with further, nested pages.
You want your menu to be as simple as possible so that people aren’t overwhelmed by choices.
The WordPress.com navigation is a great model. The top level of the primary menu has just a few options, including the most important pages. But when you hover over one of those pages, a drop down appears with more choices, so visitors can quickly find more specific content.
Learn how to add helpful, well-designed WordPress navigation menus
6. Header
Your website header appears at the top of all the pages on your site, and typically includes your main menu, logo or sitename, and other important information. For example, you might also include store hours, a search bar, and a button that links to a signup page for your email newsletter.
Need a logo created? Our logo maker can help.
Like your menu, you’ll want to keep your header as simple as possible, so that it doesn’t take up too much valuable space on your pages. Include what your specific site visitors will find most helpful. For an eCommerce store, that might be a link to the shopping cart. For a blog, that might be social media icons. And for a membership site, that might be a link to log in to an account page.
Alongside their logo and main menu, Superdrug Health Clinics features a link to customer reviews, a phone number, a search bar, a button for online booking, and a link to their locations.
You can also make your header sticky, if you’d like, which means that it follows visitors down the page as they scroll. This can be especially helpful for sites with long pages, as it keeps important information front and center.
Get more tips on how to design an effective WordPress website header.
7. Footer
Your footer lives at the bottom of all of your website pages. It’s an excellent location for information you want people to find easily, but that’s not quite important enough to be at the top of every page.
Typically, footers include things like business hours, contact information, email signup forms, links to important pages, affiliation logos, copyright information, social media links, and login forms. While it can be tempting to pile a ton of information into your footer, be careful. Sometimes, if there’s too much for someone to weed through, they won’t bother looking at all.
Learn how to customize your WordPress footer.
8. Responsive Design
A responsive website is one that looks good on devices of all sizes, from desktops and laptops to tablets and phones. This ensures that every single visitor can use your website. For example, when you open a website on your home computer, then view it on your iPhone, you should see that it automatically adjusts the design to accommodate the taller, more narrow screen.
Every single WordPress.com theme is responsive, so if you’ve built your site on WordPress.com, you’re off to an excellent start. But you’ll still want to check your website on mobile devices — BrowserStack is an excellent tool — to ensure that images aren’t cut off, fonts are large enough, and buttons can be easily clicked. You may also want to create a separate, more simple version of your main menu just for phones.
Learn more about responsive design with WordPress.
9. Imagery and Iconography
Images and icons are a powerful way to visually represent your brand and message. They can grab attention, convey a point, illustrate a concept, or just keep things interesting. And whether you choose to use stock photos, hire a photographer, or take your own pictures, you’ll want to ensure that each image is high-quality and not blurry.
The downside of high-quality photographs is that they can slow down your site. But with a WordPress.com plugin-enabled plan, you can take advantage of Jetpack’s image CDN, which automatically optimizes your images, resizes them for mobile devices, and speeds up your site.
And what about icons? Icons are an effective, super fast way to convey concepts and add interest to your site. For example, you might use them to represent each of the services you offer, include a basket icon next to the shopping cart in your header, or link out to each of the social media accounts you have.
WordPress.com, for example, uses icons to represent web hosting features that users receive when they host with us.
Some themes come with a set of icons included. Or, with a WordPress.com plugin-enabled plan, you can use plugins like FontAwesome to add them to your site.
10. Parallax Effects
Parallax effects occur when background content (like a picture) moves at a different speed than the foreground content when someone scrolls through your page. This is a fun way to create depth and interest on your site. You can see some visual examples of this on WordPress.com’s Lodestar theme demo.
Want to add this effect to your site? If Lodestar doesn’t fit your needs, you’ll find a lot of themes and page builder plugins include parallax effects in their list of features.
11. Calls to Action
A call to action asks a visitor to take a specific step on your site. That step might be to make a purchase, sign up for an email newsletter, fill out a form, or call your phone number — the exact request will vary based on your website. Calls to action can take different forms, too. They might be a button, link, or pop-up, for example.
When creating a call to action, it’s best to be specific. Rather than have a button that just says “Download,” instead consider language like, “Download Your Baby Registry Checklist.” This helps people know exactly what they’re clicking and reminds them why they should click in the first place.
For example, WordPress.com’s Professional Email landing page has two specific calls to action: “Get Started” and “Start your free trial”.
It’s best to pepper calls to action throughout your content, too. Instead of just putting a button at the end of a long landing page, include it in the middle and maybe even in the sidebar. This helps convert people who may not read the entire page.
12. White Space
White space is the empty space around the elements on your page. This essentially gives your content “breathing room,” allowing each piece to stand on its own without being overwhelming. It also helps visitors more easily navigate your website.
Think of white space as providing a visual break for visitors. And white space doesn’t have to be white — since it’s empty space, it could be a background color or gradient as well.
Do you see the space around the heading, paragraph, and services list on WordPress.com’s Professional Email landing page? Even though the background is light blue, this is an excellent example of white space. It gives the content room to breathe, and separates it from the images above and below.
13. Banners and Hero Images
Banners and hero images take up the very top space on a page, just below your website’s header. Because it’s the first thing that site visitors see, it’s best to feature your most important content in this area.
If you’re a blogger, this might be a carousel of your most popular posts. If you’re an online store owner, it could be a current sale you want to feature. If you have a service-based business, it might be your tagline, along with a button to view or purchase your services.
WordPress.com’s Domain Search page uses this space to display an eye-catching animation, a selection of some popular domain extensions with sale pricing, and a domain search bar to help users find their perfect name.
14. Chatbots
A chatbot is a module on a website that uses artificial intelligence to simulate human conversation. With a chatbot, a site visitor can ask a question about products or services, or follow up on their order and receive an automated response. If they need further support, it can direct them to one of your team members.
This does an excellent job at reducing work for your customer service and sales teams while still providing visitors with top-quality help. You can add chatbots using a variety of free and premium WordPress plugins.
15. Web Textures
A web texture is typically an abstract design element that serves as an alternative to a solid background, but with a similar function. It adds interest to your pages and tries to replicate the feeling of touching something — grass, wood, or metal, for example.
In one of their banner images, OKdo uses a cardboard texture to convey the concept of recycling their products. This grabs attention, stands out from the rest of the page, and communicates a message all at once.
You can find great textures on stock photo websites, or even add them directly in the WordPress Media Library with Pexels.
16. Breadcrumbs
Breadcrumbs are a secondary form of navigation on a website, used to make it even easier for visitors to move through your content. It works similarly to a progress bar, showing the page that each person is currently on, along with the pages above it in your site’s hierarchy. Here’s an example:
Home → Services → Graphic Design Services → Logos
Breadcrumbs are especially beneficial if you have a lot of content on your site. Some themes have breadcrumb navigation built in, but if yours doesn’t, you can also use a plugin.
17. Author Boxes
An author box is a special section of a blog post that displays information about its author, like their name, email, bio, and photo. These can help put a face to your content, making your site even more relatable. They’re particularly great for blogs with multiple authors or that accept guest posts. Here is an example of an author box on the Jetpack blog.
Learn how to add an author box in the WordPress Editor.
18. Contact Forms
A contact form has fields that site visitors can use to submit information, like a name, email address, phone number, and comment. People can use it to reach out to you with questions, ideas, help requests, and more. A contact form is a critical part of any website, as it provides a line directly to you, and is often the contact method of choice for those who don’t want to pick up the phone or open their email inbox.
You can easily add a contact form to your website using the Form block in the WordPress Editor.
19. Schema Markup
Schema markup is a type of microdata that adds information to content to help search engines better understand it. It also displays that additional information in search engine results, helping your content stand out and making it more likely for people to click.
For example, an event that’s properly marked up will display extra information like date, time, and location. A recipe will show things like cook time, yield, nutritional information, and ingredients.
Schema markup for this WooCommerce extension, for instance, shows its star rating, reviews, and price.
The easiest way to add schema markup to your WordPress site is with a plugin. This takes the heavy lifting out of the process and is ideal for site owners who aren’t familiar with coding.
20. Title Tags and Meta Descriptions
Search engine optimization is the process of setting up your website so it’s more likely to show up in search engine results pages (SERPs). Title tags and meta descriptions are just two elements that contribute to proper SEO.
A title tag details the title of a page or post, and shows up as a clickable link in search engines. You’ll want your title tag to be attention-grabbing, so it stands out from other results, but also actionable, so people are motivated to click. You’ll also want to limit it to 60 characters or fewer.
A meta description appears beneath the title tag in search engine results. It’s typically a couple of sentences (160 characters or fewer) that describe the content on the page and entice people to click through to your site. This is how a typical title tag and meta description shows up in a Google search.
With a WordPress.com plugin-enabled plan, you can take advantage of Jetpack’s SEO tools, and customize the meta description for each individual page or post.
Build Upon Your Foundation
Now that you understand the basic elements of website design, build on top of that foundation! Take these concepts and utilize them to their full potential, pulling in your unique brand and vision.
Want some inspiration? Check out the WordPress design showcase.
You might also like: Seven Web Design Principles for Every Type of Site
Incredible Speed
In Review Signal’s 2021 independent test, WordPress.com was named the fastest WordPress host across all pricing tiers.
ABOUT THE AUTHOR
Go WordPress 