DIY WordPress Website Design Tutorial

Home » Blog » Tutorials » DIY WordPress Website Design Tutorial

This guide will help you properly design your WordPress website. With various page builders and themes that allow for drag and drop design, it’s possible for you to create a really bad website, or something excellent.

Your overall WordPress website design matters because design enhances content. It should help provide a good user experience, be easy to navigate as well as be responsive on multiple devices. So if your audience is on their phone or laptop, your website will look great.

Design is difficult from a psychological perspective.

Design is not simply about pretty colors and pictures. Your design needs to be crafted with intention and thought with regards to how someone will navigate the website as well as the specific goal for each page.

All pages on your website need to have one clear goal and your design should help in meeting this objective. The most common objectives are getting people to subscribe to an email list, buy a low price product or convert visitors with affiliate marketing or display ads.

You know you have the right mix of content people are looking for and a solid design when you’re time on site (via your analytics) is high and you’re converting visitors into whatever pre-defined user journey you have created.

The best WordPress website layout

All websites come with the same specific sections that need to be designed and each section of your website comes with their own best practices you should follow. This is not to say you can’t break a few rules here and there, but you first need to understand what you’re doing before you innovate.

A classic layout. Design trends today forego the sidebar.

Header section

The header is the top part of a website where the logo and menu is located. It has a certain size in pixels. Pixels are the unit you use to describe the sizes of elements within a web page. Your overall site dimension will directly limit your website header width.

What makes an effective header is an easy to use menu and logo. Typically you’re going to want 4 to 6 menu items max. Anymore than that gets confusing and overwhelming. Also consider using drop down menus if your website becomes large and comprehensive.

As for your logo, small and simple is the way to go. It should also link to the homepage when clicked on.

The body is the main content area

The body is the main content area where you will be publishing your written content and any additional media you wish to embed into your content like a YouTube video, pictures or a podcast.

The body of each page of your website has a different goal. For example, a good layout for the homepage is to make it into a visual menu where people can navigate to your most helpful products, blog posts or guides you have.

The sidebar – a dying design option

The sidebar is the content that is off to the left or right and serves as space to make your website more interactive by linking to any products or services, popular posts, an email opt-in form and and social media links and proof.

The current trend is to forego the sidebar all together. Ideally, you would want a side bar when a user visits your website on their laptop, but then not show the sidebar when they access the website on a mobile device.

To keep the sidebar or not is up to you. If you do keep it don’t over do it. Consider having services, products, popular posts, email opt-in forms or a display advertisement. Pick a few of these but not all of them.

The footer

The footer is the bottom of the website. It’s where additional links go. In particular your legal pages, a contact page and a link to a sitemap as well as any copyright. You should also include any disclaimers as appropriate.

The footer is best used as a secondary menu for legal pages and less important links and the copyright of your website. You need to create a footer as your website will look strange without it.

How to design your homepage in WordPress.

Your homepage can be designed in a variety of different ways depending on the topic and goal of the homepage. For most WordPress bloggers, the most effective layout is to make your homepage into a sort of visual menu for your website.

A visual menu should start off with a clear call to action at the top of the website. Direct users to subscribe to your website or to go to a piece of content. Then you want to layout your specific blog posts ore any specific free guides you have created that are very helpful.

A classic, tried and tested homepage design.

This is a great layout because the clear call to action defines what the website is about and has a call to action to get visitors to subscribe to the website. Then it introduces various content categories to allow visitors to easily explore the website.

Logo Design

Logos can be made yourself using tools like LogoMakr.com, Canva or by hiring a designer over on Fiverr.

If you’re going to purchase a logo, take some time and think about what exactly you want so you can communicate your design to a designer effectively. Find logo’s that you like for reference to help the designer craft a logo that reflects your brand. Also we suggest the followig:

  • Look at there portfolio, what is their style and quality? 
  • Where is the designer located and how will you communicate with them?
  • What is the time frame for completion?

Logos do not need to be complicated. The logo I Will Teach You to be Rich (a muti-million dollar education company) is very simple:

Is it complicated? No. It’s two fonts and all text. You could totally make the above logo. Simple is the way to go with logos.

Remember: Large logo images are stupid. They may look beautiful, but they take up too much real estate and take too long to load. Slowing down your websites performance.  Try to keep your logo image small in terms of the space it takes up.

