DIY WordPress Website Design

This tutorial on WordPress website design assumes the following:

  • You’re using WordPress and a WordPress theme 
  • You’re not a programmer
  • You’re not studying programming
  • You’re new to website design and need the fundamentals
  • You’re smart
  • You have no experience with HTML or CSS

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.

This is wonderful because it allows the average person to build a good website. However, you don’t want to have a generic website. You want to build something unique and brandable that will become something valuable in the future. This is why I strongly recommend using WordPress as your content management system because of it’s ease of use, it’s free, and it’s highly customizable.

Get a theme from:

Free WordPress Directory

The free directory is a fine place to start. My favorite theme is the Twenty Seventeen theme made by WordPress. Here is a tutorial on the Website Creative Pro YouTube channel!

Theme Forest

One of my favorite places to get a theme. Most of the themes I use come from Theme Forest simply because I like the various design I can find. My advice would be to try out X the Theme, Avada or any theme you like that has over 100 sales.

Studio Press

Great themes, but you’re going to have to be comfortable with coding. Not ideal for beginners. You have been warned.

Themify

Another theme shop I really like. They make the Ultra theme which I love using for business sites that also want to blog.

GeneratePress and Astra

These two are blank slate themes that are designed to work with a page builder like Elementor. You can download a template and customize it from there. Here is a tutorial where I used Astra and Elementor.

Thrive Themes and My Theme Shop

These two theme developers focus on themes geared toward information sites that will make money with Amazon as well as contextual ad programs. This is not to say you can’t do this with other themes obviously, BUT if you’re looking for a magazine style theme look no further than Thrive Themes or My Theme Shop.

My #1 Pick

The best theme overall is DIVI

Divi is simply the best theme overall. Why? It’s a drag and drop editor that’s simple to use – allowing you to create any website you want. What’s the downside? It’s $250 one time payment or yearly payment at a lower price. But you can use it to create any sort of website you want or you can use it for client work.

How does it compare to other themes? Other themes are simply done for you and built with a specific purpose, but DIVI is more flexible. So unless you find a theme from a theme shop you love, consider DIVI once you’re ready to upgrade from a free theme.

*For more, please check out our short and sweet guide on WordPress themes.

What about website editors? Do I need one?

Unless you’re a web designer, or wish to be one, it’s stupid and crazy to spend hundreds of dollars and countless hours learning how to design and upload your own web pages with programs like Artisteer or Dreamweaver.

These programs were necessary 15 years ago, but today you can use more intuitive, effective and less technical options like WordPress with quality themes and still achieve a better outcome in less time than figuring out an HTML/WYSIWYG editor.

With all the consideration that goes into good design like conversion, psychology, and professionalism found in today’s WordPress themes, to not leverage this already existing body of work and knowledge base is a tremendous mistake as you will be wasting large amounts of time trying to become an amature designer.

What about page builders?

Themes like X the Theme and Avada have their own built in page builders. Other themes like Astra and Generate Press work on a freemium model. Do you need a page builder? Only if the theme requires it.

If you purchase a theme from say My Theme Shop or you use a free theme it can work with Elementor, but it’s just not designed for Elementor.

What is Elementor again? It’s a plugin that allows you to drag and drop elements (hence the name) on a web page anywhere you like.


AN EASY-TO-UNDERSTAND WEBSITE DESIGN PLAN

Do you understand the psychology of good web design? How your visitors will interact with your site? Do you know color theory, the knowledge assumption mistake, or how your keywords affect your content? No? No problem, most people don’t. With that said, let’s cover the sections of your website.

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


How to find designers?

WAIT! This is a DIY guide, what do you mean hire a designer?

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 navigation bar of  a website is the menu section made of text links that helps a visitors navigate your website.

Appropriate locations for a navigation bar are either either directly above the header or directly below the header.

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 we noticed the navigation had common titles like “blog” – “About” – “Toolbox”. Good. But then we saw “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.

If the Podcast is not released yet, don’t link to it, also call it PODCAST or AUDIO – not some random name that only means something to you the producer. Same with the title “dusty shelf”.

The font family for your navigation bar should be the same as your font family family for your page and post titles. Basically, your website should be using TWO FONTS. One for titles and the menu and a different font for the body.

About Page and Contact Page

