How do you define “good web design?” Is it subjective, like your favorite flavor of ice cream? Although there is some subjectivity within good design, there are artistic principles that good design is built from. Here are a few that form the foundation of good design.

1. Proximity

Because items that are in close proximity to one another become one visual unit, items that are related to one another should be grouped together. Laying out related items on a website page this way helps the eye associate the information and enables the viewer to mentally categorize the information easily. The flip side of this principle is that items that are not related should not be placed in close proximity to one another.

The purpose of the principle of proximity is to organize information in a way that enables viewers to quickly and easily comprehend. When information is organized, people are more likely to read it and respond. People are also more likely to remember information that is organized.

How can you determine if items form a visual unit? Squint your eyes and look at the page on a website. Now count the number of times your eye stops as it views the page. On a page that is using the principle of proximity well, your eye will stop three to five times. In other words, there will be three to five groups of information for the eye to comprehend separately.

 2. Alignment

You’ve seen website page layouts where the text and graphics are placed wherever there happens to be space. The effect is messy, with no impact. Nothing should be placed on a page arbitrarily. There should be a visual connection between each item and something other item on the page. When items are aligned, it creates a cohesiveness that the eye appreciates.

The purpose of alignment is to unify the website page. Imagine a well-organized kitchen. All the pots and pans are stored in the organizer, the fruit is nicely displayed in a basket on the counter, the spices are all on the rack-everything is in its place. A page layout needs the same thing.

Look at a website page that you feel is good design. Now focus on the main visual element. Where does your eye go from there? Do you see how other elements are aligned with that one main element both vertically and horizontally?

3. Repetition

Good design repeats some aspect of the website design throughout the site. It’s this repetition that makes all the pages in a site look like they belong together. Color scheme, graphic elements, typefaces-all of these elements should be repeated-used consistently-throughout.

The purpose of repetition is to create consistency and to add visual interest. Repetition creates a professional, polished look that the eye is drawn to. When a website design uses repetition and is consistent, it is more likely to be viewed and read.

Here are some was you can create repetition beyond simple consistency in typefaces and colors: Use some element in your logo as a major graphic element in the design. If you are using a ruled line, make the line more interesting visually by perhaps making it with tiny dots or dashes, then repeating the line element throughout the design. Create patterns that are repeated throughout the design. Take a small element and place it somewhere on each page for a whimsical look. Just be careful not to overdo the repetition, or viewers will be annoyed rather than pleased.

 4. Contrast

The principle of contrast states that if two items are not the same, then they should be different-very different. Contrast creates an organizational hierarchy of the information and graphics on a webpage. When using contrast, you can’t be a wimp! The contrast must be strong to be effective.

The purpose of contrast is two-fold: to create interest on the page, and to organize information. A page that is interesting to look at is more likely to be read. And contrasting elements will help a reader understand the way the information is organized.

Contrast can be created in many ways. You can contrast large type with small type, a serif font with a sans-serif font, bold with light, smooth texture with rough texture, a small graphic with a large one, a dark color with a light one.

A design that integrates these principles will automatically gain a professionalism and polish that it would otherwise lack. Next time you stumble across a website design that makes you say “wow”, cheek for these principles-you’ll find them quietly working to make that web design a good one!

Search engine optimization is pointless if your website does not convert visitors into customers. You’ll actually lose a lot of money if you don’t take the time to optimize the conversion rate of your website.

Why is optimizing the conversion rate of your website important?

Suppose you sell a product for $50. If the conversion rate of your website is 1% then 1 out of 100 website visitors will buy your product. That means that you will sell 2 units if 200 people visit your website.

If you want to double your sales, you have to double the number of visitors that come to your website. That’s usually quite difficult.

If you optimize your web pages so that you have a conversion rate of 2% then you can double your sales without getting more visitors. Increasing the conversion rate of a website is usually easier than getting more customers.

What can you do to improve the conversion rate of your website?

There are several things that you can do to improve the conversion rate of your website:

1. Drive traffic to the most relevant pages on your website
   Your website visitors should come to the most relevant pages on your website. If you advertise on Google AdWords for the search term “buy blue suede shoes” then your landing page should be a page about blue suede shoes and it should be possible to buy these shoes right on the page. The same applies for visitors that you get through your regular search engine rankings.
2. Check your website statistics for your pages with a high bounce rate
   Analyze your website statistics to find pages on your site that have a high bounce rate. If too many people leave your website without fulfilling the desired task then you have to improve your pages and make them more relevant to the user’s query. Also check your statistics to find “404 not found” and other errors.
3. Add a call to action on all of your landing pages
   Every landing page should contain a call to action. Chances are that a website visitor will see only a single page of your website. That’s why all pages should contain a call to action so that your website visitors know what to do.

While a great looking website can grab the attention of your visitors, a strong landing page will keep them involved and get them to buy your products/services.

Wikipedia defines a landing page as:

The page that appears when a potential customer clicks on an advertisement or a search-engine result link. The page will usually display content that is a logical extension of the advertisement or link, and that is optimized to feature specific keywords or phrases for indexing by search engines.

Wikipedia’s definition sums it up nicely but there is certainly more to a great landing page then relevant and keyword rich content. Here’s 10 things that you should be looking at when optimizing a landing page:

1.  Relevant Content

A landing page’s content should be directly related to organic search results, PPC campaign, anchor text in inbound links and any other targeted inbound advertising, online and offline. If people don’t get what they expect, they will be more likely to leave.
 

2.  Multiple Landing Pages

