iPhone, iPad & Android App Developers UK with offices in London, Manchester and Birmingham.

0207 993 4594
0161 870 2578
0121 270 7144
London
Manchester
Birmingham
iphone, ipad mobile application development android mobile application development

QR codes and logos

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.

louis-vuitton-qr-codes-takashi-murakami

 

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.

 

dwqr0

 

 

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.

 

dwqr1

 

 

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.
dwqr

 

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.

dwqr3

Amazingly the final image still scans! Any comments or suggestion for further improvements would be much appreciated.

iPhone Application Development

iphone/ipad apps

custom iphone / ipad apps development

Android Application Development

android apps

custom android app
development

Windows Mobile Development

windows apps

windows mobile application development

Blackberry Application development

blackberry apps

Blackberry application development

follow us
follow mobile phone developers Digital Workshed on facebook
follow iPhone, iPad & android app developers Digital Workshed on twitter
connect with iOS & android developers Digital Workshed on LinkedIn