The best logos are memorable, durable (they stand the test of time), still look good with or without color, and look good regardless of size.

Create a menu for your website

The menu bar on a WordPress website is where your links to your sub sections go. Think “contact us” or “about us” and “resources” and what not all go in the menu bar.  Most themes come with two menus. One for the navigation at the top, the second for the footer.

The navigation bar should be kept as simple as possible with only need to know information. That means you have 4-5 items in your menu. You can also incorporate a drop down menu in WordPress by simply going into appearance >> menus:

Keep navigation items logical.  No cute or clever titles – It turns visitors away and shows you’re unprofessional. One site during a review I noticed the menu bar had common stuff like you would expect: blog, about, toolbox etc.

But then they had random menu items like “Dusty Shelf”  and “7EShow”.  Dusty shelf was for a bunch of links for career building resources and 7EShow was a link to a not-yet-released Podcast. What? Just awful, confusing and unprofessional.

Just call it “podcast” or “audio” and not some random name that only means something to you the creator. Same with the title “dusty shelf.”

Essential pages for your WordPress website

Once you have your website setup with Bluehost or any web host of your choice you will now have to design a few important pages. What every website needs is the following:

  • About page
  • Contact page
  • Legal pages

About page

The about page should be located at /about on your website. It should explain what the website is about, the value you’re going to get, any story telling you can leverage as the founder of why the website exists, how best to use the website and finally a call to action to do something.

One of the most surprising call to actions for the about page is to use an email opt-in form and to start collecting emails.

For more, checkout our guide on how to make your about page

Contact page

You website will also need a dedicated contact page. On this page you should have a quick paragraph welcoming people and thanking them for the interest in the website. Set the terms right away about how you wish to be contacted.

For example, you could say “we reply to emails within 24-48 hours, any questions that are answered on our FAQ page will be ignored.” The you could link to a dedicated FAQ page you created.

Last, if you’re a business make sure to put down your phone number, physical address and a map of where your business is located. Social media links are optional but are appropriate to link to if people can reach you by Facebook, Instagram etc.

Last, having a from is optional be we strongly suggest it. Forms look great and make it easy for people to get in touch with questions as well as partnership opportunities. Just make sure to add some type of captcha to prevent spam.

For more, read our guide on how to make your contact page

Privacy Policy, Disclosures and Terms of Use

Your legal pages are not important on a brand new website, but once you start to get 500-1000 visitors a day, are making money from your website, engaging in email marketing, affiliate marketing and running paid ads you’ll want to setup these legal pages.

Your privacy policy page exists to discus the privacy of your website and how you handle user information. Disclosures are letting people know any conflicts of interest that many otherwise not be apparent. Last, your terms of use page is what rules and behaviors people are agreeing to follow when on your website.

For more, checkout our guide on hw to create your legal pages.

 Design your website footer

The footer is the bottom section of your website that follows after the page content. It has a few purposes in web design.

First, it clearly frames the end of the web page for any of your visitors. It does this by being stylized with a different color from the body of the content. Typical colors are grey (as white transitions to grey naturally) and black.

Your website should made up of 3 core colors, so make sure your footer color is one of those core colors. Second, the footer is used as a link section to some very important pages.

What to include in your footer:

Here are some common links that should be found in your footer:

Contact

Provide a link to the contact page in the footer. If you’re an ecommerce website also consider adding in an email address or phone number, or provide a link to the contact page.

Legal pages

All websites need to provide a privacy policy and a terms  of use page at a minimum so visitors understand the relationship between themselves and the website they’re on.

Copyright

Is your site copyright? Of course it is, that needs to go in the footer. It does not need to be anything complicated, just say Copyright Name of Website. If you decide to include the current year make sure it’s up to date.

Any disclaimers?

Disclaimers are mean’t to make know information that is not obvious. If you have any vested interests or relationships that affect the relationship between visitors to your website and yourself, you need to make this clear via a disclaimer (again, don’t be sketchy). Consider making a page dedicated to disclaimers.

For example, as an Amazon Associate you need to disclose that you make money from qualified purchases on any page where you link to Amazon.

More navigation options, additional blog posts etc

Established websites tend to have an a diverse amount of content. The footer provides and excellent opportunity for visitors to navigate to other areas of your website.

You could break up your footer into columns and each column could link to various guides and blog posts on your website.

Social media

