Good work making it this far. You’ve just seen the homepage packed with; the latest big news, events and reports, advocacy work, testimony quotes, links to historical reports, newsletter sign-up, RPA membership, and report collections search. Whew! That was a mouthful.
Before showing more of the finished result, here’s a look a the process, with the design broken down into its component parts.
Asymmetry: Although the site design is based on a strict 8 column grid, all complex elements are comprised of blocks of non-matching widths and nothing is ever centered. The intent is to make the site feel unique, and test Brett‘s development skills.
Illustrations: We created isometric illustrations that represent RPA’s four research areas, and were inspired by drawings from RPA’s Second Regional Plan from the 1960s. We used a limited color palette, expanding on the existing logo.
Patterns: A variety of patterns were used to frame elements and give the site texture. The patterns were derived from some incredible map fills from RPA’s First Regional Plan from the 1920s.
Circles, lines, dashes and dots: The way-finding arrows mirror the circles of the RPA logo, while other elements serve as content dividers. These are based on map keys, that typically indicate railways, roads, and pathways.
One of the biggest challenges of this website was figuring out a flexible CMS that allowed RPA to add their print reports to the web. The system had to be versatile enough to accommodate charts, maps, graphs, tables, photos, multiple level of headers, pull quotes, sidebars, slideshows, links to related new items and reports, authors and contributors and downloadable pdfs, while also being easy enough to use and look visually cohesive.
To accommodate the various types of content we set up the CMS to work like a set of building blocks. The team at RPA could build anything they wanted with the set of blocks available to them, and in the end, it would always look like a building. The limited set of components provided just the right amount of flexibility without being overwhelming.
To deal with the exceptionally long pages, we designed a Table of Content structure that was presented at the header, and then followed you as you scrolled down the page.
Another challenge was determining how to organize and display the over 300 reports from the last hundred years. We settled on a variable grid that allowed RPA to feature select reports. Reports from the archives are interspersed into the more recent work, giving you a time machine to see what planners of the last century had in mind for the region.
We created two entirely new sections; an interactive timeline with all of RPA’s biggest accomplishments from the last 100 years and the “Our Region” page which gives an overview of the who, what and why of the organization.
Some other notable features include a staff page with individual bios, a prominent way to display the speakers and authors of all events and reports, and a comprehensive search that allows you to filter by a variety of criteria.
