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


  • Typography and Website Design - Layout
    Position your webpage text to make every word count

    Make every word count!

    More important than either font or style is the arrangement of text. On your webpage layout, text needs to be short, concise and to the point. Use effective communication techniques to make every word count and don't use passive language. Instead of "This link will take you to another one of my graphics pages" - use command verbs such as "Click here for more graphics" or simply "More Graphics".

    Group your internal navigation links

    Links to other sections of your site should be visible on the opening screen - don't make visitors scroll to find them. Your website navigation must be clear and provide for good user interaction. If you are offering a number of links to other sites, don't just list them - group them under categories.

    Be consistent on every page of your website (i.e. landing pages)

    Keep in mind that not all visitors will enter your site through the "front door" (i.e. your homepage/index page). They could access any page on your site directly. These "landing pages" often out perform your home page and may be responsible for increasing website traffic.

    It is important to have the following things on every page of your web site:

    • The site or company name
    • A link to the home/index page
    • Links to other key sections of the site
    • Email address of contact person
    • Copyright information

    Use "white space" to break up your content

    Break content into chunks of information separated by white space. Use this white space to distinguish the different sections of your site. Reading is more difficult on screen; avoid long paragraphs. Don't let your paragraphs, or any text, run the full width of the screen. Use margins and/or tables to keep the width of text to within 10 to 15 words per line.

    Example of a balanced webpage with uniformly justified text.

    Example of a typical webpage layout using white space to organize the content.

    Selecting type fonts and colors

    You need to select the type of font you want to use and the colors you will use for the bulk of your text, links, and visited links.

    Note:

    Remember to consider your background color or image. Determine if it is going to make reading the text difficult and make changes if needed.

    See: Typography_and_Website_Design-Style - Style refers to -uppercase, bold, italic, underlined, subscript and superscript text as well as font color and size.

    If you are going to use a specialty font for your title and/or section headings, create them as graphics.

    See: Typography_and_Website_Design-Fonts - Use the proper type fonts to create a professional looking website.



    BACK: Typography and Website Design - Style NEXT: Website Graphics

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