The footer is an ideal spot for social media links as well. A mistake beginners make is to put these in the main menu, but you want to keep people on your website so the footer is more effective. Please note that in general, these links will be ignored.

Email opt-in

Not exactly in the footer, but right above the footer is an ideal spot to include an email opt-in form for people to get on your list. The footer for whatever reason is one of the most effective spots to collect emails as people are at the bottom of your website.

The sidebar, a dying design choice

The sidebar with regards to a website is the content that is found on the left or right hand side of the core content of a website. In the past, they were much more useful but now that 50% or more of your traffic will be from mobile, the sidebar is a dying design choice.

Company info with a call to action is the only thing in the sidebar on this website.

In practice, sidebars are used mainly now as a spot to run display ads, have an email opt-in form or bio on a website. In general, you’re going to want to use a one column design.

If you do decide to include a sidebar, here are something to consider including:

Email form

An email opt-in form is an excellent option to place in the sidebar at the top. Have a clear call to action for why people should subscribe and it should convert visitors into email subscribers if your website has enough traffic day to day.

About me with your bio and credentials

If you’re a blogger or trying to run some sort of expert business, credentials help a lot. What I mean by credentials is simply websites you been published on, work experience or where you studied.

No need to over do it, but just anything relevant that adds to your credibility. Like, “hey I’m David, my tutorials have helped thousands of people build their WordPress websites.” A great example is Neil Patel:

His bio goes in depth on who he is and why he has the authority to write his blog. In the bio section he also has a call to action to book a call with his team. Which is how he gets leads to his NP Digital marketing business.

For an information blog, your bio can be more casual so don’t think it always needs to be over the top. A good example is DirtBikePlanet.com:

He’s not positioning himself as an expert, but as a “regular” guy who just loves dirt bikes. Consider doing the same for your website as it gives a more personal touch.

Latest content

The latest published content is also an appropriate sidebar item. It provides a site wide link to your newest content, helping it to get a boost from more powerful pages on your website.

Most popular, reader favorites

You can add the most popular content on your website either manually or using a WordPress plugin in called “top 10.” You simply install and activate the plugin then drag and drop it into your sidebar via your widget menu.

Categories on your website

As your site grows and develops it may become a sound idea to list out the different topics your content covers so visitors can navigate your site to find relevant and helpful information.

Social media profiles you want to grow

What social media platform are you trying to grow? Most websites link their FB page in the sidebar or small social icons that link to each social profile. I normally don’t include these links on my websites as from my experience people ignore them.

However, if you’re a travel vlogger/blogger like Drew Binsky who has 100,000+ FB page followers, then it’s a good idea to put that in the sidebar because it provides social proof.

Products

Do you have an ebook or course for sale? Create a simple, clickable graphic for your product and put it in the sidebar. Low priced products work best in the sidebar as more expensive courses require an email list.

Display advertising

If you’re looking to run display advertising, the sidebar is an excellent spot for a skyscraper style advertisement.

Simple is the way to go

While all of these are great options, keep it simple. Some websites that are quite aggressive with advertising may only need an email opt-in form and advertising in the sidebar. More traditional blogs may go for a bio with links to various categories.

Whatever you decide to do, keep it simple.

WordPress Website Design Considerations

When creating your website, blog or online store you need to think about the end user. Who is actually going to be visiting and using your website? How can you best craft a design that builds trust and matches their expectations?

Age of your users 

Who is your target audience? Go with a conservative design and a larger font for older users, a cutting edge for younger audiences. You may even want to leverage various plugins that enable users with disabilities to adjust their personal experience on your website.

Don’t ignore best practices

Make a modern, forward thinking website but focus on user experience and usability first and foremost. That includes a solid navigation and a site that loads fast.

Color 

Harsh colors push users away no matter how pretty the design may be. If you want to have a blog, always do black text on a white background. Also stay away from a design with multiple colors. Simplicity works.

Also, make sure your colors match the topic. A dating blog for women would probably make the most sense using pinks, reds and purples instead of orange and blue.

Test and adjust

Some designs and themes just work better for whatever reason. You discover this by installing analytics and tracking metrics like time on site, user bounce rate, and page views per visitor. 

Consider playing around with different designs and site layouts until you get the best results based on the traffic you are getting. Also, make small adjustments so you can track performance. If you make multiple changes at once, you won’t have any idea what change you made worked or hurt your website.

Use traditional navigation 

