Step 4 - Design the Layout

[This is Step 4 of the Website Building Tutorial]

Once you know what your site will contain you can begin the layout design process. This is basically the look and feel of your website. During this phase you will finalize on the layout of the pages.

Some hosting servers provide free templates for you to use e.g. HostGater and Site Build It! along with their site builders so you don't need to learn how to use professional web designing software like Fireworks or Photoshop. You can easily upload your own photos and text to customize these templates to your website requirements. You can also use free and low cost stock images.

However if you want to be able to create your own unique layout, the first step is to analyse the requirements for your layout design.

If you don't already have a logo you will need to design that too. You can alsopurchase and customize logo templates.

If there is a separate layout for a different kind of page e.g. home page, you will need to design the layout for that page too. Keep in mind some of the basic website usability principles as you design the layout. Also visit other sites and notice elements that make the site attractive, intuitive and professional. Some of the elements of the layout include:

  • the masthead and logo
  • graphics, colors and artistic style
  • site navigation - menu items/ sub menu items, breadcrumbs, 'you are here'
  • font, size and color of the headings, subheadings and normal content
  • area for page content
  • footer and copyright information
  • search box it any
  • any other common elements of the pages

layout design

You can use software like Adobe Fireworks or Photoshop to create the layout. Check out out Fireworks CS3 Tutorial to create a simple layout. Alternatively you can buy pre-built layouts and customize them.

Have designer's block? Here are some website design ideas to get you started.

If you're just starting out, Site Build It! is a good option. You can begin by using their templates and as you learn to use profession web designing software you can upload your own layout.

 

Go to Step 5 >>
Customizable Website Templates  
NOTE: You will need software like Adobe Dreamweaver, Photoshop and Flash to customize these templates.
more templates

Website Building Tutorial Menu

Overview: Components of a successful website

Step 1: Hosting Server - decide on where you are going to host the site

Step 2: Buy domain name

Step 3: Plan the site

Step 4: Design the layout

Step 5: Convert the layout into an html template

Step 6: Create the pages as per the site plan

Step 7: Install any additional scripts on the server

Step 8: Link the pages

Step 9: FTP the files to the hosting server

Step 10: Submit to search engines and promote the site

Suggestions for Improvement? If you have a suggestion to improve this tutorial please contact us. We would love to hear from you.

Share