Recent Posts

• Racing the rainbow.
• Google+/- (and why I’m holding onto hope.)
• Automotive Inspiration for Friday
• Thinking Out Loud: Taking a look at what’s here now, not just at the horizon.
• The “Dark Side” of Typography (Inspiration)

Categories

• Apple
• Apps & Software
• Design
  • iPad Wallpaper
  • iPhone Wallpaper
  • Tools
  • Branding
  • Tutorials
  • User Experience
  • User Interface
  • Inspiration
  • Workflow
• Marketing
  • Self-promotion
• Mobile
• News
• Organization
• Personal
• Photography
• Podcast
  • Thinking Out Loud
• Social Media

Subscribe

• Atom
• RSS

Wednesday, October 06, 2010

Adjusting QR codes to fit your design

As I've started to see more use of QR codes in the past months, I've wondered how far a code could be pushed, morphed, and distorted to fit into a design with greater ease or fit into a brand without sticking out too much. When using a QR code, you want to let people know that it's there, but what can you do to make it better fit into it's surroundings?

I started making changes to the traditional black and white QR code style when working on an iPad wallpaper for Escape Route. The goal here was to work the code tag into the design and make it look comfortable in it's environment yet let the client know it was there and that they could use it when needed. Changing the color to red and blending it into the design as the postage stamp on the postcard was how we solved the issue of the QR code sticking out like a sore thumb.

Pushing it further.
Now that we know the color can be changed without affecting the functionality of the code, let's take a look at other color adjustments. If we invert the color using, for example, a black background and a white code, the tag breaks. Ok, duly noted. You'll need to make sure the code element has color and is placed on a white or off-white background otherwise you're just stamping a odd-looking block on your marketing materials.

How low can you go?
Let's shift our focus back to the color of the code itself. How light can we make it? After some quick tests, I've found that #E8E8E8 is the lowest hex color (or L 90 a 0 b 0 for print purposes) I could go before the code became unreadable. Not sure why you'd want to have such a faint QR code image, but if that's what you're looking do do, that's how you can do it.

Pulling, stretching, and twist it around.
Aside from changing the color,what else could be done to further manipulate it. I pulled my basic QR code into Adobe Illustrator and did a quick LiveTrace. The result of the LiveTrace gave me an image with rounded internal corners, which I was surprised to find, still worked on my QR code readers.

I did further tweaks to the trace by adjusting the corner angle, path fitting, and minimum area. The result was something that looks like it was run through a Photoshop filter or two (or left out in the sun to soften). The question remained; would it still work?

Don't lose focus.
While it's great to know that there is some flexibility in creating QR codes and how you can style them, it's important to not lose focus of the goal. If you make it too abstract, people might not know what it is (even more so than if it were a traditional QR code). Before you rush into twisting and pulling the code image into something that no longer resembles what it used to be, keep in mind the fact that you'll still want people to have some indication that they're looking at a QR code.