Information Architecture (IA, or Architecture for short) is a map outlining a “big picture” view of your website. The objective of the Architecture is to achieve content organization. Information Architecture has no reflection on the way individual pages will look.

Some IA Guidelines:

  • The rectangle shape represents a page
  • The lines between the rectangles represent the links that users follow to reach those pages.
  • Use footnotes to explain specialized user interaction
  • Present the IA on professionally branded paper, as if you were giving it to your client.

Good programs to use to make IA diagrams:

Wireframes are the skeletons of individual pages or page types of your site (ex: a wireframe may represent the “home page” or it may represent a group of pages, like “product category pages”

Wireframe guidelines:

  • Wireframes should be built to scale – use the correct pixel dimensions and resolution
  • Represent the browser window and how the content will be positioned within it
  • represent the full height of the page, not just the viewport (go all the way from header to footer, regardless of how much it will need to scroll)
  • Use real content or realistic placeholder text – this will help confirm that the design will work
  • Wireframes should include no look and feel elements like colors, textures,  rounded corners, shadows, etc.

Good Applications to make Wireframes:

  • Photoshop
  • Illustrator

Examples: