Once you’ve purchased your domain name and hosting and installed WordPress, it’s time to actually sit down and design your WordPress website.

So where do you start?

Here’s the process I use to figure out what the site should look like to attract the right audience and make it easy for them to do business.

Step #1: Start With Your Audience

Designing a house starts with understanding the people who will live in it. How many bedrooms and bathrooms are required, and what other amenities will they expect?

My husband and I went car shopping shortly after our youngest daughter was born. We needed a vehicle that could hold the entire family comfortably, which meant we required a 7-passenger vehicle. This wasn’t an option or a “wish for,” it was an absolute necessity.

The young, inexperienced salesman kept trying to focus our attention on a brand-new 5-passenger car. We told him explicitly that our non-negotiable, most-needed feature was seating for 7, and yet he kept dragging us back to something that would not possibly meet our needs.

The car he kept trying to show us wasn’t a bad design, but it sure wasn’t a good fit for us. I ended up walking out because he just wasn’t listening.

So before you start designing, get to know the audience you want to attract. What are their pain points in relation to your product or service, and how can you present the information they need in a way that’s appealing to them?

Think about who, what, when, and how.

What

Think about your goals, and what kind of information you need to present to your readers in order to make them happen.

Will you sell products? Offer a service? What will you need to tell your readers that will help them to get to know you and want to buy from you? Design plays a big role in how many people hit that Buy Now button.

When

If you’re an author, think about the sequence of events that needs to happen before you sell a book. (Besides the pesky part about writing it, that is.) Just as your book plot revolves around some version of the hero’s journey, your readers embark on a buyer’s journey. What does that look like?

No matter what business you’re in, think about your buyer’s journey. What are the steps he goes through from identifying his initial problem to buying your solution?

If you’re offering a course, what are the steps in that buyer’s journey where you gain your reader’s interest in learning more about the topic?

If you’re selling outdoor clothing, do you choose the month of August to suddenly start promoting bathing suits? (Well, maybe if you’re in Australia. . .)

How

Just as your site needs to appeal visually to your intended audience, so does your writing voice, and the way you communicate shared values. You certainly wouldn’t promote that My Little Pony birthday party swag with a lot of expletives (or any!), but you might use a bit of salty language on the biker site.

Your writing style will be very different on a website about Jane Austen’s life and writing than it will on a site about growing tomatoes.

Once you understand the who, what, when, and how, you’re ready to put that knowledge to work in your WordPress website design.

Step #2: Understand the Anatomy of a Web Page

Before you get started with your actual design, familiarize yourself with web page anatomy — those elements that are common to most web pages (and why).

Even though you probably know intuitively how a web page is put together, because you use the web, the article will further familiarize you with the header, menu, sidebar, footer, content area, and footer.

Read Anatomy of a Web Page, and then come back here.

Start Your Design with the Basic Pages

There are some essential pages that every website needs, with very few exceptions.

Front Page

Your front page, or homepage,

should welcome new visitors and make them feel comfortable in your space, just as your entryway and front door do for people who visit your home.

There should be one focal point to draw the eye, with two or three colors that carry throughout to provide a sense of cohesiveness and unity.

About

The About page of a website is usually the second-most visited page after the homepage. If you’re a blogger, freelancer, or solopreneur, it can also be one of the hardest pages to write, because it’s actually very difficult to write about yourself.

Although readers visit your About page to learn more about the person or team behind the business, what they really want to know is, what’s in it for them. Why should they do business with you?

Readers expect to see a page titled About, About Me, or About Us. This is not the place to get cute with an original name for the page!

Contact Information

Often this is a page that includes a contact form, but it’s also common to see contact information in the sidebar or footer of every page. It needs to be easy for visitors to find.

How to Work With You or Buy From You

Money doesn’t need to change hands for visitors to look for this information on your site. If the site is for a not-for-profit group, this might take the form of letting readers know how to donate, or volunteer.

If you sell physical products, you’ll display what you’re selling and provide links to purchase it.

If you sell courses, or consulting, you’ll show readers what you’re offering and make it easy to click that Buy button. Where an e-commerce site will show product pictures and descriptions, you’ll provide a portfolio or samples of your work.

Blog

While a blog isn’t a requirement of every site, there are advantages to having one. Among other things, having (and regularly adding to) a blog lets search engines know your site is actively maintained, and gives you more chances to be found.

If you decide to blog, you should call it that — Blog — and not something cutesy.

These pages will form the backbone of your site design.

Step #3: Choose Your WordPress Theme with Design in Mind

When choosing your theme, keep in mind what you’ve uncovered about your audience who, what, when, and how, and the basic pages you’ll feature.

It’s sort of a chicken-and-egg situation, in that you’ll choose a WordPress theme based on a site design you have in mind, and then the theme will inform further design choices.

Choose a Qualified Theme Designer

Know your theme designers. There are thousands of WordPress themes available, some free and some paid. You need to be sure your theme designer is knowledgeable and reputable.

Here’s a brief article on how to choose a reputable theme designer.

