Global Issues:
Colours
Banner
Font
Crest
Global Campus Links
Style Sheets
Page Dimensions

Home Page Issues:
Top Nav Bar
Side Nav Bar
Bottom Nav Bar
Centre Image
News area
Random Effect

Sub Page Issues:
Top Nav Bar
Side Nav Bar
Content Area
Bottom Nav Bar
Image
News area/SFU Facts
Random Effect

Colours
A new set of colours has been generated for the www.sfu.ca home page.

For print material, there are official colours for SFU, however representing colours on the Internet is a very different animal. Web colours are limited in most respects to the web safe pallet of only 215 colours. These colours will be reproduced within reason, on most monitors to be fairly accurate in their represented values. This is based on an assumption that everybody calibrates their monitor's gamma and colour balance and contrast. This may not always be the case. As well, not everybody has the same budget when purchasing monitors. some will be good and others may not be so good. Web colours try to accommodate everybody. Unfortunately web colours are very limited in their colour spectrum. You can't always find the colour you want in the web safe pallet.

The choice of the colours was all part of an iterative discussion process where early versions of the site were brought to a committee for feedback. The consensus was to go with a more subdued colour pallet, based on two reasons.

1. To maintain the branding of the University Colours with similar updated web colours.
2. To create a page with a light base of colours so dark text can be clear & legible on the pages (high contrast).

*With respect to public feedback from the beta test web site, the colour pallet has been modified to reflect a brighter more vibrant blue and red.

Banner
The concept for the banner is a non photographic representation of the three campuses of SFU. Non photographic in order to not compete with the large central photograph. The SFU Burnaby banner has the main Dark Blue colour with two streaks of colour running through it, similarly to the one that tops this page. The two colours each are the main colours from SFU at Harbour Centre and SFU Surrey. A similar treatment was created for the other two campus's banners except the colours have been flipped to represent their 'main colour' versus the other two colours.

*With respect to public feedback from the beta test web site, the colour pallet has been modified to reflect a brighter more vibrant blue and red.

Title Font Face
The font face which was chosen for the title graphics of the university web page is Industria Solid. There was a great deal of discussion in regards to the "official font" of SFU. There are two contenders to the official font: Palatino and Bembo. Palatino is the font used on the SFU Crest. Neither of these two fonts were able to accommodate several design issues for the new page. A new font face was chosen for several reasons.

1. San Serif Fonts are more legible on computer monitors. The "official" fonts were chosen based on what was appropriate for the printed page. At the time, branding of the university on the Internet was not an issue as the Internet did not exist.

2. A narrow font takes up less space while maintaining legibility, allowing for a tighter representation of a headline title, yet leaving some white or negative space to help with the design layout.

3. The x height needed to be tall to help with legibility. The x height is the level of the top of the lower case letters in comparison to the top of the uppercase letters. From the middle line to near the top makes for extremely legible text.

4. This particular font has a modern 'feel'. SFU has always had a reputation as being a liberal, forward thinking university. Serif Fonts are generally more traditional and conservative as a style of font. It was felt that the new design needed a fresh, forward thinking approach. For the record, the current SFU web page uses Frutiger for the font face of SFU.

SFU Crest
Another contentious issue is the representation of the SFU Crest. The SFU crest was designed for representation on paper and for ceremonial purposes. It is a very detailed and colourful crest which serves its original purposes very well, however it is very difficult to work with on the web. It is too detailed and does not show great definition due to the low resolution of monitors in comparison with printed media. In order to blend the SFU crest into the new design we choose the white outlined crest.

Global Campus Links
Throughout the first and second levels of the www.SFU.ca micro site we have placed links to the three university campuses in the top right corner of the banner. At first this seems to create redundant links, as you have a link on each of the main pages to itself, however for global uniformity reasons this was the best solution.

Font Style Sheets
The web font chosen was Verdana, which is noted for its high level of legibility.
The font style colours are listed below...

*With respect to public feedback from the beta test web site, the font CSS has been changed to a percent for scalable font readers.

Page Dimensions
The page dimensions for the new www.SFU.ca home page is based on a 800 x 600 pixel format. Actual page dimensions measure out to 775 x 530*. This size is an increase over the current www.SFU.ca home page size. Based on the statistics on users who have monitor settings greater than 640 x 480, it seemed logical to increase the size of the page. In fact, a great many users are viewing pages at pixel dimensions far greater than even 800 x 600.

