Historic Districts Council Website

Product Design

I was brought in to this project to create a UI design scheme and some basic page designs for this nonprofit site. The client wanted to keep the budget low for this full website redesign, so I worked with their developer to supply a style guide and UI for a few key pages. 

CLIENT  Historic Districts Council 
ROLE  UI Design
DATE  January-March 2018
STATUS  Launched

 

Historic Districts Council is a nonprofit that protects and advocates for historic buildings, neighborhoods, and districts in New York City. They began an overhaul of their web presence in late 2017, needing an updated design and the ability to show more information and thought leadership online.

I was brought in to this project by a friend who consulted on the UX and had already created wireframes and IA for the site. My role was to create a UI style guide with elements that can be applied to the site and to skin the page templates that were detailed in the wireframes. The team was already working with a development team that was building the site on WordPress who would be able to apply my UI designs to their CSS.

I worked with the HDC team to scale down their detailed logo so it could be read on screen, and I developed an updated digital color palette based on some of their latest marketing materials and their brand guidelines.

hdc-1hdc-1
hdc-2hdc-2

Donate page templates seen on different breakpoints. Donation is the primary call-to-action throughout the site so it called for a specific page template.

hdc-3hdc-3

In-progress design of Homepage template and Navigation design. The navigation was kept responsive so that users could access the many pages within from any device.

MODULAR PAGE DESIGN

To save development and design time, we took a templated approach to developing page designs for most of the content on the site. Extrapolating from the wireframes, I designed module styling for a flexible series of pages that could be combined and customized based on each article or page’s needs using WordPress.

hdc-4hdc-4

Sample Homepage Template. Design includes placeholder modules that will be populated by recent articles that will be added into the WordPress CMS.

hdc-5hdc-5

Samples of Digital Style Guide & Modules

hdc-6hdc-6
hdc-7hdc-7

Sample of Article Template on Desktop, Tablet, and Phone breakpoints