How To Properly Design A Web Page

My Own Web Page

Basic Web Page Design

First, if you do not have an HTML editor editor to create web pages there is a link at the end of this article so that you can download one for free.  There is also a video tutorial on learning basic HTML.

There are only a few rules to follow if you want to create a good looking web page.

The first thing that you should focus on is your text.  Make your text easy to read.  There are a lot of ways that you can achieve this but the most basic is to have black text on a white background.

I can’t count the times that I’ve visited a web site that sounded promising only to see blue text on a red background or white text on a black background.

While that may be fun for the web page creator, it’s not fun for the reader.  Stick with black text on a white background.

Paragraph Styles

Try to stay away from creating large blocks of text.  Break the paragraphs up into two or three lines per paragraph to make the flow of the words easier to follow.

Web Page Design Layout Sample 1

The size of your text matters as well.  You can’t make it too big or too small.  I read a study that reported small text engages the reader more because they have to focus harder to see the text.

And some top Internet marketers that I study suggest using Verdana and I agree.  The Verdana font is easy to read and easy on the eyes.

Try to keep in mind the glare of the screen.  When someone reads a web page it’s not the same as reading a book.  The bright light of the screen can hurt the eyes so make it as easy as possible for your readers.

Text Alignment and Navigation

Keep the alignment of your main text to the left.  If you enjoy centering text use it for headlines or at the top of the page.

Your web site ought to be easy to navigate.  According to Google's web master tips the best place for a navigation bar is at the top of the page.

If you have a web site with a lot of pages use the left side of the web page to place your navigation links because people’s eyes will gravitate in that direction naturally.

Hyperlinks on Your Web Page

Web Page Design Layout Sample 2

All of your hyperlinks should be easy to identify by your visitors and the best way to do that is to allow your links to remain blue.  Don’t change the default hyperlink text in your HTML editor.

Your visitors should be able to find what they are looking for in your site within three clicks. If not, they are very likely to click off your site as quickly as they clicked on.

Not only should your web site be easy to navigate, but your contact information should be easy to find. Include your contact information on every page of your web site and add a comment that states, you welcome emails from your visitors.

People like to see that there is actually a person at the other end of a web site who can help them.

By giving all relevant contact information such as:
   

• Physical address
  
• Telephone number
  
• Fax number
  
• Email address
  

You create a sense of safety for your readers. They can contact you in the way that makes them feel the most comfortable and they’ll understand that if there is a problem they know who to ask for help.

Web Page Design Layout Example 3

Web Site Design Layout

Your web page layout and design should be consistent throughout the site.

If the pages look different it gives the reader the sense that they are not in the same web site.  Or that there is no consistency to the web site.

All images, fonts, headings and sub headings, bullet style and footers should remain consistent throughout your web pages.  You will also look more professional if you can maintain the same look throughout the pages.

Your web pages should be quick to load because studies have shown that visitors will quickly lose interest in your web site if a page does not download within 15 seconds or less.

Just think of how many times you waited for a page to load only to get frustrated and exit the page.

Try to stay away from creating your web page with too many images as images are the main reason why web pages take too long to load.

This includes animations. Images are good to enhance the reader experience but limit your images to three per page.

Video Tutorial - Basic HTML

The video below is an HTML primer.  While you don't need to know HTML to create web pages with an HTML editor it is good to have some knowledge of the way web browsers interpret web pages and you'll also have more control over how your pages look.

It can be pretty frustrating and time consuming if you don't know at least the basics in order to trouble shoot any problems with getting the exact look and design you want.




Finally, before you consider your personal preferences of your web page design, you should consider all of the above rules FIRST and adapt your personal preferences accordingly.

Have you read the article How to Increase Your Online Profits

There's also the video training course How to Make Money With AdSense

Click here to download a free HTML editor.


Did you read the last post Facebook Advertising Study?

Let's grow together,

Ramiro Rodriguez

Internet Marketing eBooks

Share my journey click on two buttons below now.