Forever New: A Ten Year Report

Screenshot of Ten Year Report webpage

During his tenure as Dartmouth’s President, James Wright produced a both a five- and ten-year report detailing activities and milestones achieved, and plans for the future. I developed websites for both reports. My task was to take the lovely print design created by my colleagues in the Office of Public Affairs and turn it into an attractive and easy to navigate website.

In many ways, web design is more difficult than print design because the medium is fluid rather than fixed on paper. Designers often address this difficulty by trying to nail designs down using fixed element widths, fixed type sizes, and unchangeable graphics. However, as a designer I strive for universal usability. I design layouts that adapt gracefully to different window widths and types sizes, and favor text over graphics whenever possible, as text can be read by software and graphics cannot.

The ten-year report challenged my abilities at fluid design. The booklet is image heavy, with compelling photographs bleeding to the edges of most pages. With a flexible web page, it’s impossible to predict page edges. I used floats, fades, and clipping to capture some of the same drama as bleeds.

Screenshot of the Ochieng’ Brothers page showing treatment of large images

The navigation of the site is modeled on the booklet, with linear paging links that announce the topic of the next page. Paging navigation is both above the fold and at the end of each narrative, so users can easily page through the report. To accommodate users who wish to jump from section to section, or among specific pages within each section, I included a site map on the home page and at the bottom of each page.

Regardless of the ease of use, attractiveness, and readability of the on-screen version, some users would prefer to print the report. I explored options for producing an attractive and readable printed version, using image swapping to provide high-resolution print-friendly images where possible. I also provide a link to a single-page version for printing. While the printed web version is not the equivalent of the one designed by my colleagues, it provides a good experience, both on screen and on paper.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s