Launch site: www.roanokerising.com
“Roanoke Rising: The Campaign for Roanoke College” seeks to raise $200 million for the school, listed as a “Top 10 Up and Comer” by U.S. News & World Report. This responsive website offers a clear overview of campaign priorities, makes an emotive appeal to potential donors, and reminds alumni of the role they play in shaping Roanoke’s future.
The client and I reviewed all the information they wanted to include on the site—reasons for giving, ways to give, which campaign priorities would be funded, and who would be impacted—and organized it into an intuitive site map. We also began outlining which content would appear on each page, laying the groundwork for our wireframes.
Wireframes provided a detailed map of the content for each page template, showing placement and hierarchy for levels of typography, imagery, sidebar elements, and relationships between associated pages and tags. Desktop and mobile versions indicate how the same content would display across a range of screen sizes.
While designing the overall campaign identity, our firm had already made important decisions about things like color palette and typography. I was able to combine those design precedents with my wireframes and quickly make a set of style prototypes. These are sketches that show a design approach through small components of a web interface, rather than trying to show full page comps at multiple responsive breakpoints.
Once you’ve defined the header, menus, levels of typography, sidebars, article blocks, buttons, and so on, it’s much easier to apply those design decisions to an entire site, either through more detailed comps or by moving straight into HTML and CSS. In this case, I passed final mockups to our development partner Ryan Blain, who then built the WordPress-driven site.
Produced at Landesberg Design; art direction by Rick Landesberg
WordPress development by Blain Interactive