Visual design tips

Accessible sites do not have to be ugly. Accessibility comes from good organization of the content, followed by good structuring of the content in HTML. Then style the page to make it attractive for visual readers. (See my Designed-in accessibility tutorial.)

If you are already a graphic designer, that's good. All of the visual principles you've learned are valid here, except that you no longer have complete control over what the user sees. If you are not a graphic designer, don't settle for ugly. You can still make your pages look good by learning a few simple techniques.

Look critically at every site you visit; figure out what is good or bad about it and why it works visually or doesn't.

Layout

• Use screen "real estate" wisely.
  • All important content must be "above the fold" when the reader first sees the page, even on a small screen.
  • Watch out for clutter. (Compare Google to Yahoo)
  • Provide enough "white space" around elements so that they are visually distinguishable, but don't leave big areas of blank screen.
• Make elements easy to find on the page
  • Group related elements (news, navigation, features) together.
  • Align elements on the page both vertically and horizontally.
  • Use "proximity": headings go close to their related content, captions close to their related pictures.
  • Have a "focal point": make sure the user sees your most important content first. (Size, color, and position all help; flashing advertisements kill everything else on the page.)
• Use appropriate conventions
  • Logo, search, and login go at the top.
  • Simple main navigation goes next across the top.
  • Detailed or local navigation goes on the left, unless you are writing in a right-to-left language.
  • Standard two- or three-column format is generally the most readable, depending on content. You can lay this out with style sheets or one single-row table (no th elements).
  • Violate conventions only if you have a really good reason to do so.

Typography

• Specify fonts that are designed for the screen
  • Sans-serif is generally best (Calibri, Verdana, Tahoma, Arial); some serif fonts are ok (Georgia); Times is worst (designed for newspapers!). Use any decorative font you want in a logo image, but browser decorative fonts (Impact, Comic Sans) are really trite by now.
  • Don't make "ransom note typography"—use at most two font families per page or site, and then only to contrast headings to text, or sidebar to main content.
• Format paragraphs and other content for readability
  • Keep line length moderate, usually about half the page width for large blocks of text. Wider columns need more line-height; also add letter-spacing if the font looks too crammed together.
  • Use text-align: left for blocks of text. Maybe use text-align: center for one heading, never for text. Use text-align: right for most form labels. Use text-align: justify only if the column is wide enough not to leave rivers of white space down the middle.
  • Never use all caps for anything.
• Separate text visually from its surroundings
  • Use margin and padding, especially on the left, so that text never bumps up against the border or another element.
  • Also use padding for th and td elements, and never put heavy borders around table cells. (Light 1px borders or light background shading for rows are good; always use border-collapse: collapse.)
  • Never put a background image or pattern behind blocks of text.
• There is no reason today to make text into images (except in a logo).

Color

• Fit the color scheme to the purpose of the site
  • Black and silver are fine for teen music and games; bright primaries for children's toys; pastels for fashion, medical, or senior themes; natural colors for many general-purpose sites.
  • Colors might be selected to match a company logo or an important image on the page.
• Use color with restraint
  • Like fonts, use one main color and one secondary color for a page or site; a third color might provide emphasis or contrast.
  • Sports teams and universities (and flags) have set colors; if they are strong ones, use them sparingly.
• Make sure that your use of color is accessible
  • Check for sufficient contrast (luminance ratio) between text and background. Also check that contrast is ok for color-blindness.
  • Never use color alone to provide information.

Some random links for practice

• Good, with reservations
  • Humboldt State University (Appropriate and accessible, no real reservations)
  • The White House (Lots of information but clean and effective; horizontal scrolling might be a problem; much more accessible than the previous administration)
  • Town and Country Resort, San Diego (Elegant visual design but inaccessible, which it doesn't need to be)
  • Socks4Life.com (Featured on CBS Evening News, nice visual storefront design with a reasonable attempt at accessibility)
• Awful
  • Wildlife World Zoo (Cluttered mess)
  • Cornell Univ., "Principles of Design" (Left-over from 1995, simply embarassing)
  • Bacara Resort, Santa Barbara (Trendy and artsy, but irritating, difficult to read, and strangely uninformative in both Flash and HTML versions)
  • American Awnings or Retractable Awnings (Are their products this amateurish?)