A lot of print designers now find themselves tasked with designing for the web, and handing their designs over to a team of web developers to actually implement. It’s one thing to design a beautiful landing page, but what’s really needed from them is a set of fully realized PSD mockups that leave very little to the CSS developer’s imagination.

Here’s a list of often-overlooked interior page elements that designers should provide for every site:

Typography

Typeface

Traditional web design has relied on the big six (Arial, Times, Verdana, Georgia, Comic Sans, Courier) because of their inclusion in the Mac and Windows operating systems. There wasn’t much point specifying a font the user wasn’t likely to have. This is still largely the case, but with HTML 5 (and a progressive target audience) you can specify fonts your users don’t actually have using CSS3. Designers who go this route should be prepared to provide their developer with the font files.

Size and Line Height

It goes without saying that the developer will need to know the type size and line height, or leading (space between the lines of a paragraph). It’s very important to keep in mind here the wide variance of screen sizes and resolutions that will be viewing the design’s type. It shouldn’t be too small. Exceptions are always possible, but generally don’t specify body copy smaller than 11pt in Photoshop.

Note: Photoshop’s point sizes don’t translate directly to web point sizes. Copy set at 11pt in Photoshop will appear more like 10pt on a web page.

Paragraph Spacing

If left unspecified the developer will probably end up using default paragraph spacing. If additional spacing between lines is desired, the designer will have to let everyone in on it.

Headers (h1 – h6)

With today’s semantic markup techniques and Google’s weighting of header element content, it’s important to understand the traditional HTML header  system (h1-h6) and how it will be used in page layout. Designers should expect this, and build their design system accordingly. Developers will need to know typeface, size, line height and spacing for each of the six headers content authors will use. If left unspecified, the defaults will be used instead, which will probably not be pleasant for anyone. =)

Inline Links and Hover States

Developers need to know the color and style for links, both visited and unvisited. By style we’re referring not only to bold, italics, etc., but also to underline style. It’s common to have links underlined under normal circumstances, but then to disable the underline when the mouse is moved over the link. Any style cues like this need to be specified. This last state, when the mouse is over the link, is referred to as the hover state or mouseover state.

Lists (Bullets)

Developers need to know how the bullets should look, but usually prefer to leave this set to the font’s default bullet style because it solves a number of implementation gotchas. If the designer is set on having custom bullets, her or she needs to illustrate the expected wrapping and indenting appearance for both unordered (bullets) and ordered (enumerated). Make sure to demonstrate at least two lines so developers can tell how the wrapping should be handled.

Inline Photos

Your design will need to take inline photos into consideration also. Most likely designers will want their photos aligned right, with padding to the left and bottom of the photo. Just make sure the developers can tell what the alignment and padding are.

Footer

All too often footers don’t get the love that headers get, and that’s just wrong. A lot of print designers will provide mockups that treat the web page as if it were a 1024 x 768 piece of paper with the footer ending at exactly the bottom of the page. In reality, though, most web pages extend below a normal screen height (sometimes called the fold). If the design has an outer glow or drop shadow around the main content area of the page, the designer will need to continue this and show the developer how to resolve what happens below the content of the page.

Navigation Menus

If there are navigation menus in the design then the developer will need to know how to execute them. Key points to bear in mind here are: dropdowns, hover states, current section state, and nesting. If the design has dropdown menus the developer will need to know how it behaves in its various states. Does the list drop down from a main menu bar (usually called a suckerfish menu)? If so, does it expand hierarchically? The developer will need to know if each level looks and behaves like the last, and how an entry looks if it’s the parent of child menu items (does it offer a triangle cue?). Does the current section of your top menu stay highlighted? Then they’ll need to know the appearance and hover states for the section item. Is there a left-side nav? If so, make sure to think through how the nesting will look, how wide the column needs to be to accommodate the site’s menu structure up to at least three levels deep.

Callouts

If the site features callouts or display ads, don’t neglect a good place for them. Try to stick to standard ad sizes if at all possible.

Sidebar Items

If the design has sidebar modules (e.g. for Joomla, WordPress, etc.), the designer will need to provide a look for sidebar modules. That includes: headings, text, links, and any separators or other necessary elements. The developer will need to know the typeface, size, link colors, hover states, etc. of these items if they are not site-default.

Specialty Items

Tables

If designers know a site will display tabular data then they should go ahead and provide table examples demonstrating headers, cell spacing, text formatting, borders, alternating row colors, etc. Tables aren’t typical page elements, so this is not a requirement of many designs.

Blockquotes

Like tables, many sites don’t have any content inside blockquotes. But for blogs and discussion sites, they’re a must. Let the developer know how this should be handled.

Wrap-Up

Unfortunately, coming up with a complete website design system correctly is a lot of work. But by understanding what’s required for developers to actually make a design a reality, designers can help ensure the project stays on track, on time, and on budget. That’s when everyone comes out a winner, and that’s what we’re shooting for here. =)