Going Full-time Freelance

About Me, Design, Illustration

Freelance Design offerings It’s official. After nearly 7 years working as an in-house designer, Director of Marketing, and manager of both people and projects, I have decided it’s time to go rogue and have started my own Design & Illustration business. It will be a big change to not have that paycheck hit regularly, to not have coworkers to mingle with day in and day out, and to not have anyone but yourself to blame when it doesn’t go right. It will be difficult, but it will be rewarding.

It’s been a long time coming, in truth. I’ve been doing freelance work since college, always making time for it outside of my usual work hours, and in the last year, have been increasingly more busy with projects and new clients – enough so that the idea to commit to doing that full-time actually seems feasible now. It is not without its fears and concerns, but I am overwhelmed by the support and encouragement I’ve received from friends, family, and professional acquaintances who all believe I will do great.

It is not without sadness that I will leave the job of 7 years behind as I’ve made valuable friendships and learned many great lessons, both on a professional and personal level. I’ve learned what my strengths are, and know I can leverage them when conducting business for myself. I’ve learned what my weaknesses are, so know there are options for avoiding or delegating them so that I can focus on the good stuff. I expect I will make many mistakes still, but hope I will meet them as a challenge to just get better. I am grateful for the experiences I’ve had, the people I’ve worked with, and how it all is leading up to this new direction for me.

So consider this proclamation the beginning of a great new adventure, and come back here to keep checking out the latest projects I’ve been working on, ideas I’ve been having, or the things I’ve been admiring. Oh, and of course, feel free to get the word out to anyone seeking some design or illustration help. I can help with posters, info graphics, brochures, game design, invites & announcements, packaging, apparel, logo & branding, editorial illustration, as well as web and mobile design. And of course, I do still paint, so keep an eye out for some new landscapes or what not – perhaps to fill that nook between your bookshelves and tv stand that needs a little extra color.

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.

New Year’s Party Invite Website

Design, Invitations, New Piece, Uncategorized, Web Design

SerenoNewYearParty Screen Cap 1

I have another Hype* creation to share. This project was a party invitation where I had the simple task of getting the attendees information about when and where, as well as collect RSVPs from everyone. Click here to see full site.

Firstly, I chose a photo from the Sharon Heights website that I found to be rather appealing (I’m always attracted to the evening/dusk color palette). It also complemented the company’s branding with the warm ochre hues and dark green lawn. Even the blue of the sky was pretty close to the blue that’s in the branding guidelines, and since this was a January party, I thought that it’s cool tones would work best as the main body color.

I wanted the most important info to be prominent: Title, Date, and Time followed in importance by the Location/Directions, then the body text adding description to the event. I wanted it to be easy for visitors to understand where to go to rsvp, add the event to their calendar, and also the option to stay at a nearby hotel that had reserved a block of rooms, so those 3 call-to-actions I made look like buttons in the bottom right of the page.

CalPopUp

While clicking the “Calendar” button would float up 3 options for downloading the event to their calendar of choice (Outlook, Google, and iCal), and the “Stay” button would open in a new tab the custom website that the hotel put together for the attendees to reserve rooms, clicking the “RSVP” button would take the visitor to a second page that has an embedded google form (minimally styled), that they could submit their RSVP. Additionally, clicking on the map image would also take the visitor to the google maps page with proper instructions leading them to the site from their current location.

SerenoNewYearParty Screen Cap 2

The thing that people really loved though, was the snowflakes. This took a little trial and error to get right. Initially I had created the graphic for the static poster image that would go up in the offices, so when it came time to translate to a motion graphic, I had to deconstruct the pattern so that it flowed as an animation.

Snowflakes_Static

This is the base pattern I created on the static image

In order to convert this image into a flowing, seamless pattern, I set up 3 layers of animations: slow, medium, and fast. Pulling apart the original pattern, for the slow animation, the I made a relatively compact version of the design that was only slightly taller than the height of the canvas. Medium was a looser pattern, and approximately 1.5 the height of the canvas. Fast was much looser and about 2x the height.

Snowflakes_How

When pulling those images into Hype, I stacked them on top of each other, and placed their starting and ending points so their bottoms were more or less aligned. Giving them 10 seconds to float down, I left them to be more or less aligned by their top boundaries (after getting them generally aligned this way, I did have to tweak the positioning a bit so that the pattern for each was seamless on the repeat).  Because of the different heights of the original images (which, btw, are transparent pngs), setting them to the same time, the appearance of some snow falling faster than others is achieved.

snow transitions 2

Issues

So the only problem I had with the project was with the embedded google form. Most people were able to submit their RSVP directly on the site, but a few people who used the site on their mobile device were unable to scroll down to click submit. I inserted a work-around by making the rsvp button on the second page a direct link to the proper google form (non-embedded, which google has clearly made mobile friendly), but it was a hack and I would obviously not let that be an issue if I did this again. There is probably a javascript behavior I could implement that would make the form more accessible on mobile, but the easier and simpler option would be to have the form not fall into an iframe – just have the dimension of the original canvas be large enough to hold the form without needing to scroll. Another testament to how important testing on mobile is when designing anything for web nowadays. 

