QR Code Design Tips

So you’ve been inspired and want to create a designer QR Code? Following are some pointers to get you started.


Don’t forget you can use colour – I know, it goes against the grain of this blogs name – a contrast ratio of 50% is required for the code decoding to work. It would be best to use a bold colour and white background to be safe (inverted, i.e. white on a black or dark colour background is OK but test thoroughly), and consider that colour and tone can change slightly during any print process and that digital displays vary with brightness and contrast settings.

You can get creative and break from squares, codes will work with circles/dots other shapes instead to represent the pattern. They will even tolerate perspective and being skewed and warped. The Charlie Sheen code is a good example of the level of manipulation achievable.

There are rules:

As with most things in life there are rules and boundaries. There are elements of the code that you can’t disrupt too much or the code will fail to work. You can find a more in-depth guide on Wikipedia.

QR Code data contained within
Figure: ‘QR Code Structure Example 3’, by Bobmath is licensed under the Creative Commons Attribution-Share Alike 3.0 Unported license.

You really should avoid encroaching on the finder, timing, version info or quiet zones. Stick to the data squares and TEST OFTEN.

To find more about the design of codes see all posts related to #design, or watch a video about QR Codes and their uses.

URL / Shortened URL. There are arguments for and against.

Due to character limits and to avoid potentially scaring the user with a formidable looking long URL, it would be wise to use a shortening service. They can also provide additional ways to brand by including a keyword or campaign name into the shortURL, and additional methods of gather metrics about a QR Codes use. It is also recommended to include the URL close to the QR Code, particularly if it is new to your customers, a short URL is more likely to fit and still be readable.

However, some users don’t like shortened URLs unless there is the facility to preview the real URL. If the web link is fairly short, it would be advised to provide the direct URL. If the technology is likely to be new or surprising to your users a full URL might help make the transition a little easier.


Test, test and test again at all stages of production. If the code is going to be presented digitally, test with different resolution screen and devices. If a campaign is going to be print based get print proofs and again test with several devices (a smartphone and ‘dumbphone’) and different decoding apps/software.

In both instances the danger of a code not being read can be reduced by increasing the QR Code as large as you can afford in the creative, and don’t forget a ‘quiet zone’ around the code. A lager code will be easier to see and snap an image of and any blemishes to a print surface will be less likely to cause errors.


Be brave and go for it, you have seen what others have managed to achieve see how far you can push things, the worst that can happen is the code stops being able to be read, go back, think again, refine and try again till you get the balance. You will be amazed with how much you can manipulate the code, and the error correction copes, its what QR Codes were designed to deal with.