click here to check out my new portfolio site for yourself!

Some time ago, I set out to create three self-promotional online tools. The first, being the blog that your currently on. The second, my fore-mentioned freshly finished online portfolio. And the third, is a forth coming social media tool; a simple stream of social media feeds, giving visitors a quick glimpse of me and several ways to connect. These three tools are tied together by my welcome page, which serves as an informational and navigational hub, and a group of icons on the left of the browser.

click to view my new welcome page



icons that provide easy navigation to tools

Lets first talk about this blog that I designed, because this esthetic carried over into the new portfolio. From the humblest of beginnings — a blank WordPress theme, lynda tutorial videos, and lots of google searches. Creating my own WordPress blog gave me experience in: PHP, mobile compatibility, fluid page layout, and CSS web typography. Ultimately the blog features include: a custom Style Sheet, a non-standard embedded font, a Landing page with a featured post and ajax loading thumb-nailed posts, custom skinned commenting forms, and a Filter page sortable by year of post and categories.


Design of the blog began with the idea that content should speak for itself, namely the principle of economy: “If you can remove an element within a design and that design still works, then you’ve practiced economy in design. Don’t offer more than is needed, but be sure to include all that is needed to create an intelligent and economical design.” Where needed, elements of light diffused on black surfaces are used to create Emphasis and Unity. Graphic elements were inspired by my printed collateral, specifically my black plastic business cards. The lens flares and trade-marks are a bit of tongue-in-cheek. Design established for the blog is incorporated throughout all the tools.

plastic business cards

The Landing page features a randomized populating grid of non-traditional thumbnails. Each thumbnail is un-cropped and designed to convey a tactile object. The resulting scale relationships between thumbnails may be awesome or awkward depending on your personal impression. Thumbnails can be hovered over to reveal titles. The grid, is a fluid layout that expands and contracts depending on browser width. Top navigation buttons, highlight skill-sets, and can be clicked on to filter the thumbnails. Animation heaving lifting help comes from utilizing jquery and isotope plug-ins. All these plug-ins being loaded into the browser caused a visual jolt on initial page load. I needed to delay and fade the page in for several seconds, on visitor’s first visit. Doing that required a javascript cookie, more jquery, and an animated gif for visual effect.

thumbnail hover states

Each thumbnail can be clicked on to open it’s project detail page. The detail page features: description text, a javascript slide-show, and top level navigation. Users who want to see live examples of work can click on applicable slide-show images (I originally had buttons for users to click on, but simplified the layout. Hopefully the links aren’t too cryptic.) Top level navigation can be used to go to the previous or next project, or return to the landing page.

That’s all folks. Please ask any questions or share feedback!

PHP. MySQL. WordPress. Isotope, Masonary, and Jquery plug-ins. CSS custom font face. HTML. CSS. JavaScript. HTML 5 Video Embed.

Lynda tutorial on Creating Custom WordPress Themes

MaMP: self-host your site locally while you build and test

guide 1 for using non-standard fonts online

guide 2 for using non-standard fonts online

My google doc with web font resources

Isotope: the awesome plug-in I used to make my portfolio dashboard

The original special, Titled ‘Dive Of Death’, was 2 hours long and aired on NBC. It is currently being shown on Travel channel. Oddly enough, people still recognize us when watching.


I edited a quick 2min montage:

TMG, has the unique position of bringing the spirit of the frontier into a restaurant concept. Backed by the credibility that their co-founder is literally the largest private American land owner and bison rancher. This ‘sizzle’ video is designed to be shown for an internal meeting — to rally franchisees around brand positioning. Immediately following the video, guests enjoy a keynote PowerPoint Presentation, which we also designed art for.

By the small scale nature of the project, our budget limited us to still images. Being limited to stills tends to be a common challenge — that you too may have already encountered. Here were some of the techniques used to add depth to the project. In other words — doing more with less.

(1) Create a narrative. My co-worker Matt wrote out a script based on the creative brief. I then designed all the images to relate in an airy way with the script. (i.e. an image of a house with text about family, an intimate close-up image of an animal with text about spirit, and an image of a herd with text about coming together) My goal is to loosely relate image and type, but not resort to literal ‘see-and-say’.

(2) Create Visual Interest. How can you create a cinematic-quality from still images? The first step was the Ken Burn’s effect. Stills are paned across, zoomed into and out of, and cross dissolved. This is obviously nothing original. In the landscape shots, I animated the cloud backgrounds. Also, not ground breaking. For the first round, I revealed all the type using a brush animation mask that I created in Corel Painter X (see round 1 video below) — which ended up getting cut by the client. Something special was the subtle animation I did using the After Effects Puppet Tool. The eye of the buffalo blinks and the buffalo and horse heads subtly rise. After effects was also utilized to create lighting effects for the final scene, which leads us into transitions…

(2a) Creative Transitions. The first thing I brainstormed on this project was creative transitions. A sun sets over a mountain and takes us to black. From black a neon sign flickers on to transport us to a modern store location. Both animated using After Effects. The opening transition was an animated smoke screen (this tutorial might be helpful). Going in and out of smoke is a pretty sweet transition. A very subtle but intentional transition was cross-fading between a circular basket of potatoes and a circular buffalo eye. From the close-up shot of buffalo we keep zooming out and transition to a mid-range shot, and then transition to a long-range herd shot. Had this been a broadcast spot, the zoom out scene would have utilized cranes and helicopters!

animation + art direction: stephen jackson
script: matt bergeson

On a totally different note — this is my 1 year blogging anniversary! So far, I’ve added a new post every other month. Not a very high frequency. But, that’s because I only want to post thoughtful, original, and relevant-to-you content. If your part of my ‘Friends & Family’ crowd — welcome. You probably visit because you have no idea what it is I, a graphic designer, do all day. Hopefully this helps us share these works with which I put so much of my energy into. If your a contemporary of mine checking out my work — thanks. Hopefully you learn a little/get inspired/get impressed.

Dominos certainly turned heads with their, tongue in cheek “take photos of our food” campaign, in which they pledge to never use a food stylist again. Don’t have a camera? You can participate in their “pizza proverbs” campaign. I think a lot of the buzz focused more around the inevitable crowd-sourcingish component. I don’t think their goal is to save money on Photography, Food-Stylists, or Copy-Writers. Personally I see it as more of a classic customer-participation contest. I think they nailed pop-culture by recognizing that people are already taking pictures of their food and sharing it! But, I digress. Well, I took Domino’s campaign even further. Not using Food-Stylists was weak. Lets promise to not even use photography.

“Sketch Our Pizza. And We Might Put It In Our Ad.”

Click image to view an even larger image.

Remember that huge campaign last year revolving around finding Papa John’s car? No? There were commercials, augmented reality, and a cross country tour! Supposedly he found his car! This year I had to come up with something bigger and better.

“Help Papa John find the car he was conceived in contest.”

Click image to view an even larger image.

Oh Boy, this one is very special to me, and I’ve been waiting to make it for years. Ever heard of a “Hot-N-Ready” pizza from Little Caesars? The name just drips with innuendo.

“Little Caesar is Hot-N-Ready.”

Click image to view an even larger image.

This idea doesn’t really make fun of a specific Pizza Hut campaign, because I can’t even name one. This was inspired by the all too often inappropriate references to sausage at the office.

“It’s a Sausagefest.”

Click image to view an even larger image.

Thanks for reading!
design and some copy: stephen jackson

When I received the call for entry email, my thoughts were as follows: “I’m already really busy”, “I can’t say no to Jen McKnight”, and “Well, at least I can choose whatever subject I want — that shouldn’t be too hard”. That last thought came from the theme of exhibition statement: “You may choose the subject, which you want to give a message to any individual, family, community, society, or/and the world.”

My initial idea, making fun of Reagan’s trickle down economics, in my head was destined straight for the halls of the Graphic Imperative Show. Flash forward three weeks, and I’ve left myself days to finish the poster. It’s getting down to the buzzer, and I search deep for some true expression, a message that means enough to me to slave all night making a poster about. The resulting message ended up being stamped straight for the pages of Post Secret (except it’s not very secret when I go blogging about it). Below the poster you’ll find the title and artist statement.

Click image to view larger.

Fooled Again

With such great American independence often comes a bit of isolation. I’ve chosen to illustrate a personal and nearly daily experience of mine. My cell-phone rings, and for a split second I’m excited and imagining who could be calling me! When I open my phone — I find that it’s merely my bed-time alarm.

I knew from the beginning that I wanted to explore working with very geometric shapes. The first thing I did was to download a free copy of Google Sketchup. Working in a 3D program allowed me to quickly generate simplified shapes (which was crucial, because I did this in 24 hours). In sketchup, I rotated the 3D shapes as desired and saved them as Hi-Rez Jpegs. The next step was to hand cut, fold all the letters, and scan them. This allowed me to have some, but not as much as desired, natural 3D form. Finally, all the letters and 3D shapes were then arranged and shaded in Photoshop.

Thanks for reading!

design and copy: stephen jackson

Exhibit PR Release

**Also check out this awesome submission from Dan Zettwoch.**

I was asked to create a video slideshow for the annual ‘PCA’ fundraising dinner. The major challenge was creating something compelling, using only still images. Being limited to stills tends to be a common problem – that you too may have already encountered. Here were some of the techniques used to add depth to the project.

(1) Create a narrative. My co-worker Matt, who is very familiar with the school’s mission, wrote out a script. That script was later used to record Voice Over (VO). All the images and animations were designed to support the narrative.

(2) Set the mood. I choose a track, from Bibio, that starts off inquisitive & classical. And later builds to finish up-beat. The VO talent also helped convey a youthful spirit.

(3) Utilize visual connotations. For instance, what visuals can you think of that relate to schools? I came up with ideas like yearbook photos, chalkboards, and doodling.

(4) Think about transitions. How can you transition between images in a way that relates to the mood, theme, and pace of your video? I incorporated elements from the chalk board frame as borders. Sliding quickly between images helped to keep an up-beat pace. Varying the direction of the slide helped keep visual interest.

Thanks to Jane, for contributing the chalk writing.

This video from ‘QBF’, sports some very interesting transitions
and rack focusing.



Here are a couple links to block animations that inspired the
first section of my video.

Chatroulette has certainly brought out its share of crazies, creeps
and c–k. Seriously. If you haven’t visited yet you will see d–k.
Lots of d–k. But there’s also a lot of creativity. A new social media
application barely out of the box with plenty of people bumbling
around trying to figure out just what to do with it. Even if it’s just
simply being goofy.

It’s no secret that dogs make people happy. Most people anyway. Especially old dogs with narcoleptic tendencies and silly props.
We took screen shots of the different reactions Roxy elicited from
strangers and created a still-frame animation. Think of it as a time-lapse window into a Chatroulette session.

We said that Chatroullete was new, and people are still trying to figure out what to do with it. But thankfully, it hasn’t taken long for creative types to get their hands all over it and start doing funny stuff!

ben folds improvises to chatroullete in front of an audience.

Chatroulette was launched in 2009 by a 17 year old. It gained exposure in
February 2010 after being featured on “Good Morning America”. [source:
en.wikipedia.org/wiki/Chatroulette] We have experienced traffic
of anywhere from 60,000 to 30,000 visitors.

You would think the header card would boast intriguing benefits like, “Easy Grip!” or “Stirs up the flavor”. But at the Cool Valley Schnucks grocery store (the only place I have seen this product) — nothing says product benefit like a fat bottom girl in tight white pants!

Get your curve on for only $1.19 — I did!

fig. a: Budweiser Curve Appeal Bottle

fig. b: Curve Appeal Header Card

fig. c: Curve Appeal POP Stand

photo credits: stephen jackson

“Client really likes the look of Vitamin Water. Casey’s logo Mandatory. Time budget is 3 hours.”

And in case you’re wondering — ‘EW’ tastes as good at it looks. I would compare it with the likes of cough syrups.

Close up of essential water next to vitamin water.

I discovered Pure American (PA) several weeks later at Walgreen’s. After seeing ‘EW’ you have to give ‘PA’ some praise, even though its a generic store brand. Although the name is weak, at least it doesn’t have the word ‘water’ in it. They also added their own interpretation to the ‘solid color bar on white’ trend.

Line up of pure american, essential water, and vitamin water.

photo credits: stephen jackson