Navigation

Designed QR codes: the next level

Design, Marketing, Web Design | Aug 15, 2011

Say what you will about QR (Quick Response) codes: they are just a fad, they will be forgotten once augmented reality takes hold or they’re just an extra step in inputting a URL but they are here and people are enjoying using them, so make the most of them!

QR codes, if you haven’t heard of them or clicked the link above to see the whole explanation, are scanned via a reader application (usually on your smart phone) that will take you to a video or web page.

They have been used in Japan for over a decade (invented by a Toyota subsidiary, Densu Wave), and now the rest of the world is catching up.

Why not just have the URL and let people hand key it in on their cell phones? WHAT? And make people actually expend energy? Charlatan!

Seriously, you can’t fight technology so make the best of it.

The trouble with barcodes is they are linear one-dimensional codes and can only hold up to 20 numerical digits, whereas QR codes are two-dimensional (2D) matrix barcodes that can hold thousands of alphanumeric characters of information. Their ability to hold more information and their ease of use makes them practical for small businesses and individuals, as well as… well… any size company.

When you scan or read a QR code with your iPhone, Android or other camera-enabled Smartphone, you can link to digital content on the web; activate a number of phone functions including email, IM and SMS; and connect the mobile device to a web browser.

QR Codes are even showing up on cemetery headstones.

Although a QR looks like a crossword puzzle, there are ways to manipulate the code. As with barcodes, that could be truncated and limited, colored and designed, the QR has properties that allow creativity.

The twists and turns of the little black squares, as with a barcode, has a unique imprint, recognizable to scanners or readers but there is a 30% correction allowance, so a third of the code can be discarded and replaced with images, type or anything you can imagine. This article on Mashable outlines some ways to deal with the 30% error correction rate.

Patrick Donnelly, owner and creative whiz of QR Arts (and creator of many of the examples included here) was recently interviewed on CNN about the explosion of QRs and the uses:

Patrick also speaks about how he got started and how they fit into internet marketing:


Recently, an exhibition of QR design was held in Paris:

So, are you ready to make the jump into the next wave of integrated digital marketing? Are you ready to design the codes needed by a multitude of businesses? To help catch up on the technology, here’s a site you need to visit often: http://2d-code.co.uk/.

 

What can be done?

Check out the raw QR. Simple, boring and, as mentioned previously, it looks like a crossword puzzle. You can generate one of these via a QR generator found on many web sites. The next step is up to you. Here are a few examples of QR design.

Color and background are the easiest changes one can make to a QR code. These examples show that you are not tied to just one color and even textures (to a point) as well as gradients (to a point) can be used. Ideally, rather than try to understand the code itself, you should use a QR reader to keep testing the code with each step. It’s easier to take one step back if the code ceases to function, rather than design freely and be disappointed at the end.

Rounding and softening the edges are another design change you can make within the error correction and still be readable.

One of the most popular design practices with QR codes is to insert images within the code. Again, the 30% error correction will help but read this first!

Even small images, scattered throughout the code can cover or delete needed code blocks and/or be read as information by the scanner.

According to QRStuff.com, “Compromising the scanning safety margin of the QR code by adding an image to it can also be further complicated if the scanning software interprets any part of the embedded image as actual data, and then decodes the contents of the QR code incorrectly.”

Hints from that article are surely words to the wise:

If you are going to tackle it yourself, here’s a few pointers on do’s and don’ts if you’re attempting to put an image into a standard QR code that hasn’t been specifically created to accommodate one:

  • Keep the size of the embedded image well below 20% of the area of the QR code itself – 15% is probably the best compromise.
  • Put the image in the middle of the QR code and definitely don’t obscure any of the 3 big squares in the corners (they have a special purpose and must be retained).
  • Always leave a white border (1-2 times the width of a single data square in the QR code image) all the way around the edge of the embedded image so that the data areas of the QR code are separated from the image.
  • Make sure that all the data squares left in the QR code are intact – remove any partially obscured squares completely.
  • Check that the embedded image doesn’t coincidentally contain any small square (or squarish) elements that may be interpreted by the scanning device as part of the QR code’s data, rather than being ignored as part of the image.
  • Most QR code scanning devices scan in grey-scale so using contrasting colors to differentiate the image from the QR code is not going to help you at all.
  • It’s probably also a good idea to make the QR code image larger than you would have if it didn’t have an image in it.

If your head is spinning, perhaps it’s better to seek out software that will do this for you.

With all this in consideration, one finds a huge amount of respect for those who created the previous samples as well as this one for Wired:


While these examples for Time make more use of the code intact but still part of the design, they are better suited for beginners or the very nervous.


A friend of mine recently posted a picture of a QR code his eight year-old son made out of LEGOs. With no surprise, it WORKED! I’ve seen hand-drawn QR codes that work and these photo QR codes are a huge and impressive undertaking. Still, if all the bottle caps, M&Ms, beans, ink spots, etc. work, why not get creative? There’s even someone who grew crops in Farmville to create a QR Code.


