The Project for Awesome 2013 has just ended and it was easily the best year yet. We raised over $800,000 for charity, and tons of amazing videos were uploaded to the site. Once again I had the chance to design the website and thumbnail, and I wanted to share the whole process with you down below. Be sure to click on any of the website images to see them full screen, especially if you’re reading this next year after we redesign the site again.
Before we get to the site design though, I wanted to share my own Project for Awesome video. This year I’ve worked a bit with the San Francisco Food Bank, so Miles and I made a Pizza John Pizza in support of them. I hope you like the video above, and if you want to learn more about how we made the pizza, you can check out the latest episode of Karen Learns to Cook.
(screenshot taken midway through the P4A)
By now, the Project for Awesome website structure is pretty well established, but the biggest change from last year is the large bar at the top with progress bars for the comments left on the P4A videos and the money raised for the campaign. I really wanted this to be the focus point, so I made the numbers big and red so they really took center stage. We only got about halfway to our comment goal of 1,000,000, but we easily passed our monetary goal, which is the most important part.
If you’re curious, this is what my Photoshop files look like when I send them to Sam Rudge to code. It’s bit of a structured mess, but by the time Sam works his magic, it looks beautiful online.
I really wanted to have a substantial About page this year, since nerdfighteria is growing so quickly that this may have been a lot of people’s first Project for Awesome. I introduced a sidebar with the history of the P4A and put a big link to the Tumblr page at the top, since we used it quite a bit this year.
The submit page is essentially the same as last year, except that I had the idea to include a checklist to the side to remind people of how the whole process works. The submitting process seemed to go smoothly this year, so I guess it worked!
The video page is also essentially the same as last year, only it may see a bit more use throughout the rest of the year since we added a Random Video button up at the top once the submitting period ended. This lets you watch a random video submitted to the site and who knows – you may discover your new favorite YouTuber!
I always say the Project for Awesome thumbnail is the hardest thing I design all year. It has to include the P4A branding, a space for the charity name, a space for the photo, and a version that matches but has no customization. My innovation this year though was to include pre-made colored versions besides the usual red. People seemed to use them in about equal numbers, so we’ll definitely do it again next year.
I just had to use Sharpie John Green as the example image on the customizable thumbnail.
I also made a few graphics for the IndieGoGo to promote some of the perks we were offering. Personally, I ordered a TFioS movie poster and a custom haiku from George Watsky. Can’t wait to get them in the mail!
And finally, I designed the Men and Women of YouTube Calendars for 2014, which were some of the most popular perks we offered. There will be a whole other blog post about those when I get the physical copies, but believe me, they’re awesome!
Thanks so much for reading and participating in the Project for Awesome. Don’t forget to watch my P4A video if you haven’t yet, and check out the website if you want to see everybody else’s. Huge thanks go to Sam Rudge for coding the site and putting up with all my nitpicks to get it look perfect, and Laura Chernikoff for organizing all the bits and pieces that made the P4A a success. And of course to John and Hank Green for starting it in the first place. Check out the blog post about last year’s P4A website if you want to compare the differences. Hope you all have a great holiday, and DFTBA!
