Redesign/Rebrand Website Project

logo_2_0-blueFor my redesign/rebrand project, I am choosing TPAN, which is the Test Positive Aware Network – a community-based service organization that provides HIV testing to the community, and comprehensive health and wellness programs to everyone impacted by HIV/AIDS.

current_site_screenshot

A screenshot of the current TPAN website.

The current website for TPAN is built on Drupal, an open-source CMS similar to WordPress that is primarily used for creating complex business websites. There is a lot of blank white space, which makes it look incomplete. It also uses Times New Roman as the body typeface, which is usually the default font for most browsers, which also gives the site an incomplete feel.

My idea for TPAN’s website is to leverage their brand equity by keeping the existing logo, which is a highly recognizable logo within Chicago’s LGBTQ community. The site itself would need a revolutionary redesign.

They already have good type choices in use in their publication, Positively Aware. I want to build on these choices with TPAN’s website.

tpan_rebrand_style_tile_1

Style Tile 1 for TPAN (Click for larger image)

tpan_rebrand_style_tile_2

Style Tile 2 for TPAN (Click for larger image)

Style tile 3 for TPAN (Click for larger image)

Style tile 3 for TPAN (Click for larger image)

Style tile 4 for TPAN (Click for larger image)

Style tile 4 for TPAN (Click for larger image)

For my typography, I am choosing Proxima Nova for headlines and subheads, a close match to the Gotham typeface in use in their publications. For the body copy, I am choosing either Open Sans (tiles 1 and 2), PT Serif (tile 3), or Roboto Slab (tile 4), all of which have clean aesthetics and go well with Proxima Nova.

For the color scheme, the common color between the two proposals is what I am calling TPAN blue, or the HEX color code #0e4e9e, the blue used in their logo. Other colors can either be complimentary or split complimentary, or a mix thereof.

I would like to eliminate a lot of the white background by substituting it with either a light grey or a slightly beige background with white tiles that have a slight drop shadow hanging over it. This would set content apart, create visual separation, and break up the white space.

Leave a Reply