You’re interested in starting your own website (or have already done so), and would like a little bit of help. OK…here you go.

Now the items in this mind map are not everything that go into web design, but it will get you off to the races and will let you know what you need to focus on…and more importantly, the order to do it in.

Click on the Website Design Mind Map image located on this page. You will see that it’s broken up into segments which break down individual tasks you will need to complete. Also, next to each task is the order (or suggested order) that you could do them in.

Website Design Mind Map

Click for a Larger Image of The Website Design Mind Map (will open up in a new window)

You can also download the Website Design Mind Map HERE

Here’s a quick breakdown for you that you can follow:

(1) Colors – There are a couple of free tools listed for you to help you out here. First, is the Color Cop tool. This is a small tool that you download and it will tell you the exact color of any color that you see on any website. Simply place the eyedropper tool over it and it will tell you the exact RGB color you’re looking at. Great if you see a color on a site and want to find out exactly what color it is.

Color Scheme Designer – Great tool to find out what colors compliment each other. You can switch between 2-3-4-5 colors and more. Gives you complimenting colors that look great. And it also give you the exact digital color code. Use this when trying to design a color scheme for your website.

(2) Website Logo Design – Usually you will want a logo that is large enough to read, but small enough that you can put it anywhere and still be able to read it (example: a small logo area on Facebook or Twitter).  So I would try to come up with a logo that will fit in an area 350 pixels wide by 150 pixels high (or smaller).

Now this is just a guideline, but you should use your best judgement. There are a number of websites out there that you can use to create your logo, but a really good one is: Logo Garden – Create a Logo in 8 Minutes

(3) Header – You need a header that will fit correctly on your site, hold you logo, and look good. The dimensions of the header on this website are 960 x 150 pixels. We use 960 because that is exactly how wide our website is (use how wide your site is). We use 150 pixels high because it is large enough to fit our logo, but also does not look to big. Again, this is just a suggestion.

(4) Footer – For a footer at the bottom of your website, you should ALWAYS have a few links including: Privacy Policy, Terms of Service (or terms of use), Contact Us, and About Us pages. These links need to point back to pages that you create for these items. The reason for the privacy policy and terms of service are for legal purposes. You can get a good idea for these pages by just typing privacy policy or terms of use into Google.

Also, if you’re advertising for your website, chances are that the advertising network that you’re using won’t approve your ads unless you have these links to these items somewhere on your page (and at the bottom is usually the best so that you don’t clutter up the top navigation menu).  Our footer dimensions are usually the same width as our header and usually only about 100 pixels tall (if that). Just use your best judgement as to what looks best with the design of your site.

(5) Navigation Bar – This is the bar at the top of your website (or along the left or right hand side) to help people navigate between pages, categories, products, etc. The main thing to watch out for here is to not have too many options.

If you have a navigation bar with 50 options, chances are you’re going to lose your customer. Break the navigation bar down into segments. If you have 50 options, break that down into 10 categories with 5 options each. (Example> Men’s Shoes: Running Shoes, Dress Shoes, Casual Shoes, etc. – Women’s Shoes: Running Shoes, Dress Shoes, Casual Shoes, etc.). You should ALWAYS have a link to your home page, contact page and about page in your navigation bar.

(6) Contact Form – We use WordPress on our website and therefore use a plugin for our contact form. The contact form that we use is called: Fast Secure Contact Form. It has a lot of options, but works extremely well. Also, make sure that you put enough information on your contact page so that people feel like they can get in touch with you easily.

For instance, on most of our contact pages, we will have a phone number, physical address, contact form, and email address (support [at] The easier it is for people to get in touch with you (especially if you’re selling products on your site), the more likely they will be to do business with you.

(7) About Page – We always put a bit of information about the company on this page. Make people feel like they know who you are (a picture goes 1000 miles). Also let them know how you got started, where you have been featured, and anything else that will let them know that you are an authority in your field.

(8) SEO for Home Page – We use the WordPress plugin All in One SEO Pack on our websites. This plugin allows us to present our keywords for our site to the search engines. It not only will do this for the home page, but for each post and page that we would like to use it on (which is all).

However, even though it works for multiple keywords per page, we limit ourselves to only 2 per page. And usually it is only 1. If you’re targeting only 1 keyword per page, you’re going to have a better chance of getting it ranked.

(9) SiteMap – We use the plugin Google XML Sitemaps for our sitemaps. This is a simple plugin that automatically indexes all of the pages on our site (that we want it to) and submits them to Google. We also upload the sitemap (which automatically updates when we add a new post or page) to our Google Webmaster Tools.

Once this is set up, there is very little that you ever need to do to it. We also ALWAYS put a link to the sitemap at the bottom of every page in the footer area. We do this so that all the search engines can find out sitemap and scan it so they can index ALL of our pages.

(10) Sidebar – This is the area to the left or right of the content. It usually has an email form, navigation bar, additional links, stories, ads, etc. The one thing that I will say about the design of these is that there is usually TOO much information in them.

You want your readers/customers to engage with the post/product itself and not be distracted by what is going on with other pages on your site (or ads). LESS is MORE. Have a SIMPLE opt in form, and a few links to some popular pages/posts. You don’t need to have everything from your site distracting your customers. The simple design with the sidebar is the best design.

If you like this information, this is just a TASTE of what we offer in our Success Member Training Area. Not only do you get all of the mind maps available, but we break down each area and show you how we do it with videos (and written tutorials) for each module. You can find out more information if you CLICK HERE.

We hope that you have found this website design mind map helpful.