you are at: Home Technical Information Webmaster Resources Look and Feel Manual

Look and Feel Manual

Look and Feel Manual

This manual is designed to provide ample instruction for the creation of a Web site that complies with the State of Vermont Web Look and Feel Standards.

Purpose

The Look and Feel Standard was created to address a need within Vermont State Government for a consistent navigation across all state Web sites. Since Vermont first went began providing information electronically there has been a decentralized process for putting state resources on-line. This allowed program staff free reign in making their information and services available. Initially there were few downsides to this practice. This began to change as the Internet developed and virtually every aspect of state government became represented by a web site. This resulted in Vermont having a de facto Web presence, but one that was hopelessly segmented with no easy way to navigate between sites. By applying this standard universally within the state we hope to address this problem. Every element of this standard was created with one thing in mind, the convenience of the citizen visiting State of Vermont Web sites.

The standard is designed to allow users to easily identify official Vermont Web pages and to navigate easily to various state content. This manual is intended to provide a common language version of the standard for easier use. While reading the manual remember that the site you are reading follows this standard and so you can see the features being described right on this page.

General Page Layout

The primary goal of this standard is to provide consistency in navigation across all state Web sites. The method chosen to accomplish this was to define certain areas where common elements must reside. The best way to explain the layout is to provide some examples. Here are three sites that were designed using these standards.

You will notice a common arrangement of these sites. On each there is:

  • A banner consisting of the state logo and the name of the site.

  • A top navigation area where general links to information about the site can be accessed.

  • A left navigational area that contains the primary navigation for the site.

  • An optional right navigation area where quick links or secondary navigation can reside.

  • The body of the page that contains site specific information.

  • A footer which contains copyright information and links to policies

Most Web pages have some variation of these areas already. The standard was created to specify the size and position of these features providing consistency for the users as they navigate to various state Web pages.

There are also other general requirements that apply to the entire page.

The Banner

The banner is intended to be an announcement to visitors that they have reached an Official State of Vermont Web site.

The banner occupies the top 70 pixels of each page

It includes the official Web version of the stacked "Moon over the Mountains" logo.

  • The graphic is 50 pixels tall and proportional

  • The graphic is centered vertically over the text

  • The graphic is placed 10 pixels from the left margin

  • Learn how to get the approved graphic

  • Clicking the graphic will take the user to the site home page

It contains the title of the site

  • The title includes the name of the site and the overreaching authority for the site. (e.g. Department of Information Technology, Agency of Administration)

  • The name of the site is approximately 25 pixels tall.

  • The name of the overreaching authority is approximately 12 pixels tall.

  • The two names are left-aligned and approximately 5 pixels apart

  • They share a baseline with the "Moon over the Mountains" logo

  • The title will link to the site home page

The background of the banner may be a color, combination of colors, or graphic of the designer's choice.

The Top Navigation

The top navigation is a secondary navigational aid that includes links to special pages on the site (e.g. Site Map, Search, Contact Information, etc.).

  • The top navigation appears directly below the banner and is a single line of links

  • A link to Vermont.gov is at the far left of the top navigation

  • The sites search function is located at the far right of the top navigation

  • The space between these two items is available for site specific links

The Left Navigation

The left navigation is the primary navigation for all state sites.

  • The left navigation appears below the top navigation and takes up not more than the leftmost 20% of the page.

  • If using text links the left navigation items should be the same as standard text

  • If using buttons, the button text should be a font size comparable to standard text

  • Buttons may be up to 20% of the page width wide but the entire left navigation may not exceed that width.

The background color or button colors of the left navigation are at the discretion of the designer

The Right Navigation

The right navigation is auxiliary navigation for a site. It may contain links to high priority pages or links to sub pages of the left navigation categories.

  • The right navigation is optional

  • If used the right navigation appears below the top navigation and takes up not more than the rightmost 20% of the page.

  • The font used for items should be the same as standard text

The background color or graphic of the right navigation is at the discretion of the designer

The Body

The body is that portion of the page where content is displayed. The design of this section of the page is at the discretion of the designer with the following exceptions.

  • The standard font should be used for this section

  • All text intended for reading (as opposed to navigation or promotion) should be black text on a white or not more than 5% saturation color background.

The body is that portion of the page below the top navigation excluding the left and right navigation.

The Footer

The footer is reserved for administrative information including policy statements.

  • The footer is, at a minimum, the bottom 50 pixels of each Web page

  • It contains links to the Official State Accessibility Policy, Privacy Policy, Security Policy and Copyright Information.

  • There is also text reading, “A Vermont Government Website” and “Copyright 20XX State of Vermont.”

  • The footer may also include a “Contact” and a “Home” link for the site as well as other administrative links.

Other Requirements

All items on the left navigation on the home page of every state site must be visible without scrolling on a 800 x 600 pixel monitor.

Every page must have contact information. This is easily achieved by having an email link either in the top navigation or the footer.

Every site must contain information on the structure, funding, activities, etc of the organization in an “About” section.

All sites must use consistent naming of features.

  • Any page showing the structure of the site will be labeled “Site Map”

  • Any page showing answers to common questions will be labeled “Frequently Asked Questions”

  • Any link that returns the user to the main page of the current site will be labeled “Home Page”

Every state web page must be optimized for a PC monitor set to 600 x 800 pixels.

  • It is strongly recommended that state web pages be designed to expand to fill the screen on any PC monitor set to higher resolution.

The standard font for all state web sites will be:

  • The standard san-serif font set (Ariel, Helvetica, Verdana)

  • The equivalent to a 10 point font (size 2).

  • For headers and titles, the equivalent to a 12 point font (size 3).