Shaping Modern Age: My Tiny Journey Designing A Business Card With Code, By Hand

I wanted to make my own business card, and as a half-blind monkey, I couldn’t afford using Photoshop or Sketch to achieve this task.

Life has always been a challenge for a perfectionist like me and so I thought:

At least, code won’t let you do inaccurate ugly stuff.

No time to waste, my business card was done in an hour, at most.

Boy was I proud and satisfied

The happier I was, the faster I found that turning a fancy HTML + CSS design into a ready-to-print asset for VistaPrint / MOO was more than a pain.

Time went through, and it took four hours struggling with those bloated online card editors.

Did I regret my choice ? Yes.

Should I have given Photoshop a try ? Yes.

A day later, definitely more motivated than Germany against South Korea, I decided to give it another shot.

The main issue with the first attempt was that printers could not ensure that the borders would be equally distributed for the cutting process.

My design was relying almost only on those borders, I could not afford such a disaster.

I thought : Do it again and make another great design without borders this time.

Comparison | I really like both

I told to myself: At least this time everything will be okay.

How wrong I was!!!

Turning an HTML + CSS design into an image isn’t that easy.

Tried a dozen of online libraries, all claiming to be THE ONE that will make coffee while printing my goddamn cards.

One stood out : html2canvas

It could turn my code into an image, but it was WAY too blurry, no matter all the tricks I found on StackOverflow to circumvent this one more problem.

I’m there, let me help you — Adobe Photoshop, the 26th of June

I spent almost as much time reproducing my work in Adobe Photoshop as I had spent initially on Codepen.

I tried to reproduce everything the best I could

In half a second I winged up my credit card and headed to MOO as they felt more professional and quality-driven than the others.

(Still waiting for my package boys ! Be careful)

What I’ve learned designing a business card with code

With great powers come great responsibility.

I really wish someone had taught me how to design business cards and what I had to avoid.

Let me tell you what I’ve learned so that you don’t throw yourself into huge pitfalls as I did :

  • Dimensions are extremely important : Look online for standard dimensions of a business card, and pick the one you like most (european, american, small, big, etc). Take care of choosing a size that your printer allows. MOO, for example, has 84x55mm cards while the australian standard is 90x55mm
  • Do not underestimate margins : Printers have bleed, trim and safe margins. Safe margins are where you should put the more important (logo, text, information). Trim margins are where your card is cut by the printer. Bleed margins is a lost part which is cut-off by the printer. Read more here
  • Avoid color-bordered cards : Printing isn’t a pixel-perfect art. If your card has colored borders, it is very likely that your borders will be unequal. For instance, you might have a 2mm left, 4mm right, 1mm top, 2mm bottom instead of a full 4mm border. Printing is an automated process and inaccuracy is part of it.
  • Use a CMYK profile : Printers use Cyan, Magenta, Yellow and Black inks to reproduce your colors. Thus you’d better have PSD/SKETCH files with a CMYK color profile so that colors on your screen will look almost the same on your business card.
  • Use high resolution images : Business cards pictures have at least a 300 DPI (Dots Per Inch) resolution. It ensures that when your image is printed on paper, it remains sharp and clean instead of blurry and “pixelated”.
  • Coding a business card has advantages : As I said earlier, centering and positioning elements is very easy. Same goes for coloring, fonts and basic shapes (squares, circles, triangles, icons). It is very useful as it lets you position elements very precisely and symmetrically when needed. Also, CSS includes units such as mm | cm | in. All those features allow for a better reproduction with tailored software (Photoshop, Sketch, etc)
  • Yet is it limited : No matter how powerful libraries are, printing business cards require pictures with at least 300 DPI and a CMYK color profile. I suggest using code only when like me you are clumsy with aligning and positioning things. Then, using a professional software is prefered.
  • Professional designers will do it better than you

Useful resources

Along my journey I stumbled across very cool resources that I wasn’t aware of or just didn’t use.

My first business card on Codepen :

Thanks for reading

My stories keep bringing an ever-growing community and I have no words to tell how grateful I am. More than encouraging, it motivates me in writing more and sharing as much valuable knowledge as I can.

My latest story :

A Short List Of Handmade React Components That Will Fit Your Daily Needs

Feel free to reach out at ☕ 😃

“Cappuccino in a white mug with white foam art on a wooden table” by wu yi on Unsplash