How to Create a Website Flow Chart

flowchartshadowIf you have never built a website, you will need to give some thought to lay out and how you want to  navigate the pages before you begin writing the code. I’m not talking about the page lay-out and where to put the graphics but rather the creation of folders, HTML files,  and how they relate and link to one another. The design or blueprint for your website should take the following into consideration:

  • The purpose of the website
  • The number of ‘original’ pages
  • The possibility for expansion with additional pages or sub-domains
  • Ease of navigation by the visitor
  • Search engine strength optimization
  • Search engine requirements (terms, privacy policy, etc.)

Paper and pencil will help to make this easy in creating a ‘flow chart’ of the layout. For those not familiar with flow charts – you could say a flow chart is a graphic representation of a plan (or formula) that shows the linking, interchange and flow of information between the categories that are to be connected. You want the flow to be easy, logical and as seamless as possible – and in the case of a website – everything connected and pointing back to the home – or Index – page. For referencing this sample website – to be written in HTML – it should be noted that the first page a visitor will see is the domain home page and it will always be given the name ‘index’.

Imagine we have a business selling widgets and we want to create a website with 14 pages to offer these widgets online. The diagram below shows you how the website flow chart might be set up. The black lines are links from the ‘Index’ page going to the next lower level pages displaying our widgets for sale as well as the pages with our terms and privacy policy. The red lines represent the hyperlinks going back to the next level above or the ‘index’ page. Notice that not all pages are linked back to the ‘index’ page, while the widget-shape pages are inter-linked to one another. The color sub-pages of the widget-shape pages only link back to the widget-shape page directly above. The widget-color pages do not link back to the ‘index’ page.


Also, the page(s) containing the Terms of Use, Privacy Policy, etc. do not link to any of the product pages but only return the visitor to the ‘index’ or main home page. It is recommended that all websites contain a page stating their Terms/Conditions of Use, website Privacy Policy, Return/Sales Policy if you engage in sales – and any other information that outlines the service or warranties associated with the site.

This is a very simplistic representation of a website and you should consider including  the following pages to round out your website:

  • About us page
  • Contact us page
  • Request for information page
  • Testimonial page
  • Online order page
  • Press releases
  • Pages with free helpful information relevant to our website (very good idea)

Comments are closed.