PRISMS Informative and Supportive Website Comps


|

The site design utilizes a clear hierarchy (Lynch and Horton, 2002) in that the logo takes the upper left position with the hot topic navigational links directly below and sectional headings across the top. The membership log-in area is in the upper right, so that it will be easy to find, below the log-in is the search box and a link to contact the PRISMS organization. The main content of the page has a photo taking center stage and followed by teaser text to draw the reader into the site.

The logo concept for this version was developed through exploring geometric prism shapes and unifying the shapes in a dynamic forward moving configuration that would support the forward, growth and development of the PRISMS organization while providing a nod to medical research and the educational aspects of the organization. The selected color pallet draws from the original concepts each contributing either a color directly, or inspiring a new selection. The clinical/medical blues play off the warmth in the educational gold and brown and the membership reds. Together these colors form a split complementary pairing (color matters, 2012). To add additional contrast each color is paired with a darker variation, and a black and gray pairing has been introduced.

The typeface Gotham (Hoefler & Frere-Jones, 2012) was selected for the logotype. Modifications were made to the typeface so that the counter of the p reflects the same hexagonal “prism” (Bowling, Brody, Allen, and Aulter, 2012) that is utilized in the mark. For body copy Register Sans BTN (myfonts, 2012) has been selected. Together these fonts present a warm, stable, and open expression, which supports the PRISMS underlying tenet of being supportive, informative and compassionate.

The desktop web version of the site utilizes background images to produce a rich visual display. However, for the iPad / tablet version the background images were removed in favor of faster load time for the mobile devices.

When screen size is reduced further for iPhones and smart phone devices the layout alters once again to a two column format. There is no background graphics utilized and any story graphics are optimized for the smaller screen to promote fast load times. The layout was designed to promote easy vertical scrolling, while providing all important information in the initial screen view on the device.

References:

Copyright © 2017 Alice Pettey Branding & Strategic Design, LLC