Web_Standards_Style

> Introduction[GU1]

This style guide has been created by the Government Information Technology Agency (GITA) in response to Governor Janet Napolitano’s requirement that agencies coordinate all website development initiatives through GITA. The purpose of this guide is to provide designers with the necessary tools to preserve and expand Arizona’s Internet communications in a way that will be consistent and compatible with its overall digital identity. Utilized together, agency branding, typography, color palette and other graphic devices are a universal visual representation of Arizona agency websites. This consistent representation creates a cohesive brand experience. The design of the page is the most immediately visible part of web design. A well-designed page will enhance user experience and bring users back to the site. Global navigation, content hierarchy, and branding are the primary drivers in the development of a successful look and feel. The content and navigation should meet the needs and expectations of your target audience in order for them to navigate your content with ease.

> Layout

Overview - Your home page is more than just an entry to your website; it is your chance to make a good first impression of your agency. Organization and consistency is the key to the development of a successful website.

Common look and feel - The goal in Arizona is to achieve a common look and feel among all state agency websites. The Arizona @ Your Service look and feel is similar to the layout of a magazine cover, or newspaper. If you select any 5 magazines, you will notice that the layout is basically the same, yet you are always certain which magazine you are reading. Each sets a tone for the subject matter found inside. You can clearly see the content is different, but can determine quickly if what is on the cover is what you want to find on the inside. A magazine cover is similar to your homepage. Your homepage should capture everything the reader can expect to find inside in an organized, consistent manner. You have a limited screen size to place any mention of all your web content without cluttering your page and confusing the reader. Following a common layout design will help the reader to move seamlessly through state agency websites. Consistent use of a common layout design will ensure the user knows they are accessing an Arizona Government web site, and will know immediately what content they can expect to find, by viewing nearly any page in your website.

Define your customer needs - Before placing content on your page, it is important to know your audience. When reorganizing page content to achieve integration with the AAYS look and feel, always remember to design for the needs of your users. For example, when a citizen enters your office, you wouldn’t hold up a sign with your agencies mission and force them to read it. Avoid doing this on your home page. Instead, provide only a link to your agency mission or other content from your homepage.

Always focus on the most important needs of your customers. Provide links to frequently requested information, such as “Most Requested Forms” and “Contact Information” so they can easily find what they need. In general, try to stay clear of placing large quantities of information on any of your pages. It only distracts your customer from finding the information they came for.

Consistency - You may desire to be unique and stand out from the rest, and assume that by having too many commonalities you will bore your readers with the same layout as every one else. On the contrary, your readers will more likely have a reaction of familiarity. They won’t be disoriented by a new look each time they click on a link, helping them to navigate with ease. Common look and feel does not prevent you from creating a unique site. You can provide uniqueness through your branding, but give the reader a layout design that is comfortable and recognizable.

Recommended layout

Header – Agency branding should be reflected in the header section of the page. If your agency has a logo, it should be placed on the top left hand side of the page, and include a link to the agency homepage. Graphics can be incorporated around the logo, but together, the header graphic should not exceed 100 pixels in height. The agency tag line should be placed to the right of the logo or graphic. The font “Bank Gothic” in a 16pt or larger should be used. Below the branding, include global tools and directories that are not intended for the Navigation section, such as “home” or “FAQ’s (Frequently Asked Questions)”. Each agency should have a search form on their site. The search entry field should appear on the right-hand side in the header section. Design pages so they appear in 100% of the screen.

Agency Header

Global navigation – Developing the categories for your navigation requires organization of all your content in an efficient and intuitive manner so it will be easy for users to find what they are looking for, quickly! When people navigate through websites, they expect the same structure of the categories when they go to the next page. If you have several categories, consider placing them in alphabetical order or put them in order of user importance, with frequently used links on top. Navigation should always be placed on the left-hand side of the page in a boxed format with alternating colors for each link, and be visible on the screen without the need to scroll. The general rule for links is that users should not have to click more than 3 times to obtain information. You may consider using a drop-down menu to facilitate this.

Common navigation should exist on all pages within your website. This can be accomplished through the use of server side includes, shared borders in Front Page, templates or other means. The use of frames is discouraged to accomplish this. Refer to the Website Accessibility Policy on use of frames. (http://azgita.gov/policies_standards/pdf/P130%20Web%20Site%20Accessibility%20Policy.pdf)

Main content - A title should appear on every page to describe the content. The heading font should appear larger than all the text on your page. Select a sub-heading that is somewhat smaller than the heading. Choose a consistent style to follow for all bulleted items.

News or updates – The news section should be placed on the right-hand side in a boxed format with a grey background. The news item should begin with a date in bold, then the title of the news item. Capitalize each word in the news title and make the title a link to your news page. This allows your reader to see the most recent news items, and doesn’t clutter the page.

Footer – The footer should include links that are separate from your global navigation. Each agency should include a link to their privacy policy, contact information, site map (if available), user help (if available) and copyright (optional) in the footer. Use of General or Specific disclaimers can and should be included in this section. Disclaimers are typically used to provide the visitor with a clear understanding of the accuracy of the information being provided. Disclaimers may also be used to relieve the agency of liability in the event of any unauthorized use of the information. Agencies should seek counsel of their respective Assistant Attorney General to develop any and all applicable disclaimers.

Contact page – Arizona state agencies are now open-24-hours! On the web they are. All too frequently, websites avoid placing their contact information in plain view, preventing the user from receiving needed help. Your contact page should contain names, email addresses, phone numbers and mailing addresses. Consider including contact information for all departments in your agency, and include other helpful information as if someone had called to request it. Establish a system that ensures response to emails in a time sensitive manner, and track frequently asked questions to update your website. Doing business online will continue to increase, so treat your website as an extension of your agency’s business operation.

> Use of AAYS Logo

The Arizona @ Your Service (AAYS) logo is the signature for the Arizona state government web site. Consistent use of the signature provides familiarity to the user. The logo should appear in the top right hand side of the header and link to http://az.gov. The alt tag should read “Arizona @ Your Service”. Arizona @ Your Service should always appear with a "@", not an "at". "Arizona", "Your", and "Service" should always be capitalized. The AAYS logo is the only logo to be used to display Arizona @ Your Service.

> Color Palette

R	G	B	HEX
255	255	0	FFFF00
255	240	0	FFCC00
255	153	0	FF9900
255	102	0	FF6600
153	204	0	99CC00
51	153	0	339900
0	102	51	006633
102	102	51	666633
153	204	204	99CCCC
102	153	204	3399CC
0	102	153	006699
51	51	102	333366
255	153	153	FF9999
255	0	0	FF0000
204	51	51	CC3333
153	51	0	993333

Use of color