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 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 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 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.
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:
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.
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.
How to make your about page
How to make your contact page
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:
Provide a simple contact form in the footer, and email address or phone number, or provide a link to the contact page.
Is your site copyright? Of course it is, that needs to go in the footer.
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.
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?
Not at all. It’s totally fine to design your site so blog posts don’t have a sidebar. But if you do choose to include a sidebar, here are something to consider including:
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.
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.
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.
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
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.
Do you have an ebook or course for sale? Create a simple, clickable graphic for your product and put it in the sidebar.
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
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 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.
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.
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
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.
My favorite option is:
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.
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
- 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.
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?
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 start an email list once you’re at over 200 visitors a day. Test form placements to find out what converts best for your website.
Use Two Fonts
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. That’s all web designers stick too. One font style for your page headers and one font for the readable body text.
“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.
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).
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!