How to Plan Your Website and Design Its Layout Accordingly – Website Development Tutorial

Written by inAm from http://www.temptingmagazine.com on December 17th, 2009 | 3 Comments

In our previous posts we discussed how a website works and what basic information do you need before starting with your website for example how to determine your niche and what tools can be used in website development.

Now next step is to plan your site, its workflow its process diagrams everything is covered under this heading. So please read carefully step by step and read our previous posts as well. For further questions you can use comment box below.

Plan the Site:

Now you’d ready to start working on your website. To begin with you will need to design what you want on your website. Sketch it out on paper in a flowchart. Usually there will be a ‘home’ page, a ‘contact’ page, an ‘about us’ page and other content pages. Do you want to incorporate any additional features like forums, guestbooks, blogs etc?

Another way of designing your flowchart is by using post-it notes. Every time you think of something you want to incorporate into your site, note it down on a post-it. Once you’re done, find a wall or large surface and arrange each item in a logical and intuitive flow. Keep rearranging till you’re satisfied.

Determine a site plan that will be easy to navigate and will allow visitors to find what they need quickly and easily.

Design the Layout:

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.

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 basic website usability principles as your 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

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 first. You can use software like Fireworks, Photoshop or Flash to create the logo and layout.

Alternatively you can buy premade layouts and logo templates and customize them at DreamTemplate.


Some hosting servers provide free templates for you to use e.g. www.GoDaddy.com , 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.

Please share this post with others using bookmark icons below and show some love : )

Related posts:

1. How to Create Professional Website Layouts – Website Development Tutorial
2. Convert the Layout of Website Into HTML Template – Website Development Tutorial
3. How to Determine Which WebHosting Plan is Best? – Website Development Tutorial
4. How to Create a Header For Your Website Layout in Photoshop
5. Website Development Tutorial: Determine Niche and Website Building Tools

Looking for something else?

Subscribe to our feeds via email.