You need these pages, they can go either in the menu at the top or in the footer. 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.

Privacy Policy and Terms of Use

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

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.


LOCATED AT THE BOTTOM OF A WEBSITE IS YOUR 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:

SITEMAP

You NEED a sitemap for your website, and you should link to it in your footer.  So again, you don’t need to link it from your website, but you need to make one and the Yoast SEO plugin (free) will make on for you with the click of a button.

How to get a sitemap:

With WordPress, you can install various plug-ins that instantaneously create for you a sitemap. One of the most popular is a plug-ins is called WordPress SEO that incorporates a sitemap functionality.

A sitemap is a file that lists out all your content for search engines to crawl. It’s also useful for people to find specific content.

Once you have your sitemap you’ll need to submit it to the Google search console. Search console is where you go to verify your website with Google to see how Google sees your site and any changes you need to make. In the search console is where you can verify your website.

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.


SIDEBAR: THE SPACE OFF TO THE RIGHT OR LEFT

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.

Design your site – A quick how-to for the non-technical

So you now have a WordPress site and a WordPress theme.

“Themes” are just simply a collection of programming language files that affect the way a site looks and feels.

When you download a theme open the folder up and look inside. You will see a bunch of PHP and CSS (cascading style sheet) files that you can view in notepad.

  • PHP files have HTML code written in them. The fact that it’s called a .PHP file is because it tells web servers around the world to read this file (and the HTML in it) and interpret the code. If you want to add some sort of feature to a site like a custom search box for domain names on NameCheap.com then you do that by way of HTML and PHP.
  • CSS files affect color and visual appearance of a website. Question: “How do I make the text 12px Times New Roman with a pink background and have it centered on the page and have it highlight blue when a mouse cursor moves over it”. Answer: CSS

Let’s use a car metaphor, PHP and HTML are the engine. CSS is the color and visual design.

With WordPress you can make any sort of site you desire. You can make a static site by dictating a page within WordPress to be the homepage and designing that one page  (as is done here on Edge and Action) and then using the theme to dictate the actual look of the rest of the site.

You can also use WP to make a simple and elegant blog which is a very common use of WordPress. Do whatever you like – WordPress is very flexible and customizable.

A few things to consider when designing the visual front end of your site

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

Get a logo that is balance between being beautiful, professional, and small size in terms of pixels and disk space.

When to go with a big logo:

Never.

Big logos are again dumb. Your logo should be small.

How should the site look?

7) Plan the layout in advance – draw on a piece of paper what you want the site to look like, what different pieces of the site will be called and where everything will be located.

The homepage should be a visual menu for the rest of the website, showcasing the most important pages OR it should be a blog roll with links to your best content somewhere on the homepage.

8) Start with a simple design – simple, sexy, elegant works. You can always add, upgrade and customize later over the life of your site. Nothing is set in stone.

9) Load speed – how fast a user can access your site matters, it not only affects the user experience but it is also a criteria in regards to search engine rankings. Your site needs to load as fast as the top results in Google for whatever niche your competing in.

10) Content – WordPress uses categories and tags. You need to create some sort of system where you know what keywords you’re going after and what categories and tags will make sense for your website.

THE KNOWLEDGE ASSUMPTION MISTAKE

The knowledge assumption mistake is to assume people know what your website is all about without actually telling them what it’s about simply because YOU know what your site is about. The trick is to have people within 5 seconds of landing on your site to know what it is about and if their in the right place

You do this by having a clear headline that qualifies your traffic and your right people by greeting them with a benefit.

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.

All You Need To Know About Negative Social Engagement

The social aspect of our online lives as been integrated into most aspects of our internet use.

Blog posts, YouTube videos, a podcast or a news website. Social, with its share buttons and pleads from authors and publisher for you to “like”, “retweet”, “pin” or share on whatever platform you love most is vital to a websites growth.

Social media is often the second biggest source of traffic for websites behind search engines. The real truth is that for most websites, your main traffic sources will predominantly be from 2, maybe 3 main sources and then a trickle of traffic from a bunch of other places. It depends on the topic of your website of course. Copyblogger, a hugely popular website about content marketing shut down their Facebook page because of a lack of engagement. Other websites like Social Mouths are all about Facebook marketing.

