CodeGuard Design Details, The Slideshow Image

Okay, yes, it’s true. I talk a lot on twitter about CodeGuard and the work I do for them. Why? Well, mostly because I like them.

One of the reasons I like them so much is that I’ve done a lot of design work for them and I feel tremendously invested in their project as a result. In fact, I have openly promised to do bodily harm to any other creatives should they get near the CodeGuard team. I’m kidding, of course. Mostly.

All I’m saying is if they got big enough to hire a creative director, I might consider applying for the gig. And that I would challenge any other applicants to combat. That’s just how design gets done, people.

Anyway, here’s a small sample of what we’ve been up to together.

The Early Days

When I was lucky enough to land them as a client back in the spring, their site looked like something this:

Early CodeGuard Screenshot

The image in the middle was actually a slideshow that rotated through several different ideas along the same lines. It was decided that we could do away with the login block on the right hand side, thereby gaining more real estate for imagery. The image area is still known as “The Slideshow” in the filenames, even though it’s now a static image.

Many iterations later, the site took the form it has today, which, as of this writing, looks like this: as of Oct 13 2011

As you can see, the slideshow image takes up the whole space. Note that in the above example the line art comes from the talented folks at Epipheo, and some of the other details are holdovers from the fine work done by The Phuse, but most everything has been iterated over and changed by myself and the CodeGuard team.

In the intervening weeks, a parade of images have called the main slideshow area home. Here is a sample of some of the ones the CodeGuard team and I have produced. Note also that when I say that the “CodeGuard team” and I produced them, it is truly a team effort. Everyone there has great ideas and gets involved, which I like.

Some creatives get crabby about that kind of thing, but I love it. I believe my work can only improve with other people’s input.

Playing it Safe

When we first started working on new slideshow images, we were discussing ways to get across what CodeGuard had to offer its customers. They back up web sites, so I liked the idea of using a safe. Here’s a slideshow image that incorporates that idea.

You can see here that the corners have been burned with the burn tool. I love that vignette look, probably because I have watched too many episodes of Top Gear, and their video people use this technique on almost everything they film. Here’s an example, featuring Ken Block driving like a crazy person. Check out how dark the corners are. That’s no accident, folks.


I always apply the vignette by hand, corner by corner, rather than using a filter. You can see it at work in the most recent screenshot above as well. I think it is a subtle way to make an image look slightly more interesting. I originally saw Kurt Rampton do it, I think, and have been doing it myself since.

Rise of The Time Machines

After the safe did a brief stint in the top spot, the CodeGuard team moved more in the direction of using a time machine to emphasize how their service let customers recover from mistakes. That gave rise to many a new image. Perhaps the most popular of these was the DeLorean image, which I turned into vector art using Illustrator’s live paint and live trace features.

As you can see, CodeGuard were starting to get some national press at this time, having just won the TechCrunch Distrupt audience award, so I incorporated the page peel in the lower right to find space for the press logos. In the current site, they have been moved to a whole area of their own because CodeGuard has gotten way too much media attention to fit in a peel.

Nice problem to have, eh?

Here’s another variation on the time machine theme, this time with a deep space twist. I used some images from the Hubble Deep Field project, but used Photoshop’s pinch tool to make them appear to be sucking inward in the direction of the logo, as if the logo were a black hole.

There’s also a subtle nod here to a certain fruit company’s imagery, which was reflected in the filename for this image: “tm-fruity.jpg”

Of course, I was too excited about my safe drawing to let it die so easily, having spent a couple of hours in Illustrator on it, so I brought it back for when already-logged-in users visited the home page.

So, that’s a few of the many cool things I’ve gotten to do for the folks at CodeGuard. I also designed a tee shirt for them which has been very popular. In fact it’s been stolen a few times from their trade show booths!

Speak Your Mind