DESIGN GUIDE PRINCIPLES

Development Guide

Site development cannot commence until your site has been planned and documented on paper. The content and navigation structure of your site must be well planned so the templates can be properly customized prior to site development. The categories of information that make up your main navigation and site structure should be broad enough to accommodate further growth of your site without having to re-organize the main navigation.

Interface Design Overview

The design of the home page is unique to all other pages in both its design and functionality. The purpose of the home page is to act as the main entrance to the website site. It is designed to be simple and to present a positive and elegant impression to new and existing users. The home page also introduces users to the main navigational tools, which will remain consistent throughout the site. The home page entry point is used to accommodate and communicate a customized and tailored user experience.

In addition to the functionality, the home page will also display randomized imagery and Alumni information, which will differ each time a user, enters the site. This simple and effective approach ensures that the home page always appears vibrant and active.

Administrators with the correct access privileges can only edit the Home Page content.

Interface Structure Overview

The main interface of the Web site is comprised of four main components. Each component has a key function and by maintaining these distinctions, the site will remain a user friendly, rich resource for information.

These components are:

  • Header Area
  • Secondary Navigation Area
  • Content Area
  • Footer Area

Header Area

This area contains the main navigation (unless the design puts this on the left side of the page) for all pages across the web site. It will be visible at all times and at all levels of the site. The main navigation topics will be carefully chosen in order to accommodate the varied subject matter, which the site needs to offer.

Members with the correct access privileges can only edit the Header Area.

Secondary Navigation Area

This area contains the secondary navigation items for all pages requiring this functionality. The purpose of this area is to allow room for different topics, which fall under a main navigation topic. This area is used for navigation deep into the levels of the site. The secondary navigation titles are represented as HTML text for the lower levels of the site.

Content Area

The content area contains the main information to be displayed on the pages. The design of the content area is created to allow as much flexibility as possible, while still ensuring consistency across the site. Elements such as photographs, logos, lists, links and general text can all be used in this area.

Administrators with the correct access privileges can edit the content.

Footer Area

This area contains navigation for accessing the different areas available on the site. Also contact information and privacy links will be in the footer. It will be visible at all times and all levels of the site. Website Administrators with the correct access privileges can only edit the Footer Area.

Level 1 Page'S

Each of the main navigational topics in the Header Area will take the user to a Level 1 page. A Level 1 page is an entrance page specifically for a main topic – for example Events.

The design of Level 1 pages follows on the themes, colors and elements introduced on the main home page. In addition, Level 1 pages are designed to further accommodate more content, including introductory texts, related links, useful information links, and specific pieces of information relevant to that particular area of the site.

Each Level 1 page consists of a main image area, which s the full width of the site template. This graphic area visually represents the content contained in that given area of the site.

The secondary navigation area is used to display secondary topics while the remaining space under the graphical area is used for presenting high-level information for that Level 1 page.

Administrators with the correct access privileges can edit the Level 1 page content.

XHTML

The website templates are developed using XHTML mark-up language. XHTML is designed to replace HTML and requires quality code, which improves the way in which a web page renders on various browsers, platforms and user agents. XHTML is a W3C accessibility requirement.

Navigation

The main navigation for your site will be in the left-hand navigation section of your site or on the top below or above the header graphic. When deciding on your main navigation links think about all the information that will be available on your site and separate it into main categories of information. Main navigation links should be categories, not links to specific items. All site content should then be allocated to one of the main categories.

When creating your main navigation categories the following rules apply:

  • Keep link names short
  • Don'T use terms which are too general (e.g. more info, links)
  • The first link on your list should be your HOME link. Dont't just use the word HOME, include your site name to distinguish between your home page and the other links (e.g. Website home)
  • Keep your list of links short (no more than seven)
  • If a contact link is required, this should be last on your list

Related Navigational Links

Related links appear in the left-hand column of the page if using top navigation or as mouse over links when a user moves their mouse over the main navigational links. When creating related links there are a number of d'’s and do'’ts.

  • Only include links, which are related to the content of your site.
  • Group links together in categories then provide appropriate category headings
  • Avoid long lists of links
  • If you have a number of related links to external sites you may wish to use the heading External Links

Page Content

The center column is the main content area of a web page. This area of a page may contain:

  • Text which has been appropriately written and set out for the web
  • Secondary navigation links to sub-pages
  • Data tables
  • Images that have been properly resized to no larger than 150 pixels where appropriate.

Using Images

Images should only be used when they enhance the information being provided. The standard image size is 150x150 pixels. All images should be kept to this size. If larger images are required to convey important information thumbnail sized images should be included on the page with an option to click and enlarge the image. Photos should be good quality (not blurry or pixilated), and file size should be kept to a minimum. Do not use clip art or similar illustrations.

Opening a new browser window

For most standard sites there is no need to open a new browser window when clicking from one page to the next. The only time it is acceptable to open a new window is when a link goes to an external or when linking to a file other than an html web page (e.g. pdf, xls, doc).

Accessibility

Your website is required by law to ensure that web pages and online resources are accessible to everyone including people with disabilities. OnWired will insure that there is complete compliance.

Privacy

Requirements for collecting, using and disclosing personal information should be provided in the Privacy statement which will be available to view online by your website visitors.

Browser requirements

Optimized for browsers greater than or equal to (the equivalent of) Netscape Navigator or Internet Explorer version 6.0 - on both PC and Macintosh platforms.

Secure Administration

This is where all content for the public web site sections are maintained.  This is also where the database structure is designed and created. Upon login in to the secure administration login page you will be able to use the content management system to manage all sections of the web site.

Using our advanced content management system that allows non-technical users to easily update information on their websites without learning HTML or fear of ruining the site design.

  • Secure login, via your Web browser
  • All information gathered on the website will be displayed in the administration
  • Content Management system to allow updating of content for all the various sections of the website. Create desired articles related to your site.
  • Information gathered from Contact submissions displayed.
  • Email system to mass email
  • Upload Photos for photo gallery
  • A full WYSIWYG text editor will be included to manage content

LEARN MORE

To learn more about how we can work with you in creating and implementing your specific website design and development project, please contact us for a FREE CONSULTATION & QUOTE, or telephone us at + 919 341 4246.

 
 
SkylarStudios.com © 2007  •  Privacy Policy  •  Site Map  •  Phone: 919.341.4246  •  Email: website@skylarstudios.com