A common mistake I see — designers print a QR they think looks great, the printer signs off, the run goes out, and at the venue half the phones can't scan it. By that point it's too late, and "the QR is broken" gets blamed on the technology instead of the choices made in Illustrator three weeks earlier.
This is the guide I wish more brand teams had read before commissioning their first custom QR. It's design-first, but with the engineering constraints written in so you don't lose two days at the printer.
Understanding QR Code Structure
Before customizing, understand the essential parts:
- Finder patterns - The three corner squares (must remain intact)
- Alignment patterns - Help scanners read the code
- Timing patterns - Guide the scanner
- Data modules - Where your information is encoded
- Quiet zone - White space around the code
Color Best Practices
Contrast is Key
- Maintain at least 40% contrast between foreground and background
- Dark colors for modules, light colors for background
- Avoid inverted colors (light on dark)
Brand Colors
- Use your brand's primary colors
- Gradient colors work but ensure contrast
- Test scannability after color changes
Adding Logos and Images
Logo Placement
- Center logos in the QR code
- Keep logos under 30% of the QR code area
- Use high error correction (H level)
Image Integration
- Ensure logos have transparent backgrounds
- Maintain contrast around the logo
- Test on multiple devices after adding
Shape Customization
Module Shapes
- Squares (default and most reliable)
- Rounded squares
- Circles (test carefully)
- Custom shapes (ensure readability)
Corner Patterns
- Keep finder patterns recognizable
- Customize inner dots carefully
- Maintain structural integrity
Size Guidelines
Minimum Sizes
- Print: 2 x 2 cm (0.8 x 0.8 inches) minimum
- Digital: 240 x 240 pixels minimum
- Billboards: Scale appropriately for viewing distance
Scanning Distance Formula
Minimum size = Scanning distance ÷ 10
Frame and Call-to-Action
Frame Design
- Add frames to draw attention
- Include clear CTAs like "Scan Me"
- Use contrasting frame colors
Call-to-Action Examples
- "Scan for exclusive offer"
- "Scan to learn more"
- "Scan for menu"
Error Correction Levels
The format defines four, and the level decides how much of the symbol can be lost or covered before a reader gives up:
- L (7%) - Minimal customization
- M (15%) - Light customization
- Q (25%) - Moderate customization
- H (30%) - Heavy customization with logos
Codes built here are always H, and there is no control to lower it. That is the level a logo needs, so the choice is already made for the case that matters; what it costs you is modules, which is why a long payload produces a denser symbol.
Testing Your Design
Essential Tests
- Scan with multiple phone cameras
- Test iOS and Android devices
- Check various lighting conditions
- Print test before mass production
- Test at intended viewing distance
Common Mistakes to Avoid
- ❌ Too much logo coverage
- ❌ Poor contrast
- ❌ Inverted colors
- ❌ Too small for scanning distance
- ❌ Missing quiet zone
- ❌ Not testing before printing
Before you send it to print
Print the code at final size on a desk printer, walk to the far end of the room, and scan it with the oldest phone in the office. If that scan works, approve the run. If it doesn't, raise the contrast or shrink the logo before anything else, because those two choices cause most failures.