Don’t get clever with navigation. Use a horizontal menu with drop downs and have additional navigation menus on the left hand site preferably (again you need to test to discover what works best, left or right, for your web traffic).

Big headers are stupid 

On any website the area above the fold ( the part where you need to start scrolling down) is your most important real estate. Designers love to push their artistic design capabilities, but it’s usually not worth it and here’s why:

An over-sized theme not only takes up a lot of space, slows down the load speed of your site because it’s a big image (negatively affecting the user experience) it servers no purpose beyond looking pretty. Functionality and user experience always, always, ALWAYS trump “pretty”..

Web Design Best Practices for WordPress

There are many best practices for any type of WordPress website and blog. Some may seem common and basic, but that’s because you need to get the basics down before you can move onto the more advanced concepts.

Spelling Mistakes

Spelling mistakes are inevitable, but do your best to stay on top of your grammar and spelling. Consider using a proof reader as your website grows and develops. Also, after publishing your blog post read it on your phone. By switching the presentation up, you’ll more easily catch glaring errors.

Text that is too small to read.

Anything under 13 px is too small. Font sizes do influence your bounce rate. A font that is under 13 is difficult to read. People are more inclined to stay on your web page and read your content if it’s an appropriate size. So don’t go too small.

Text that is not broken up is hard to read.

Writing for the web is not the same as writing for school. Use different sizes for headers and sub headers to organize content. Your H2 font size should be bigger than your H3.

Next, actually use your H2,H3 and H4 tags correctly. H1 is the title of the web page, H2 is a section of the page, H3 is a sub section of H2. H4 is a sub section of H3. It makes your content scannable.

Next, breakup your content into small, 2 or 3 sentence paragraphs. Again, writing for the web is not like writing a paper for English class. You want to have an effective use of white space so your content is enjoyable to read.

Last, if you are doing research for your blog post do consider adding referenced sources at the bottom of the blog post.

Don’t have tiny clickable links.

Hyperlinks should to grab attention with the intention to be clicked on. Unless we are talking about links in your footer, don’t have tiny clickable links.

Blue is the most common hyperlink color

Red and orange though seem to get the best click rate from my experience. Perhaps because blue is so common, people have “tuned it out” when looking at a web page.

Try to not use blue, but also use a color that matches the colors of your website.

Avoid cluttered web pages.

Allow for more white space. This is not to say you need to use a minimalist design, a busy design can often increase page view time but it should not be a mess.

White space is like an arrow that points your visitors eyes to what is important. Space things out and organize your website by having as few things as possible.

Don’t use too much text and don’t use too many images.

Find the right balance to make it readable. You don’t want a wall of text (go to point 3, break it up with headers and sub headers), but you also need a bit of content to go with any images you decide to add.

One page one goal

One goal, one page.  Even complicated design where you show a lot of content still have one goal. To get you to click and read.

Your goal with each page you make should be to get people to share your content, subscribe, buy or read something.

Compress your images

Use CompressNow.com and compress those images. You want your page size to be as small as possible so it loads quickly.

Your content is not organized logically.

People expect organization. They expect a search bar, a sitemap,  an archive page and breadcrumbs to tell them where they are. They also expect logical, helpful categories

People don’t always come through the front door (your homepage), sometimes they come in through a window or through the back (your other pages). They need need logical organization to tell them where they are.

You need to figure this out before you create your website, how each piece of content is going to fit in and where.

Confusing navigation.

Make it clear, logical and with straight forward language. Don’t attempt to be cute, clever or cool. Call you about page “about” and not “who’s this cool dude” or something silly like that.

Out dated screen resolutions

Web pages are responsive and wider today than in the past. Responsive means the page automatically adjusts to the screen size of your device You don’t want your resolution for your website to be to big or too small. 1000px width is the new norm and even that is now small.

Amateurish logo.

Keep it simple if you don’t know how to design. As stated earlier use Canva Logos or hire a logo designer from Fiverr.

Multiple fonts.

Use a maximum of two fonts for your logo and titles and another font choice for the content of your website. It starts to look odd if you’re using multiple font styles. Again, one font should be fore your titles, the other for the body. Your menu should use either the body or the title font.

Checkout Font Pair. This website will tell you what fonts match. You should have one font for your headers and another font for your body and menu.

Copying the design or of others.

Don’t copy popular websites! Have your own content and your own design. Looking like others in your market is always a bad idea. Differentiate yourself, otherwise you’re just an echo.

