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.

Project 5: Interface Design | Shaer

Design Strategy:

The Demographics for The Alzheimer’s Association Chocolate Symphony Spring Sensation and After Party is males and females ages 21 and older. I chose to create the background and side bar that I did because they are gender neutral and fun yet sophisticated. I chose to play off of the chocolate idea for my website because of the name Chocolate Symphony and the fact that event prides itself on having desserts from premier pastry chefs and chocolatiers. With this in mind, I used a chocolate flower to emphasize spring and the tuxedo chocolate covered strawberries because it is a black tie event. I chose the color scheme that I did because it compliments the colors of chocolate, but still has a bright essence.

 

Choice of Typefaces:

I chose the typefaces that I did (Charcoal CY, Apple Chancery, Helvetica, Silom, and Tahoma) because they are blunt and legible. I wanted one whimsical font to capture the attitude of the event. Though the event benefits a very serious organization I wanted to add an element of light heartedness and fun to represent the event. I liked the font Charcoal CY because something about its structure reminded me of a candy bar with its smooth lines and sans serif character. I wanted to use Helvetica for my factual and interactive pages so that viewers of all ages would be able to easily read the font. I used Tahoma on my home page and bottom contact information, only, because I wanted them to stand out and be different from the rest of the website.

 

Visuals:

My visuals are a combination of images from the Alzheimer’s website, marquees, and the pen tool. My colors were all RGB. I used seven different font colors throughout my website: black, white, R=93 G=45 B=9, R=233 G=128 B=18, R= 93 G= 45 B=9, R= 107 G=104 B=104, and R=70 G=38 B=32 .The background pattern was manipulated using the opacity option to add contrast, interest, and look as though it were a watermark. The three colors I used for my background were white, R=211 G=240 B=233, and R=169 G=158 B=158. The boxes around my text are R= 245 G=242 B=242. I altered the active page strawberries by using drop shadow, smart filters, and fresco.  The non-active strawberries are enhanced with a drop shadow. My answer boxes and bubbles contain gradients, inner shadows, and inner glows. My continue boxes were created using a grey and white gradient with a black boarder outlining it. I used a 960 grid with twelve columns as the foundation in constructing my webpage. 

Berk | Web Site Project

The non-for-profit I made my site for is Our Time Theatre Company, which is an organization for children who stutter. As someone who has a stutter, it has a personal connection to me. Our Time puts on shows, plays, and allows to kids to learn and interact without fear of mockery. The event is their annual gala where they invite a celebrity and they perform and speak before mingling with the children and guests.

I used Helvetica for all of my typefaces, because it is so versatile and easy to read. Plus, the movie we watched really made it seem awesome. I used mostly regular, with bold in some of the headers as well as one Oblique Bold to make an important paragraph stand out.

I got all my pictures either from the Our Time web site or from a press release about an earlier Our Time event.

I pulled the logo from the Our Time web site and based my color scheme, namely the background and color of the navigation bar at the top on it. The orange background comes from the bottom left corner of the logo.

I found the location on Mapquest and just took a screenshot of it to put on the Directions page.

The logo is somewhat blurry, especially the black text along the bottom. I tried to find a better copy of the logo but was unable to. I didn’t want to stretch the logo that much but I had to or else it would have been completely unreadable. At least now, you can see ‘Our Time Theatre Company’ which is the main point.

Web Design

The main goal for me for this project was to make a web design that was easy to navigate. I therefore made the navigation bar have the same location on every page and it was easily accessible and readable. I wanted to make the overall web design clean and simple. Instead of using colored backgrounds I decided to fill every page with large images. I feel like this allowed me to cut down on content and it was more appealing to me and allowed me to use space in the site creatively.

The Greeks vs. Cancer title that is present on every page is Wide Latin font, 24 point. The purple color of the font is R = 90%, G = 48%, and B = 141%. The navigation bar that is present on every page is Lucida Sans font, 8pt. The white color is R = 251%, G = 251%, and B = 252%. The navigation bar consists of the Home page and five linked pages, about, photos, sponsorship, location, and contact. The black arrow indicates which page you are currently viewing.

The text on the home page is Lucida Sans font, 12 pt and is black in color. The picture on the home page is from flickr.com The about page also uses a picture from flickr.com Both text items found on this page are Lucida Sans font, the title is 12pt and the body text is 6pt. The photos page has a picture from flickr.com as its background that I adjusted and made it dimmer. I put six pictures that are actual pictures from the event and added a number bar at the bottom indicating that there are more pictures available to view. The sponsorship page uses a picture from Google as its background. On both this page and the contact page it was tough to align the boxes and information. The text on this page is also Lucida Sans. The text on the location page also is Lucida Sans. This is the only page where I use a color background. I got the picture of the location of the fraternity house on Google maps and I copied the URL of MapQuest and made it blue and underlined it to make it appear like a link. I did use a picture from flickr.com as a box for text. The contact page uses a picture from flickr.com as its background as well. The text is Lucida Sans and I added the links of social networking sites as well.

In trying to make my web design easy to use I eliminated using a lot of text. This could hurt the overall structure of the design but it fits my goal of clean, simple, and easy to use.

Web Design Project | Young

