1. Learning about QRcode

What is QRcode? Types? Structural traits? Where it is used? Many people have already covered all that, and it is already detailed on the web,
so I will keep duplicate explanation to a minimum and just point you to relevant URLs.

   Useful sites to bookmark in advance

1. A site that starts by explaining how QRcode is one form of image code.http://www.ubiu.net/imagecode/index.htm?PHPSESSID=5b88298ee9926fa80362d8ce4abf586d

1. The Korean-language site of DENSO of Japan, the company that first developed QRcode and released the rights for free.http://www.denso-wave.com/qrcode/ko/index.html

1. A fairly well-known solution-production company operating in Korea.http://must.or.kr/ko/research/qrcode/
2. http://www.scany.net/

 

   Things to know before designing a QRcode

1. The first thing to think about before starting a design is how much of the generated QRcode you can adjust.
   As many blogs and sites mention, the area a user can (damage?) customize breaks down as follows.
   
   
   • level L  : roughly up to 7% of errors can be corrected.
   • level M  : roughly up to 15% of errors can be corrected.
   • level Q  : roughly up to 25% of errors can be corrected.
   • level H  : roughly up to 30% of errors can be corrected.

1. The catch is that most publicly available Korean tools either hide the level option or put it behind a paywall.
    But on the sites below you can adjust the level for free. If English or Japanese is uncomfortable,
   using Google Chrome's built-in translation will let you read them just fine.
   
   1) A page Google built and runs for developers.
   
   2) A Japanese venture(?) company that develops and distributes a range of apps.
2. http://micono.hp.infoseek.co.jp/
3. http://code.google.com/intl/ko-KR/apis/chart/docs/gallery/qr_codes.html

 

   =>  See the URLs above: QRcode _from the left 1) , 2)  

2. Design preparation

1. This is the Google method.
   Visit the Google code site below and read element A carefully — it details every option.
   If English is hard, the Korean site above has the same content in Korean. After reviewing each element,
   plug them into element B of the URL and hit Enter — the browser generates the QRcode for you, like this:
2.  

1. 

1. Knowing the QRcode "color recognition range"
   Barcodes are black and white because the contrast is what data is read from.
   So before designing, figure out which colors are still readable as a barcode, and pick colors within the usable range that fit your purpose.
   First, in Photoshop'sTop menu->Select->Color Range, a window pops up and the cursor turns into an eyedropper. Click the black part of the QRcode with the eyedropper and press OK — only the black is selected.
   Pick a color from the left toolbar, then use Alt+Del to fill the selection with that color.
   
   ( HSB — sample showing the "H" component of HSB)
   
   

   

   ( HSB — sample showing the "S" component of HSB)
   
   

   

   ( HSB — sample showing the "B" component of HSB)
   
   
   The Color Picker in Photoshop shows the HSB values.
   (I will skip the detailed explanation — Google has plenty of it.)
   Pick a color in the relevant range and go from there. 
2.  
   (The graph above shows the H, S, B values in order. To be recognized as a QRcode, the color only needs to satisfy at least one of these three ranges.)

1.  
2. 
   ( And, you can adjust the selection range using Fuzziness — handy for other work too.)
3.  
4.  

1. Knowing the QRcode "area recognition range" — first you need to know the positioning range a QRcode reader can recognize.
   Now that we know the usable area, 
   let's cut and paste that area to shape it, apply the color elements above, and put together a simple QRcode design. 
   
   

   

   
    (In my case,
   to optimize the design elements, I built the example above using the QRcode "H" value with 30% usable area.)
2.  

 

 

3. Starting the QRcode design

A QRcode is an irregular grid of black and white pixels forming a box.
Because it has such a simple property, you can roughly group design approaches into color, icon, border, and image combinations.

1. Coloring the QRcode
   

Calvin Klein, for instance, uses busy streets and old building facades, turning what could easily look stiff and overly technical
into a QRcode that works much more effectively as a design and marketing piece.

1.  

Watching the video attached below, you can see how the design works with the surrounding environment.

1.  

 

1.  

Calvin Klein Jeans QRCODE Billboard in New York City:

1. http://www.youtube.com/watch?v=c_N559yMLZc&feature=player_embedded

When designing a QRcode — given its rather rigid shape, irregular layout, and single color — most cases just slot a chosen or hand-drawn image into the original black-and-white file, shrinking it down to whatever size avoids errors. That is because each piece of the generated QRcode plays a functional role like a barcode, so people worry about errors or recognition variability.
But as the Calvin Klein case shows, simply jamming a guessed-size, unfitting image into the QRcode tends to feel awkward. Just careful color choices considering the surroundings can give the design enough of both design and marketing punch. 

1.  

  

(To pair the rough, noisy, vintage feel of the surrounding construction site with the QRcode's hard-edged shape, paint texture was placed on the left and right of the poster. The colors picked harmonize with the building and nearby poster signs, while the white background still gives clean visual focus.)

1.  

1.  

 

1.  
2. Putting the QRcode in your own frame — softening the hard QRcode border. Rather than leaving the produced QRcode bare, harmonizing it with a chosen frame shape or image makes it far more persuasive.

3. 

   
   
   
   

1. Introducing icon friends to the QRcode
    
   If you approach that quiet QRcode a little more warmly, you can reach more people positively or pass on a clearer message.
    
    
   Example 1)

   

   
   

   -> A simple star shape was made and colored in, with a thin white border added to keep its slightly fuzzy outline distinguishable.

    

   Example 2)
   

   

   
   
   

   -> Using a symbol that would actually be used in daily life and adding a label so that you can tell what the QRcode does just by glancing at it.

    

   Example 3)
   

   

   
   

   By delivering an image through the QRcode, the design turns it from a passive barcode read only by smartphones into something that conveys meaning on its own and serves a broader communication function.

2. A simple box of pixels, riding on cutting-edge devices, is changing how we share the latest information and data quickly and easily. But how does it feel to people who don't have a smartphone? A vague black box stamped on a huge building might be a fun curiosity to some, but I quietly suspect it could be visual pollution to others, however small that group is.

1. QRcode design?

Using the QRcode to carry a company image or logo.

Sure, asking how to make that little pixel box unique and full of character matters, but when a company has solid BI/CI, you can create your own logo just by using color, like this. 

That goes beyond just QRcodes, as a personal comment.