Jak „ożywić” kody QR?

Jak "ożywić" kody QR?

Kody QR coraz częściej pojawiają się na różnych produktach, drukach i stronach internetowych. Kuszą aby sprawdzić co kryje się pod tajemniczymi czarnymi kwadratami. I tu właśnie w tych czarnych kwadratach można dostrzec pewną rzecz – spójną oczywiście. Owe kwadraty są czarne na białym tle a różnią się jedynie układem względem siebie, którego to i tak trudno zapamiętać i tu różnica się kończy. Patrzę i widzę znów czarny kod. A czy musi tak być? nie musi:) nie chodzi oczywiście o to żeby nie zwracać na nie uwagi;) zwracać a przy projektowaniu wykorzystywać je w taki sposób aby identyfikowały się z tematem jakiego dotyczą w sposób bardziej przyjazny dla końcowego odbiorcy.

Jak działa kod QR?

Do czytania kodów potrzebny jest nam smartfon uzbrojony w odpowiednią aplikację do ich odczytywania. Aplikacja odczytuje kod ze słów kodowych utworzonych z modułów a te są tworzone przez kwadraty o kolorze ciemnym lub jasnym. I jak już można zauważyć możemy używać inne kolory niż czarny i biały.

Po co kody QR?

Kod QR jest idealnym nośnikiem informacji przez co może uprościć nam życie. Możemy zakodować w nim między innymi takie informacje jak:

  • adres witryny internetowej
  • dane kontaktowe (wizytówki)
  • dowolny tekst
  • a także wysłać SMS czy e-mail

Możemy także skorzystać z kodów z linkami dynamicznymi w których zakodowaną informację o adresie strony internetowej możemy zmieniać w każdej chwili.  Jednak o technicznych możliwościach nie będę się tu rozpisywał, chciałem tylko krótko przybliżyć Ci możliwości i potencjał wykorzystania kodów.

Jak „ożywić” kod?

I w tym miejscu przechodzimy do sedna tematu. W kodzie możemy dodatkowo umieścić logo (już na etapie jego generowania) co już bardziej przyciąga uwagę a o to przecież nam chodzi. Takiego zastosowania możemy spotkać coraz więcej co bardzo mnie cieszy:). A gdyby tak pójść krok dalej i zamiast tego pobawić się kolorami, przecież mamy do dyspozycji całą paletę kolorów ciemnych i jasnych. Musimy jedynie pamiętać o kontraście tak aby nie przekroczył granicznych wartości. Na początek zaprezentuję jeden kod w kilku wersjach kolorystycznych:

kolorowe kody QR

Super! mamy już kolory w naszym kodzie QR. Jednak taki kod przygotowujemy w większości dla firmy która posiada logo a te ma swoje unikalne cechy (chociażby kształt czy kolor). Tak więc spróbujmy pójść o kolejny krok dalej i poszukajmy elementu który możemy wykorzystać w naszym kodzie. Posłużę się tu przykładem projektów kodów QR dla firmy UNICO (realizacja dla Agencji Reklamowej LOGO TK). W logo tej firmy przeważa kolor czarny z akcentem zieleni. Tak więc w kodzie użyłem tylko trochę zieleni ale za to wykorzystując elementy z logo jakimi są listki. Pozostałą część kodu pozostawiłem w kolorze czarnym. Na poniższym zdjęciu widzimy logo i kod który został zaprojektowany na teczkę ofertową:

teczka z kodem QR
Teczka ofertowa z kodem QR. W kodzie wykorzystano element z logo firmy. Projekt z 2015 roku.

Poniżej zastosowanie tego samego kodu w innej kolorystyce na kubek. Tym razem pokolorowałem kod QR według dominujących kolorów grafiki ze zdjęciami umieszczonej po drugiej stronie kubka (grafikę dostarczyła firma UNICO). Widzimy ładne zdjęcie z produktami po jednej stronie a po drugiej kod który jest nawiązaniem do apetycznych produktów – z jednej strony apetyczne zdjęcie z drugiej apetyczny kod QR. W efekcie kod przyciąga uwagę i jest bardziej przyjazny w odbiorze.  Decyzja o jego zeskanowaniu na pewno będzie szybsza;)

kubek z kolorowym kodem QR
Wizualizacja kubka z kolorowym kodem QR. Po lewej na kubku grafika dostarczona przez firmę UNICO, po prawej moje opracowanie kodu QR. Projekt z 2015 roku.

To teraz spróbujmy poigrać z umieszczeniem kodu. Standard to oczywiście czarny kod w białej ramce. Lepsza opcja to kolorowy kod w białej ramce;). A może zabierzmy mu tą ramkę i pewną część kodu przenieśmy w jego sąsiedztwo w taki sposób aby nie została odczytana przez aplikację w smartfonie. Posłużę tu się przykładem wizytówek wykonanych w 2014 roku dla Agencji Reklamowej LOGO TK.