Social, apart from it’s ability to reach new visitors and thus customers has one added and very important benefit. It’s an important part of the current method search engines use to help determine where a website should rank a website. How important you maybe asking? Well according to research done by MOZ (formerly SEO MOZ) social makes up about 7% currently of you position within the search engine results page:

 What to do next: Add social Media Buttons

Your website will need social media buttons. 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.

What do you want people to do when they hit your website?

A simple question for sure, but the underlying importance can’t be overlooked.

  • WHY does your site exist?
  • WHAT is your unique selling point?
  • WHO are your “right” people?  
  • DO you understand the psychology of design?
  • Does your design and message convey the essence of what your about?
  • Can people figure out what your message is in the first 5-10 seconds?

So again, what exactly do you want people to do when they hit your site?

Depending on the type of website you make, your answer to this question will vary. With commercial sites whose intention is to sell something the main goals are typically:

  • To turn random traffic into loyal subscribers and fans
  • Encourage those fans to share your website
  • Persuade people to buy your products and services

DESIGN YOUR SITE OUT ON PAPER FIRST

Make it akin to a blue print for what you wish to create. Take design influences from other sites that you like. Figure out each piece of the site individually: Your logo design, the navigation bar and what each tab will say and how the content as a whole will be organized on your site. Don’t forget the bottom of the page either (called the footer).

Do you want a one column or two column design? A two column has a main content area and a side bar.

Take a few hours or days to slash and burn through the process. Drawing out what you want, scrapping it, drawing it again and so forth. If you know any web savvy people, run your blueprint by them for feedback (this does not mean to ask your mom for advice, it means to ask someone with a design background for advice).

KEYWORDS AND PHRASES FOR YOUR SITE

Download Open Office and use the excel file option to maintain a master list of keywords and phrases relevant to your site. I suggest Open Office because you can use it both on a PC and Mac and it’s free. So you never have to worry about buying and expensive office program just to open and edit a simple excel file.

To properly use the excel file, have keywords for your home page as well as sub-pages listed out and their respective search volume. A good keyword for a homepage should have a search volume of at least 10,000 searches a month. Keywords for subsequent pages within your site should have a minimum of 2,000 searches or so a month.

This is important because writing content that is relevant to what people are searching for will help drive relevant, qualified traffic to your website. It also helps you understand what your website visitors want, need, and expect from your website.

AGAIN, DON’T MAKE THE KNOWLEDGE ASSUMPTION MISTAKE!

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-10 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?

ONE PAGE, ONE GOAL: KEEP IT SIMPLE!

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

BE CONSISTENT & 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 YOUR WEBSITE 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.

FACTOR IN AN EMAIL LIST

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 PICTURES WITHIN YOUR CONTENT AND PRODUCTS

When possible of course.

If you’re selling something, have a picture of what it is you’re selling. Videos at the very top of the web page like this example, convert extremely well because you the visitor connect more quickly with the product creator, people like videos, videos are typically concise and can visual describe something in minutes, and it provides a level of professionalism and trust you need to feel confident in purchasing.

Pictures also within your written content work well to because it make your content easier to read and studies show that people will trust the content more with images adjacent to the content.

FONTS AND SIZES

Be consistent with your font family. If you’re using Helvetica, stick with Helvetica. Writing content online is NOT like writing a paper for school. You want to mix up your font sizes  to make reading easier and to break up ideas better.

Use larger font sizes as well. 12px is typically too small. You will want to go with a minimum of 14px up to 18px for fonts.

HYPERLINKS

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

WEBSITE DESIGN SHOULD BE THE ESSENCE OF YOUR MESSAGE

Your design should accurately reflect your unique selling point and message. For example when you hear a website called “The Art of Manliness” what kind of site design do you expect?

Pink and yellow colors? No

Blue? Maybe…

Understand this concept? Of course you do. It’s intuitive.

You need to do the same with your own website design. Your design must meet the expectations of your website visitors for what the site is about and what the unique selling point is.

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

USE WORDPRESS

For most websites, it really does not make sense to use anything but WordPress. It’s open source, secure, fast, and manages content well. You can add onto its functionality with plug-ins, you don’t need to be a programmer to accomplish design tasks, it has plenty of free themes to choose from, it’s easy to design a beautiful website with paid themes from Theme Forest or Elegant Themes.

STALE WEBSITES

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!