I wonder if builders will design neighborhoods so from the air, the houses and stores form QR codes? The possibilities are endless!


Speider Schneider is a former member of The Usual Gang of Idiots at MAD Magazine and has designed products for Disney/Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC and Marvel Comics, Cartoon Network and Nickelodeon among other notable companies. Speider is a former member of the board for the Graphic Artists Guild, co-chair of the GAG Professional Practices Committee and a former board member of the Society of Illustrators. Follow him on Twitter@speider

Have you used QR codes yet? Have you designed one? Tell us if you had any trouble getting around the coding/error correction and any tips and tricks you want to share with other readers!

Share this post
Comments (no login required)
  • http://www.gomobiletag.com Erika

    Create a free QR Code now at http://www.GoMobileTag.com…or create a campaign and customize the look of your QR Code and track its success! 

  • SampeiMihira

    I have been used these kind of 2D barcodes at work, but never thought about this artistic side of the matter ! Many thanks, very interesting article.

  • http://twitter.com/Niteesh22 Niteesh Yadav

    I have created some of the QR code portraits which are different from others as they are not just images placed between the codes as shown above intead they are square blocks which are natively used in QR codes.
    here is the link:http://qrcodeproject.wordpress.com/

  • http://twitter.com/GanimeCreative Anthony Ganime

    Neat ideas…interesting way to have fun with these otherwise boring QR codes…

  • cre8ivetype

    Kudos to Speider for another brilliant article! Loved it!

    Can’t wait to read the next one … real soon!

  • Marijke

    I just go only around de code, it’s easy to maak on your own computer.

  • Jon Ivee Hernandez

    A very nice learning, I’ve been using QR Codes for a year.
    But I never thought It can be customized like these.

    Thanks for this blog WebDesignerDepot!

  • Anonymous

    I recently posted a blog about my new business cards, I included a styled up funky QR code:

    http://ibrennan.co.uk/blog/new-business-cards-yay.aspx

  • mobilezen

    We recently started offering custom QR codes at mobilezen.com and the response from our customers has been overwhelming.  Some recent examples were posted on our blog: https://mobilezen.com/d/blog/entry/custom_qr_codes 

  • http://www.facebook.com/profile.php?id=533084194 Chutima Chaitachawong Horton

    I like the farm one. :-)

  • http://www.bolderimage.com Danielle B. Towner

    Great compilation of uniquely designed QR codes. Sky’s the limit! 

  • http://www.ConstantStrategies.com MFrancis

    Awesome.. Love it all!

  • http://gauravmishra.com/ Gaurav Mishra

    mind blowing post!

  • http://www.nedfinity.com Webdesign

    haha very Cool. We made an easy to use QR tag generator at our website. CHeck qrtaggenerator.nedfinity.com. Have fun.

  • http://twitter.com/Speider Speider Schneider

    Here’s a cool, quick little tutorial on adding a logo inside a QR… http://hackaday.com/2011/08/11/how-to-put-your-logo-in-a-qr-code/

  • http://www.facebook.com/javier.krumdieck Javier Krumdieck

    QR codes diseñados..y funciona bie

  • Kalvin Kleen

    Check out KK Mobile Marketing they have great QR codes

    http://kkmobilemarketing.wordpress.com
    http://facebook.com/KKideas

  • http://veodesign.com Tina Mailhot-Roberge

    Leaving aside the fact that QR Codes are useless unless we’re talking about a uber long url (it’s not true I’m going to take out my phone, open an app and snap a picture only to be redirected to a url – I rather type the url myself and save time), those designs are nice, particularly the Disney ones.

  • http://ixld.com/ Web Strategy

    mega sweet QR codes in this post … I like :)

  • http://twitter.com/gabbariele Gabriele

    We also create designed dynamic QR Codes! http://www.weevo.it/index.php/template/lorem-ipsum-5 (scroll down for english)

  • http://twitter.com/gabbariele Gabriele

    We also create designed dynamic QR Codes! http://www.weevo.it/index.php/template/lorem-ipsum-5 (scroll down for english)

  • http://twitter.com/gabbariele Gabriele

    We also create designed dynamic QR Codes! http://www.weevo.it/index.php/template/lorem-ipsum-5 (scroll down for english)

  • http://twitter.com/gabbariele Gabriele

    We also create designed dynamic QR Codes! http://www.weevo.it/index.php/template/lorem-ipsum-5 (scroll down for english)

  • http://twitter.com/gabbariele Gabriele

    We also create designed dynamic QR Codes! http://www.weevo.it/index.php/template/lorem-ipsum-5 (scroll down for english)

  • Peter De Smedt

    I love these QR codes. It’s gonna be very big soon. Why black and white.. Color your world ;)
    I make these:
    http://www.flickr.com/photos/65153963@N06/sets/72157627179075058/

  • http://www.dotsinabox.com Ivie

    Here is our company designer QR code gallery http://www.dotsinabox.com/main/qr_codes_custom.html