Event Website for Feeding America

Kids for Kids Website

Mobile Home Page (for iphones and other smart phones)

Our second website for Promotional Design at Maryville University was to create a website showcasing a fictional event for an existing charity. My charity was Feeding America, and the event I devised was a night where children learned to bake in the kitchen with their parents. The treats they made could be donated to a local food bank, and the children could have fun baking cookies and such and enjoy a treat afterwards. Also, donations would be accepted at the event while the charity was promoted.

My targeted demographics were children between the ages of 6 to 14 and their parents. I wanted my website to be fun and inviting but also informational and promote the charity and event. The style I chose was very illustrative. I created many paper cut-out like illustrations in illustrator. Then in photoshop, I added noise to the illustrations to give them the illusion of texture. The typefaces I chose were Patua One (a blocky slab-serif), Londrina (an imperfect cut-out sans-serif), and HamburgerHeaven (a kitschy 1950’s retro serif). I choose these typefaces because they conveyed a sense of fun and light-heartedness, and they fit with the cut-out illustrations I had drawn. The HamburgerHeaven typeface also references food and restaurants alluding to my baking theme.

For this website, I was determined to try something completely different from my usual style and thus break out of my box. This past year, I have been designing more serious pieces for a more reserved demographic. I wanted this website to be fun, colorful, and the typography to be kitschy and loose. I think the style I chose worked quite successfully with my targeted audience. I had a lot of fun designing the website, and found it a refreshing break.

For the layout of the pages, I chose to do one long, vertical scrolling website. When clicking the navigation, the site would slide to the corresponding page. There were four pages total, home, donate, about, and sponsors. I used jQuery for the scroll feature as well as an image slider that displayed infographics about child hunger. I included a twitter feed that automatically displayed content from Feeding America’s twitter page. We also had to design and code the home page to be viewed on a small format such as an iPhone or other smart phones. I simplified the home page a great deal for the mobile version mainly because people viewing the site on their phones don’t want to read a bunch of microscopic type and are usually on the go, so they don’t have time anyways.

Overall, the most challenging aspect of designing this website was the center alignment. I had first organized the navigation in the center of my header, surrounding the logo. However, there seemed like too many elements in the center, so I ended up moving the navigation to the top left. Additionally, some pages were hard to design due to the center alignment. I learned that center aligning type is extremely difficult to do well, and I will be wary about undertaking it in the future. Also, center aligning type often makes the content look disorganized and messy. It is hard to create order. I feel like I did my best by justifying some of the type to create order.

I am very pleased with the way this website turned out. I’m glad I chose a contrasting design aesthetic to my own that will add variety to my portfolio. It was a fun and challenging project to work on. I only had about two weeks to code it and, for the short deadline, it turned out surprisingly well. I feel like I am getting the hang of this web design thing.

Advertisements
Tagged , , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: