Previous: A-Z Dynamic Listing - Page 5 of 14 - Next: AJAX Campus Tour

Aesthetics and Design

After some initial planning and brainstorming, the project to redesign the Drew University site started in late March 2006 with near-final versions being decided upon in mid September 2006.  After deciding upon an inventory of elements that should appear on each page, the process of repeated prototyping and brainstorming began, including feasibility testing for Flash, Flash Video, and Javascript elements for the site.

The most noticeable aesthetic feature for most visitors is the color palette.  Each of the three schools (the College of Liberal Arts, the Caspersen School of Graduate Studies, and the Theological School) has its own color scheme, with the main university site adopting the College of Liberal Arts color scheme.  Instead of using flat colors or faux shading in our headers and footers, however, we use simple gradients between our base colors and a lighter warmer version of that color.  Combined with the drop-shadows applied to the page as a whole, it's meant to make the page appear as though it were being viewed under a soft warm light.

An extension of that is the widespread use of gray tones throughout the site.  Gray tones allow us to have a consistent look and feel while simultaneously matching all three color palettes.  In order to continue the soft theme, we often use gradient backgrounds as well as gray borders.  (Single pixel gray borders are seen by the user as less-than-single-pixel black borders that are out of focus, giving your borders a very precise look and yet soft feel.)

As you may have noticed from the previous images, we've moved the main site navigation over to the right-hand column of the site instead of having a traditional left-hand column navigation.  One advantage is that this helps with ADA compliance because the user reaches the page content before reaching the navigation (thereby eliminating the need for a "Skip Navigation" link).  Another is that it makes the site look like a blog, which appeals to younger prospective students.

In special occasions, we break with traditional design and add special adornments to the page.  One example is our Commencement site which was designed to look like an envelope and invitation.

To see more of the Drew University aesthetic design, visit http://www.drew.edu. To see the Drew website design in various stages of development, visit http://depts.drew.edu/pubrel/betas/v5/.