December 8, 2009

Last Post! Interface Design Project Post





The not-for-profit event that I did for my poster had a very extensive website so I wanted to pick a new event that had either had a very basic website or no website at all. In high school I volunteered with Habitat for Humanity and participated in and helped plan my school’s alternative Spring Break trip with Habitat. I decided to design a website about the trip that included general information about HFH, this year’s trip, and past trips and photos. For inspiration, I went on to smashingmagazines.com and looked through their showcase of good designs using texture. I wanted a background that was reminiscent of construction, so I went with a plywood background that I downloaded from the website’s collection of free textures. For the header I just wanted something simple and clean, so I just made a white box and placed the HFH logo in it, which I downloaded off the website, and then underneath it put the event title using the same green as the rooftop in the logo. For the font of the header title, I used Myriad Pro Bold because it was a font that closely resembled the font in the official HFH logo. For the navigation bar I made the buttons post-its and made them look like they were nailed to the background. For the navigation bar font, I used Myriad Pro Semibold to maintain visual continuity with the header. For the page containers I encased any body copy in a white rectangle with rounded edges because I thought it made the page look lighter and not quite so serious. For the body font I went with Arial regular because I wanted a sans serif font to contrast against the light serifs of the Myriad Pro font of the header. For the individual webpage headlines, I traced an image of a yardstick and filled it in with the same yellow color as the post-its. For the font the used Myriad Pro Semibold in all caps and in the same green color as the font of the navigation buttons. The photos on the “Home” and “Photos” pages are my own pictures from the Spring Break trips that I went on in high school. The photo on the “Join Us” page I took from the Burlington County HFH website. The pictures of the forms on the “Forms” page I took using a screen shot from the HFH Collegiate Challenge website.

1 comment:

  1. I love you design it is so interesting. My favorite part is the textured background of wood was a cool idea. You could have gotten too carried away with the colors because of all the color in the logo but you did a nice job finding a balance and using complementary colors like the green and yellow together. I like the almost hand written looking font and the blue based background photos are very complementary as well. The blue provides repetition from the headline. You also used well organized containers, which makes the site every well put together and functional. The information is grouped appropriately and for easy readability. Good Job.

    ReplyDelete

Note: Only a member of this blog may post a comment.