Case Study: Informational Clarity

Recommended: Click here to open the site in a separate tab for easy reference while following this case study.

This design, which dates from 2012, is not a modern responsive site (“responsive” in web design refers to page elements that automatically resize and text that automatic reflows, according to the size of the browser, in order to display well on different sized devices). It is only optimized for desktop and phone, not in-between sizes like tablet. However, it is an excellent example of how it is possible to design for the web in such a way as to organize and display a huge amount of information much more compactly and more clearly than could ever be possible in print, thereby tailoring the design to the medium itself.

In order to achieve this, I created a series of sublinks, not as a submenu buried within the main menu as is the norm, but much more functionally and clearly, as a series of buttons in the right column. Clicking on any of these buttons takes you to a separate page that, because of the design, appears instead to merely replace the information on the existing page rather than changing pages. What gets replaced is a slide show of photos taken at the location featured; a paragraph of descriptive text; and, below the buttons, a series of links to external websites for further information.

In writing, employing parallelism makes multiple ideas both easier to understand and to relate to each other. The same principle applies here in an instance of visual design.

Apart from conveying a huge amount of information simply and clearly, the design also features a persistent call to action on the upper right corner of each page and a semi-transparent background that scrolls—and therefore, appears to hover over—a stationary background photograph of sand, which acts as an ever-present reminder of the desirable oceanside location of the condominium complex the site is promoting.