A couple days ago, I saw two business cards laying on my mom’s desk. One was for a dentist, and the other was from some sort of hair salon. A quick look revealed that the dentist’s business card had a logo with simple shapes and soothing colours, a clean finish, dithered CMYK inks, clean-cut edges, a good weight, and well-positioned elements. The hairstylist’s card, meanwhile, had an unmemorable logo, was printed from a poor-quality printer (which left everything slightly smudged-looking), was printed on tear-along-the-lines printer stock from an office supplies store, and had elements of dissimilar style centered down the card. The images also had pixels sticking out.
It’s tremendous how the fine quality and subtle hues of a professionally-made card set it immediately apart from something home-made. I imagine people forget that their printers might print at 300 dpi, even though their images are saved at 72 dpi. Pixels, JPEG artifacts, and smearing are all things that are completely unacceptable, and which are instantly recognised by a great many people.
I’ve designed a few business cards, each one better than the last — and all of them mediocre at best. I also had the job, once, of designing a little 1-inch-by-3-inch advertisement for the local news pamphlet. It started out fine, and I was left with what I saw as an acceptable product, as I viewed the large text on my thousand-pixel-wide photoshop image. I tried to zoom it down to approximately the size it would end up being, but the program would have trouble rendering the fonts into the space of a few pixels — my screen’s density was just far too low. Even with the chopped up characters, though, I could easily see that the text was far too small, and everything was too squished. I scaled everything up, until it looked fine. I sent it off to print, but when I saw it in the paper a few weeks later the text was still smaller than most of the other ads. I had crammed too much content into too small a space, and I wonder if I had missed an older customer because of that.
Lately, too, I was trying to fix up a couple things on my current client’s business card, and was having trouble showing him how it looked. He had designed it in a portrait view, which means only half of it fit on my screen at any given moment. If I shrank it to half size, at which point it fit, some of the smaller details, such as thin lines, would become anti-aliased or disappear.
I decided, then, that there was no reason I had to use an image-editting program. I could created a page in XHTML and style the elements with CSS.
I started, of course, by creating the area of 3.5″ by 2″ at 72 dpi. I sized everything in ems, so that I can change the size to whatever I want and everything will scale. The text, of course, will scale unendingly. I had an extremely large version of my logo, so I used that in an img element. Background-image wouldn’t work, here, because I wanted to be able to set the width and height.
While I was designing my business card, I kept an eye open for lessons. When I started arranging the company name, the tagline, my name, and the contact information within a series of header elements, I quickly realized the pixelated structure of importance denoted by h1, h2, h3, h4, h5, and h6. I’ve always known about them, of course, and used them in my pages, but it wasn’t really until this moment that I truly understood their importance in communicating to the user which piece of information is given priority.
When I saw this, a couple questions came floating along: Which is the most important? My company’s name, obviously. But what about my tagline? Is that more important than my name and job title, or less? Is it alright to decrease the font size of my tagline to keep it the same width as the company’s name, or would that send the message that it’s less important?
Even then, that’s just one facet; The shape and position will also draw certain suggestions around them. I haven’t really played with fonts as much, this early in my career, but I’ve seen how others use them. You can use a font to emphasize an element at the same time as you make it smaller, which helps with positioning. I think that’s one thing that drew me to design: You have such a tremendous range of completely different attributes that you can apply to each element, and each one has the power to change the perception of that element. What you’re left with is the equivalent of tossing spices into a soup: Too much and the soup can’t be tasted through the spice, while too little leaves the soup bland. A tremendous difference is found between cooks who know how to spice their food and cooks who don’t.
I like the spacing on the card, but there was a moment where I decided the city/province/country just wasn’t important enough for the card. I did keep the city and province, but stuffed it in the corner. I find it actually helps balance the elements a bit, too.
Other than that, there were the tricks of getting everything to line up how you want. I saw that my text naturally flowed around the shape of my image, so I kept those nestled.
And now I’ll try to use what I made in that twitter post a few days back: http://icosidodecahedron.com/?c
My very own business card, fitted with hCard.
