You’ve seen them on ketchup bottles, lampposts, vaccine cards, pizza boxes, and museum walls. They can even be found on the occasional gravestone. Most frequently we use them to quickly go to a web link without having to type out a URL – but also for a stack of other uses, from sharing a WiFi password to paying for a meal, or getting in to see a film at the local cinema.

Quick Response codes – those busy little pixelated squares – have been around for decades, but it took a global pandemic to really launch them into the mainstream. So where did they come from? How do they actually work? And what’s the best way to make them?

A LITTLE HISTORY

The QR code was invented in 1994 by Masahiro Hara, an engineer at Denso Wave, a subsidiary of the Toyota Motor Corporation, as a way of tracking automotive components. The goal? Speed. At the time, Japanese car manufacturers were struggling with the limitations of traditional barcodes, which could only hold about 20 alphanumeric characters, had to be scanned one by one, and if scratched became unreadable.

A more robust device was needed that could store more data, and be scanned more quickly from any angle.

Here’s how a couple of beers and a train ride helped Hara come up with the idea:

“At the time, I was told that ideas were more likely to come to mind when the brain was relaxed and producing alpha waves, so a colleague of mine lent me an alpha wave measuring device. I took it home and researched under what circumstances alpha waves are produced. When I took a bath, when I drank two glasses of beer, and when I saw greenery outdoors… The one that produced the most was when I drank the right amount of beer. In my case, two glasses of beer!

Then I had some beer on my day off, and as I was on the train looking out the window, I saw a building. I noticed that the upper floors of the building had a different arrangement of windows than the lower floors. That’s when I got the idea that if there was a unique mark that said, ‘This is a QR Code’, it could be read quickly.”

That led to the development of the small squares that are in the three corners of a QR code.

Hara was also inspired by the Go board game:

“I was looking at the board and thought the way the stones were lined up along the grids… could be a good way of conveying lots of information at the same time.”

Hara seems like quite an inspirational chap:

“First of all, I would like you to cherish curiosity and inspiration in your daily life. Curiosity leads to new knowledge, inspiration leads to various experiences, and the fusion of these drives the creation of imagination. I believe that ideas are born more from daily life and hobbies than from working at a desk. When the brain is relaxed, good ideas are probably generated from past experiences.”

The result was the Quick Response (QR) code – capable of holding around 4,000 alphanumeric characters, and readable from multiple directions. Crucially, Denso Wave decided not to patent the code – an act of generosity that allowed QR codes to spread far and wide, from industrial parts to packaging design, gravestones and beyond.

But it took a while…

As recently as 2012, there were industry jokes about how infrequently QR codes placed on posters or adverts were actually used, which culminated in a Tumblr account called Pictures of People Scanning QR-codes, which never had any posts.

QR codes mostly languished in the realm of packaging, logistics, and the occasional marketing stunt. Scanning the codes meant opening a clunky app, so most people simply didn’t bother. In fact QR codes were even having obituaries written about them.

Things changed massively thanks to two developments.

Firstly, in 2017 phones started to feature integrated QR code scanning in their camera apps (iOS11 and Android 8.0). Phone cameras could now automatically detect a QR code, and put a link on screen to take you to an app or webpage.

Secondly, COVID-19 came along.

Suddenly everyone needed a touch-free way to access information: menus, test results, track-and-trace systems. The humble QR code became the interface of the moment – part signage, part hyperlink, part public service.

HOW DO QR CODES WORK?

A QR code might look like a drunk crossword puzzle, but there’s an elegant structure behind the chaos. Here are the key parts of a QR code:

• Position markers: The three big squares in the corners – these help the scanner locate and orient the code.

• Alignment markers: Smaller squares, for adjusting distortion.

• Timing pattern: A series of alternating modules that help the scanner figure out the grid’s size and spacing.

• Version information: Details on which QR code version is being used – 40 different ones exist, each capable of holding different amounts of data.

• Data: The actual content. The more information in that bit of data, the more complex, and larger, the resultant code. (I used the URL of this blog post to generate the QR codes – since the URL of the post is quite long, the codes are quite complex.)

• Error correction: Built-in redundancy using a system called Reed–Solomon coding, so the code still works even if it’s partially damaged or obscured.

• Quiet zone: an area of clear space around the code

It’s a clever system: part math, part geometry, part magic.

There are two main types: static codes or dynamic ones. The difference between the two is editability and trackability.

Static QR codes are hard-coded and permanent. Essentially they’re a translation of a URL into a scannable code. They don’t allow tracking, and the destination URL can’t be updated once the code’s been created. So if you’re printing one onto hundreds of thousands of leaflets, postcards or business cards, you’ll want to make sure it’s the right one, and that the destination URL will be in place for as long as you need it. Otherwise you’ll just be sending people to a 404 page.

Dynamic QR codes are much more flexible. Normally set up through a third party, they contain a short redirect link that takes users to whatever destination you choose. Crucially, that destination can be updated later. So if your campaign changes, your code doesn’t need to.

They also let you track:

• How many times the code’s been scanned

• When and where it was scanned (roughly)

• What device or browser was used

So they’re more functional, but you generally have to keep paying the company which created and manages them.

WHAT’S THE BEST WAY TO GENERATE A QR CODE?

Focusing on creating direct URL-based static QR codes, here are some options:

Chrome
Perhaps the most simple, and simplistic, way of creating one is in Google’s Chrome browser. Navigate to the page you want to link to, click the three dots in the top left of your browser window, select ‘Cast, save and share’ > Create QR Code > Copy or Download. That gives you a black and white dot-based code, in png format, and just 450px square. It also has a dinosaur icon in the centre – a call back to Google’s simple and addictive Dinosaur game that appears in Chrome if you lose internet access.

If you’re using Chrome on a mobile, click on the share icon in the address bar of the browser and scroll down to ‘Create a QR code’, and Chrome will create a code – with the name of the page and the name of the website below it. You can then share that in the usual ways from a mobile – the resulting jpg is 1290 x 891px, with a lot of white space around the code. (Note that it uses a different, shorter URL structure than on desktop – hence the simpler code).

Adobe InDesign
If you’re running Adobe’s InDesign layout programme, you can easily create static QR codes from within it. Create a new document, and then in the top menu bar, select Object > Generate QR Code > Type: Web Hyperlink. You can’t customise the style, but you can choose any colour from your palette. It creates a vector-based code, so you can output it at any size you want.

Adobe Express
Sticking with Adobe, but in Adobe Express, their web-based Canva competitor, you can create static QR codes in one of five colours, which you can output in svg, png or jpg formats, with squared or rounded or dots. The svg format isn’t great though, with small gaps between some squares, and an odd clipping mask. The png and jpg are both 500px square.

Canva
Over on the bloated beast that is Canva, if you go to Apps, search for ‘QR code’ to find Canva’s inbuilt generator. Drop in your URL and it will generate a code. Use the Customise drop down to change the background and foreground colours, and the margin width around the edge. When you’re done, click Share > Download and choose the pdf format – it’s vector-based and can be opened in Illustrator and scaled to any size. (Or you can always take a screenshot from within the app for a pixel-based version.)

QR Planet
With loads of customisation options, including colours, style of code, logos, frames, and the text attached to the code, QR Planet seems to be the most flexible option for creating a static code, which you can download in png, svg and pdf formats. The code directs straight to your URL.

Remember, all the above are static codes: fixed links, which can’t be changed after printing. Essentially they’re just machine-readable URLs, which save users having to type out a web address into their phones.

If you want to create dynamic codes, updatable ones, then you could try the following – but remember that you’re reliant on the company that provides the codes going forwards, and you’ll usually have to pay for them.

(Better practice, if possible, would perhaps be to set up a redirect on your own site if you change the URL.)

Bitly
Bitly, historically used mainly to shorten long URLs, lets you create a QR code where you can set a destination URL and title, as well as a shortlink if you want that too, and UTM parameters to track web traffic in analytic tools. You can choose from various square or circular designs, and 8 preset colours, or your own Hex value (or gradient), and you can add a logo or centred text, and an automated frame. You can download the code as jpg, png or svg, sized at 2000px square. You get 2 free (static) QR codes per month, or for $10 a month you can get their Core plan, from which you can create 5 dynamic QR codes a month.

QR Planet
As well as the free static codes mentioned above, QR Planet lets you create dynamic codes, with the same extensive customisation options, with various pricing plans.

Uniqode
Similar to QR Planet, Uniqode has lots of customisation options on style and colour. With a pro account you can set a custom domain which scanners will see – the default is to go via qrcodes.pro and then on to the URL you’ve specified. Download options are jpg, png, svg, pdf and eps. The company seems to be used by a lot of large corporations. Watch out for using the free ones from that site, as they expire after 14 days.

WHAT SHOULD YOU THINK ABOUT WHEN DESIGNING WITH QR CODES?

• Avoid tiny sizes – guidance varies, but try not to go smaller than 20mm square on printed materials.

• Keep high contrast – dark against a light background works best, some scanners can’t read the codes if they’re reversed out of a dark background colour.

• Use vector formats if you can – they scale to any size, and avoid the risk of blurry pixelated codes.

• Honour the quiet zone – leave the margin space around the code, it helps users’ cameras identify the codes.

• Customise with care – don’t cover the key position markers. Some folks suggest always sticking with the squared format (rather than circles), and not adding a logo (which always blocks part of the original code).

• Test, test and test again – print out your materials, and check that the codes work when scanned on a range of devices, at a sensible distance, and in a mix of lighting conditions.

• Add context – make sure to tell people what scanning the code will do. Add a written URL if you can too.

• Make sure your code leads to a mobile-friendly site – the vast majority of users will be scanning the code on a mobile.

Check out more usability guidelines and some useful tips on accessibility.

WHAT ABOUT SAFETY?

When QR codes are used on signs, there is a risk of decoy codes being stuck over the top of the real ones, linking to fake websites with browser exploits. It’s a scam known (clumsily) as ‘quishing’ – here’s a BBC story about it. It’s always a good idea to add the URL (of the site the code leads to) just next to the code, so that people know the site they should be taken to. If you want to double check where any code is sending you, use QR Code Raptor to examine a link before following it.

IN SHORT?

Whether you’re tracking car parts or linking to web page, QR codes are a brilliant blend of simplicity and sophistication. Just remember: design smart, test well, and never underestimate the power of a couple of beers and a train ride.

Oh, and if you’d like to know a lot more about QR codes, and other 2D barcodes, check out this detailed Medium post, What are those other QR codes?

Source photograph for fly poster image