Because my not for profit is the Pajama Program (a group who's main goal is to donate bedtime stories and pajamas to children who need them), I chose to make the overall feel of my website more childish and whimsical than grown-up, even though my event was a cocktail party. My design definitely came heavily from my original poster project and I decided to use almost every element of my poster in some way or another on my web page. Specifically, I used a 16 grid system and used the stripes from the pajamas as a background, and to mark my guides. In addition to this I used the buttons from my original poster for links to navigate around my site, and the pocket from my poster on the home page. All of the doodle-like designs on all 6 linked pages were created in illustrator with the paintbrush tool. To be consistent I also used the same fonts from my poster which are Shelley Script Lt STD for the "make dreams come true..." on each page and I used Trajan Pro bold for all the rest of my body copy. Again, like my poster I kept the colors simple and bright, primarily I used purple (R 44 G 41 B 107), and light blue (R 171 G 223 B 241). The other simple images such as the martini glass with milk and the cookie as well as the map and gallery photos were taken from google images.

Mercer Web Design

Whitney Mercer
Web Design Rationale
April 27, 2010

Colors:
I thought it would be appropriate to use a dark background for my web page, since the entire event it based on the idea that it’s being held in the dark. I decided to go with a midnight blue background rather than a black one because I wanted to keep some color in the page. The light blue navigation bar and bottom bar, as well as the side bar and the stroke around the central information, was a nice contrast to the dark blue, while continuing a soft and cool color palate. The hot pink is a definite contrast to the cool colors, and I used it to create a connection to the cupcake’s frosting in the upper left corner. I used a yellow font to show the different sections on the navigation bar ‘lighting up.’ Here are the color values in RGB:

Pink: R=230, G=64, B=151
Cupcake bottom: R=253, G=187, B=48
Navy Blue: R=0, G=44, B=119
Light Blue: R=169, G=196, B=236
Yellow: R=243, G=232, B=0

Cupcake:
I created the cupcake in Illustrator with the pen tool because I thought it would be nice to include some element of dessert on the page. Cupcakes are simple and universally-recognized! Also I knew that I could use bright-colored sprinkles and frosting without making it look inappropriate, and I knew I wanted to use bright pink for some of the text on the page.

Font:
I really like Bruno JB Std (which I used to write ‘Dessert in the Dark’ and the headlines for the information boxes) because it gave the appearance that somebody had used frosting to write the words out. I like the double stems for the capital letters, and I really can imagine seeing this type face on a cake or other dessert. I used in in 100 pt. for the main headline and 48 pt. for the information headlines. I kept both in the hot pink type and same type face to create visual gestalt. I used Caeceilia LT Std. for my other font, because I think that it too reminds me of something that could go on a dessert. It is easy to read the the wide letters are sort of playful- I almost imagine a cupcake store using this type face on the outside of the building.

Design:
I wanted to include a side bar as well as a top navigation bar, so I created a fun fact, or ‘Eye Opener’ on the side bar for each page. I also wanted to have my information go inside of a box that had the light blue stroke, but was more of a continuation of the navy blue background on the inside.

Photos:
Since there are no photos from the past for this event (as it’s the first one) I ended up finding pictures on Google Images. I wanted to use pictures that relate either to sign language, or else to the event itself (hence the dessert buffet photo). The images of the logos for the sponsors come from those sponsor web Sites. Here are my sources:

Hand reading braile: http://www.vtsworld.org/images/Braille-Hand.jpg
Baby and mother signing: http://blog.oregonlive.com/themombeat/2009/07/large_baby-sign-language.JPG
Hands shaking: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge4xuJC2x1BDYA5JbKUNMl03iFXgoLRtAEp_Tw5m7nFAcSvu0cWweg60WwQvWo9AHmi-OjelW_BIi80a3M3hAf0evSewHMuJW-iKYNFHpTpl6Edq6Nw3btmrFJ3dk4OTlNyW2S6cXLQoWj/s400/img_hand_shake.jpg
Dessert Buffet: http://www.lovedivineinspirations.com/USERIMAGES/DESSET%20BUFFET1%282%29.JPG
Map: Google Maps

Project 5 Web Design | Pruitt

Design:

I put the logo for the project in the top left-hand corner of the webpage because I felt like that was where many people looked to first and I wanted to show the logo for it. I added a picture next to it because I wanted another thing to keep throughout the pages and I felt like there was too much white space without it there. I used the colors red and blue for the backgrounds of the boxes because those are colors that are featured in the logo and throughout Habitat for Humanity. Whenever the user clicks on a link in the nav bar, it gets a red background around it and a small green hand. I did that because I wanted it to be obvious to the user where he or she was on the website, and I added the hand because I wanted to incorporate something from the logo in the corner.

I also added a small link at the bottom of each page to donate. I got the link from the actual Habitat for Humanity website.

I got all of the text on the pages from the information packet on the Interfaith Build.

Fonts:

For my nav bar, I used the font Arial because I liked how it was easy to read and very simple. I felt that it was clean and smooth and didn’t draw too much attention. For the body text on each page, I used various weights and sizes of ITC Avant Garde Gothic Std. I felt that it was easy to read and looked nice as well. On the Questions and Fundraising pages I put a small sort of headline at the bottom to clarify what the page was for. I put those in the font Chalkduster.