Home Page Style Guide
|
|
National Science Foundation Home Page Style Guide |
Home page shown in Internet
Explorer
|
The home page for National Science Foundation serves as an entrance to the NSF's web site and provides information to the viewer about National Science Foundation and the services it offers. The page is coded in xhtml to assure browser compatability in the future.
The links for the home page are text based to provide access to the visually challenged user. Doing so enables viewers to understand the page with images turned off, a screen reader, and allows for resizing of fonts. Below is a description of the elements used in the home page. |
| 1. Home page | |
|---|---|
| Dimensions: | 610x420 |
| Color: | hex value: #ffffff Selected a white background for its simplicity and to make the text in the body easier to read. |
2. Banner
|
|
|---|---|
| Tag Line: | A tag line was chosen to inform the user as to what this site was about. |
| Color: | hex value #ffffff |
| Font Face: | New York, Bold. I used New York because it is designed to be used for display purposes. |
| Font Family: | 150%. In order to provide additional accessibility the font size is set as a percentage of the user default font size rather than a specific value allowing user control while keeping the home page design intact. |
| Logo: | The logo is got from the NFS web site. |
| Alt Tag: | National Science Foundation |
3. Menu Bar
 |
|
|---|---|
| Description: | The  arrow is used before each menu to indicate there will be a pull-down menu when the mouse is over that menu. I have not implemented the menus. |
| Color: | hex value #ffcc33 for the The color was chosen to keep it consistant with the look of the overall site. The color was taken from the logo. |
| Font Family: | New York |
| Font Size: | 80%. In order to provide additional accessibility the font size is set as a percentage of the user default font size rather than a specific value allowing user control while keeping the home page design intact. |
| Rollover/Highlighting: | The rollover effect of highlighting the item is used to provide surity to the user of the link he is about to click. Color used for highlighting is #ffed82. |
3. Navigation Bar
 |
|
|---|---|
| Description: | The navigation bar contains links. Each link starts with
 to indicate the following is a link.The reason for not showing them underlined was to avoid clutter and I also assumed that the user will know that these items would be links since they appear in the "navigation bar" area. |
| Color: | hex value #ffcc33 The color was chosen to keep it consistant with the look of the overall site. The color was taken from the logo. |
| Font Family: | New York |
| Font Size: | 80%. In order to provide additional accessibility the font size is set as a percentage of the user default font size rather than a specific value allowing user control while keeping the home page design intact. |
| Rollover/Highlighting: | The rollover effect of highlighting the item is used to provide surity to the user of the link he is about to click. Color used for highlighting is #ffed82. |
4. Site Map
|
|
|---|---|
| Description: | The logo is got from the NFS web site. I included a site map for this home page because the user can easily identify all the sections and pages on this site. |
| Font Family: | New York |
| Font Size: | 80%. In order to provide additional accessibility the font size is set as a percentage of the user default font size rather than a specific value allowing user control while keeping the home page design intact. |
| Alt Tag: | Site Map |
6. Body
 |
|
|---|---|
| Items: | This section is titled HIGHLIGHTS to indicate some of the ongoing projects for NFS and will be updated periodically as provided by the client. Each link uses the web convention "underline" providing clear navigation to the user. |
| Font Family: | New York |
| Font Size: | 80%. In order to provide additional accessibility the font size is set as a percentage of the user default font size rather than a specific value allowing user control while keeping the home page design intact. |
| Logos: | All logos were got from the NFS site. |
| Alt Tag: | The tags for the three images are: Nanotechnology Symposium, C-141 Cargo Plane, and Global Lake 800 Drilling System |
| 7. Contact Information | |
|---|---|
| Description: | The National Science Foundation | 4201 Wilson Boulevard, Arlington, Virginia 22230, USA Tel: 703-292-5111, FIRS: 800-877-8339 | TDD: 703-292-5090 |
| Font Family: | New York |
| Font Size: | 60%. In order to provide additional accessibility the font size is set as a percentage of the user default font size rather than a specific value allowing user control while keeping the home page design intact. |
| 8. Images acquired | |
|---|---|
| Images Credit: | All the images except the down and right arrow images have been got from the NFS site. |