* Just a reminder to anyone who doesn’t know, Hype is basically the HTML5 equivalent to Flash, therefore, the site/animations are visible on iOS devices.

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.

Baby Shower Invite

Design, Invitations, New Piece, Print

BabyShowerInvite_06-13

I just finished up another piece, this time a baby shower invitation. The art direction was very simple: they are expecting a boy, the mom is using teal as her primary color, and she loves zebra stripes. So, working with that criteria, I picked a hue of teal I liked, paired it with a nice opposite  salmon-like tone, and threw in a nice warm gray/clay color to work as a neutral balance. To make the zebra striped background, I printed a 50% gray over the teal, as I thought black was going to be too harsh for anything baby related. The font I chose for the header is “Weston,” and I really liked how it was almost block-like, but still had the nice rounded edges. Literally reminding me of the blocks I used as a child. The body copy is “Banda,” which I felt matched the header copy, and looked complimentary to Weston when in lower case (the Weston I have does not have a lower case option).

Once we finalized the design, I gave my client 2 options. One was to just print the image as is, the other, more obviously awesome option, is to take that design and use cut paper to add some texture and dimension to the invite. My client readily agreed that the more tactile option was the way to go, so got to work converting my proof into the cuttable sheets based on the different shades of card stock I bought.

Print

While it definitely takes more prep, time, and glue, I find the results with using the combo of printing and cutting to be worth the effort. 

working

Uncork the Court

Illustration, Invitations, New Piece, Print

PrintA friend of mine is having a neighborhood soiree and asked if I could design a little postcard to pass out to their neighbors to invite them to the event.

It is meant to be a block party where they get to meet their neighbors and have a glass of wine together. I loved the title they came up with for the event and sketched up a few ideas of how to incorporate the image of a bottle and a cul-de-sac. My solution was fairly literal in the end, with the crosswalks at the top of the street setting up the final outline of the top of the wine bottle. I added some houses, driveways, trees and a dog and swingset, too. I was a little reluctant to add actual people though, mostly because I liked the limited palette and feared I’d want to add more with the detail of people, and also that it’s printing rather small, so that detail would have been lost anyway. I do worry a little that it looks like an abandoned neighborhood though. Perhaps I’ll do a follow up piece showing how all the neighbors came together and fill it up with all of them having a good time outside together.

I’ve also been ramping up the brightness in the colors I use in my illustrations lately. A gradual shift has been in the works for years now. I remember my illustration teacher in college, Lynn Pauley giving us our first lesson about color palettes and saying that it’s pretty clear that your illustration palette matches your wardrobe. True to point, my clothes have been evolving from the earth tones and deep cranberry reds that I used to wear to more brilliant options like teal, salmon and cadmium red. I’m not ready for neon just yet though.

Where’s the Beef?

Design, Interests, Invitations, Packaging

beef1

It’s been a couple years ago now since I made this invitation, well before I started blogging about  my favorite projects, but I was going through some old stuff and realized this one was probably one worth sharing (not to mention writing down at some point so I don’t forget what went into it either).

Back in 2010, I co-hosted a beef tasting party. The idea being that I really had no idea what the difference between some very basic cuts of meat were, and while the idea of sitting down to a 12 course meal of side-by-side beef tasting sounds entertaining, it was simply going to be just too much meat for one person. SO…. why not throw a party?!

beef3Designing the invitations was an amazingly fun process. I spent a lot of time researching beef and what the different cuts were, as well as where on the cow they came from. I wanted to share a little of that knowledge with my invitees, hoping to entice them to participate in the experiment.

I made the invite itself into the shape of a cow, and cut 3 overlapping sections out of it to give the information what, when and where. I then included a vellum overlay with the cross section of the cow (I have a weakness for science diagrams – couldn’t resist).

For the envelope, I wrapped the invite into a piece of butcher paper, a kin to how apiece of meat from the butcher would be wrapped. I then created an address label that mimicked the pricing sticker that you get at the store, indicating weight, price per pound, sell by date (in this case, RSVP by date) and the barcode (which sneakily included the numbers of the date of the actual party), which then sealed the envelope shut.

BeefInvite-annonymous

MeatLabel

I also made a custom USDA seal of approval on each envelope, indicating it would be a swell party, as well as a return address sticker that had the “brand” from the “ranch” the meat came from. The one failing point of the project was that there were no beef-themed stamps available at the time I sent these out, so wasn’t able to complete the them as entirely as I’d hoped.

The party was a hit, I was able to enlighten myself, and a handful of friends about the different options we have for ordering and enjoying beef. I will admit, and I’m not ashamed to, this is probably the first of many parties I will host where the idea of how to design the invite was a strong driving force to make it happen versus just think about how cool it would be to do.

So anyway, I learned a lot about beef. All the research leading up to the day was more educational than just doing the tastings. I am happy to share a little bit about what I still remember (with the quick caveat that I am definitely not an expert, and if I got anything wrong, I’m happy to be corrected):

