Visual Design – Layout

A crucial design element of your website is the layout. Believe it or not, there are phycological studies on the layouts of other media such as magazines and newspapers. Small, but important details including where certain text is, how big the titles of pages are and what colors are used are all attributed to the success or failure of a website.

The best way to get ideas for your own site’s layout is to look at other related websites that contain similar content and see what it is that you like and don’t like about it. What I do is look at a site for a few minutes, close my eyes and then try to remember the things that stood out.

Choosing the right layout

As you scour around the Internet, you may notice design patterns spanned over the various websites you see. You might have noticed that most news sites tend to favor white backgrounds with black text. You’ll notice media sites like YouTube and Hulu that design the rest of the site around their video players.

The point of any layout is to draw attention to a specific area of a page to generate the most focus on that spot. This will ensure that if you’re blogging, your content is being read or if you’re showing videos, that your videos are being watched.

Just take a look at my site. You can see how things are organized within a matter of seconds. Every page conforms to the same layout in general and this was done to keep everything looking clean as well as to allow the content to flow. When you create your own site, you want to make sure that the design flows and matches, but not to mix everything together. This can confuse your visitors and will probably make them leave your site.

Themes and templates

Both of these are generally the same. The difference is how they’re applied. A template is a set of pre-built files that make up a website that allows you to fill in or change information to correspond to your own needs. A theme does the same purpose, but it’s applied to a pre-built structure. The main difference between themes and templates is that you can change the theme of an entire website without affecting too much of the content. A template needs to be re-edited if it’s changed.

If you’re running a blog site, using is theme is the only way to go. This is because WordPress is a full software package all rolled into one that allows you to apply different color and layout themes as needed.

Here are a couple of place to look for great themes and templates:

  • TemplateMonster – This site has thousands and thousands of web templates and they even have themes for content management systems like WordPress, Drupal and Joomla. Their prices range from about $20 to $150.
  • WooThemes – WooThemes makes themes specifically for WordPress, ExpressionImage, Drupal and Tumblr. They have some free themes, but the paid ones seem to be of much higher quality and generally have more features.
  • StudioPress – If you want to up the ante (and the price) on quality WordPress themes, you need to go here! In fact, if you want to see a sample of one of the themes they offer, you can look at my other website.
<< Back to Stock and Graphics Forward to White Space >>

Visual Design – Software

There is a plethora of web design software out there! It’s no joke. And nobody knows where to start! In fact, web design is such a special niche, that people are turning to hiring designers to take care of all the loose ends. The problem with this is that the costs can go through the roof. Worse yet, what do you do when you want to make a design change? You have to rely on someone else to do it for you.

The catch 22 is that you either spend time building the site yourself to save money, but then you don’t have enough time to focus on your business or you pay someone to do it to save time, but then you don’t have enough money to spend on developing your business!

Top Web Design Software

There are a couple of choices in the type of software you get. The main type is called a WYSIWYG editor (what you see is what you get). Think of this as a blank piece of paper and you have to write the code in manually. The other type is a live editor where you’re able to literally drag and drop text and images right on the design that you see. Think of it like looking at a colorful webpage and being able to move things around on the fly.

  • Adobe Dreamweaver – This is by far the best web design software there is, at least in my opinion. This is a hybrid editor that supports both direct coding as well as live design. Another advantage is that you can create and edit CSS styles directly in the software. Plus, if you have other Adobe programs, you can cross link documents between them. Read more about what Dreamweaver can do at Adobe’s website.
  • AceHTML Pro – This was the software I started with when I first began creating websites so many years ago! I still like it as a lightweight editor although I don’t use it anymore because I use Dreamweaver.
  • WebPlus Website Maker – I’ve never used this software so here’s the product description from the manufacturer:

    WebPlus X2 is Serif’s outstanding Vista certified web design solution, packed with everything an organization needs to design fully-featured and professional-looking sites–with no need to learn or program any HTML! With smart Web gadgets including forums and site search hosted for free by Serif, integrated e-commerce with partners including PayPal, support for engaging YouTube, podcast and RSS content, plus video and Shockwave Flash animations, WebPlus X2 is the perfect answer for in-house web design. WebPlus helps at every stage, whether starting with a professional business template, designing from scratch, automatically fixing design issues, or publishing to the Web, it’s never been easier to achieve fantastic results, fast.

  • WebEasy Professional – I’ve never used this software so here’s the product description from the manufacturer:

    Create a great website has never been easier. WebEasy includes everything you need in a one box to create your ideal website with built-in templates and e-commerce tools. Drag-and-drop simplicity and automatically HTML code generation, create the website you want without any programming or technical skills required.

Using Themes or Templates

With blogging taking over the Internet space as the next major form of design, software packages such as WordPress have paved the way for users to focus more on their content instead of the design. WordPress allows you to use pre-designed themes that can be installed with one click.

There are even sites such as StudioPress, Woothemes and TemplateMonster that sell WordPress themes so you can get a head start on a more advanced design than you can download for free. In fact, the very design you see on this site is from a web template!

