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.
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.
- Launch: January 2009
- Role: Design, Build
- Key Collaborators: Office of Public Affairs
- URL: http://www.dartmouth.edu/~tenyearreport
Sarah Horton 