In June of 2015 I worked with the IA Institute to design the Call for Cities page for World IA Day 2016. World IA Day is an annual event held by the IA Institute that takes place in many cities throughout the world, and the Call for Cities page would be used to provide information about the event and ask people to sign up to host the event in their city. Once sign-ups were no longer available, the page would show the cities that had signed up to host the event and a bit more information about the next things that would happen before the event.

The final version of the open call for cities page is below; all images on this page are shrunk and cropped for ease of reading, please click through to see the full version.

Interactive versions are also available for both the open and closed pages. These pages are responsive, feel free to resize your browser window at will to see variations :)

Open Page Closed Page

Process

They wanted something fairly minimal that could be developed and put online quickly. It also needed to conforming to the new color guide that they were developing for the new IA Institute website (White background with black and grayscale text, pure cyan primary color, pure magenta and pure yellow secondary colors), and there should be a prominently-placed link to sign up with more detail and additional sign-up links below.

Text, logos, and color and font guidelines were provided by the IA Institute, but otherwise all layout and code are mine.

Below is the minimal first draft with the initial text and colors.

They liked that version, but it also needed to showcase previous events. The second draft added a background to the header and several photos between each section.

Below is the final color scheme. An important goal of the project was that the page be accessible to as many people as possible, but the initial color scheme from the styleguide did not meet WCAG AA contrast guidelines. We tried several variations, including changing the colors from pure cyan and magenta, but ultimately settled on removing most of the cyan and making sure all text on magenta backgrounds was at least 18px. I also used a cyan color wash on the top photo to reduce visual noise.

And below is the closed page with the list of cities, some information about the next steps, and team photos. Mostly this version followed the design of the open page, but the columns were shifted so the city list and team photos could span the whole page while the information sections were shifted side-by-side to maintain a readable line length.