Lately Engaging.net has most often been tapped for fulfilling back-end system dreams, so it was an exciting pleasure to get back to the front-end for the redesign of the Israel Center for Social & Economic Progress web site. The pro-market thinktank’s previous site design, made back in 2001 for 800px-wide screens, was beyond stale.
The ICSEP site has three types of content: commentary by founder and president Daniel Doron originally published in newspapers and magazines; information about the organization, including its rationale and programs; and updates on recent activities held under the auspices of these programs, such as individual conferences and reform plans. Our brief for the homepage (which is all we’ll discuss here) was to display all three types of content, along with new video and a donate form, without being overwhelming.
A golden ratio framework
For visual clarity we developed a Cascading Style Sheets framework called Goldens that sizes columns within a 960-pixels-wide layout and divides them approximately by the golden ratio, 1.618. This makes every column either the same width as the one adjacent to it or about 1.618 times wider or narrower, and makes the total width of any two adjacent columns (where they’re not of equal widths) be as to the wider column as the wider column is to the narrower. Having all elements of the site conform to this framework unites the site visually into an organic whole that we hope pleases eye and mind.
The programs matrix
The main element on the homepage is the Programs Matrix, a three-column listing of target audiences, activity programs, and an intro text on each program. In a space of just 575 by 390 pixels it provides a comprehensive overview of ICSEP’s work.
Since there are currently ten programs, there’s no space to display intro texts for them all. Instead, mousing over any program title displays its intro text only; the display area flashes as a signal to the user that it’s changed, and the jquery hoverIntent plugin ensures that the change isn’t triggered accidentally.
The Programs Matrix appears not only on the homepage but throughout the site wherever a listing of programs is required. This modularity contributes to a reassuring consistency.
Open-source video
Alongside the Programs Matrix, in a space 1.618 times narrower and on a contrasting background, the video area showcases ICSEP’s introductory showreel. (It features luminaries such as Israeli Prime Minister Binyamin Netanyahu, Soviet dissident and Israeli minister Natan Sharansky, and British businessman Lord Stanley Kalms each endorsing ICSEP.) The open source Flowplayer video player is skinned in the site’s color palette.
Luminaries on the march
Below the Programs Matrix and the video area is a set of testimonials marching across the entire page. This horizontal band serves as the fold, separating the more general content above from the more specific below. The march is powered by the jQuery jCarousel and Easing plugins.
And now, the news
Beneath the marching testimonials appear the Recent Commentary and Recent Activities lists, which are the most frequently updated content on the site. These two elements follow the principles established above in the Programs Matrix:
- layout by Goldens framework
- mouseover by hoverIntent to display only one intro text at time (here a jQuery accordion)
- modular and exclusive means of display throughout the site for their respective content.
The ask
To the right is the Donate area. Its contrasting background has flowed underneath the marching cards from the video area above, suggesting that by donating to ICSEP the user joins the luminaries in the video who appreciate and support ICSEP’s work. (The donation form is actually a registration form, so that donors can keep track of their donations on their My Account page.)
The rest
The rest of the homepage is header and footer, both of which appear throughout the site. The footer features the organization’s tagline in a tab that mirrors the site menu up top. Meanwhile the header contains not only the organization’s name and logo in the masthead, but also — unusually — a diagram outlining the thinktank’s rationale.
Take this home
Finally, flowing from the header to the footer interspersed throughout the homepage are four sentences in large type that follow each other logically as well as visually. They state the following:
- Chronic economic problems threaten Israel’s national survival.
- ICSEP facilitates crucial economic reforms and helps overcome resistance to them.
- Renowned policy-makers and opinion-shapers appreciate and support ICSEP’s work.
- You can support ICSEP now by donating online.
And to sum it all up, in the footer appears the organization’s tagline, a quote from Pirkei Avot, the Ethics of the Fathers: “Where there is no bread, there is no Torah.”