Beginners tutorial: How to Design a Website Analysis Organization Development Implementation Maintenance
Rocketface Workshop - "How to Design a Website" - Welcome to the Web
  • Rocketface®Workshop
  • Sitemap
  • Webmasters Archive
  • Tutorial Index
  • Privacy
  • About

  • How to Design a Website - Webmaster's WorkshopRocketface Webmaster's Workshop - Homepage
    Maintenance - Maintaning your websitePromotion - Promoting your websiteContent - Creating your website contentNavagation - Creating a navagation scheme for your websiteStructure - Developing a website structureHosting - Selecting a Web HostDomain Name - Selecting a Domain Name for your websiteFirst Site - Desigining your first website

    Website Structure
    Building the framework of your website

    Website structure a 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 (i.e. content). 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 navigation scheme.

    Website Structure

    As the diagram shows a website is composed of three main areas:
    • The Home Page
      The portal to your website. This is your sites front door.
    • The Main Sections
      The backbone network of your website and navagation.
    • The Subsections
      The body content of your website. These pages are the soul of your site.
    Typical basic website structure
    The structure of a website is like the skeleton or nervous system in the human body. Every joint or synapse is connected together into a network of mechanical or electrical links, which in turn makes us who and what we are. So should a website be connected through a network of links into something with form and function. The website basic layout shown below is a simplified example of such a network.

    Basic Website Layout
    Example Layout of a Basic Website

    Website Navigation

    The key to the success of your website's structure is the ease with which your visitors can navigate the site. A general rule of thumb is that it should take no more than three clicks for a visitor to find what they are looking for.

    In the example above there are three tiers of content which can be accessed in two clicks. From the homepage to the main sections (click 1) and then to the subsections (click 2) is a simple and intuitive path. If necessary you can add a third tier of data but more than that will not only begin to confuse your visitors but also impedes the deep access of search engine spiders.

    The Homepage

    The Home Page

    Designing your Homepage

    This is a visitors first impression of your site. It should tell visitors what your site is about. The homepage should answer the questions Who, What, and Why about the sites purpose.

    A home page should also provide an sitemap or table of contents and guide visitors to the information they need. If they can find the information they want quickly and easily, they will enjoy their visit. And if they enjoy their visit and find that the time spent there was worthwhile, they'll come back.

    A home page should not contain a lot of text. 400 words should be about the limit you should shoot for. It should provide an overview of your site giving the visitor a clear idea of what is available and how to get there and also provides the search engines with something to go by when they index your site.

    Also, don't present your visitors with a huge list of links to every single page on your site - that's why you have main and sub sections. (see diagram above)

    It has been determined that most web users browse a website's homepage quickly. They look to see if there is any reason for them to go deeper into the site. They want to find this information quick without being confused by irrelevant distractions.

    A large percentage of those using the web never scroll down past the first screen full of information. So, keep that homepage short and to the point. Have your links prominently displayed and make sure a visitor knows what your site is about on the first screen they see.

    The Main Sections

    The Main Sections

    Organizing your Data and Navigation

    The main sections of a website form the headings of specific bodies of data. In other words the main sections of a website form the gateway or entry point into particular areas of your site (i.e. site index). For example if you are selling shoes your main sections might be mens shoes, ladies shoes and childrens shoes. The subsections would break down each category of shoes into color, size and style.

    Your main sections will form the backbone of your navigation system. These will be the links that take your visitors deeper into your website. Select them with care, keeping in mind that your website structure will be shaped by them. These pages should provide one click access to the subsections.

    This tier of your website structure is primarily a collection of links that provide access to the main content (i.e. subsections) of the site. Each main section should cover a specific subject or data base which is focused on a single topic. Theme each main section to correspond to its subsection content.

    The Subsections

    The Subsections

    The Body and Message of your Website

    Once you have developed the main sections of your website and decided upon your navigation scheme group your data into subsections.

    Each subsection should contain all of the important data relating to a particular main section. Keep the topical information organized into its specific category for easy retrieval.

    The subsections of a website form the body and central message of the site. This is where most of your content will reside.

    When a visitor decides to look further into your site it is into the subsections that they should be directed. Provide a navigation scheme that allows one click access to your subsections.

    Subsections are the Money Pages

    This level of a website is often referred to as the money pages. Here is where sales occur and the place that your primary message is presented. If a website had a soul the subsections would fill the bill.

    If your visitors have drilled down this deeply into your website they are very interested in what you are presenting. It is likely that they are ready to purchase a product or click on ads. The heart and soul of any website is in the subsections so spend a lot of time and effort here.

    Webpage Construction

    To create the individual pages of a website you are going to need a web authoring program, or be knowledgeable in HTML coding. If you are going to create a large site, have several web sites online, or do design work for other people, it is strongly recommended that you learn HTML.

    There will be times when you don't like how a web authoring program has coded a page. With HTML knowledge, you can correct it. And with the quickly changing nature of the Internet, it would be difficult for any program to stay current with the newest tag rules and coding possibilities. The place that I learned HTML, is Joe Barta's PageTutor. I think it is the best HTML tutorial on the web and I think you will too.

    Website Navigation and Layout

    Sitemaps and SEO
    For those who don't devote too much time on the SEO of their site - this is a good place to start. By submittíng a sitemap to various search engines, you are telling them that you exist and what pages your site has to offer the World Wide Web.
    How to Make Easy Website Navigation
    Navigation is how visitors get around your site. If your navigation is unclear then your visitors will get frustrated and go away.
    Navigational Options for Your Website
    There are many types of navigation methods to choose from. You must carefully consider the layout of your site so you can choose the system that will work best.
    Web Site Navigation Best Practices
    A great user experience will bring visitors back. Navigation is a key element in the user experience.
    Developing a Theme for your Website
    Every website should have some type of theme or a way of giving your site an identifying look. When visitors come to your website they should be presented with an experience that they will remember.
    Website Navigation and Theme
    Have you ever visited a website where you keep clicking on links, hoping you are going to find that information you're looking for, only to be led to more pages of links.
    Tips for Improving Website Navigation
    In order for visitors to find the right information, a website's navigation path needs to be clear.
    Professional Webpage Layout
    The layout of your webpages says a lot about you and your message. Good webpage layout is the key to a successful website.
    Web Site Design Layout - Five Common Elements
    Your web site design layout largely depends on the type of website you're building. A sales page, for example, has different requirements than a landing page, and a landing page has different requirements than a niche web page.
    Web Page Design Ideas - How to Use Graphics Creatively
    Keep your web site design simple, and never lose sight of what you want your visitors to do when they arrive.
    Website Design - 3 Pointers For Color You Must Consider
    The correct use of color in your website design is paramount to ensure your site is not plain and uninteresting or on the other spectrum too busy, glaring and difficult to look at for a period of time.
    Creating a Basic Web Design Template
    A "template" is simply a design format which you can apply to all (or most) of the pages in your web site.
    Website Optimization - Optimizing your websiteMarketing Website - Marketing your websiteWebsite Managment - Managing your websiteWebsite Design - Designing your websiteRocketface(R) Webmaster's Article Archives



    Copyright© 1999 - 2010
    Rocketface® Graphics
    Rocketface® Workshop Analyze Organize Develop Implement Maintain Site Map Index