Week 14: Llewellyn | Interface Design

Design Strategy:

For my website project, I chose to design for a non-profit organization called Pro Portsmouth, Inc. Pro Portsmouth works to maintain the arts, culture, and history of Portsmouth, NH through the many events that they put on throughout the year. The organization’s 10K race that kicks off Market Square Day is one of the biggest races in the seacoast area. I wanted the website to be fun and vibrant, because Market Square Day is all about celebrating the art in the area. I tried to organize the information in a way that was both easy to read and easy to navigate. The race attracts all ages and abilities so I had to make sure the site didn’t just appeal to a certain level of runner. The website is a very useful resource and allows viewers to register for the race and gain information on volunteering.

Choice of Typefaces:

The two main typefaces that I used in my design were News Gothic Std and Spumoni LP Std. I chose News Gothic, a san serif, because it is easy to read on the computer screen. It is a very simple typeface and works well in presenting information clearly. I used to Spumoni because it brought a youthful, fun tone to my design. Although it is a very decorative and spunky typeface, it adds a nice variety when used sparingly. I also used Helvetica for the navigation bar because it is easy to read and has thick strokes that do not vary much in thickness.

Visuals:

I stuck to bright visuals and photographs for this assignment. The logo for the event is very whimsical and fun so I tried to mimic that idea throughout my design. The sky and grass appear on every page of my design. I think this visual aspect helps to emphasize that the event takes place outside and is meant to bring the community together. Pictures of past events are used as the dominant element(s) on each page. I tried to feature pictures that related to their respective pages. The navigation bar that I created resembles a road. Whichever page you are currently on is marked by the sole of a running shoe. This helps to visually communicate what the event is for without having to read any information. I also included the logos of past events on the bottom of the home page, because each logo was created by a local artist and really displays the talent of the area, which is what the event is essentially all about.

Colors:

The sky blue is R=166, G=200, B=219. The green grass is R=187, G=217, B=118). The purple type that reoccurs throughout the pages is R=71, G=41, B=113. Lastly, the yellow used in the navigation bar is R=245, G=234, B=0.

Images:

All images were found on proportsmouth.org except for the big picture on the Register page (http://www.flickr.com/photos/theothermattm/3631211698/) and the two pictures on the Rules & Regulations page (http://doublejrunning.blogspot.com/2009/06/2009-market-square-day-10k.html) and (http://media.photobucket.com/image/road%20race%20runners/dukefarms/082107/runners.jpg).