First off, there are 3 categories to grade the beef sold in the US: PrimeSelect, and Choice. They rate, in descending order, the quality and marbling (the fat:muscle ratio) of the meat. We aimed to get as many prime cuts as possible for our tasting, which we found to be somewhat difficult. Even Whole Foods carried mostly Select cuts. We ended up going to Los Gatos Meats (a disaster of a website, but a gem of a brick & mortar) for most of the meats. Also, to keep the playing field constant across the different cuts, I tried cooking them all with as simple a preparation as possible, allowing the flavor of the meat to be the only thing we were judging the taste by.

Now, where on the cow do the cuts come from? For this, I made a little cheat-sheet that outlines where a variety of the cuts come from on a cow. (Mind you, in Britain, they have very different terminology for all of this, so this is all American beef knowledge I’m dishing out.)

WheresTheBeef

So, I didn’t want to have a party with 50 cuts of meat, but did want to have a sampling from “all parts” of the cow. We didn’t get too crazy either – no organs or “non-standard” cuts were investigated; remember, we were hoping to understand our options when looking at a typical menu of meat options at a steak house.

For the tasting, we grouped the cuts into rounds of tastings based on which part of the cow they came from. We started on what are considered the cheaper cuts, and worked our way up, to what are generally considered the more expensive, highly desired cuts.

Kowal_LogoKowal_LogoFlank & Skirt Steak. This meat comes from the end of the ribs, called the flank or plate. It has a strong grain and should be scored and marinated for a while to be tenderized. This is your standard fajita or steak salad meat, and should be cut against the grain, or else you’ll be chewing it for a while. I did marinate these in some soy sause and brown sugar before broiling. The flank is typically thicker than the skirt, so cooks a little bit longer.

Kowal_LogoTri-Tip: The little triangle at the bottom of the sirloin diagram is basically where the tri-tip steak comes from, which is the piece we elected to try from this portion of the cow. Back in the day it was typically made into ground beef, but at some point, someone figured out that you could cook it low and slow and slice it thin for a low-fat steak option. I remembered having it as a kid smothered in barbecue sauce and sandwiched between french bread. I think for our party, we just did a dry rub and I seared and then baked it until it was medium rare.

Kowal_LogoPorterhouse: We’re moving into the short loin now. This is where you start seeing real steak names come into play. What is the difference between a Porterhouse and a New York strip?  Well, I’ll tell you. The porterhouse is your “t-bone,” the ubiquitous caricature for what steak looks like. You have a large cut of tenderloin on one side , and the other side of the bone is strip steak. Technically, a porterhouse is classified by having more tenderloin than even a typical “t-bone” but they’re hailing from the same part of the cow, so same cut of meat.

Bone-in New York: This is what is on one side of the porterhouse – the strip. It’s a muscle that is infrequently used on the cow, so still tender. It can be cooked bone-in, or cut away from the bone. We went with the bone-in option because we were told that those typically cook better because they retain the juices. No argument here.

Tenderloin: The tenderloin is a long a narrow piece that follows inside the spine and is very tender because it is not a used muscle. We took the more famous cut from there, the filet mignon. A medallion, sometimes wrapped in bacon, that is so soft you could sometimes cut it with a butter knife. We actually got a little extra experimental here and got one regular corn-fed cut, and another grass-fed to see if we could notice a difference. (the answer is yes).


Kowal_LogoShort ribs: These are typically braised. The cut is from the rib and surrounding meat, and they are cut into ~2″ chunks. You could also get them cut Korean-style, which is a much smaller slice and then it’s just marinated and grilled. We opted to try them the “old fashioned” Western way for our taste-test. After being braised, the meat is very tender and literally falls off the bone. It also really soaks up the flavors of whatever you braise it in, so the flavor of the meat is not typically standing on its own.

Bone-in Ribeye: This is the meat inside the rib bones, and unlike tenderloin, gets a fair bit of exercise in the cow, so is supposedly more flavorful. We went for the bone-in option again, like with the New York strip, but can also be cooked without the bone.

Prime Rib: This is essentially the same part of the cow as the ribeye, but cooked as a roast, with anywhere from 2-7 ribs wide. The main difference between the two cuts is how they’re cooked, and also a lot more fat has been removed from the ribeye than the roast.

That’s what we tried. I had my opinions, of course, on what the best pieces were. I made a form people could fill out as they tried everything so we could keep track of the different aspects of each kind of cut.

WheresTheBeef-SteakRater

Hopefully this was mildly informative. I look forward to the next food-themed party and invitation design. Also, the first photo in the post is credited to Carol Le, a terrific friend and photographer.

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.


Father Daughter Dance Invite

New Piece

"Under the Sea" Invitation

For the 3rd year now, I have been asked to create the invitation to the Los Gatos High School Father Daughter Dance. Every year they have a different theme and I have a lot of fun making a little graphic for them. The info is basically the same each time, so it’s just a matter of changing the layout and making new graphics for the themes.

This year was “under the sea” so I did a little mermaid and some lil’ sea creatures dressed in bow ties.