Increasing the page size to 800 x 600 has allowed the design to have more white space. For some, more white space means wasted space, however having some white space or negative space makes the page more readable and legible. Less clutter helps the elements that are on the page stand out and seem more important. The current page has made it difficult for some users to find areas like 'the site map' or the 'contact information'. These and other areas are now more easily located and accessed.

Increasing the page dimensions has helped us develop a better user interface and hopefully a more enjoyable user experience.

*With respect to public feedback from the beta test web site, the dimensions of the web site have been adjusted down to 775 so that monitors with a resolution of 800 pixels, statistically 35% of the audience will be able to see the whole page.

(*vertical size will vary with content)

Top Nav Bar
The top navigation bar holds all of the most active links off the current www.SFU.ca page that are universal is scope. They Are:

Side Nav Bar
The left side navigation bar holds all the groups of users that are likely to use this site. They are broken down into three different areas as well, user groups, donations to SFU, and information/services/other.

*With respect to public feedback from the beta test web site, left menu has been modified to include the following links.

They are:

Bottom Nav Bar
The bottom navigation bar holds other avenues of interest as well as navigational help and information for users to be able to contact or get to where they need to go. They are:

Centre Image & Info
The central image comes from two possible resource of images. The first resource carries general images from all areas of the campus and campus life. It is meant to give viewers a wide perspective on life at SFU. The other cache of images serves a similar purpose to the news item images on the current www.SFU.ca page. They are images & stories featured in SFU News, SFU's newspaper.

The random JavaScript action is our answer to the current www.SFU.ca solution of having five or six home pages. With our solution, even if you bookmark the page, it is still possible to see randomness in the content of the page.

News Area
The news area calls on another JavaScript to operate the random functionality. The functionality can be broken down into two areas. The regular news and important (red) news.

The important news is specific to special events, such as the release of the president's report or convocation or any other significant events such as, closure of the campus because of snow or a strike.

The regular news serves the same purpose as the drop down list in the current www.SFU.ca page. It is a list of stories released by Media and Public Relations.

Neither of these two areas in the test site link to any articles or stories.
We are in beta test mode and the stories presented in the site are dummy stories to give people the idea of what the area shall look like when it goes live.

Random effect
The random effect of the web site uses a custom JavaScript. You can read more about what it is doing in the developer's notes. The purpose of the JavaScript is to replace the current www.SFU.ca use of multiple web pages. JavaScript is a Client Side language. What this means is, when you the client, view the web page, all of the actions enacted by the code are executed by your own computer. The JavaScript is not asking for a dubious amount of calculations from a computer so even an older slower computer should not have difficulties performing the code.

It was decided early in the development of this site not to use dynamic content within the entrance page of the site to eliminate extra stress on the server. Dynamic pages call for the server to perform or execute a series of tasks before delivering the web page to the client.

JavaScript is not a plug-in. It is built into your browser and by default, is turned on. It is possible to deactivate JavaScript in your browser, and some people do. Statistically speaking, almost all people leave JavaScript turned on.

Top Nav Bar
The top navigation bar holds all of the main micro site links. They Are:

Side Nav Bar
The left side navigation bar, once you have entered a sub page is where you shall find quick links to everything in that sub section and possible on that page.

Content Area
The content area mirrors the left navigation menu in all respects with the addition of short descriptions about the links and what kind of information is available at the other end of the link. Sometimes, it may appear that this information has been reproduced in a repetitive fashion from one area to another. It seems this way because it has been. If information or links are important to multiple user groups, that information will be placed in multiple sections. An example of this is the "graduate students" information. It can be found in both the "prospective students" and the "current students" areas.

Image Area
The images in the sub pages are drawn from a large bank of “life at SFU” images that are intended to highlight as wide a variety of events, people, views, landscape, architecture, science, sport and anything else that puts an interesting face onto SFU. The bank of images has been spread out to reduce repetition between areas. The image total is over 200 and growing.

News Area, Changed to SFU Facts
The news headlines in the sub sections have been changed to SFU Facts. It was felt that once you are beyond the Home page, news items were no longer required. SFU facts are tidbits of information which reflect facts about Simon Fraser university and it's History.

Random effect
The random effect can be seen in the image area as well as the headlines, if the headlines are taken from the global headlines and are not specific to the area (as exemplified in the teaching page). Go to the developer's notes to read more about the details of this process.

Global Banner
The top navigation banner holds all of the global SFU links. This banner is used in various pages throughout the campus. They Are:

Click here to view an example of the Banner
Note: the links on the banner are not functional.