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




Tutorial navigation instructions

Develop Website
Main Topics
  • Develop Website
  • Website Construction
  • Webpage Construction
  • Sitemap Construction
  • Typography - Fonts
  • Typography - Style
  • Typography - Layout
  • Website Graphics
  • Web-Safe Colors
  • Website Templates
  • Writing for the Web
  • Website Assembly


  • Website Assembly
    Combining the elements of your website

    Organizing your website directory

    Assembling your website should be a deliberate process. First gather together all of the elements that make up your website structure: webpages, scripts, graphics, forms, etc. and place them in a directory folder, on your hard drive, dedicated to your website. This directory folder should be organized on your hard drive just as you intend your website basic layout to be organized and published on the internet.

    Once you have organized your website directory folder in this manner you will have all of the building blocks that make up your site at your immediate disposal. This arrangement will provide for easy development and execution of a website maintenance plan. Also, this set-up will facilitate the manipulation of your website content as your site grows.


    Website assembly checklist

    This checklist will simplify the process of assembling your website. These steps to creating an effective website structure are as follows;
    • Index/homepage

      This first page should fit, on screen, in an area 640 - 800 pixels wide by 460 - 820 pixels high. This ensures that nearly every visitor to your introductory page will see its important information.
    • Short text lines in all links

      Be as descriptive as possible in your text links but keep them short. (i.e. 40-60 characters).
    • Short paragraphs

      Visitors scan webpages and only read the information that they are looking for. Long paragraphs are difficult to read on a computer screen. Keep them brief. (i.e. 4-8 Lines).
    • "Alt" labels on all graphics

      Search engines and websurfers who are without graphics capabilities cannot see images. The "alt" tag is a way to describe the missing image be careful with your titles, tags and links.
    • Index or sitemap for large website

      All websites should have a sitemap. It is the backbone of your website navigation system and your sitemap construction provides access to all of the pages in your site at a glance.
    • Color coordination

      Use only two or three basic colors for your website and stick to that color scheme throughout your site. This provides continuity. Also, be sure to use a minimum of colors in your text link colors.
    • Quick download time

      People do not like to wait while a webpage is being downloaded. Optimize your index/homepage to download in less than 30 seconds, the quicker the better.
    • Use of browser-safe color palette

      If you want your website graphics and text to display uniformly for all of your visitors use web safe colors only.
    • Clear, easy to follow navigation

      Website navigation is the single most important factor in providing a pleasant experience for your visitor. Simple is better when designing your navigation system.
    • Consistency from page to page

      Visitors will know they are still on the same website regardless of which page they are viewing. Use common headers and footers throughout your website.
    • Organization of the information and of the website

      Simplicity and order must be the rule when you set-up your website. This is as important to you as it is to your visitors, now and in the future, as your site begins to grow.
    • White space or negative space

      This is how to direct your visitors eye around a webpage. Make good use of borders, line breaks and spaces.
    • Contrast of text and background for easy reading

      Remember, reading on a computer screen is hard on the eyes. By providing high contrast and low key backgrounds on your webpages eye fatigue will be reduced.
    • Good object/text alignment

      A balanced webpage layout is imperative for a professional appearance. Pick an alignment style and stick with it. This also helps your visitors comprehension when they read the content of your website.

    Display parameters

    Always try to keeps things 1024 pixels wide or less unless you are employing CSS controls that automatically adjust page size. This is because you want to design your webpage layout for the lowest common denominator of screen resolutions.

    By most surveys 800x600 is still a commonly used screen size. The advent of wireless devices has made this layout size as important as ever. By designing your webpage layout to these parameters you will ensure that the display of your webpages will be uniform on most internet appliances. If you need more room then layout your content vertically to accommodate it. Just try to keep the number of down clicks below three.



    BACK: Writing for the Web NEXT: Implement Website


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