Fig Leaf designed a solution centered on a three-tiered navigational system and a fresh, clearly organized interface that would empower WRI to easily add and highlight new information and materials to the Web site.
The overall design of the site follows a three-column layout for the content area, and a graphical header and footer on all pages. The first column displays the main navigation bar, with the capacity to show tertiary-level links within a section. Each link contains a rollover state and an active state to give the user visual clues as to what section of the site they are viewing. The second column contains the main bulk of content for each page. The third column displays “related materials,” and contains items and links such as a spotlight area, related links, related publications, WRI contacts and links to other related sections within the site.
The inspiration for the look and feel of the Web site came from the organization’s print campaign, entitled Human|Nature: Make the Connection. This campaign uses imagery to play off the similarities between things in nature, and the human body or manmade objects. With this strong imagery, WRI also created an updated mission statement and goals. Fig Leaf developed a soft color scheme of beige and gray as a backdrop to the vibrant imagery. In order to retain openness for the content-heavy site, the designer introduced gray and beige lines as column and section separators. This simple solution allowed pages to contain needed white space, and offered the vibrant imagery, splashes of color and dynamic copy room to breathe.