Posted by arlene

You have to learn a bit about online design in order to write design-style guidance for your Web documents (or to edit them intelligently), as well as to help publish user-friendly online style guides.

According to the Yale Style Guide, readers see pages and screens first as a blur of shapes, text blocks, and color. Then they begin to pick out pieces of information. Type and illustration can help or can clutter the landscape with even more cues that are hard for readers to process. Hierarchy still matters very much online, but you won’t necessarily achieve it by using the same physical cues you would in a printed reference. Adapted from the Yale guide, a checklist for enhancing readability:

• Direct the reader’s eye toward important information right away with strong type.
• Use subtle pastel shades for background.
• Avoid bold, saturated colors except for accent or infrequent spots of emphasis.
• Make sure type contrasts sharply against any background color. Black type
  is best; reversed white type on a dark background can be hard to read.
• Beware of graphic embellishments you might use reflexively on paper— horizontal rules, bullets, icons, large display type sizes. They may look grotesque on your reader’s browser.

The purpose of online design is to create a consistent, recognizable, simple plan whereby important elements look the strongest and content categories are logically organized and predictably flagged. (Don’t make users guess when an underline is a live link and when it’s an underline.)

We ask our readers to trust us when they see a link to another screenful of information. Will it be relevant, or just a slow-loading graphic? Will they find a useful design template or example sentences at the other end?

We need to use functional cues to help users understand how information is organized and how much attention they should give to certain parts in order to get to what they need. The Yale Style Guide unequivocally states that editorial landmarks like titles and headers are the fundamental human interface issue in Web pages, just as they are in any print publication. A consistent approach to titles, headlines, and subheads in your document will help your readers navigate through a complex set of Web pages.

Organizing a useful online reference actually requires that you create a style guide for the style guide! But that’s not a problem—it’s a chance to reinforce the guidelines by showing them at work. Decisions about using text styles consistently and emphatically in an intranet style guide might result in the following specs—which, ideally, would reflect the recommendations in the corporate style guide:

Headline style

Bold, capitalize initial letters—for document titles, other Web sites, proper names, product names, trade names

Downstyle

Bold, capitalize first word only—for subheads, references to other headings within the style manual, figure titles, lists.

Possibly related posts: (automatically generated)
Website Design and Accessibility Considerations

• The Active Directory Schema continue...
• Introduction to Web 2.0 Website Patterns
• E-Building Blocks for Better Web Design
• Create a Smooth Path to Buying (Navigation), Successful Websites Rule
• New Rules of Engagement
• Blogging Wordpress Theme
• Designing Intuitive, Online Customer, hopping Models
• Web Technology & Ecommerce Online Solutions
• What Is a Domain Tree? What Is a Forest?
• Installing DNS on a Windows Server