San Francisco Card Deck

Branding, Cards, Design, Illustration, Packaging, Places, Print, Uncategorized

This year, my client gift was a custom deck of playing cards featuring landmarks from San Francisco, a fun personal tribute to the city I love and that so many also love to love.

I am no stranger to designing cards, having created a custom deck of poker cards for a charity poker tournament, as well as two card-based games for Google (Data Center Manager and Launch & Iterate). I love games, and also love designing for them, so deciding on a poker deck as a client gift seemed like the perfect pair.

I started back in the summer, thinking how to organize the face cards. There are a variety of options, such as by neighborhood, or by personalities (techie, hippie, by park, etc. I decided on buildings and landmarks because they had a pretty decent correlation by category for each set of 4 face cards and also had a certain amount of historical and intrinsic value to the people of San Francisco. But, as no option was perfect for capturing every aspect of the city’s culture, heritage and history, some icons didn’t make it, such as Dolores Park, AT&T Park, or the Presidio, to name a few that got cut from the long list.

What I did include were 3 categories of landmarks for each set of face cards.

Kings

SF Card Deck KingsKings were represented by famous tall buildings or towers: Sutro, TransAmerica, Coit and the Ferry Building clock tower. I think I chose them as Kings purely based on height.

Queens

SF Card Deck QueensQueens were some of the beloved bridges that are either in or connect to San Francisco: Bay Bridge both east and western spans, Golden Gate, and the slightly less famous but delightful bridge in the Japanese Tea Garden in Golden Gate Park. Perhaps I chose them for queens because they hold some of the real power in the city, as far as connecting us to our neighbors.

Jacks

SF Card Deck JacksJacks comprised of other famous tourist attractions including the Painted Ladies in Alamo Square, Alcatraz Island, Lombard Street, and the Palace of Fine Arts, which coincidentally happened to celebrate its 100th birthday this year.

SF Card Deck 2Of course, the real character of the cards lies in the Joker, whom I aptly chose our dear Emperor Norton to fill the role of. It seemed all too appropriate. (Don’t know who he is? Check out the wikipedia page).

SF Card Deck 3

The final consideration for the cards was the color palette, which is very limited. These colors are the ones I’ve chosen for my personal branding, but it’s not a huge coincidence that the cadmium red (not quite international orange, but certainly in the spirit) and sea green are in play for this San Francisco-based designer.

SF Card Deck 1

Want a deck of your own? Email me, and I can mail you a pack ($20+shipping). While supplies last.

SF Card Deck 4

Jet Set 2014

Uncategorized

Hey everybody,

Most exciting news! I’ll be heading out on a rather epic ’round the world adventure this November (less than a month away now).

Print

I’ll be traveling with the beau, and we’ll be gone for just under 3 weeks total. First stop is one night in Tokyo where we’ll be going to Robot Restaurant (right?!). Then on to Bangkok for 2 nights where we will probably see some reclining buddhas and eat some awesome street food. We’ll next fly to a little beach town near Krabi called Railei beach (yes!). We’ll get to soak up 5 days there, before returning to Bangkok to make the 14 hour flight on to Paris. We’ve both spent a little time in Paris however, so we’ll just be grabbing a flight down to Casablanca, Morocco from there. We then have a week to figure out how to get back up to Madrid to catch our return flights to San Francisco. Ideally, we’ll split time between Morocco and South of Spain (still open to suggestions if anyone has advice on where to go or what to do there).

We’ve been planning this for about a year, so the anticipation is high. I’m very excited, even though I’m a little sad to be missing a pretty decent chunk of Pumpkin Spice season. That being said, I’m over-compensating for it right now, so it will probably work out in the end.

That all being said, if you have any holiday card or client gift ideas you were thinking about putting together this season, let me know now and we can get cracking and beat the rush.

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.

Google Datacenter Manager: The Game

Cards, Design, New Piece, Print, Uncategorized

GoogleDataCenterGameCards-web

I was very pleased to work on this little side project that a Google employee requested design assistance on. He had in the past create a few Google fan/Google employee exclusive projects like t-shirts, and had the great idea to put Google into a card game that he and his fellow Google/Game enthusiasts could play during their lunch break.

We used the base of a game called Palastgefluster, a German card game that is apparently not as obscure as it sounds (even though I don’t think even my nerdiest of board game geeks I know have ever heard of it). But, my client knew it well and thought the structure would work really well to make a Google parody of it.

I’ll walk you through it and how we adapted it for Google, which by the way I should mention, this game is not sponsored by, condoned by, or paid for by Google, but they did give us our blessing on the proof which ensures that all the logos and colors were up to their specifications.

PalastActions

Anyway, the cards we were working off of were in a medieval/knight/castle style with lots of textures and shading. I figured that wasn’t quite right for Google, so cleaned up the background, and stuck to the bright solid colors that Google uses in its logo. We had to add an additional color to the palette, so chose an equally bright and vibrant purple, and have a neutral gray as well.

Actions-Show-web

Our plan with the Google version was to pair Apps with actions (seen above, the actions are a little cryptic in their native German – but each character you see actually represents a specific action you can take on your turn). In order to know which action each card represents, you can either piece together the illustration at the top of the card, or follow a cheat sheet that you keep beside you at all times. It’s easier when the actions are described as verbs instead of character names (also being in English is helpful, for those of us who are a little rusty on our German).

Actions-Green-web

The game designer/redesigner, Richard, paired up the actions with corresponding Google Apps that seemed appropriate for what action they represented. Maps = Show, YouTube = Discard/Draw, Android = Return to Hand, Gmail = Trade, Chrome = Swap, Search = well, Search, obviously, and Labs = No action. I thought it was quite clever.

So each player is associated with a color (above is the green set of the cards). There are 5 players with 7 sets of action cards, yellow, red, green, blue, purple, and 2 sets of neutral grey. Each player gets a set of score keeping cards and the above mentioned reference cards that explain exactly what each action means. You place your reference card on top of the score card and slide it down as you earn points.

Level-Indicator-web

Reference-web

The action cards are meant to be held uni-directionally, unlike playing cards where you can flip them any which way. But, each corner is marked with a few helpful codes to make it easier to play when fanned out in your hand. 1st, we have a shape associated with each color for anyone with color blindness issues (these shapes are also present on the score cards, top left). 2nd, we have a symbol associated with that action, which is repeated on the reference cards for an easy key as well.

Labs-web

Ok, then we also have SRE cards (stands for Site Reliability Engineering which apparently is responsible for keeping the Apps afloat on google.com. In game terms, these are the cards that when put into play disable certain functions, making the corresponding action card in your hand unplayable. The backs of those cards is a patch that Google Engineers get when they’ve gone through the SRE program – a little insider info.

MissionControl-web

You can see on the SRE cards that we named them based on where there are major Google hubs around the globe, so I popped in little google map images (hard to believe these images are already outdated since Google updated their maps graphics since we finalized this project!). The Mission control map is centered over Houston, which was my own funny idea about where “Mission Control” is (not really Google related, but who could disagree).

Rules-web

The only cards left are the rules, which honestly sound a little daunting, but once you play a round or two, it becomes very clear how to play. The game is relatively quick; a great lunch-time option. Minimum of 3 players is needed to play, and typically you play best of 3 rounds to determine a winner. I won’t go into the rules of how to play exactly, but you’re welcome to come and play with me some time if you’re that curious.

Anyway, I had a lot of fun working on this and am really happy with how it turned out. Looking forward to playing my first round!

Psycho Fruit

Illustration, Painting, Uncategorized

psychotitle

I’m definitely digging back way too far with this one, but it is pretty rare that I have a piece/body of work that I did half my lifetime ago that I still enjoy sharing with people and laughing about. Back in my senior year of high school, I was in the AP Art class and we had to create a 16-20 piece body of work on a theme of our choice for our portfolio review at the end of the year. As I was just starting to learn about a variety of artistic movements that took place in the last century or so, I decided it would be fun to paint images that were homages to some of the artists I had learned about, and in some cases admired. But with a touch of absurdity, of course.

While working on a piece that was an exercise on using contrasting colors of the color wheel, I decided to paint a pear stuck in a padded room (yellow/purple color scheme). I enjoyed the mental image of a piece of fruit being psychotic, and so there developed the subject of the rest of the paintings in the series: Psycho Fruit. With the exception of 2 pieces, the psycho pear included, the rest of the series’ paintings do in some way mimic an artist’s style or play off a specific painting by an artist.

I made this awful website ages ago to house this collection, which does get the job done so I haven’t felt much compulsion to make it better since (though one of these days I will have to rephotograph them at a higher resolution). In my typical fashion, I also created and categorized the pieces neatly into 4 series of 4. Mind you, I’m no psychiatrist, so should not have been the one diagnosing these poor fruits, so apologies if any of the neurosis are mis-categorized.

Suicide

If only I had broadened the project to include vegetables, then I would have certainly made the Van Gogh piece an *ear* of corn.

Phobias

Yeah, I don’t think that OCD is technically a paranoia, but I guess I can see why I wanted it to fit nicely into my organizational system.

Psychosis

Ok, Peter Max was an odd outlier amongst the artist I chose to emulate. But really, can you imagine a better muse than a psychedelic artist for a series about psychosis?

Personality Disorders

So that’s the truth of it all. I admit easily that I could do it all much better now (I mean, I’m technically a better painter now), but even with their flaws, I have never really gotten sick of these pieces. It’s probably a sickness of its own, but I really just enjoy how ridiculous they are. I can only imagine what the judges thought when they saw these come across their desks. Clearly they enjoyed them too, as they committed me.  To art school…

Notation Napkins

Uncategorized

I love and hate these.

NotationNapkins

I don’t go to museums nearly as often as I used to, so it’s not as often that my mind goes through the “art review” tumble. You know, that feeling like you appreciate something, but you also hate it, but want to understand it, but think it’s terribly low, all at the same time.

So, I went to see the Tim Burton exhibit down at LA County Museum of Art (which was pretty sweet), and as I was finishing the exhibit, naturally I was poured into the gift shop. That’s where I found these beauties. In the wise words of someone who recently said them, “I lost 5 minutes of my life thinking about them.” They’re just another kitschy, fun, silly trinket, that someone who either “gets” you, or can’t find anything else under $5, would get you. And I totally adore the idea that you would take something as mundane as the ubiquitous napkin, notorious for being the medium for genius, and “bind” them into a completely useless conversation piece that will get you to laugh for a minute, but in the end, just blow your nose with it.

So why did I get so stuck on them? Why is it boggling my mind still? It’s as if there’s a struggle inside that wants to hate the pop-up commercialism that they completely embody, while simultaneously adoring the complete mockery of it; as if the existence of these keenly bound cocktail napkins are making fun of their own existence. It’s almost so genius, I wish I had thought of it myself, yet if I ever *actually* acted on the idea, I would hate myself eternally. I mean, who would have the gaul to actually bind 3 napkins together, package them like they’re useful, and make some kind of presumption that these napkins are special, maybe special enough to presume that whatever you scribe upon them will be genius?  Or to assume that this packet would be so worth carrying around with you, it could in fact replace paper in that moment of genius? But that’s it- they know you won’t be using it for its intended purpose. It is pure kitsch.

It’s one of the freshest pieces of art I’ve seen in a while; something that got me seriously riled up. The obvious lesson that I’m taking from this is that art is everywhere, not just on the walls in the museum.

Around San Francisco

Uncategorized

Last Friday I had the privilege of going on a fun bakery crawl sponsored by Scharffen Berger chocolates. I wrote all about it here on my baking blog, but while I was at it, I couldn’t help but enjoy the perfect October afternoon and evening San Fran was having, and took a few pictures of the places we went along the way.

Not sure I’m equipped for some of the night shots I took, but the colors were still pretty fabulous.

Snippets of Solvang

Uncategorized


Last weekend, I took a little trip to LA, and on the way back to the Bay Area, I took my time stopping at some of my old haunts, and took a few pictures for posterity. The real treat was stopping over in Solvang, the cute little Danish town in the heartof the Santa Ynez Valley. I used to travel here when I was a kid, and remember loving the feeling of being immersed in this almost Disney-like fantasy world in the middle of basically nowhere. I don’t know what the windmill per capita ratio is, but I think it’s pretty high.

Aside from the cute fake thatched roofed houses, abundance of Danish pastries, and oodles of tourists, I also happened to notice all the beautify wood carved signage around town. There were many unique, hand crafted pieces that were very bright and bold that did a fantastic job of catching my attention, as signs are meant to do. Typographically, I think they’re lovely.

Introduction

Uncategorized

Kathleen Kowal Self PortraitI have lots of things on my mind all the time. I enjoy tweeting once in a while to get them off my chest, but sometimes 140 characters doesn’t cut it.

I spend my days working as a graphic designer, and spend my evenings being one too, along with a few other hobbies. I realized I didn’t have a great venue to talk about my work and get feedback like I used to back in college, so figured a blog was a good place to get back in the habit.

My auxiliary excuse for starting this blog is to practice focusing. As a writer, I tend to get side-tracked easily, digressing aimlessly as my stream of conscious wanders. In many ways, this parallels my own life, as I have spent all 26 of the 27 years of it trying a little bit of everything, soaking up the wonders that “variety is the spice of life” can offer. And it’s been fun. I enjoy the fact I can draw and paint in a wide variety of mediums, bind a book, knit a scarf, race a triathlon, sew a dress, bake and decorate cupcakes, design a logo, make dinner for hordes of people, start a business, play the cello (ok, well, I’m stretching it to say that I can actually play it), and etc. But as I get older and wiser, I’m noticing the trade-off in this lifestyle is that my peers are settling down into their careers with an almost hyper-focussed intensity on being really good at the thing they do, while I’m still splitting my time and focus between my many interests.

The reality is, I’m not likely to give up all my interests, but I am trying to cut down. This year has been the year of web design and cupcakes. I started a baking business in 2009, and could probably have jumped off and really committed to it 100%, maybe even opening my own bakery, but the thought of not doing design any more didn’t appeal to me. I really enjoy designing logos, branding, websites, posters, you name it. I’m in love with visual design and can’t see myself dropping it, even for my love of cupcakes.

But, since I already have a blog dedicated to baking, I will refrain from committing too many characters to it here. Instead, I will happily entertain you with news, related posts, projects, and whatever else catches my fancy that I find worth sharing. Keep in mind, I’m practicing focussing, so if you see something pop up that seems completely out of place, just try and remember that it all makes sense to me, somehow, and I will do my best to explain it as I go.