Rocketface(R) Workshop - Website design for everyone. Webmaster's Tutorial, "How to Design a Website". Rocketface(R) Workshop Home




Tutorial navigation instructions

Organize Website
Main Topics
  • Organize Website
  • Website Structure
  • Website Homepage
  • Website Main Sections
  • Website Sections
  • Website Navigation
  • Linear Navigation
  • Database Navigation
  • Hierarchical Navigation
  • Website Theme
  • Website Content
  • Webpage Design
  • Titles Tags Links
  • Webpage Layout
  • Unbalanced Layout
  • Balanced Webpage
  • Focal Point
  • Webpage Hotspots
  • Webpage Design
  • Poor Webpage Layout
  • Balanced Layout
  • White Space
  • HTML Editors
  • Website Templates
  • Website Basic Layout
  • Website Basic Divisions


  • Website Structure
    The design and development of your website's structure

    Your website's structure is the framework for your site

    Now we're going to look at the overall structure of a website. This is different from the individual pages within the site. A website's structure is the framework in which the information or content is presented. It is a distributed network of links that ties your website together. Your website structure is the functional shape of your website in terms of content presentation.

    Website structure and navigation

    The structure of your site is composed of the different sections of your website and navigation within those sections. It is the framework that shapes your site and defines your website navigation scheme. If you develop a sound website structure navigation will fall into place naturally.

    Basic website structure

    As the diagram below shows a website structure is a network of links composed of three main website sections: The homepage, the main sections and the subsections.

    Typical basic website structure
    Typical basic website structure

    Developing a website network

    The structure of a website is like the framework of a building.. Every beam and rivet is connected together into a network of mechanical links, which in turn determines it's final shape and functionality. So should a website be connected through a network of links into something that provides form and function to your site. The website basic layout shown below is a simplified example of such a network.

    Website basic layout

    Structure of a basic website layout

    Navigation and website structure

    The key to the success of designing your website's structure is the ease with which your visitors can navigate the site and how well they are provided with opportunities for user interaction. A general rule of thumb is that it should take no more than two clicks for a visitor to find what they are looking for when they enter your website.

    Two click navigation

    In the example above there are three tiers of content or website main sections which can be accessed in two clicks. From the homepage to the main sections (click 1) and then to the subsections (click 2) which is a simple and intuitive path.

    If necessary you can add a third tier of data. More than that will not only begin to confuse your visitors and complicate your link network but also impede the deep access of search engine spiders and hinder efforts to optimize your website.


    For more in depth information see:


    BACK: Organize Website NEXT: Website Homepage

    copyright© 2013
    Rocketface® Graphics
  • Analyze Website
  • Organize Website
  • Develop Website
  • Implement Website
  • Maintain Website
  • Article Archive