10 Excellent Educational Institution Websites

We've recently commenced a new project for the University College at the University of Toronto which will see a new web publishing system in place for the Fall semester's commencement with bespoke design and development (using the Drupal framework) by Design Guru :)

Part of the initial design discovery phase of the project entailed conducting an exhaustive review of 120+ websites representing institutions of higher learning internationally. 

Here, in no specific order, are 10 sites which stood out for presenting information in unique ways, characteristically representing their institution and offering clean and easy-to-navigate interfaces...

1. http://www.chicagoportfolio.com

The Chicago Portfolio School has done a fun job of this site design - with an intro video placed in the background and viewing options per-audience type.  However, it loads slowly and using video like this can deter people on slower connections plus mobile browsers etc...  The site also relies on horizontal scrolls which are not the most intuitive type.

Noteworthy: Collapsible content areas let the user focus on the media in the background (using 'close' buttons.)

2. http://www.aud.ucla.edu

UCLA's Architecture and Urban Design school contrasts the expectable form of the University's design and does really well to engage users with a bevvy of content brought forward to the homepage by way of excellent thumbnail imagery.  The thumbnails are presented in horizontal slideshows with vertical ordering by category - weighting content importance by image size; with general features (mostly news) at the top, then courses and then a mixture of news and events at the bottom.

Thoughout the site, they've made great use of clean typography, white space and imagery, with contextual slideshows on pages such as Faculty bios prominently displayed as page header areas.

Noteworthy: Presenting an amalgam of content through an interactive slideshow interface such as their homepage means that users can quickly find 'new/fresh' content easily when they visit the site - giving a reason for repeat viewing and relating the vivacity of life at the school.  This is again seen on the News section (http://www.aud.ucla.edu/news/index.html) where a different display style still brings a lot of content together in a fluid grid engagingly using images.  Also, by making within-content slideshows full-width, the two-column convention of presenting copy and links does not feel blocky or constrictive.

3. http://www.bu.edu/

Once of the cleanest and most confident designs in this review is that of Boston University.  By clearly employing a grid system in design, and properly spacing typography with soft content area delineation (shadowed white areas atop grey background) the user can easily read through content and this is further aided by splitting the main menu's sub-menu into a seperate physical space.

To help explain what each site section is for to the user, the site takes header space underneath the menu to include a title plus introductory sentence (e.g. http://www.bu.edu/academics/schools-colleges/)

Noteworthy: Visually outlining navigation elements, like menus, as being seperate from the 'page' can let users focus on reading through content.

4. http://www.dieangewandte.at

The University of Applied Arts Vienna does well to use a solid color for its background and cleanly let simple spacing and typography help the user read through content areas defined by their background contrasting with that of the surrounding space.  The overall background color changes per School (e.g. yellow for Architecture - http://www.dieangewandte.at/jart/prj3/angewandte/main.jart?rel=en&conten... vs green for the Centre for Art & Knowledge Transfer.)

Noteworthy: Using a grid system, blocks can be presented above and next to the main content area to break up the monotony of standard columned layout.  Images pertaining to posts on the site are presented as blocks surrounding the post, which is a nice clean alternative to large header slideshows or background images.

5. http://www.kuva.fi/fi/

The Finnish Academy of Fine Arts may just be the best example of using space to help direct the eye through content from what we've seen in this review.  They've done a wonderful job highlighting content author details, events etc.. using a light grey background to define content blocks and a persistent menu always stays in its own location at the top-right, unobstructed by content/imagery/etc...

Noteworthy: When you click on the tab/link attached to the page's right border, a clean gallery interface for works created at the school opens up - which is clever in seperating the main site from the presented images and effectually displaying a sub-site, simply overlayed on the main site... which makes for quick switching between.

6. http://www.hfk-bremen.de/en/

Built in Drupal, the site for HFK Bremen uses a very balanced and clean design.  With minimal interactive elements (like the front-page concert and event listing's highlights auto-cycling plus the auto-collapse of front-page content upon timed non-interaction) the site is quite fun to explore.  As well, its designers made good use of large-format photography stretched to full-width incorporating a simple white border at the site's top which is overlaid with its logo and wordmark.

Noteworthy: Though using a grid, the site's content areas use varying borderings, making for a slightly calculated-avant-garde effect.  Imagery chosen for backgrounds is typically macro - which works to provide atmosphere more than to take your eye away from content.  By hiding display of interactive controls (such as slideshow next and previous links) until a user engages with the interactive elements makes for a very clean, uncluttered interface.

7. http://www.burg-halle.de

Though simple and clean, the general page design of this site isn't very engaging or unique - however, it exhibits content very well on its homepage using thumbnail images that present contextual information upon hover.

Noteworthy: The 'supermenu' presented when hovering over top-level main menu items is spacious and saves a lot of visual space when collapsed.

8. http://www.wdka.nl

Valuing the importance of contextual background imagery highly, this design offers opaque background to general content blocks and paragraphs - leaving the overall content area in-between paragraphs to expose the background imagery.  To simplify the interface, navigation is compacted into a single block absolutely positioned in the top-right space.

Noteworthy: Through combining what would traditionally be seperate as menu items and dynamic/'new' content listing blogs, the site frees the user to assume an intrinsic relationship between the background imagery and copy.

9. http://www.calarts.edu

Disclosure: We worked with Calarts in 2006 and 2007 to create this website as an entirely new Drupal/CMS-powered solution, since then they have internalised development efforts - the current incarnation is an extremely aggresive design which likely has a lot of users wanted to return to it but needing more time than they have to simply explore content.

Noteworthy: The main menu collapsing still allows you to access their core target group menu sections (Prospective Students, Current Students, Parents, Alumni, Support) - this multi-stage collapse is very useful and can be extended for greater functionality.

10. http://www.thinkingoutside.net/

Towson University in Maryland takes a dramatic marketing approach to their site - leading users through a campaign explaining their 'Thinking outside.' catch-phrase.  This serves as a sub-site campaign to their main school site and specifically seems to target potential students.

Noteworthy: Leading people through a structured narrative can be powerful and engaging when focused around a theme - great for promotional sub-sites.