Brand new business cards! Designed by myself and printed by Moo.com on Luxe cards, I’m going to talk about how I designed these cards and how well my ideas worked, but before I continue, just look at the size of these things!

The Design Process

I needed my business cards to declare quite clearly who I was, and be quite memorable. There’s a video about memorable business cards you may have seen:

I didn’t think it was fair handing someone a business card the size of a microwave, and I certainly wasn’t going to go to the lengths of designing a business ‘leaflet’ and folding each individually.

So instead I decided on certain points:

• It would have my face on it, controversial but there are so many people I know by name but forget ( I’m well known for introducing myself many, many times, much to my embarassment )
• There would need to be colour, and large blocks of it ( to catch the eye, and because the business card immediately impacts my personal branding)
• The card itself would need to be the highest quality possible

For the frontside, in putting my face on the card I’m forced to put it on the left of righthand side. Many have suggested I take a version that shows my entire face, but the original is actually a full face photo. The problem is that it makes me look somewhat insane/creepy when viewed in full ( yet it’s one of my better photos when cut down the middle ). Choosing not to mirror it I placed it on the left, naturally putting the text on the right. I chose a few methods of aligning

After some mockups and sketches, I fleshed out the design using html:

To help preserve quality while keeping the cards viewable as a set, each card container had a zoom applied via CSS, so that I could scale them to 1:1 size for viewing in the browser, but blow them up to many times their actual size for editing.

I could have, and normally would build designs such as this using Illustrator, which I used to test out some ideas, but working with HTML & CSS let me iterate quickly while showing other people. It was easy to offer 3 or 4 alternatives to someone for an opinion by asking them to hit refresh.

The other bonus of using html was that I had full access to Adobes Typekit webfont repository. I chose Quatro Slab as my main font, as I did with this site.

Setting up for Moo.com

To use a custom design on moo.com, a design template is provided:

Your design should fit into the Trim, with any text within the safe area. Some of the bleed may show up on the final cards.

To convert my html design, I used a tried and tested method, screenshots. Blowing the card designs back up to their huge native versions I took large screenshots and pasted into Photoshop, adding the moo.com template to another layout for final checks.

Notes On The Results

In the end they turned out quite nicely, though I had quite a few comments, such as:

• They separated into 3 cards if they made it through the washing machine
• Some people thought I’d given them 2 or 3 cards and tried to prise the layers apart
• The black variants started to look scruffy after a while of sitting in my back pocket, some of the design wore off at the edges exposing the white paper underneath
• More of my face appeared than I was happy with, *note to self: take a less psychotic looking photo
• A lot of people spent a lot of time hunting for the design in the moo.com standard templates
• Other than a minority of people, most preferred the block colours rather than the photograph rear designs, of which the brighter colours were most popular
• The blue didn’t turn out as well as I expected, and the lack of a green is apparent