Recently we have been asked quite a lot about integrating QR codes into apps. For those of you who don’t know what a QR code is here is a brief description.
A QR code (short for Quick Response) is a specific matrix barcode (or two-dimensional code), readable by dedicated QR barcode readers and camera phones. The code consists of black modules arranged in a square pattern on a white background. The information encoded can be text, URL, or other data.
Common in Japan, where it was created by Toyota subsidiary Denso-Wave in 1994, the QR code is one of the most popular types of two-dimensional barcodes. QR is the abbreviation for Quick Response, as the creator intended the code to allow its contents to be decoded at high speed.
The functionality of QR codes can be very useful in marketing campaigns, however for some brands the lack of any logo can be a barrier to their use.
With this in mind we have been looking into ways to incorporate branding into QR codes. It would appear that the error correction built into the algorithm is quite substantial. This allows the code to be modified quite substantially and still be recognizable. This was utilised by Louis Vuitton who used a very interesting design by Takeshi Murakami in a Japanese campaign.
Here the corners have been rounded and the centre almost completely obscured and the code can still be scanned. For Digital Workshed we wanted to test merging overlaid images and logos with the QR code and see how far the image could be modified and still retain its functionality.
Generating a QR code can be done in anumber of ways, we used bit.ly. This is done by just taking the shortened address generated by bit.ly and pasting it into the address field on your browser followed by .qr. For example our contact code becomes http://bit.ly/jY47cU.qr.
This image can then be copied into the image editor of your choice and modified. We then modified this code to give the image below. Here we have incorporated a logo into the three black corner squares by simply creating a new layer in the image editor and placing the logo on top of the code. This seems to have no effect on the functionality, presumably this area is only involved in recognition and orientation of the code.
Bouyed by our success we thought we would try to push the limits of the recognition a bit further. In gimp a new layer was created containing the digital workshed logo. This layer’s blending mode was then changed to ‘hard light’. This allows the lower layer to show through where it is darker than the layer above. The resultant image is still recognised by QR codes and has clearly recognisable branding.
Incorporating more texture and shadows was our final aim. So the final iteration involved oilifying the matrix code to round the corners, overlaying a metallic texture merging as hard light to give the metallic effect. The DW logo was then shrunk, cut to an outline and both the matrix and logo had drop shadows applied.
Amazingly the final image still scans! Any comments or suggestion for further improvements would be much appreciated.