WooCamp 2014 Invite – Parallax Website

Design, Illustration, Invitations, New Piece, Web Design

WooCamp2014 Header w Background

I did it! I’ve made a parallax site. For anyone who hasn’t noticed, parallax has exploded in the last year (or less?). It is such a wonderful way to create layers, animation, and add a sense of depth to a web experience. I have just barely touched the tip of the iceberg with what I’ve created here – the potential to add even more transitions and animations to a parallax site are boundless.

I was excited to experiment with this new technology with my long-standing client, that being the annual WooCamp invite. I’ve created 4 of them so far, alternating between print and web based invites. The event lends itself to themes of adventure, exploration, wilderness, and camaraderie, and this year, inspired also by my client’s recent trips to Antarctica, Patagonia, Everest, K2 (the list goes on), I settled on “Victorian Adventurer” for the invite’s theme. (Previous incarnations have been National Parks, Wild West, and something akin to Summer Camp).

I started with some fancy Victorian lettering, pulling inspiration from a Pinterest board I created that is full of Victorian/Explorer images. I also not-so-secretly admire Jessica Hische and all her beautiful lettering projects, and wanted to take a stab at one myself, and this seemed like the perfect opportunity. I also created a “ticket” that could be used for email, directing invitees to the website, which was another Victorian travel inspired piece.

Web

In addition to some fun side graphics I created that illustrated the events of the weekend, I had to include in there somewhere an homage to the phrase, “Livingstone, I presume.” I mean, I had to.

Portrait Template

My first iteration of the Livingstone portrait – I took my client’s face and photoshopped it into a portrait of Henry Morgan. I thought initially I might be able to make little Livingstone-esque portraits for all the attendees as part of their invitation, but realized I simply didn’t have enough time to do that.

Drawing inspiration once again from my Victorian source material, I wanted to include images or maps of the area. The beautiful botanical drawings that came from that era have such a wonderful tone and saturation about them that I wanted to emulate. Tempted initially to bust out water colors and paint up some background images, I instead came across a wealth of photos I had taken while I was at WooCamp one year. Taken when the sun was setting, the colors were ripe and with a few tweaks and filters I feel like I captured the essence of the place, while also playing along with the theme I had established, and created images that had a painted quality about them.

So the background parallax effect I borrowed the general look from this site tutorial. But I really wanted the background images to move slightly, so had to add that code in. Additionally, I wanted to include some more graphics that could tie into the “what to do/what to bring” section, so created another animation speed for those objects so they would appear to “fly up” the screen at a faster rate than the regular scroll. Kind of like how things scroll up the sides of a Pixar animations credits.

WooCamp2014-Screen-Cap

Here’s a little animated gif of the animation speeds. Probably better to just look at the site though, so you can scroll at your own pace (here’s the site).

The potatoes are my favorite.

ifAnyone Landing Page

New Piece

ifAnyone_Landing

I recently worked on a project for an entrepreneur who has a few apps out there, but the most recent one is called ifAnyone. It’s a Facebook app that you can program to search through your news feed for keywords you find relevant, so that in case your stream is too much to keep up with, you won’t miss anything that you might actually be interested in. It’s a clever way to sort through the onslaught of Facebook data out there.

My charge was to help him set up a landing page that would quickly describe the program and link directly to the in-Facebook app. He asked for “friendly and professional” and after a few ideas back and forth, the final result ended up having bright cartoon elements, both with little Facebook cartoon avatars and the star blast background, while still holding up a straight-forward, easy to read layout. I had fun creating the little characters (always nice to get in a little illustration where you can). I also had fun with the mock names, which I was glad my client was on board to play around with.

I also made business cards utilizing most of the graphic elements of the landing page for a cohesive branding.