Sunday, December 14, 2008

Rule #1 - Plan Your Design

When you start thinking about layouts in Web design, you really have two layouts to consider. One is the structure of your entire site, and the second is the design of each page. Generally speaking, you should start with the site as a whole, figuring out how many pages you will have and how you will link to each page. With this structure in place, you can then design each page with a clear picture of how much text will be on each page and how your navigation bar and other link bars will look.

Start building your site listing each topic you would like to include and sketching out a map to show how they will be linked. Pages might include your Home Page, About Us, Products, Services, and Contact Page. From there, determine how many additional pages you will add underneath these pages. In other words, they may not be part of your main navigation bar, but you will create other links throughout your site to take visitors to those pages. For example, you may have products or services that you want to dedicate a separate page to each one. By outlining your site on paper first, you will be able to keep your site organized and create logical transitions between pages.

Once you have the organizational structure, you can begin to plan the separate components that will fill each page. Here are items you will need to include:
  • Header - usually includes the site name and a graphic, such as a logo. This will probably be exactly the same or very similar on all of your Web pages throughout your site.
  • Page Name - providing the page name in an obvious location helps users keep track of where they are on your site
  • Body - for the content of your page
  • Main Navigation Bar - Links to the additional main pages of your site
  • Sub Navigation Links - If your site is complex or includes many pages, these will help the user quickly find items of interest
  • Footer - a section at the bottom of the page that generally includes copyright information, disclaimers, company name and phone number, additional contact information, or e-mail link. Like the header, this will be included on all of your pages.
Other items might include banner advertising, a search box, and/or a box to show a customer's shopping cart status if you are selling products.

While most sites will incorporate these layout sections, remember that you want your site to be unique and reflect your personality and business style. Don't feel like you must follow this standard format. As long as you have the important components that identify who you are and display your contact information, your design can deviate from the standard layout.

Again, use a piece of paper to sketch your page layout. Will you have 2 columns or 3, or a combination? Where will you place your business name and logo? What types of graphics will you use and where will you place them in relation to text boxes? This preliminary planning will make it easier to visualize your site and improve the process of building your site in your software program.

So, one of the first rules of designing a great Web site - spend time visualizing your site and drawing both the navigational outline and the page layout before creating it on screen.