Communication and Presentation Techniques
The web is a visual medium. The use of good graphic design principles and good graphics enhances the usability of your site. Two sets of graphics were developed for this site, one for the e-learning site itself and the other for the MDP Folio.
Web School
The central graphic is displayed on the splash or entrance page to the site. Components of this graphic are used as logos and decorative elements throughout the rest of the site.
The Main Graphic
Versions of the 'Squares' logo element
Different coloured variations of this graphic were used to create a unified look to different elements of the site.
Squares logo used in the header bar
Left menu header graphic
This is a section of the main graphic. The section of the graphic on the right sits under the text on the page and is designed to look as if it is partially obscured by the text. It also incorporates the squares logo.
Major Design Project
The MDP site is not intended for public usage, even though it is currently online. Its graphics and design, therefore are more functional and simple than those for WebSchool. It still needs to maintain certain standards for aesthetics and usability, however, and similar design considerations apply as for WebSchool.
The main graphic, displayed in the header, is based on HTML code taken from one of the pages in the site. This header also acts as link for instant access to the home page.
the main graphic
the navigation bar
To aid the complex navigation amongst pages a two-layer navigation bar was designed. When a top menu item is moused over, the related lower menu appears. In the screenshot the 'Evaluation' top menu item has been moused over.
