Home Page Style Guide
|
|
University of North Carolina at Chapel Hill Home Page Style Guide |
Home page shown in Internet Explorer
|
The home page for University of North Carolina at Chapel Hill serves as an entrance to the university's web site and provides information to the viewer about UNC-CH and the services it offers. The site was created using Adobe Photoshop and then adding personal XHTML code.
The set of links shown on the page was determined by carefully studying home pages of several universities. Below is a description of the elements used in the home page. |
| 1. Home page | |
|---|---|
| Dimensions: | 640 x 435 |
| Color: | hex value: #ffffff Selected a white background for its simplicity and to make the text in the body easier to read. |
| Contact: | The contact information is provided for the user to be able to contact UNC-CH or send an email for any inquiry. |
2. Banner
|
|
|---|---|
| Description: | The banner was got from the UNC web site from the visitors section. I changed the bottom bar to say The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL. |
| Color: | hex value #003399 |
| Font Family: | Times New Roman, Bold |
| Font Size: | 14pt Chose a font size that would appropriately fit in the blue bar. |
| Logo: | The logo is got from the UNC web site. |
| Alt Tag: | University of North Carolina at Chapel Hill |
3. Navigation Bar
|
|
|---|---|
| Description: | The navigation bar was created in Photoshop. Items such as About, Departments, etc. were placed in a box to give it a visual appeal. |
| Color: | hex value #003399 The color was chosen to keep it consistant with the look of the overall site. The color was "graded" to give the site a bit "sizzle". |
| Font Family: | Times New Roman, Italic This font was chosen for its aesthetics. |
| Font Size: | 14pt Chose this size to make the text easier for the user to read. |
| Alt Tag: | Alt tags used for the About, Departments, Campus Map, Directories, Employment are About, Departments, Campus Map, Directories, and Employment respectively. |
| Rollover: | The rollover effect is used to provide surity to the user of the link he is about to click. It increases the interaction time with the items since the user does not have to pause and make sure the mouse is exactly on the item. |
4. Buttons
 |
|
|---|---|
| Description: | The buttons were aligned with the top of the item
block in the navigation bar for aesthetics. I have placed these buttons at the top and made them more colorful because I believe it will be one of the most used items by the students and thus should be easily accessible. |
| Color: | hex value #003399 The color was chosen to keep it consistant with the look of the overall site. The color was "graded" to give the site a bit "sizzle". |
| Font Family: | Times New Roman, Normal This font was chosen for its aesthetics. |
| Font Size: | 14pt Chose this size to make the text easier for the user to read and be consistant with the rest of the text.. |
| Alt Tag: | Alt tags used for the Summer 2002 Courses and Spring 2002 Courses are Summer 2002 Courses and Spring 2002 Courses respectively. |
5. Search Box
Search:
|
|
|---|---|
| Description: | The search box was provided for the user to perform a search and quickly get to the page of interest. The location is selected based on web design conventions. |
| Font Family: | Times New Roman, Normal This font was chosen for its aesthetics. |
| Font Size: | Default |
| Accelerator Key: | Accelerator key Alt S is provided for the user to quickly get access to the text widget. |
|
The button was got from the IBM web site. |
| Accessibility: | Alt tag: The one used for the Go button is "Go Search". Search: The label Search: is explicitly associated with the text field. This feature can be used by a screen reader. Text Field:When the mouse is brought over the text field the tool-tip "Enter your search criteria" is displayed. |
6. Body
 |
|
|---|---|
| Items: | Font Family:Times New Roman, Normal, Font Size:14pt The font was chosen and the block was indented to gracefully take the users attention to the kinds of services this company can provide. |
| Columns: | The list was presented in column format to conserve space. |
| 7. Images acquired | |
|---|---|
| Images Credit: |
Font Family:Times New Roman, Normal, Font Size:8pt The link was provided at the bottom so as to not obstruct the user's attention and also provide the source of the images. The image for the button was got from the IBM web site and the banner was got from UNC-CH web site.
|