Web Development

QR Code Design Guide: Scannable, Beautiful, On-Brand

By Harto Atelier·April 1, 2026·6 min read

QR codes are everywhere—restaurant menus, product packaging, event tickets, marketing materials. But most look identical: black squares on white backgrounds. What if your QR codes could be beautiful, on-brand, and still perfectly scannable?

How QR Codes Work

QR (Quick Response) codes are 2D barcodes invented by Denso Wave in 1994 for tracking automotive parts. They encode data in a grid of black and white squares. Modern smartphone cameras can decode them instantly.

Key components of a QR code:

  • Position markers: Three large squares in the corners help cameras orient the code
  • Alignment patterns: Smaller squares that help with distortion correction
  • Timing patterns: Alternating lines that define the grid
  • Data area: The actual encoded information
  • Error correction: Redundant data that allows scanning even if partially damaged

Error Correction: The Secret to Custom Design

QR codes include error correction using Reed-Solomon codes. This means up to 30% of the code can be damaged or modified and still scan successfully. This tolerance is what enables custom designs.

Four error correction levels exist:

  • L (Low): ~7% correction - fastest to scan, smallest size
  • M (Medium): ~15% correction - balanced
  • Q (Quartile): ~25% correction - good for customization
  • H (High): ~30% correction - best for heavy customization

When designing custom QR codes, always use Q or H level error correction to maintain scannability.

Safe Customization Techniques

1. Colors

QR codes don't need to be black and white. The scanner needs contrast, not specific colors.

  • Rule: Dark data on light background, or vice versa
  • Minimum contrast ratio: 3:1, but 4.5:1+ is safer
  • Works: Dark purple on cream, navy on white, white on black
  • Risky: Yellow on white, light gray on darker gray

2. Rounded Corners

Instead of sharp square pixels, round the corners for a softer, more modern look. As long as modules are distinct, scanners handle rounded shapes fine.

  • Sweet spot: 20-40% corner rounding
  • Avoid: Rounding so much that adjacent modules merge visually
  • Bonus: Rounded codes look friendlier, less technical

3. Gradients

Subtle gradients can add depth and visual interest. The key is maintaining contrast across the gradient.

  • Safe: Dark-to-darker gradients on light backgrounds
  • Test carefully: Ensure all parts of gradient maintain minimum contrast
  • Direction: Diagonal gradients look more dynamic than linear

4. Center Logos

The center of a QR code is prime real estate for branding. You can overlay a logo and the code will still scan, thanks to error correction.

  • Size limit: Logo should cover no more than 20-25% of code area
  • Placement: Perfectly centered works best
  • Design: High-contrast logos scan better
  • Pro tip: Add a white border around logo to ensure separation from data

5. Custom Shapes

Replace standard square modules with circles, stars, or brand-specific shapes. This works as long as shapes don't overlap and contrast is maintained.

  • Best shapes: Circles, rounded squares, simple geometric forms
  • Avoid: Complex shapes with thin lines or intricate details
  • Keep position markers standard: Don't modify the three corner squares

What NOT to Do

  • Don't modify position markers: The three corner squares must remain recognizable
  • Don't invert randomly: Switching black/white modules breaks encoding
  • Don't reduce size too much: Minimum viable size depends on scanning distance (rule of thumb: 2cm × 2cm minimum)
  • Don't use low contrast colors: Yellow on white, pastels on pastels—these fail
  • Don't over-design: Every customization reduces scannability slightly. Pick 2-3 techniques max

Advanced Techniques

Artistic QR Codes

Some designers create QR codes that double as illustrations—codes shaped like products, integrated into artwork, or forming recognizable imagery. This requires careful planning and extensive testing.

Animated QR Codes

Digital displays allow animated QR codes. Each frame must be individually scannable—the animation just adds flair. Popular techniques include:

  • Gradual color shifts
  • Pulsing effects
  • Rotating elements (not the position markers!)
  • Appearing/disappearing logo

Frame Integration

Place the QR code within a custom frame or border that reinforces branding. Add text like "Scan me!", arrows pointing to the code, or brand messaging around it.

Testing Your Design

Always test custom QR codes extensively before production:

  • Multiple devices: iPhone, Android, tablets—scan with all
  • Different apps: Native camera apps, dedicated QR readers, social media apps
  • Various lighting: Bright light, dim light, outdoor, indoor
  • Different angles: Straight-on, tilted, from the side
  • Print tests: If printing, test physical prints, not just screens
  • Distance testing: Find minimum and maximum scan distances

Use Cases

Business Cards

Branded QR codes on business cards link to vCards, portfolios, or LinkedIn profiles. Match your brand colors and add your logo for cohesive design.

Product Packaging

Link to product info, authenticity verification, or AR experiences. Custom codes feel premium and increase scan rates.

Event Materials

Posters, tickets, badges—QR codes provide quick access to schedules, maps, or registration. Brand them to match event identity.

Restaurant Menus

Post-COVID, digital menus via QR are standard. Make your code match your restaurant's aesthetic—rustic, elegant, modern, playful.

Marketing Campaigns

Track campaign performance with unique QR codes. Custom designs increase scan rates and brand recognition.

Dynamic vs Static QR Codes

Static QR codes encode data directly. Once generated, the destination can't change. They work forever with no dependencies.

Dynamic QR codes encode a short URL that redirects to the actual destination. Benefits:

  • Update destination without reprinting codes
  • Track scans and analytics
  • Shorter encoded data = simpler, smaller codes

Downsides:

  • Requires maintaining redirect service
  • If service dies, codes stop working
  • Privacy concerns (tracking)

Best Practices Summary

  • Use high error correction (Q or H) for custom designs
  • Maintain 4.5:1 contrast ratio minimum
  • Keep position markers recognizable
  • Test on multiple devices before production
  • Size appropriately for use case and distance
  • Provide visual cues ("Scan here") for first-time users
  • Use dynamic codes when you need analytics or flexibility
  • Match code design to brand identity

The Future of QR Codes

QR codes are evolving. Emerging trends:

  • AR integration: Codes that trigger AR experiences
  • NFC pairing: QR + NFC for enhanced functionality
  • Cryptocurrency: Bitcoin and wallet addresses via QR
  • Authentication: Two-factor auth, secure logins
  • IoT control: Quick device pairing and setup

Create Beautiful QR Codes

Ready to design QR codes that actually match your brand? Our free QR Code Generator lets you create custom-styled codes with colors, logos, rounded corners, and more. Preview changes in real-time, test scannability, and download high-resolution PNG or SVG files ready for print or web.

Stop using boring black-and-white codes. Make yours beautiful, scannable, and unmistakably yours.