Our Urban Future Website

I was asked by the head of Duke University’s Our Urban Future (OUF) chapter to build them a WordPress site. OUF is an urban planning interest club that focuses on the Durham, NC community. They wanted a site that would house general information about OUF, their projects, and a blog page.

Project Brief

To inform my initial designs, I used elements from OUF branding materials. In early planning meetings, the client and I discussed design inspiration, font choice, color palette, and features. The client wanted the site to have a unique style that links to urban planning and looks clean and modern.

Styling

Using the color palette and branding materials given by OUF, I created three wireframes of homepage designs. The client wanted the homepage to have an embedded survey and a large background image at the top of the page.

Prototyping

OUF home page wireframe design 3.
OUF home page wireframe design 1.
OUF home page wireframe design 2.

After selecting one of the panels, the client decided to change the color palette based on my suggestions. The original palette had too many colors, and designs were too busy when I incorporated all colors. Also, it was difficult to find aesthetically pleasing text and background color combinations that meet accessibility contrasts standards using the original palette.

Original OUF color palette.

The client and I changed the red to a light purple and removed the medium color blue from the palette. The new palette allowed for the designs to comfortably incorporate the chosen colors and meet accessibility standards.

Current OUF color palette.

To keep the urban theme of the site consistent, I styled each page to include a visual allusion to cityscapes. For the About page, the content blocks are placed to look like a top-down view of a city block. The elements on the Connect page are linked by lines to resemble a map. Finally, the layout of the Blog page is meant to mirror skyscrapers.

OUF about page wireframe.
OUF home page wireframe design 1.
OUF connect page wireframe.
OUF blog page wireframe.

Project in progress…