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.
Scanning the LV QR from my EVO with the standard barcode scanner application worked when I snapped it at a tilt about that of the backslash \ or forward slash. Horizontal or vertical never seemed to work.
Otherwise, nice article… as a GD, I plan to make some serious hackUsage of this knowledge.
Thanks!
The LV QR-Code works with HTC Wildfire and ZXing barcode scanner reader too. It’s not very easy to make it work, indeed, you must stay distant from the screen… I big picture is not readable… it must be shown 1/4 of the scanning video surface…
Anyway… really incredible!
You can also check out http://www.beQRious.com for custom designed qr codes!
Would really like to see a you tube video demonstration of this.
I really appreciate this post. I went ahead and experimented with color and logo positioning. It is amazing that I was able to get in 4 colors in the background not including the Black. As well I got three little icons of face embedded in there!
My Android phone using QR Droid (a free app) does an excellent job of reading the code without hesitation every time!!!!
You are awesome for opening my eyes to this possibility .. Here is the link to the logo I created. Please feel free to feature it in any future posts on examples of creativity with the QR Code customization. The only restriction is that it should not be altered in any way.
http://bit.ly/fkHl6q
Thanks a million
Amir Harouni
My wife’s Android mobile phone app NeoReader handles the Louis Vuitton QR code. Just as Jeff posted, it links to some Japanese site.
Here’s a cool use of QR Codes:
http://photographyexposed.tv/2011/02/06/pe004-photography-exposed-interactive-exhibits-and-photography-on-the-high-seas/
They are basically turning a static art photography exhibit into an interactive experience. QR codes link to text and YouTube videos specific to the description of and behind the scenes of the making of the photos.
[...] Some integrate them into the design http://contentdeveloper.com/2010/01/how-to-customize-qr-codes-with-your-brands-identity/ [...]
You should check the following sites:
http://d-qr.net/
http://www.youtube.com/watch?v=myzLAXtqoa8
The company allows to integrate the design element into a QR code as part of QR code data. It also seems to provide generator API.
http://twi-qr.com/about_us.html
I know the person at LV Japan that commissioned the QR. It was designed for Japanese Keitai so may work with some phones that are sold in Japan as well as the rest of the world. So it does work. The campaign has stopped now so it may not take you to the correct page.
[...] How To Embed A Custom Logo Design In A QR Code | Content Developer (tags: qrcode qr design code marketing specialbrands) [...]
This is excellent news. I’ve been playing with QR codes for a client and am thrilled to find out that they’re graphically flexible. Gotta love the Louis Vuitton code.
[...] How To Customize QR Codes With Your Brand’s Identity http://contentdeveloper.com/2010/01/how-to-customize-qr-codes-with-your-brands-identity/ [...]
[...] http://contentdeveloper.com/2010/01/how-to-customize-qr-codes-with-your-brands-identity/ [...]
Thanks so much for the lesson in QR code hacking! I just successfully embedded my company’s logo in my qr code and it is definitely a lot more striking. I appreciate the article!
[...] TO: Make Your QR Codes More Beautiful QR codes: How to add images – OH MY BLOG! How To Embed A Custom Logo Design In A QR Code | Content Developer [...]
[...] the owner to track the tags and change the associated link. I like the customization idea. You can customize QR codes too, but if you go too far they won’t work. Ultimately, data will be embedded in everyday [...]
[...] for other advertising, marketing, fundraising, educational, and promotional campaigns. You also can add some design and branding flair to your QR codes, which we plan to start doing [...]
Effen awesome! – You’ve given us a whole slew of value added marketing ideas for our clients. Thx.
hello
Great article, would you be able to recommend anybody who does custom QR codes?
Steve
[...] I thought I’d do some research to find out more. My research took me to a site Content Developer. Apparently, QR Codes have generous error rate, sometimes all the way up to 30%. So let’s [...]
[...] are easy and quick. Mashable has a great article on QR Code Design Tips. There’s a good How to Customize QR Codes with your brand identity by content developer, and if you are better at learning by watching I found this YouTube video by [...]
This is a great piece on creating custom QR codes, thanks! I would second the Hack, Test, Repeat process for creating custom codes, it seems to always work for me. Plus test with as many readers as you can get your hands on! Custom codes that read fine with one reader are a total failure on others, and it doesn’t seem to be the case that some readers are just better at coping with errors so the only way to do it is to test with all of them as you go along.
My latest customised QR code is one I have made to adorn my new business card. You can see it here: http://bit.ly/lia0Tw It scans in everything reliably except QuickMark for some reason (which is normally pretty good at reading customised codes). I would say around 10% of the pixels have actually been switched from black to white or vice versa, but all of the pixels’ color has been changed, and it still scans fine.
I think http://uQR.me has the most advanced QR code customization application out there.
Cool website. Easy to use with several utilities for QR codes and dynamic “QRlinking”
I was wondering if anyone has any experience with printing QR codes onto non-flat surfaces?? I have a client who want to start printing huge QR codes on the sides of their vans but with the surface being curved I don;t want them to spend £000,s getting the vans sign written if the codes can’t be read.
I’m using uQR.me too. You can change the color of the QR or insert an image and most important you can change the link of your QR any time you want. One day is linked to my Facebook profile, another to my linkedin profile or my favorite Youtube video.
Cool and easy to use just get registered and start instinctively browse the site.
Perfect for both social and commercial uses
[...] article sur la customisation des QR Code [...]
Ok, now I am excited. Wonder how the lily on my logo would translate into a QR code. I will post back on what we come up with!
[...] our how to create your [...]
The LV one works for me, but I have to back my iPhone WAY up to get it to register (covering less than 1/4 of the scan area). I’m using the app “Scan” by QR Code City.
Thank you for the interesting article. One question that I have is how to test…do you do it on your computer screen (holding up your phone to it) or do you have to print it out. And then does the printout have to be of a certain quality?
Thanks again.
Check out some of the work by QrArts – http://www.QrArts.com – They’ve been making designer codes for while and they have some great commentary.
Very cool article. You can now create styled, branded QR codes on the fly, or in industrial quantities automatically. Just go to QRstyler.com. We will be in maintenance for a brief time the weekend of August 5-7, as we add some new, somewhat mind blowing capabilities.
Ok. Now this is what I have been looking for. I have seen some custom QR codes and I want to make one. Thank you for your post.
Cheers
Awesome post!
Oldie, but a goodie.
Hey.. justa hint.. The special QR code lands to “http://vmonogram.jp/store”
Scanned it fron Nokia 3230 with BeeTagg QR Reader Version 3.1.0.0.0.1 and works great. I tried a lot and BeeTagg sames to be the best
Regards,
daSSad
You can see a good example of a QR code with an image embedded in it at http://mobiscroll.com. Just hover over the QR button.
You can check out the new site http://QRilize.com , it’s a free and simple tool to manage your QR codes and embed logos if you like
i managed to hack one leading to my website….i had fun doing it but it was a pain in the butt!!!
cant figure out how to show it on here?
[...] “How-To” post can be found here http://contentdeveloper.com/2010/01/how-to-customize-qr-codes-with-your-brands-identity/ but it’s basically as simple as I just [...]
The before and after example you showed isn’t really a good example of best practices in QR code customization, since several of the code “pixels” have been distorted. A general rule is that any time you are going to distort a square, it needs to be removed entirely. The reason is that if it’s only a partial square, it may still be scanned (incorrectly) on some readers.
Thanks for the tutorial. I’m very interested in making this work.
I enjoyed your artical very much. Thanks, just a mention, I found when using the QR to make it at least 1.5 inches or larger, dont be afraid, on print material otherwise it pisses off the first timers. I had a client for who wanted their QR on one little corner of their ad, what a mistake, no one could get on. Remember you know best if you are advertising for them. I learned. j
A great idea !
Now I want to customize mine… even if it’s at the top of my to do list…
A good generator to embed a logo or integrate brand identity in a QR Code : http://en.unitag.fr/qrcode
[...] How To Embed A Custom Logo Design In A QR Code | Content Developer [...]
[...] in learning more about customizing your QR code display? Check out How To Embed A Custom Logo Design In A QR Code. Digital Culture, Inspiration, Web Designnew media, QR tags, quick response, [...]
[...] showed a blue one with NLM in the middle, I couldn’t find that online but here here are some other examples of QR codes with logos. We also did some brain storming on how QR codes could be used in the library. One example that [...]
Hi everyone, if any of you is interested in seeing an example of QR tags with icons being used (for android apps) you could take a look at this post:
http://apps.akosta.dk/qr-tags-with-logo-or-icon/
It also includes links to the generator they used and an article explaining the theory behind
Hi Folk,
nice Blogpost
QR Code V-Card Designs …
http://boriskoch.posterous.com/inspiration-20-qr-code-designs-fur-visitenkar
Cheers
Boris
Im very new to all of this but i did make the qr code and i downloaded the free gimp for mac but how do i add the picture into the photo software? I have no clue? Please i need step by step info. Thank You Gladys
We have a lot of qr code designs in 3d on our site:
qr-codeworld.com
This will be on our site soon to allow you to upload a logo or design and morph it on the fly
The LV code worked but only when I stepped about 3 feet back so that it was very small on my screen. Then finally the QR scanner (Red Laser Classic on iPhone 4) read it correctly.
My guess is that the image is too big and once it gets shrunk down enough, some of the interfering features become ambiguous.
Some of the best custom QR Codes can be seen at: http//www.atsqrcode.com, with two of their custom codes ranked the coolest by CNN. This company also provides mobile website development and supplies text message marketing services as well.
All The Best!
My Android mobile phone app NeoReader handles the Louis Vuitton QR code. Just as Jeff posted, it links to some Japanese site.
The trick of stepping back to scan the LV code worked for me too (using Barcode Scanner app on Android).
I found an app, which help to add your logo to qr codes: http://www.fancyqrcode.com . You can test your code readability with one click after logo addition. It’s really cool.
Those are some fun qr samples and can’t wait to try it out.
Great Article.. here it is what we created following your advices:
http://t.co/gQAFjQzS
Thank you!
[...] http://contentdeveloper.com/2010/01/how-to-customize-qr-codes-with-your-brands-identity/ – information on customising a QR code. [...]
[...] Furthermore, try to visually integrate your custom design elements into the code rather than simply stacking them on top, as suggested by David Cummings. [...]
Thanks! The LV one loaded just fine on my Blackberry and I’ve been having fun playing with QR. It does seem what’s random and will trip the reader up and what won’t…
hugs, b
Great ideas here. QR Codes can make life easier if people would just use them.
I started making some branded qr codes for my company’s marketing with the tool at http://www.QuickResponseQRCodes.com it was real quick and easy to use.
For custom sizes and colors try this QR Code Generator, works inside Photoshop:
http://www.evenx.com/products/qr-code-generator
I was reading yesterday’s Megatokyo “rant” which mentioned about this QR code modifications you could make. I then followed the link to your webpage here. This seems like something to try-out. Thanks! I’m going to try this out
This is the web based application to actually hack the QRCode
http://research.swtch.com/qr/draw
Try out the easy to use custom qr code generator at QRt.co to self-design your own creative code in minutes. We post our favorite customer codes to our social media so be sure to check those out for ideas. Even if you don’t use us, definitely still personalize/style/brand your QR code! The more creative codes out there, the better for everybody…better experience for consumers…better results for you.
Hi, this is a great post. Another way to design QR Codes is with something like http://www.visualead.com. Its a quick&easy web tool to automatically turn any design or part of a design into a QR Code. You dont need photoshop or QR knowledge, just upload your design and turn it into a working QR Code
Hi,
I like your article and also I can inform you that the first japanese QR code works perfectly on my android tablet using QR droid app….it leads you to a japanese hosted site of Louis Vuitton
I’d like to create some test and show here in next future…by the way thank you very much, indeed
Great article, QR codes are exploding now just like website designs, there are a lot of design tools and services out now.
One more project for our graphic design team… Thank you for explaining how to get creative with the QR Codes! Only question pertains to your #3: “integrating” rather than “stacking” the design. Can you expand on this? Thanks!