Common elements

Below is a list of design elements as a cheatcheet for CSS development

• Font – Web safe fonts should be used (Arial, Georgia, Helvetica, Times, etc.)

• Headings (H1, H2, H3, H4)

  • Size
  • Different font

• Links (A, A:HOVER, etc.)

  • Color
  • Underline / no underline
  • Hover state color
  • Hover state underline / no underline

• Logo / masthead

  • Background image
  • Search box?

• Top Navigation

  • What happens when the links are hovered?

• Sidebar Navigation

  • What is shown in each section?
  • Border / color / background of sidebar boxes
  • Sidebar Headings (color / background / size)

• Pagination (when a list of items exceeds more than one page)

  • Where is pagination located?

• Form elements

  • Text fields (one-line fields)
  • Textarea fields (large boxes for text field / WYSIWYG)

• Buttons

  • Background images / colors / borders
  • Hover state for when a button is hovered over or clicked

Pages

• 404 Page – this is the page that shows up when a page cannot be found. Often overlooked.

• Search Results Page (if a search box is available)

  • If search results exist
  • If no Search Results found

• Index – list of posts

  • Pagination

• Single post – individual post page

• Single page – standard look for pages

  • E.G. Terms and Conditions, Privacy, Contact Us, About Us

• Archive page – similar to the Index page above, except with an indication of what archive is being viewed

  • E.G. Category: Technology, Tag: New York, Monthly: August 2010, Author: Mike
  • Pagination

• Home / Landing page

  • Usually different from the Index page, with:
  • Marquee / hero image / slide-show / navigator
  • Navigation boxes with most recent / most popular, etc.