Even if you don’t use WordPress, you can still purchase web templates from TemplateMonster. They will give you a very drastic head start toward a completely designed website. All you really have to do is fill in the blanks by inserting your content into the design. Take a look at some of the web templates you can purchase here.

<< Back to Visual Design Forward to Stock Images and Graphics >>

List Building – Landing Pages

I’m sure that you have seen quite a few landing pages throughout your Internet travels, but maybe didn’t know what they were called. Or maybe you did, but didn’t understand the importance of these pages.

What is a landing page?


Simply put, it’s a page you land on after clicking a link. This sounds easy enough, but deep down, every little detail you incorporate (or don’t) will affect the quality and performance of this page. So what are they for? When an advertiser is promoting a product or service, they will create a static page on the Internet somewhere that showcases this product or service and is essentially the make or break presentation.

They are commonly used by affiliate marketers as a means to send their visitors to the advertiser’s website to gain a referral bonus. Here’s an example of a successful landing page.

Why is a landing page important?

From an advertiser’s point of view, your landing page should be designed to sell. Unlike a face-to-face sales pitch where you can gauge things like emotion, customer response and even overcome objections, a webpage is a one-shot deal. If you customer lands here and loses interest, they leave the page and your sale is gone forever!

Just like creating effective advertisements like Google ads, banners, etc. you want to keep people interested and above all, you want to make them want your product when they’re done reading the page.

From a visitor’s point of view, your landing page should be straight forward. It should sell the product well and sell it fast. Pre-answer everyone’s questions up front and add just enough visuals to keep people interested.

How should I design this page?

The design should be non-intrusive, but visual enough to maintain interest. For content, some people will tell you that you shouldn’t use a targeted landing page (see below) to promote or discuss anything other than what product your selling. Others might tell you to use landing pages as opportunities to upsell other things you might be offering.

Types of landing pages:

  • Targeted – These pages may be part of your website, but they look nothing like your site because they are only there to promote one item. The entire page is written only for this item and does not contain any other links, pictures or “plugs”.
  • Dynamic – This type of page can be mixed with other types. Essentially a dynamic page, much like any dynamic webpage, will allow you to create custom content based on a referring site or affiliate link. An example would be in the landing page made references to the site you came from, so it appears as though that site heavily endorses this product.
  • Static – This is your average landing page and it can be a page build specifically for a product, or it can simply be a static page located within your site that helps promote the product. Using this type of page may detract a little form your intending purpose, but it could open doors for promotion of the rest of your business.

My suggestion is to go with a page that only focuses on one thing. The reason for this is that you’ll be advertising this page through a PPC network and the traffic generated from these networks is very targeted toward a particular niche. So if you landing page was selling auto-blogging software, you would only be targeting web traffic that was looking for auto-blogging software and therefore you would not want to fill this page with information on other software you’re selling.

Getting started

The first thing you want to do is gather your ideas. Think about what you want to accomplish with your page, who you’re advertising to, how they are able to buy your product and what would make them interested. Once you have these basics down, you should have a clear understanding of how to setup your page.

Just keep in mind that the goal of landing pages is to convert sales quickly. The people that will be clicking through are not there to see your site. They were advised by someone else to click on that link and you need to be there to present them with a valid reason for staying.

Increase effectiveness

Here are some tips on how to increase the overall effectiveness of your landing pages:

  1. Create concise text without being too short. Find that perfect balance so you’re not overdoing or underdoing it.
  2. Add a FAQ to try and answer questions you might already know will probably be asked by your visitors. This way, they don’t need to take time to find out how to contact you.
  3. Keep the content search engine friendly and make sure you’re not using duplicate content on multiple landing pages.
  4. Make sure the page loads fast. Nobody is going to wait for your page to load if it takes longer than 5 seconds.
  5. Consider adding a video clip of the product in use or you explaining your service. Even a video of you reading the same content that’s already on the page will be highly effective.
  6. Add some social media links to increase your exposure. Use sites like Twitter and Facebook so people can readily find you if they’re really interested in what you offer.
  7. If you have a few customer praises about your products, put them on there to let people know what others think of you.

Testing your landing pages

In researching this topic, I found a great site that talked about testing landing pages. Originally I wasn’t even going to mention it because it’s one of those things that webmasters usually do naturally by reviewing page stats and click-through ratios, but this site brought up a really good point.

Michael Bloch from TamingTheBeast.net mentioned that to test a landing page, you should send 5 of your friends to the page without telling them what the page is about and have them look it over for about 5 seconds. When they’re done, instead of asking them “Does it look good?”, ask them what they remembered about the page. Don’t get too specific with the question. Just have them spit out key things that they remembered.

If they can’t even tell you what you were selling or what the page was about, then something is very wrong! Their input might be able to help you pinpoint areas of the page that need improvement.

Further testing is easily done with the web statistics I mentioned, but don’t just look at counters. Look at how long your visitors are staying on the page. If you read your own page from top to bottom, how long did it take you? Are your visitors staying for at least that long?

Further reading

This post was just to touch some key points on landing pages and is in no way intended to be 100% thorough! There are countless possibilities to creating, promoting and using landing pages and your results will vary greatly based on your industry and web skills.

<< Back to Whitelisting Forward To Reviews >>