DIY WordPress Website Design Made Easy

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 total mess of a website.

Let’s create something beautiful instead.

Designing a website…

is just one piece to successfully “creating” a website (the other parts being planning and promotion). I don’t expect you to become a proper web designer, but if you’re going to be successful online it’s one of your skills you MUST develop some competency in.

Design also takes a level of…

experience with these programs as well as an understanding of programming languages like CSS and HTML to be able to fully customize your website as you wish. With anything, you have a lot of skill you’re simply going to have to develop.

Design is also difficult because your design…

also needs to be competent and professional as a way to inspire trust in order to achieve your online goals (don’t be sketchy).

Lastly, design is difficult from a psychological perspective.

  • What do you want people to do when they visit your site?
  • How are they going to navigate your site?
  • What are they going to click on?
  • What things do you need to exclude and include?
  • How is your design going to accomplish all this?

This is why the advent of WordPress and “Themes” are so advantageous. They take care of a lot of the heavy lifting. It allows you to forgo any formal web design training. You just pick a theme and done, you have a properly designed site from a technical perspective, but you’ll still need to customize it.

In this post, I’m going to give you som essential DIY WordPress website design tips.


AN EASY-TO-UNDERSTAND WEBSITE DESIGN PLAN


The header is the top part of a website where the logo and menu is located.

It has a certain size in pixels (px). 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. If your website is 1000 pixels wide, then your header must be 1000 pixels wide to fit properly.

My favorite design has a small logo off to the left with the menu on the right. But some themes put the logo above the menu. Not a big deal.

The body

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 sidebar

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 ditch 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 an 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.


Homepage Design


Your homepage should have one of four styles of design:

  • Your blogroll – aka your latest posts.
  • The niche site layout – Email form at the top followed by your blog posts.
  • Visual menu – Best for stores that want to show multiple products
  • A sales page or tutorial – Make your homepage a sales page for a product or a page designed to capture emails. You could also make it a tutorial that goes after a competitive keyword.

Which one is best? Well if you’re building out a niche website on a topic go with the niche site layout:


Logo Design


Look, you can make a logo yourself – but unless your a designer it may be a good idea to hire a designer for that. You can find good logos for your website over at Fiverr for around $15-20 a pop. Fiverr is perfect for this stuff as logos for websites are fairly simple projects for most designers.

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. Next:

  • 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 for Website Creative Pro for example is simply the Bebas Nueve font in capital letters. Here is another example:

That above is the logo for a website that does well over 1 million visitors per month.

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.

If you are dead set on making your own logo then I would suggest you use CANVA LOGOS. They provide templates that you can easily customize with text and a logo. You can also check out Squarespace logo maker.

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.


CREATING 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.

Menu bar for your WordPress website

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.

Fine.

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? Confusing and unprofessional.

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

About Page and Contact Page

You need these pages, they can go either in the menu at the top menu or in the footer or both. Really up to you. People who put these items in the footer do so because they have more important things to link to in the main menu and the about page and contact page are secondary.

See also:

How to make your about page

How to make your contact page

Privacy Policy, Disclosures and Terms of Use

DON’T have links to your privacy policy or terms of use page in your menu bar at the top. These pages belong only in the footer and yes you need them.

See also:

How to make your legal pages 

Drop down menus should be used sparingly for your navigation bar. If every item in your navigation bar has an additional 3-4 item drop down menu you’re over doing it.


 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 simple contact form in the footer, and 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.

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.

If you’re going to be aggressive with Amazon, YOU NEED to put an affiliate disclaimer in your footer. The disclaimer should simply say you participate in the Amazon associates program and that you’re compensated by them.

MORE NAVIGATION OPTIONS

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.

Included are links to the necessary legal pages, copyright, and specific content pages like support, features and additional resources that would not make any sense to link to anywhere else BUT the footer.

SOCIAL MEDIA

The footer is an ideal spot for social media links as well, but most users ignore these links so they’re not that important

EMAIL OPT-IN FORM

The footer is also an ideal spot for collecting emails as the footer can act as a secondary navigation menu. So it makes sense to also offer a call to action. You would want to put the form right above the footer.

AMAZON ASSOCIATES DISCLAIMER

Amazon Associates is one of the most popular affiliate programs in the world. You need to disclosure your relationship if you’re going to be promoting Amazon.


Sidebar Design Advice


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. Some designs make use of a double sidebar, one on the left, one on the right, and content in the middle.

Do you NEED a sidebar?

NO.

Many websites choose to forego the sidebar on specific blog posts and pages as a way to increase user time on site. Other sites use a site bar on the /blog page, but when a user clicks to view a post, the sidebar goes away.

The only way to know which is best to test both out and see which one performs better on your website. With that said, most websites use a side bar, so what should go in them?

What to include in your sidebar:

EMAIL

When you start an email list, create a custom email opt-in box with a call to action like “yes, send me the course”. There should also be a free give-away for those who sign-up as well as some short copy explaining why anyone should care.

You would typically need to hire a designer to design and code for you something like this. There are also many free template you can use. We recommend though you launch an email list after your site is getting 300-400 visitors a day minimum as anything less than this you will not be justifying the costs associated with running an email list.

SHORT ABOUT ME BIO + 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.”

If could be something as simple as this about block over at Matthew Woodward’s blog:

It could also be something more casual too:

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.

THE MOST POPULAR CONTENT

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.

TOPICS

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. Example:

SOCIAL MEDIA PROFILES

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.

SIMPLE IS THE WAY TO GO

Less is more in web design. Add to your sidebar only what is needed and only what is appropriate to add to the user experience, increase conversions, and to help people successful navigate your site and all it has to offer.


