Home > Developing > Look and Feel

Developing: Look and Feel

What do you want your first impression to be? Bold, professional, comforting, trusting? Your logo, colors, shapes and image styles play a major role in how your agency comes across and potentially how comfortable and successful your audience will be when visiting your site.

Remember, you are a state government agency. Most of your audience has to interact with you at some level...be it face-to-face, on the phone, through the mail or online. Developing your Web site to fit the users' needs helps increase the amount of interaction through your site. The following guidelines will help you develop a site.

• Branding guidelines
• Color guidelines
• Layout guidelines
• Design guidelines
• Image guidelines

Branding guidelines

Branding involves determining your agency's identity. How do you want visitors to see you? What image do you want to portray? How do you want visitors to feel? The basic elements of branding will include your logo (agency logo or a logo for the specific service), the URL (Web address), the look and feel of the site, and the writing style. All of these elements affect how visitors to your site will think of your organization. A focus group can provide input on how the agency is currently perceived, or they can provide input on your Web site ideas.

< top

Color guidelines

Colors can send many messages to users and they can affect the usability of your site. Does your agency want to be perceived as powerful, friendly or dependable? Color can contribute to these perceptions. Usability is also affected by color. The site needs to have enough color contrast for the text to be easily read and color can help highlight information.

Do's

• Use the palette of 216 Web Safe colors.
• Provide high contrast between the background and the font color.

Don'ts

• Don't rely on color alone to provide information.

< top

Layout guidelines

The layout of your site will affect how well users can navigate the site, what information appears most important, and how much time a user spends on your site.

Do's

• Use Cascading Style Sheets (CSS) to control presentation.
• Make Web page viewable at 640x480 resolution with no horizontal scrolling.
• Make Web page resizable in browser by using a "liquid" (percentage) format.

Don'ts

• Avoid using frames.
• Don't use absolute positioning or pixels to control layout.
• Don't use spacer images to control layout.
• Avoid extensive use of tables for layout - rely on the CSS for that.

< top

Design guidelines

The design of your site is basicly the perception of you Web site. It is essentially how well you can bring together the components of your site such as brand, layout, content and code to create the best user experience.

Do's

• Design with the user in mind, but not so much that it limits accessibility to others.
• Use correct mark up code for efficiency, accessibility, compatibility and search indexing.
• Provide a consistent focal point to important information.
• Use include files to reduce server calls and download speed.
• Provide a link to plug-ins if you offer that format.
• Use percentage based font sizing, not pixel.

Don'ts

• Don't use JavaScript or flash for navigation or control. That can inhibit the user.
• Don't try to fit everything on a page.
• Don't provide information in an alternative format if you can provide it in HTML.

< top

Image guidelines

Images help add interest to your site. Quality, well formatted images will make your site look professional, which will increase user confidence.

Do's

• Optimize your images for the Web.
• ALWAYS provide an "alt" description with the image.
• Make all text readable on the image.
• Use images and icons to add importance to a section of the page.

Don'ts

• Avoid using image-based navigation or links.
• Avoid using images to depict important information without adding a text description.
• Don't scale images in an HTML editor - resize them in a photo editor.
• Don't use images to fill space.

< top