Cookie Party Invite

Cards, Design, Invitations, New Piece, Web Design

CookieParty1

I hosted a cookie party last weekend and made this little interactive website invitation for it. Using Hype again, I made it in 5 “scenes” – an intro (be sure you let the whisk spin!), the invite text, “how it works”, “when and where” with links to add the event to your calendar and directions via google maps, suggestions about what kind of cookie to make (just ideas because I wanted to draw cookies and that seemed like a good excuse), and then the RSVP which if you click the oven mitt, it will email me saying that you’re coming, plus links to the shared google form (don’t want any duplicates), and another source for recipe inspiration.

CookieParty2

I kept the animations to a minimum, but wanted to include a couple hover states like quick twists and little speech bubbles, and also did a roll over using a shape that was transparent. Just playing with some of the fun little features of HMTL5 that add a little extra character to something that might not otherwise have that splash.

Pop-Up Invite

New Piece, Print

I have had the pleasure of making now 3 invites for my friend’s annual get-together called “Woo Camp.” It’s a casual get-together that he hosts at his family’s cattle ranch down in the central coast(ish) area of California. First year we did a printed piece that I created around the theme of National Parks. The following year, we went with a web based invite, and I played off the recently released film True Grit for that one. I built it using a web design software called Hype, btw, if anyone is curious <shameless plug for my friend’s software>.

This year, he suggested a pop-up and my mind went racing. First off, I hadn’t made a pop-up card since elementary school, and as you can imagine, most google searches for “pop-up” came back with mixed results – mostly for browser pop-up (ad) blockers. But it sure got me thinking about the possibilities. I played with the mechanics and then thought about how I wanted the overall piece to look. I didn’t choose a specific theme, per se, but did work with a limited palette and stylized my illustrations a bit to look mildly retro. I also used the font “Tribeca” (pretty sure it was a free font I had downloaded at one point), and I got a few comments on it looking like the Jurassic Park font, which pleased me just as well.

I am overall quite happy with the end result, but wish I had taken just a little more time to send out a “beta” to see how the recipient might try to open the package. I ended up gluing the piece to the hand made envelope, and it is not uncommon for people to rip open envelopes to get at contents, so I won’t be surprised to hear of people bemoaning their choice to hack the envelope off when they went to open it. As well, I included a set of pop-up pieces on the back of a fold-out map piece, and regret that decision because it inhibited the opening of the map completely, making that portion of the presentation a bit cumbersome. On a positive note, I am very pleased with how I came up with the “lounging” guy. He’s reading a book and leaning against a rock, and when you open the card, his legs go from outstretched to folded by way of a a groove in the bottom of the page. Because he was set at an angle, I also had to use string to make the folding action work, as a piece of paper was not able to fold neatly into the proper orientation. I am curious how many other pop-up card makers utilize string for the trickier mechanics.

One of the most important things to note about this project was that it was the reason I became the proud owner of a new die cutting machine. Mind you, when I started the project and came up with the concept to have 3 panels with all these separate pieces moving every which way, I had decided that I would cut all the pieces out by hand/exacto knife. When I went to show my prototype off to the client, another friend of mine mentioned her friend had a fancy laser cutter and that maybe she could get me in touch with her to try it out and possibly help with the project. Intrigued, I took her up on the offer and came to find out the machine was not some over-the-top expensive piece of equipment like a laser cutter, but in fact, a die cutting machine, a la “Midwestern Scrapbooking Housewife” as she explained to us. It’s extraordinary. I had so much fun, and was so relieved to not be hand cutting the 660 some odd pieces for this project (there were 30 invites total), and would recommend the same machine to anyone interested in something like it. The possibilities are endless (if you like working with paper)!

MAGIC!

Here’s a shot of my workstation while assembling these. Complete with pint of ice cream and iPad running a barrage of Ted Talks, mind you. Monotonous gluing and stitching requires such incentives to keep you going. I think I need to work on getting minions if I decide to do this again.


Agency + Landing Page

New Piece

I recently completed a project that was an animated landing page that I made using Hype. If I haven’t mentioned this program (cough, ahem, I mean App) before, now is as good a time as any. A good friend of mine designed this software to make creating HTML 5 content designer friendly. Sure, not many designers can go into the world nowadays without knowing a little code, but Hype helps not only level the playing field, but also lets designers do what they do best: Design (not code).

So HTML 5 is another medium for animating web pages in the vein of Flash, but utilizing different technologies and using inherent browser capabilities, not plug-ins to function. Yeah, I’m definitely on the band wagon for this new era of rich web content using HTML 5. It’s an exciting time to be experimenting with new technologies and tools.

So saying, I worked as a contractor for another agency (in Belgium, btw; love how small the world is these days) to create this landing page. They were hoping to use a lot of effects, probably to help show off the capabilities of HTML 5, while still maintaining as much cross browser compatibility as possible. Initial designs also utilized google web fonts, which I thought was cool we could do using Hype, but in the end, switched back to a standard web safe font, as it opened up a few more animation options. The techniques I used are opacity changes, movement along paths, rotations, and letter spacing and size changes.