I work pretty exclusively with two major designers, StudioPress and Astra Themes (I used to also recommend Elegant Themes, but I’m no longer recommending page builders.

Standalone Theme or Framework?

There are two types of WordPress themes: standalone, and a theme framework plus child theme. This article describes the two types and this one talks specifically about child themes.

Theme Styles

What style of theme should you choose? It depends on your topic and your audience.

Here’s an article that describes the most common theme styles, and who should use them.

Narrow Down Your Theme Choices

Once you’ve decided on a theme style, you can choose a specific theme to work with.

If you’ve ever looked for a place to rent or a house to buy, you probably learned pretty quickly that real estate agents have a sort of code they use in ads. “Cozy” means small. “Bring your decorating skills” means you’ll have to do a lot inside the place before it looks decent. “Park like setting” indicates a big yard, and so on.

This article will help you decode the ways designers describe their themes.

Lots of people feel intimidated about the process of choosing a WordPress theme, but it shouldn’t be scary.

Here’s an overview look at how to choose a WordPress theme.

Although theme customization is possible, it’s a good idea to choose a theme that is close to the design you’re looking for out of the box. And make sure it’s mobile responsive!

Step #4: Apply Your Branding

Colors

Colors are a huge part of your site’s design. You should choose colors you like, that also resonate with your audience and your topic.

There’s a reason most banking sites use a dark blue. It’s because people trust blue, and the bank wants you to trust it. I mean, how seriously would you take a bank that used the branding colors I use on my website?

If you’re selling that My Little Pony birthday party swag, you’ll be all about pastels. If you’re creating a site for that Harley club, your colors will be much darker and stronger. 

Choose two or three (at most) colors to use consistently throughout your site.

Read: Choosing a color palette for your WordPress site.

Fonts

Fonts, or typefaces, are another important part of your WordPress website design.

If you look, you’ll notice that certain types of businesses choose similar fonts — banks, for example, favor fonts like Calibre or Open Sans. Retailers like Helvetica and Futura, while healthcare sites go for Droid Serif and Roboto. In fact, you can Google just about any industry to find out what fonts (and colors) they prefer to use.

When I first started WordPress Building Blocks, I wanted to convey the idea that it’s a place where people can learn how to use WordPress in a way that’s lighthearted and not at all intimidating.

For my headlines, I chose a font called Rock Salt. Here’s a sample.

It’s known as a handwriting font because it looks like someone took a marker and printed it by hand. Of course, I also added some color.

When I revamped the site a while back, I decided to drop the casual look in favor of a font that’s easier to read.

If readability is your goal, choose fonts from the serif or sans serif groupings. Save the handwriting, monospace, and display types for very occasional use.

Many themes today give you font choices. Choose two — one for headings and one for body copy. They should be complementary, and appeal to your audience.

Fonts to consider come in two main types — serif and sans serif. Serif fonts have decorative lines at the ends of the letters, sans serif fonts do not. In the examples below, the first is serif and the second is sans serif.

Readability studies are pretty evenly divided on whether serif or sans serif fonts are more readable. More important for readability is the size, contrast, spacing and the amount of white space around blocks of text.

If you look at the fonts I’m using on this page, you’ll see the headings use a sans serif font, and the body text uses a serif font. Some sites use serif fonts for both headings and body text, some use sans serif for both. There are no rules, although I prefer to use one serif font and one sans serif font for better contrast between headings and text.

Images

Sometimes branding includes a particular style you’ll apply to all your images, especially the prominent ones like those at the top of each blog post. While not imperative, if you do have a consistent image style it helps unify your site visually.

Magazines understand this — if you’re a reader of both Real Simple and Better Homes & Gardens, you can see a page out of context and instantly know which publication it’s from.

Step #5: Plan the Navigation

Navigation Is a critical part of site design. It should be easy to follow, and help visitors find what they’re looking for. 

Put things in the places people expect to find them. That’s why you should call your about page “About” and not anything else, and your contact page should say “Contact.” If people have to work to figure out your site, they’ll just leave.

Your navigation menu should be uncluttered and should highlight the most important pages in your site (About, Contact, etc.), and make it easy for the reader to find what they’re looking for – preferably in three keystrokes or fewer.

A dropdown menu adds a lot to your navigation without visually cluttering the main navigation bar, and almost all themes make them easy to create. Use them where you need to.

Read: How to Set Up Custom Navigation Menus in WordPress

Step #6: Make Sure Your Site Has the Functionality You Need

Does your site have all the functionality you need?

If you’re a coach or consultant, can readers book sessions with you easily, right there on your website?

If you’re an author, do you provide information about all your books, along with a buy button or links to where readers can purchase them?

There’s probably a WordPress plugin or widget that can handle missing functionality. Choosing plugins, and placing widgets appropriately, is part of the design process as well.

Read: Common WordPress Widgets and Where to Find Them

Ask Yourself These Questions

• What’s a visitor’s first impression?
• Is your business clear?
• Is your navigation logical and easy?
• Is your site easy to read?
• Is it easy for your readers to do business with you?

Remember, your site design exists to

• attract readers
• let them get to know you
• let them become familiar with your offers
• make it easy for them to buy from you

If your design doesn’t support those efforts and goals, you should rethink it.

More Articles about Design

• What Do You Need in a Winning Author Website?
• How to Plan and Carry Out a Site Redesign
• What Kind of Website Do You Really Need?
• How to Prepare Images for Your WordPress Site
• How to Easily Use the WordPress Color Customizer For the Look You Want
• 4 Easy Ways to Keep Visitors On Your Site
• How to Create Stunning Images Even if You Can’t Draw a Straight Line
• What Should I Put in My WordPress Sidebar?
• WordPress Site Structure: Don’t Let the House Fall Down

Want to see some examples of beautifully designed WordPress sites?

• Engineer Your Copy, a freelance writer’s site designed by yours truly
• The Walt Disney Company
• Portfolio of designs using StudioPress themes