Hvordan lage en QR-kode med firmalogo — og er det trygt å skanne?

Jeg skal fortelle deg hvordan jeg ser det etter år med å lage disse kodene for klienter. Det svart-hvite kvadratet fungerer. Det skannes perfekt. Det ser bare nøyaktig likt ut som koden til naboen, konkurrentens kode og koden på en brosjyre noen la i postkassen din. Ingen forskjell.

Og nå plasserer du en logo i midten. Plutselig kan man se hvem sin kode det er, før man i det hele tatt holder opp telefonen. Og man skanner mer villig, fordi man ser et merke man kjenner til. Forskjellen i avlesninger kan være betydelig.

Spørsmålet som alltid stilles på dette stadiet: «vil ikke dette ødelegge skanningen min?». Nei. Forutsatt at du ikke gjør det helt tilfeldig.

Hvorfor får ikke logoen hele QR-koden med logo til å eksplodere i luften

Her er en liten magi som det er verdt å forstå. Hver QR-kode har innebygd feilretting. Det er en form for overflødig data som gjør at leseren kan gjenskape hele koden, selv om en del av koden er skitten, krøllete eller dekket av noe.

På det høyeste nivået (markert med bokstaven «H») vil koden overleve dekning av omtrent 30 % av overflaten. Logoen i midten spiser vanligvis 20–25 %. Det betyr at du har plass, og med god margin.

To ting jeg alltid holder meg til:

1. Logoen skal være helt i midten. Aldri i hjørnene. Disse tre tykke kvadratene i hjørnene er posisjonsmarkører; etter dem fanger leseren opp hvor som er topp og bunn. Dekker du til ett, er det slutt, koden er død.
2. Gi logoen en hvit ramme. En tynn marg rundt. Det skiller grafikken din fra kodens "piksler" og hjelper virkelig ved avlesning, spesielt når logoen har en frynsete, uregelmessig form.

Arbeid steg for steg

I cutty.dev gjør du dette mens du forkorter lenken, fordi QR-koden ligger ved hver lenke automatisk. La oss kjøre:

1. Forkort lenken eller åpne en du allerede har i panelet.
2. Gå til seksjonen "QR-kode" på redigeringssiden.
3. Last opp din logo (PNG, SVG, JPG, hva enn du har). Den havner i midten, og feilrettingen øker automatisk til et høyere nivå. Du trenger ikke å klikke på noe.
4. Velg farge på koden og bakgrunnen slik at den passer merkevaren din.
5. Last ned. PNG for skjerm og sosiale medier, SVG for trykk (skalerer uten tap av skarphet, så bruk nettopp SVG til bannere eller roll-ups).

Forhåndsvisningen oppdateres i sanntid. Du ser effekten før noe lander på disken.

Vær oppmerksom på dette: farger kan lure deg

Dette er det ene øyeblikket hvor folk oftest feiler, så lytt nøye etter.

Skanneren leser ikke farger. Den leser kontrast. Du kan gjerne male koden, men hold deg til regelen: mørk kode på lys bakgrunn. Ikke omvendt. Lys kode på mørk bakgrunn, joda, det vil skanne på din flaggskiptelefon, og så står kunden med en eldre Android og forbanner seg fordi ingenting blir lest.

Og ikke plasser koden sin farge for nær bakgrunnsfargen. Mørkeblått på svart? Glem det. Jo høyere kontrast, desto sikrere vil koden leses fra større avstand (og på en nettside eller en plakat på et busstopp er dette faktisk viktig).

Saken ingen vil fortelle deg om: hvor logoen din havner

De fleste logo-generatorer ber deg laste opp en fil til deres server. Og stopp opp et sekund her. Din merkevare, noen ganger den eneste ordentlige vektorversjonen, havner hos en fremmed leverandør. Og i brukervilkårene kan det stå at de har rett til videre bruk av denne filen. Har noen noen gang lest disse vilkårene? Nettopp.

Hos oss genereres koden i nettleseren din. Logoen forlater ikke datamaskinen din, den sendes ikke noe sted og lagres ikke. Filen forblir din.

Skriv ut én gang, styr hvor du vil

Til slutt et tips som en dag vil spare deg for mye penger på nyutskrift.

Lag koden fra en forkortet lenke, ikke fra den rå, lange adressen. Hvorfor? Fordi en kode basert på en kort lenke kan du senere bytte ut innenfra. Du endrer målet for lenken i panelet, og den samme trykte koden fører plutselig et annet sted. Er kampanjen over? Du omdirigerer til en ny, uten å røre flyerne.

Kode som er skrevet direkte på en lang adresse er låst. Endring av mål = ny kode = nytt trykk = ny regning fra trykkeriet. Tenk på dette før du bestiller tusen visittkort.