Your overall WordPress website design matters because design enhances content. DIY WordPress website design 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 classic blog post 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.
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.
Menu
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 it starts to gets confusing and overwhelming.
Also consider using drop down menus if you have a lot of topic to organize under one menu item or a mega menu if you have 7+ items to put under one menu item. Last, consider using a hamburger menu for mobile if you have more than 4 menu items.
Last, make sure your menu items are clear and specific. I did a UX review for a blog and 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.
Logo
As for your logo, small and simple is the way to go. It should also link to the homepage when clicked on. If possible with you design use a .svg image. A .svg is pure data and will look better and load more quickly.
Last, logos today are best kept simple and small. Don’t add in a lot of small text that can’t be read when the logo is added to your site and make sure it looks crisp, sharp and professional.
Main content (or 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.
Titles
Your titles are known as the “H1” tag within the main content. This is to signal to search engines and users what the content is about. Choose a large, heavy font for titles so they stand out.
Font size
Choose a readable body font at a reasonable size. You can use a site like FontPair.co to help choose one font for your headers and another one for the body. A readable font will help keep people on your website.
Pictures and video
Pictures and video are important to add to the main content. Only use pictures and video that add to the content and demonstrate what you’re writing about. Never include anything for decoration purposes.
H2 and H3 tags
Breakup the main body content into scannable sections with H2 and H3 title tags. People don’t read, they scan so make sure your content and website is scannable.
The sidebar (optional)
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 as likely 50% or more of your traffic will be on mobile. If you do keep it, simply put in a helpful content like related posts, categories, an email newsletter form and/or an author bio.
If you do decided not to use a sidebar make sure the padding is optimal for desktop. You don’t want your text to be a marathon to read from left to right.
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. Broadly speaking, there are three main ways to design your WordPress website homepage:
- Blogroll
- Visual Menu
- Influencer
The blogroll – Own the Yard
The blogroll is a classic layout for an information website. All you need to do is put your latest blog posts on the homepage in a masonry grid layout.
It’s an ideal layout for any website where you’re not trying to rank the homepage for a specific keyword and your goal is more to rank individual blog posts. By default, most WordPress themes are set to a blogroll design.
Visual Menu – Roasty Coffee
A visual menu is an excellent choice for websites with a lot of features and content. You can incorporate a call to action, specific categories, products and more.
This is step up from the blogroll as you’ll want to design the homepage with some clear goal and CTA.
Influencer / Personal brand
The influencer style design leverages a homepage with you front an center and a call to action to subscribe to an email newsletter.
This layout is ideal because an email list is a powerful, lucrative, income generating tool for any website. People in particular want to subscribe to email lists from people, not faceless brands. So the influence layout does an effective job of converting visitors on this call to action.
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.
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.
To go along with contact info, the footer is also an ideal spot to put in your social media links visitors can find you on as well.
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.
These legal pages belong in the footer an nowhere else. All websites at a minimum need a privacy policy page and a terms of use page.
Copyright
Your website by default is copyright. This copyright information needs to go in the footer. It does not need to be anything complicated, just say “Copyright, the date and the name of website.”
If you decide to include the current year make sure it’s up to date. It looks like your website is not taken care of if your dates are way off.
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.
Secondary navigation
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.
Email opt-in
The footer is a poor spot for an email opt-in form. It looks like a secondary thought. Instead, but an email opt-in form section right above the footer section.
The sidebar, a dated 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.
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 any credentials
Your bio can go in the sidebar or underneath the blog post. The best bios are short, pithy and to the point. They establish credibility as to why you’re qualified to be publishing content on your given topic.
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.
Forego the sidebar
If you’re curious as to my personal recommendation, I would simply forego the sidebar all together. It’s not useful and your website and blog content will simply look much better with a stream lined, single column design.
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 for your titles, the other for the body.
Copying the design or of others.
Don’t copy popular websites! It’s fine to emulate and take inspiration from, but some people are so lazy where they copy the same exact theme, same exact colors, same exact topic.
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).
Why would someone NOT want to use your website?
Write your content in a text editor with no distractions so you can focus on the message of the website. Who is your target audience? Who are you seeking to appeal to with your words? Why would they object to the website and how can your design help minimize this?
You don’t want to take a website you like from another market, say personal development or some lifestyle design website and apply that design to your dating blog or finance website. This is a mistake new webmasters make because you’re simply wire-framing someone else’s design and simply giving it a new coat of paint. “I want a design similar to ____.com” >>The winning design now becomes an inappropriate mess.
Instead of saying that you want your personal finance website or dating blog to look like another website in an unrelated market; take a look at the websites in your market, meet your users expectations, differentiate yourself based on your selling point and use your answers to the question of who is your target audience, what is the message and selling point of the site and why would any visitor object to the website as a foundation to design your website.
Functions over features
In addition to the one page one goal concept, also incorporate the functions over features concept too. Web design that is effective is one that focuses on the essentials in the beginning to help you achieve your online goals.
You can get more complicated later after you have web traffic, an email list, products, and a lot of published content. At the very beginning though, you have none of this so only have features that serve some purpose, not because they look cool or that people may use them. But because they look good and have a purpose.
People see a website
So no, don’t add a forum, or a tool bar, or AdSense until you build your website out in regards to the amount of content as well as the traffic.
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.
I paid $1,000 for a professional design for a website I had bought because I was certain it would pay off in the long run. It didn’t… BECAUSE the content was not up to par. Lesson learned is this: Design is critical in supporting the message of a website, but poor content can’t be saved by a pretty design.
This is because people see a website. They don’t see the design and the published content as two separate things. Both of these two elements combined make for the end user experience for your website. One that is either engaging or one that is a turn off.
So both elements are important, you can not neglect one or the other. But content comes first.
