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.

Web Design | Neufang

The Event

Dogs for Dogs is a small event that was created spur of the moment by my sister and brother-in-law. It was supposed to be just a fun little family event, but through word of mouth it has grown into a full-blown party. Because of the large turn-out of family, friends, and friends-of-friends that wish to participate or simply observe, they decided to bring some good from the event. They named the SPCA as the official benefactor of Dogs for Dogs. I decided to make my website to further promote the event. If the turn-out goes as well as expected, we may make this design into the website for years to come.

Colors

I started by scanning a napkin with the traditional picnic-plaid design. I used it as a background, and took the red color and used it for the text in the header. I also used a lot of yellow for the reference to mustard and to invoke excitement (and hunger). I continued this gestalt throughout the website, only switching to blue for links since it is the traditional link color and will help make the website more user-friendly.

Typeface

I used Impact for the header, because as its name suggests it has power to grab the users attention. Lucida Handwriting Italic was used for the “1st Annual,” because I thought it had the feel of a traditional picnic promo poster or sign. The rest of the website uses Geneva regular because I wanted a nice, easy-to-read, sans serif typeface. It is a little more interesting than Helvetica because it isn’t used quite as often, but still it isn’t distracting.

Photos

This website is simply fun. I used a lot of pictures of dogs and hotdogs. I even went as far as to make my navigation bar out of hot dogs, and the mouse-over effect of taking a bite out of the hot dog will hopefully make a few people laugh. I hope that the weiner-dog in the heading will convince many people that they love animals enough to come to the event. I love the picture of the champion hot dog eater and hope that it is inspiring to anyone who wishes to take a stab at winning such a ridiculous contest. Of course, I had to include pictures of real pets that people could adopt, although I wanted to stay away from the sad looking animals that the SPCA usually uses to encourage people to donate. I think the animals I chose are beautiful (and you can really adopt them right now. If it were a live website I might have some script that would link each pets picture to the petfinder.com page where they can get more information. I thought the smiling dog on the final page was a nice way to conclude a person’s visit to the website.

Heirarchy | Neufang

I paid my cell phone bill today. As I logged into the Verizon wireless site, I was bombarded their heirarchy. This huge laptop overtook my screen and screamed, "Hey! Check this out!" Well OK, so that one was obvious, and it eventually went away to reveal the actual website. So they really want me to look at that laptop, which is supposed to represent how easy their site is to use now; the new "My Verizon". Even after the pop-up disappeared, it was still there, large and in charge of the website. Well, that's what they claim. Let me examine their heirarchy.

Right next to that is the form to log in. They obviously don't want people to forget to pay their bill and check to see how long before they're eligible for an upgrade.

After that the red navigation bar grabs my attention, pulling me straight across to see all of the features their website offers. They then have a bit of red right above that telling me that I can get free-overnight shipping, and then next to that I find that I can sign my business up for Verizon also. How convenient.

Only then is my eye free to wander around the bottom of the page where I can find even more ways to give them my money. But oh, what a deal it is. And look, a clock! I must be running out of time, I better jump on that.

If I make through the homepage long enough to scroll down, I will find myself assured that they have the largest 3G coverage (once again. Oh, that trouble making map). And blah, blah, legal stuff, blah, blah, stocks, blah, "You're safe to use your credit card here."

Good heirarchy. Great marketing. Is time for my upgrade yet?

So all in all, I think the new website is pretty good. Easy to use. Definitely tempting me to buy more stuff and services. Only after I did this whole tour did I realize that I skipped right over the "account actions" container. It's filled with calming blue links in this sea of exciting red. Maybe they did that intentionally, but there is an option to pay my bill there so I don't understand why they don't draw more attention to it. That is possibly the only thing I would fix.

Interface Design | Tocci

I wanted to use bright, fun colors and shapes because my event is supposed to be playful and lighthearted. I chose yellow for my background color because it’s a warm, inviting, attention-grabbing color and I thought it framed the pages well. The pink in the page header matches the pink in the event logo, and the darker pink I used for the shape fill colors makes the white text more readable. I decided to use yellow only as a background and not over the whole page to avoid overwhelming the reader’s eye. I chose Gill Sans as my typeface because it is versatile and easy to read on a computer screen. My event largely targets children, so I wanted to the website to be as simple and as easy to navigate as possible. I used a box of text with pictures underneath on every linked page (except the 2009 Event Pics page) because I figured that was the most efficient way to communicate the necessary information and give people a glimpse of what the event is like. I placed my navigation bar links in the order I felt would give the most accurate depiction of the event, starting with Carly’s Story and ending with Contact Us.

Marte | Web Design

The website design project was very interesting. I thought the concept was easy; it was just a matter of designing and choosing what is right for your webpage. I decided to do my event on Project Feed Me because I volunteered last year. Also the founder is a very good friend of mine and I think the more people know about PFM, the better it is. Since this organization was created by students, and they don’t have a lot of money, I wanted to make the website simple but fun to the eye. I started with very simple fonts like Helvetica and Chaparral Pro, but they were too serious for my taste, so I changed to Khaki for my typeface. I loved it because it’s so playful, and it doesn’t take away the seriousness of the event.

I included some of the pictures of the past events that I was able to find, and tried to scatter them so every page won’t look the same. That is also why I chose a different color per page. I tried to combine the color with the category I was talking about, for example: The About us section is blue because it has a more corporate feeling to it, however, the Thanksgiving Dinner page is very colorful because of the occasion. I decided to stay with Khaki all throughout because of consistency and also because it worked fine with all the pages. I had a little issue with the logo, for some reason I couldn’t get rid of the white background, which annoyed me a lot. Overall, I liked the outcome of my web design. I first I thought it was too simple, but sometimes simple is better.