How to design with QR codes.

Because QR is a machine-readable code, there are a few considerations when it comes to designing with these bad boys. Allow me to demystify.

How To Design QR Codes
How to Design with QR Codes

What do you need to know to design a good QR code?

  • Any colour
  • Any modular material
  • At least 55% contrast between the background & foreground
  • “Quiet space” (margin) should be 4 units
  • 3 detection patterns in corners must remain clear
  • Can obsure up to 30% (if using highest error correction level)
  • Any orientation: can be upside down or rotated
  • Perspective is ok
  • Anamorphic (widescreen) is ok
  • Distorting the cell’s shape is ok
  • Circles & other shapes are ok
  • Reversing the design is ok

Test, test, test! Did I mention you should test?

Where can I learn more about QR codes?

These slides are from my presentation Voir QR: The History, Use & Abuse of QR Codes. You can check it out on Slideshare, where it made the front page for being awesome!

And the award for best graphics EVER in a presentation / conference goes to…. @ericaglasier!!!!!! #nmmqrless than a minute ago via TweetDeck

Codes used above designed by talented people like Patrick Donnelly at QR Arts, SET Japan, Chris Lamberth, Ming Ling and Chris Thomas. If I missed you, just yell.

  • http://www.Tri-win.com Michael

    Brilliant! Thank you for the info!

  • http://www.facebook.com/people/Tri-Win/100001127326605 Tri Win

    Here is a follow up on this post Erica, This page has become my “go-to” resource for all things that blend QR and Art.

  • Pingback: Erica Glasier: Oversocialized! » Blog Archive » Anatomy of QR Code

  • Pingback: QR Codes, more than you want to know. | Tri Win

  • Pingback: QR Code Design | Traverse Web Development

  • http://twitter.com/mediumblack Fred @ mediumBLACK

    That is completely unbelievable! I was convinced they had to be black and square. Will definitely look to explore this avenue!!

  • Pingback: links for 2011-06-23 – Le blogue DuProgrammeur

  • Pingback: The thing QR codes… | OhRyan.ca

  • Lindsay H Chang

    is it possible to make qr code that actually works as 3d ?????????

  • Anonymous

    What do you mean, Lindsay? You could build one in 3D but the scan has to happen from basically a flat plane – so not really. Or is that not what you’re talking about?

  • http://www.keystoneclick.com Mike McGarry

    Amazing resource for QR codes!  The limits are endless.

  • http://twitter.com/queaar Queaar

    What are the different softwares or techniques to convert simply pixel based QR codes to something like this ? I guess some graphic artist needs to really burn midnight oil to achieve these shape keeping them scan-able at the same time. Great Job

  • Pingback: QR codes, design is flexable — Still Ugly. | Gavin Valentine Design

  • http://twitter.com/QRCDESIGNER QRCDESIGNER

    Some of these example codes are not working so well (latest ZXing on Galaxy i9000). Testing sure is very important.
    Felix of http://QRC-Designer.com

  • Anonymous

    That’s the thing—you CAN, in a best case scenario, get away with these design tweaks. But the reality is there are dozens of scanners with varying capabilities on varying phones with varying hardware. You’re always best to err on the side of keeping the code as clear, large, and simple as possible.

  • Anonymous

    Interesting designs. Qrezy turns QR codes into pieces of art. http://facebook.com/Qrezy