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.
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.
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.
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
Along my journey I stumbled across very cool resources that I wasn’t aware of or just didn’t use.
- Very nice user portraits for your UIs : https://uifaces.co/
- Google Fonts (type a word and see how it looks with all the fonts) : https://fonts.google.com/
- Worldwide business card dimensions : https://en.wikipedia.org/wiki/Business_card#Dimensions
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 :
Feel free to reach out at email@example.com ☕ 😃
Fullstack Developer, Trainer & Entrepreneur.
Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.