A landing page shouldn’t necessarily be your homepage. In many instances a homepage is a good landing page. However, for more targeted traffic and better results, you want a landing page to be focused on specific offer and specific call for action. To accomplish this, a given website should have multiple landing pages. Create some deep link landing pages that will focus on specific offer and your conversion rate will be higher.

3.  Focus on Functionality

More and more visitors seem to judge the professionalism and credibility of a site by its design. To satisfy this, many website owners concentrate on the design aspect instead of focusing on its functionality. A well-designed landing page is essentially worthless if the prospect can’t accomplish anything. While I wouldn’t suggest skimping on the web design, it shouldn’t be your priority. Focus on the exact steps you want your visitor to take and design a page with that in mind.

4.  Call To Action

You got visitors to your landing page, now direct them to take action. Make it clear and highly noticeable without overwhelming your audience. Whether it’s a sign-up form or a “buy now” button, make it the focus of your page.

5.  Send a Clear Message

Keep your landing page clean and clutter free so your visitors stay focused on your message. Emphasize the biggest reasons that they should carry out the applicable call to action with larger text, contrasting colors, images. Make it easier for them to scan the content by using lists and getting right to the point.

6.  Offer Incentive

Bribing your visitors with freebies and samples is a proven method of enticing them to sign up. Offer more than your competition but don’t sell yourself short either. Provide a list of reasons why your offer is better and what exactly the visitor can expect. Provide references and testimonials.
 
7.  Make Visitors Stay

Avoid sending your visitors to another page unless it is absolutely necessary. That includes any internal navigation as well as external banners. If you remove all distractions and limit navigation options, you stand a better chance of keeping your visitors around.

8.  Simple is Better

Make it easy for your visitors to complete the action you want them to. Less confusion and decision making for your visitor means better conversions rate for your landing page. Don’t offer multiple choices and throw in optional extras. Focus on the offer the page was created for.

9.  Power of Freebies

Everyone likes free offers. They are hard to resist and can be a powerful conversion tool. Whether a call to action is free or something free is received as a result of carrying out a call to action, it certainly doesn’t hurt. If your competition charges for something and you offer it for free, you’ll win the customer. Remember, just because you make a free offer doesn’t mean that it shouldn’t be quality.

10.  Testing

Testing is very important in finding out what your visitors like. Testing various text, call to action forms, layouts will give you true idea what produces the best results as far as conversion.

Using a tool like Google’s Website Optimizer you can easily monitor the conversion rate, bounce rate, and tons of other useful metrics found in most modern day web analytics apps. Using these metrics you can easily figure out which version will be your optimal page, one that maximizes the results.

Creating a successful and effective landing page takes a lot of work but should be the focus for anyone involved with a website. Whether you are a website owner, web designer, web developer or a web marketing specialist you must be aware of the components that comprise a solid landing page. After all this can mean website’s success or failure.

Graphics and images can be used for entertainment, professionalism or a visual queue. A graphic designed properly can change your visitor’s outlook and/or decision for your site. It is important to you have images ready and optimized for your website.

Optimize Your Images

One thing to remember when creating graphics and images for your site is to optimize. What do you mean by optimization?

Optimization is a way to compress data to make your file size smaller. One way optimization works is that it will read through all the color of the image and use other color combinations to make similar colors. This will then discard some colors that will not be needed for the particular image. But there is a downside with optimization. You will lose quality in your graphic and/or images.

Another form of graphic optimization is for search engine optimization.  Search engine spiders cannot read images.  Ensure you are putting targeted keyword phrases in ALT tags on your images.

Quality vs. Size

When optimizing your images watch the quality compared to size. You want the smallest size possible for your site, making your site load faster. This will make it easier for your visitors and search engine bots.

If you image or graphic becomes too distorted, raise your file size. You don’t want a pixelated image on your site. You want your images to look good and professional. You just need to find a balance between having a clean professional picture and having a decent small file size.

Image Optimization Tools

Adobe Photoshop has put this into consideration in some of their new application versions. You can now do a File > Save for the Web Options and Adobe Photoshop has a pre-built optimizing process that is very good. You can choose what file type to save in and how much to compression and optimization. Adobe Photoshop is an expensive commercial program, another option is using Dynamic Drive’s Image Optimization.

Types of Image Files

Last thing to touch on is JPEG, GIF and PNG. There are so many file types, but these are highly recommended for web development.

JPEG

JPEG is a compressed file that has very good quality standards. Because of its compression, colors and data are squeezed out of it to create smaller file sizes. This can cause some blur with images with sharp edges, which is great for photos. If you look at a photo there are no straight lines or edges. Everything is blended together, which why JPEG is great for photos. You can get great optimization out of a JPEG file.

GIF

GIF is used more for vector based graphics. A vector based graphic is when a graphic is made of lines and shapes. Vector graphic have sharp corners, edges or text. When dealing with graphics like described, it is better to use a GIF rather than a JPEG. A JPEG could case distortion on your sharp lines. GIF can also be use for animation. Frame by frame animation saved as a .gif will animate on your page. Transparency is another feature that GIF can support. You can save your images with a transparent background.

PNG

PNG is one of the newest web graphic technologies. PNG is great for quality and file size. You have the best of both worlds in a PNG. PNG can also support transparent backgrounds. The only downside to a PNG file is that some old web browsers don’t support PNG. This problem is becoming less and less a concern. But keep that in mind.

Quickest Time for Web

Optimizing images and graphics is almost a must in web development. Having big file sizes could cause some of your visitors to leave your site. If your site is too slow to load, you need to optimize immediately. Rumour is that you have 3 seconds to pull a surfer in. If you site doesn’t load in that amount of time, then you might lose them. Time your page in your browser and see how long it takes. If you are under a couple of seconds, you’re doing a great job.