It’s fine to take design elements you like but make your own website with your own style.

Your design is not appropriate for your market.

A very modern font for example is not ideal for something conservative like a website for a dental office or law firm. Your design has to fit the essence of what your website is about. An extreme example would be a woman’s fashion website or a men’s interest website. How would those two websites look?

You can already picture and example in your head. For the men’s site it would be black and red, for the woman’s fashion site it would be white and pastels. That is the “essence.”

Make your content scanable.

I already touched on this, but it deserves it’s own header. People who read will scan. If they like your website then they will read everything.

Not having a clear way to contact you.

People expect a contact page. People expect some way to email you. You don’t have to make it easy for people to contact you. But you do need to at least provide a way for them to do so. So at a minimum put a link to the contact page in the footer.

Keep it Simple

Don’t get fancy with navigation and page design. Keep each page consistent to other pages on your website. That means the same style, structure and look on every single page. Otherwise you will confuse your visitors because your website is not logically organized.

Also, design your website to be simple and easy to use. Don’t have too many links, too many images, too many things that distract from the primary goal of the web page.

Keep it fast

Speed is important. How long it takes to load your site and browse it is important. Avoid needless add-ons such as excessive videos, social media widgets, over-sized pictures, script programs that add toolbars and chat boxes to your site etc unless they serve some specific purpose beyond looking cool.

Use Pictures

But only use pictures to demonstrate something. Never use pictures just for the sake of making something look pretty. Pictures slow down your website and should only be used to demonstrate something.

Use an Email List For Your Website

An email list is a list of emails you have access to and permission from to contact on a regular basis.

When designing your site factor in the placement for an eventual opt-in box for an email list. You should consider starting an email list once you’re at over 500 visitors a day. Test form placements to find out what converts best for your website.

Hyperlink Color

“Links” are short for hyperlinks. These are the items within a web page you can click on. The best color for your hyperlinks are a color that will stick out.

This depends on your website design. If your main colors are grey, white, and blue. Red not only adds much needed color to the site, it also increase the click through rate compared to the click through rate if the hyperlinks were blue (which would blend in).

You want you’re hyperlinks to stand out – but not so much they’re an eye sore, just enough to get your visitors attention.

For an interesting read on what the best font color should be check out Matt Woodwards’ case study.

 Add social Media Buttons

Adding social share buttons makes it easy for visitors to share your content. Shared content is a ranking signal to search engines too as well as allowing your website to reach a new audience else where.

AddThis: The best free option. The allow you to add social share buttons that float off to the right or within the blog post. Best of all, it loads on their server not yours.

With social share buttons this needs to be tested on a website by website basis. Some topics they work well, other topics people simply don’t share content. Last, focus on the main social platforms people use for your industry.

Use a Clear Call To Action

The call to action is that sentence you see on the homepage of various websites and blogs you visit.

You get 5 seconds for someone to like your website or not. Don’t assume it’s clear and obvious, have other people look at it and quickly tell you what they think it’s about within 5 seconds.

Also, have a clear headline that qualifies your traffic and your right people by greeting them with a benefit 

Great examples:

  • Unconventional strategies for life, work and adventure
  • Personal development for smart people
  • Lucid dreaming: Developing the art of conscious dream control
  • Live and work anywhere in the world
  • The best FREE way to manage your money

These are quite clear right? From these short descriptions you can evaluate whether or not if the site and its content are a match for your needs.

Remember:

People won’t stick around if they don’t understand what the site is about because otherwise they can’t connect with the unique selling point driving the purpose of the site. So if they can’t connect with the site why should they invest their time with you?

Keep Your Website Up To Date

Keep your website current and up-to-date. Not only in terms of design, but in terms of content. That means no references to the upcoming *Nsync concert, or links to your MySpace page.

If an event has passed, remove it from your website. If it’s no longer current like MySpace, remove it. Make sure to check your hyperlinks to other websites periodically as well. You don’t want broken links that send your visitors to a 404 or “page not found” page.

Keep your site up to date by publishing new content and staying relevant and visitors will keep coming back (return visitors are your primary audience).

DIY WordPress Design Conclusion

Designing a WordPress website is a skill that can take over year to properly develop simply because you have so many new things to learn. As you begin your website journey make sure to bookmark this page and refer to it when you have any roadblocks or issues with designing an effective, responsive website with WordPress.