WordPress Website Design Considerations


1) 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.

2) But not too cutting edge – Make a cool site but focus on user experience and usability first and foremost. That includes a solid navigation and a site that loads fast.

3) 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.

4) Test, test, test – 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.

5) 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).

6) 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


1) Spelling and English grammar mistakes.

We all do it, but try to minimize it as much as possible. Try to mix up your and you’re  in particular. That seems to annoy the grammar police the most

2) 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.

3) 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.

Use paragraphs too. Which means you should write 2-4 sentences then hit that space bar. It makes your content easier to read.

Lastly, don’t worry about having a single sentence be alone like this one, or how “use paragraphs” is alone – writing for the web is different.

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

4) 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.

5) 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.

6) 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.

7) 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.

8) 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.

9) 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.

10) 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.

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.

Also, use categories and tags. 1 category and 1-2 tags is fine. A

The category is the high level topic like “cars.”

You can use TAGS to mean something specific like “Ford” or “BMW.”

11) 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.

12) 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.

13) 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.

14) Multiple fonts.

Use a maximum of two fonts for your logo and 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.

15) Copying the design or of others.

Literally.

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.

16) 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.”

17) 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.

18) 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.

19) Having LOOOOONG pages that require users to scroll up and down.

Keep your pages as short as possible, if users have to scroll down your site a lot your page may be getting too large and slow.

20) 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.

21) 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.

22) 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.

 Add social Media Buttons


Your website will need social media buttons. Set them up to only show shares once a pace is share more than 10 times.

My favorite options are as follows:

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.

Clean Save: Social sharing with a bigger emphasis on email and printing your content out as a PDF. It also allowing people to add what you wrote to their Kindle. Email may not be social media, but it still has a viral aspect to it and people still use email as much as anything else.

Social Sharing By Danny: I have no idea who Danny is, but he created a great social sharing plug-in that is dead simple, focuses only on Twitter, Facebook and Google +, is uncomplicated and won’t slow down your website as it is not  resource heavy.

Social Warfare – The BEST social share plugin available. However, it has a yearly price tag.

People Want To Share Your Content IF…

  1. If it allows them to demonstrate the kind of person they are (virtue signaling).
  2. If it has practical value and will help people project how they want to be perceived.
  3. If it’s something contrarian (doing the opposite of what everyone else is doing).

An example of creating contrarian content is to simply take a belief that everyone considers as obvious and go against it. Like, “10 Reasons Why You Should Never Have a Job” – if the article is of a high quality and not just a juvenile rant people will share it.

Avoid Negative Social Engagement

People want to share your content (really), but social validation also plays a role in this. People are less inclined to share if your social media buttons display a low count or worse, 0  for all your social media platforms.

People look to others to see how they should act (fake outrage and mob mentality to be honest), they also take high social share counts as an indication of quality and 0 shares as an indication that your content can be safely ignored.

To avoid negative social engagement, that is, people not sharing your content because other people have no share your content…you can do a few things.

The lazy mans way is to simply turn off the number counter for your social media buttons so people can still share your content easily…they just won’t be influenced in any positive or negative way, but there is a better way and it takes a bit more work and time.

Simply start promoting your website via a social platform that makes sense for your website and become an expert at it.


Call To Action – You Get 5 Seconds


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 whyshould they invest their time with you?


One Page, One Goal


Each and every page on your site must have one main goal with a secondary goal to re-offer the main goal later. You can cram a lot into a web page, but unless something has a specific purpose and benefits the main goal of that specific web page – ditch it.

Most design goes like this – simple and ugly because you don’t know what you’re doing. Then it become overly complicated because you start testing things. Then finally you land on simple and elegant.

Try to just keep it simple from the beginning because simple works if your goal is to build an email list, sell products and services, and to have people share your website. Too many things to click on, to many options simply result in your traffic doing nothing because of a lack of a clear call to action.


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 (Convert Kit is the most popular mailing list provider). You collect emails via your site by having an optin box on various pages of your website.

The highest converting areas for an opt-in box are right under the header and navigation bar but above the content, in the upper left hand or right hand side of a web page, and the very bottom of a site as well.

When designing your site factor in the placement for an eventual opt-in box for an email list. You should start an email list once you have a website that is getting 500 visitors a day and is making enough money to justify the $20 or so monthly cost of Aweber. You should also have something to sell, or some goal with the email list.

Don’t simply start an email list because everyone says you should. Start an email list when your site is making a little bit of money and you are getting enough traffic daily to where people will sign up to your list regularly AND you have a purpose behind the list.


Use Two Fonts and Make Your Body Text Big


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.

That’s it. Two fonts.

Also make the fonts big so they are easy to read.


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.

KNOW A LITTLE COLOR THEORY

Color theory is the concept of knowing what colors go with what. Like dressing yourself in the morning, you pick colors that match or compliment one another. You need to do the same with website design.

These two resources will help get you started:

Color Theory for Designers

Color Schemes that work


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).

ADAPT AND CHANGE

The best sites adapt and change overtime. Don’t be afraid to change course if things are not working. Also don’t be afraid to quit and start over all together on an idea that may have seemed like a good idea but in actual practice produced little results.

Also for you less technical out there, check out Weebly as an alternative to WordPress. They are a website builder, allowing you to create any type of website you want at a low monthly cost similar to what your web hosting would be.

CONCLUSION

Designing a WordPress website takes a few days, maybe a bit longer when starting out. You have so many options but there are web design best practices for your WordPress blog or website. Do you have any of your own design tips to add? Let me know in the comments below. Thanks!