wizytówki z kodem QR
Wizytówki z kodem QR umieszczonym na całej stronie. Projekt z 2014 roku.

Zastosowane kolory nie są tu przypadkowe – odzwierciedlają pełnioną funkcję w firmie. Czerwień i zieleń to dwa pierwsze kolory jakie postrzega nasz wzrok, co ma zwrócić uwagę na osoby do pierwszego kontaktu w firmie. Czerwony nawiązuje do przywództwa (właściciel firmy) natomiast zielony kojarzony ze spokojem i zarządzaniem dlatego odnosi się do osoby prowadzącej biuro. Następnie niebieski – kolor dla osoby z pracowni ma nawiązywać do niezawodności, fioletowy – kolor kreatywności (grafik). W celu uzyskania ciekawszego efektu użyłem kilku odcieni kolorów na każdym z projektów. Tak więc mamy tu już identyfikację za pomocą koloru. Dodatkowo zmodyfikowałem nieco kształt kwadratów na figury bardziej opływowe nawiązując tym samym do kształtów logo. Rozmieszczenie kodu na całej powierzchni dało projektowi spójność i nie szablonowy wygląd. Druga strona wizytówki jest klasyczna i zawiera akcenty z jednym odcieniem koloru z poprzedniej strony co spaja obie strony wizytówki. I tak powstały dwa spójne warianty prezentacji zapisu tych samych informacji, a ich efekt prezentuje się następująco:

wizytówki z kodem QR
Wizytówka z kodem QR. Po obu stronach wizytówki są zapisane te same dane. Projekt z 2014 roku.

To na koniec jeszcze inny sposób na „ożywienie” kodu QR. Zastosuję go do innego elementu. W tym przykładzie posłużę się grafiką umieszczoną na skrobaczce do szyb. Gadżet miał być rozdawany klientom firmy LOGO TK. Założeniem projektu było oznakowanie skrobaczki grafiką nawiązującą do zimy i zamarzniętych szyb samochodu – symbolem tym jest oczywiście płatek śniegu. Unikając wstawiania dużej ilości danych kontaktowych przygotowałem kod QR z linkiem do strony. Następnie kod umieściłem wewnątrz płatka śniegu w celu utorowania wzrokowi drogi do kodu. Dodatkowo wstawiłem adres do strony w formie pisemnej tak żeby sugerował znaczenie kodu. Tak więc mamy już kod w innym elemencie. Kolor skrobaczek to czerwień a płatka śniegu biel (są to też dominujące kolory wykorzystywane w identyfikacji wizualnej tej firmy). Kolejnym etapem było przygotowanie projektu do wykonania znakowania. Kod QR musiał być ciemniejszy tak więc czerwony kolor skrobaczki to nasz kod. Poniżej zdjęcie z nadrukiem na skrobaczce:

snieżka z kodem QR
Skrobaczka do szyb z kodem QR w płatku śniegu. Projekt z 2014 roku.

Na co zwracać uwagę?

Na pewno zanim taki kolorowy kod damy do druku trzeba go przetestować. Projektując takie kolorowe kody zawsze testuję je na rożnych czytnikach aby wykluczyć ich niefunkcjonalność. Przy doborze kolorów biorę pod uwagę powierzchnię na jakiej zostanie umieszczony kod oraz jego rozmiar i metodę znakowania. Jeśli powierzchnia będzie nierównomierna to zwracamy uwagę na metodę znakowania i dbamy o to aby wielkość kodu była odpowiednia. Przy projektowaniu na nośniki z dużym połyskiem należy pamiętać o zachowaniu dużego kontrastu i doborze ciemnych kolorów (dotyczy to także matowych wydruków, które zostaną umieszczone za szybą). Połysk może powodować zbyt duże odbicia światła co spowoduje trudność w odczycie kodu prze aplikacje.

Po co ta cała zabawa z kodami QR?

Wszystko po to żeby zaciekawić odbiorcę i skłonić go do wykonania akcji co zawsze powinno być priorytetem przy projektowaniu jakiejkolwiek grafiki. Oczywiście nie zapominajmy o funkcjonalności. Do tego taki kolorowy kod na pewno jest ciekawszy niż standardowy czarno-biały, chociaż są miejsca i projekty w których standardowa forma będzie najlepsza do zastosowania. Uważam, że taki kod powinien być spójny z identyfikacją firmy i do niej nawiązywać. Tak więc zachęcam do eksperymentowania z kodami. A jakie macie własne doświadczenia z kodami QR i co sądzicie o ich stosowaniu? – zapraszam do komentowania.