How To Customize QR Codes With Your Brand’s Identity
Though apparently they’ve been big in Japan for quite a while, I first learned about QR Codes only last summer after seeing them used in the campaign for the Sci Fi film District 9.
Seeing this got me to wondering –
Can you customize QR Codes with your own design features, logo or brand identity?
Well, it turns out you can. Pretty easily. At least up to a point.
While researching the topic, one of the earliest examples I could find of someone hacking a QR Code with their own branded design elements was Duncan Robertson from the BBC.
The key takeaway I got from Duncan’s pioneering work was that QR Codes have some relatively generous built in error correction, up to 30 percent in some cases.
Now, what exactly does 30 percent translate into regarding how far you can push a QR Code before it breaks? The answer to that question is a little murky, at least for me. Pushing the envelope in this area, and among the more widely circulated highly customized QR Codes out there, is this code for Louis Vuitton created by Takashi Murakami and SET.
My understanding is that this code is supposed to work and send the user to a special mobile website, but I’ve tried scanning it with a couple of QR Code readers and so far have never been able to properly decode it (though it does create a cool little animated loop as my QR Code reader tries to lock in on it).
So somewhere between Duncan’s minimalist black and white custom code and that LV artistic masterpiece is probably the sweet spot to aim at if you want your customized code to be easily scanned by the masses.
Interested in seeing what you can do with a customized QR Code?
The good news is that it’s easy to get started and much of the software you’ll need is free.
1) First, you’ll want to get yourself a QR Code generator and reader. After trying a couple, I’ve come to rely on the open source ZXing Project (pronounced Zebra Crossing) to both generate and read my QR Codes. If you’re an Android smartphone superphone user (I use a G1) it’s a great fit. You can also get the Zxing reader for the iPhone and other devices as well. When generating your codes, select the primary function you want your code to communicate (contact info, GEO location, URL, custom text etc…) from the QR Code Generator.
2) Once you’ve generated your QR Code, download the image and import it into your favorite photo editing tool that supports layers. I use PhotoShop but you can go with GIMP if you’re looking for an open source solution and Paint.net is another free option as well.
3) Now build your layers of custom design on top of your raw QR Code image. Try to visually integrate your custom design elements into the code rather than simply stacking them on top.
4) Test it with your QR Code reader to make sure your design tweaks didn’t hose your code.
5) Repeat this cycle until you’re happy with the appearance and the code is readable.
To test this method, I created a basic QR Code of Content Developer’s Contact Information and tried to kick it up a notch by embedding a custom image. (hat tip to Buccleuch Avon)
Here’s the before and after -
My First QR Code Hack
Granted, my kung fu is weak at this stage. But on the upside the code appears to be reliably readable, and I was ultimately encouraged by the possibilities this process presents to content developers of all kinds. For instance…
…could a customized QR Code that delivers a large number of measurable impressions generate revenue by including logos from third party sponsors?
One note here — as I continue to tinker, I’m finding that some of the more elaborate design hacks I think will work are broken, and others that I think have absolutely no chance of working are actually being read. My evidence is only anecdotal, but it seems that the center of the codes are a bit more flexible than the edges. YMMV though, so again…
Hack. Test. Repeat.
Also keep in mind that I’m not at all sure if this is the best way to go about building a custom QR Code. What I can tell you though is that this method seems to work pretty well. (maybe sometimes the simplest strategy actually is the best)
If you’re looking for some idea starters on how you might be able to deploy standard and customized QR Codes to enhance the user experience for your audience or customers, here are a couple real world applications of the technology I spotted recently:
Related link: Example of QR Code displayed on the Dallas Cowboy’s Stadium HD display.
Tags: android, branding, mobile, qr code
|
Thought this App Judgment episode on QR Codes was a good introduction to using QR Codes on Android:
http://revision3.com/appjudgment/an_ron_barcodescanner
Hi David, i found your article very intriguing and decided to see how far i could push the district 9 example you supplied. i found that i could turn the code from a linear mathematical looking device to a more rounded blurred art form with the result being that it still launched the district 9 trailer!
Hi Jim:
Are you able to share any of your experimental QR codes online? Would be interesting to see an example of a “rounded blurred art form” approach to QR codes. Sounds cool.
I found the Louis Vuitton add worked with i-nigma mobile app. I was kind of suprised, but it did lounch an .jp mobile LV website.