Project 5: Interface Design | Paterson

Design Strategy and Client Information:

My client is the same nonprofit organization for which I designed a poster; however, I designed an interface for a different event that they sponsor each year. This event is the 5th Annual Narrow River Turnaround Swim, which will take place on June 19 in North Kingstown, Rhode Island. The swim is open to all ages, but it is strongly recommended that the participants have swam at least one mile in open water or a pool prior to the race. The swim promotes open water swimming for the locals, raises money and awareness for the Narrow River Preservation process.
I wanted to make the interface fun while maintaining a professional format, so I included many cartoon-like graphics and photographs, but provided enough information to convey the message of the organization and event. The title of the website (the event title) includes an ‘S’ that has been “turned around” just to add a little fun to the header. I used blues and a green pulled from the swim caps in the photographs. I wanted the design to be as easy to use as possible because it is an event that attracts many different people from all over the state of Rhode Island. I used a swimmer to indicate the active page and waves to outline the containers holding information. I think the design provides plenty of information and links while maintaining a fun, attractive environment for the actual event.

Typeface:
Because web design is limited in which fonts are available, I used one typeface throughout the entire interface. I used several different variations of the font Gill Sans throughout the design. I wanted to use a sans serif because they are easier to read on the web, but it had to be diverse and interesting. The typeface merely serves as a legible device for conveying the information about the event. I used bold and italic do differentiate parts of the information in order to form visual hierarchy throughout the website. The navigation bar was Gill Sans Bold, but I had to make it into an image in order to add the wave effect. The links within the body text are underlined and green.

Visuals & Graphics:
I made all of the graphics including the waves, swimmer, bubbles, and bubble arrows by bringing in clip art from Google Images and redesigning them in Photoshop. I added the goggles, swim cap and bubbles to the swimmers and I matched the event’s logo to the color scheme of the website. I also changed the colors of the seaweed that appears in the bottom navigation bar to provide the feel of the river/ocean environment. I also designed the bubble arrows that appear on the ‘Results’ page in Photoshop. I retrieved all of the photographs from the Narrow River Preservation Fund website, so they all have a resolution of 72 dpi.

Color:
The colors are very reflective of the poster I designed for the NRPA run. However, there are three different shades of blue and two shades of green that I picked up from the photographs with the eyedropper. The darkest blue has values of R=8, G=37 and B=66. The water and wave blue is R=11, G=46 and B=101. The lightest “sky” blue is R=188, G=219 and B=249. The green of the logo has values of R=132, G=253 and B=126 and the green of the seaweed has values of R=95, G=161 and B=78. All of the body text uses three of these colors and white throughout the design.