Tag Archives: coding

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.

Tagged , , , , , , ,