Site Plan | Goals and Purpose

The phillip-roberts.com website will serve as the main vehicle of information to link the site developer with future and potential employers or clients. It will demonstrate his skills and strengths as a developer and showcase key projects.

Audience

The main target audience of the site is the corporate recruiters and hiring staff that work for web development agencies or departments. It may also consist of local companies that may be seeking a freelance developer. The age range of this audience spans from approximately 20-60+ years old, varying upon the type of business they represent. This audience is very well educated, business oriented, and rather fast pace. A more difficult attribute to assess will be their exposure and experience with web development, as the target audience spans the extremes from a large web development agency to local individuals. I plan to address and cater to these attributes through a clean, crisp, and intuitive interface that will quickly empower the viewer with the information they desire. The following design requirements listed below have been selected with the target audience in mind and adapted to provide a pleasant viewing experience. In addition, efforts will be made to provide full accessibility for each viewer and any specific needs they may have.

Design Requirements

All pages within the site will consist of the following layout elements.

  • Logo and banner/header area for identification
  • Horizontal main navigation bar
  • Vertical secondary navigation side bar
  • Main content area
  • Sub/supporting content area
  • Legal and interlink area in the footer of the page

The following font families are to be used within the site.

  • For all h1, h2, h3 elements: Georgia, Times New Roman, Times, serif
  • For all p, a, li elements: Verdana, Arial, Helvetica, sans-serif
  • Other elements or graphical items may vary depending on context.

The following font sizes, line heights, and margins are to be used within the site.

  • For all h1 elements: 2.1em
    • Font size | 2.1875em
    • Line height | 0.6857 (no units)
    • Top margin | 1.0286em
    • Bottom margin | 0.3429em
  • For all h2 elements: 2em
    • Font size | 1.5em
    • Line height | 1 (no units)
    • Top margin | 1.5em
    • Bottom margin | 0.5em
  • For all h3 elements: 1.9em
    • Font size | 1.25em
    • Line height | 1.2 (no units)
    • Top margin | 1.8em
    • Bottom margin | 0.6em
  • For all p elements: 0.95em
    • Font size | 0.875em
    • Line height | 1.5 (no units)
    • Top margin | 0.375em
    • Bottom margin | 1.125em
  • For all a elements: 0.9em
  • For all li elements: 2em

The color pallet to be used within the site consists of the following.

  • #FFF
  • #DAE8E6
  • #AECDC7
  • #B4B8C9
  • #636263
  • #D7D7D7
  • #353535
  • #000

Images use within the site will vary due to context, but should stay relevant to the sites branding, online portfolio work, and other elements.

The Graphical navigation will be implemented as the main navigation. A text alternative will be available, as well as screen reading functionality.

Delivery Requirements

This website will be designed to be viewed and displayed on a large variety of browser and devices. The following is a list of browsers that this site has been specifically tested for.

  • Mozilla Firefox 3.5
  • Internet Explorer 8
  • Google Chrome
  • Opera 10
  • Safari 4

This site will eventually be designed with custom variations to adapt to various devices and systems. Currently, the website has been tested to display on the following operating systems.

  • Windows XP Professional
  • Macintosh OS 10.5
  • Windows Vista
  • Macintosh OS 10.6

Content

The following is a list of the content pages that will be included in the site.

  • Home page: A brief introduction to the site and the developer.
  • Assignments page: Links to different class assignments.
  • Demos Demonstrations page: Links to different class demonstrations.
  • Personal page: Information about the developer and his background periodically updated thoughts of the developer's take on life.
  • Portfolio page: Project gallery and information about projects.
  • About Me page: Professional background information about the developer.
  • Resume page: Online viewable resume and link to print resume.
  • Contact page: Online message form to email the developer.
  • Other Pages: A place holder for future pages that may be needed.

Flowchart

Site Structure Flowchart

The navigation bar will allow interconnection between all content pages.