Tworzenie użytkowych, intuicyjnych i jednocześnie stylowych ikon, to sztuka wymagająca połączenia wyobraźni, dobrej obserwacji oraz szczypty empatii.

Nie ma znaczenia czy chodzi o ikony na ulotce, na stronie www, czy też na znaku drogowym,
muszą być one estetyczne i JEDNOZNACZNIE czytelne dla jak największej liczby odbiorców.

Budowa ikon

Linie, kolory, gradienty, cieniowanie, animacje oraz wiele innych środków twórczych stoi po stronie designera przy przygotowywaniu ikon. Każdy obiekt, zjawisko lub problem może być zobrazowany ich niezliczoną ilością.

Rolą projektanta jest empatyczne spojrzenie na swoje projekty, wczucie się w przyszłego odbiorcę i zbudowanie takich ikon, które będą możliwie najczytelniejsze. Tutaj przyda się umiejętność dobrej obserwacji. Pozwala ona rozdzielić elementy obrazowanego obiektu na kluczowe, które musi zawierać ikona oraz na mniej ważne szczegóły, które można pominąć.
W celu osiągnięcia zadowalającego efektu potrzebna jest wykorzystująca obserwację i ubrana w empatię wyobraźnia.

Kluczowy jest odpowiedni kształt ikony. Dobrze naszkicowaną ikonkę łatwo dostosować do różnych stylów graficznych.

Rodzaje ikon

Ikony mają wiele zastosowań i w zależności od swojej głównej funkcji dana ikona powinna posiadać pewne określone cechy. 

Niektóre ikony możemy z łatwością sklasyfikować jako ikony użytkowe np. strzałka w lewo, cofająca do poprzedniego widoku w aplikacji, bądź popularny hamburger rozwijający menu na stronach internetowych.
Pełnią one rolę zastępczą lub pomocniczą dla różnorodnych opisów. Nasze piktogramy mają przyspieszać identyfikację funkcji danego elementu strony, bądź aplikacji. Użytkownikowi łatwiej jest wybrać między trzema ikonami, niż między trzema tekstami.

Wyglądają znajomo, prawda? Wystarczy szybki rzut okiem i od razu wiadomo o co chodzi.
Tak ma być! (Ikonografia jest językiem wszechświata!)

Ikonki użytkowe muszą być maksymalnie klarowne, zazwyczaj oznacza to kombinację najmniejszej możliwej liczby szczegółów i wysokiej czytelności – warto zaznaczyć, że tego rodzaju ikonki zazwyczaj są niewielkich rozmiarów. Pozwalają nam one ograniczyć ilość tekstu znajdującego się na layoucie, co mocno uatrakcyjnia go wizualnie. W przypadku takich ikon często rezygnujemy z różnorodnych kolorów, fikuśnych kształtów i w zasadzie wszelkich ozdobników – wszystko dla czytelności. Nie można jednak zapomnieć, by pomimo tej oszczędności środków, linia ikon użytkowych była nadal spójna z resztą designu. Aby to osiągnąć często posługujemy się pasującym do reszty sposobem wykonania np. grubością linii, kolorem, akcentem graficznym lub przynajmniej zaokrąglonymi lub ostrymi narożnikami. Wszystkie ikony i inne elementy graficzne dedykowane do jednego projektu powinny ze sobą korespondować tworząc razem jedną całość.
 

Domek przedstawiony na dwóch ikonach, ilustracyjnie oraz symbolicznie.

Pozostając przy aspektach wyglądu layoutu: drugim łatwym do wyróżnienia rodzajem ikon są te, służące do zilustrowania zjawiska/informacji/przedmiotu/czegokolwiek! W miejscach gdzie zdjęć jest już zbyt wiele i od "łysego" tekstu robi się ciasno – design staje się zwyczajnie zbyt ciężki. Z pomocą przychodzą nam ikonki, które jednocześnie odchudzają layout oraz nadają mu atrakcyjności.
Mimo, iż wszystkie ikony są dość minimalistycznym zobrazowaniem rzeczywistości, to te czysto funkcjonalne (domek po prawej) postawione przy ilustracyjnych (domek po lewej) są jak skoszony trawnik przy kwietnej łące. Projektując linie ikon mającą ilustrować jakąś treść, designer może sobie pozwolić na odrobinę „ekwilibrystyki”, ogranicza go tylko wyobraźnia, umiejętności i oczywiście wygląd layoutu, do którego ikony mają pasować.
 

Zaawansowane graficznie ikony potrafią nadać mnóstwo charakteru każdemu projektowi.

Tak jak w innych dziedzinach projektowania graficznego, tak i w projektowaniu ikon przedmiot naszej pracy często wymyka się sztywnym klasyfikującym ramom. Niejednokrotnie mamy do czynienia z ikonami, których nie da się jednoznacznie sklasyfikować jako te użytkowe lub ilustracyjne. Zdarza się nawet, że cała pula ikon występujących w projekcie pełni obie wymienione powyżej role jednocześnie.

Zastosowanie w projektach stron internetowych i aplikacji

Główne zadania ikonek to:

• Przekazywanie prostych komunikatów
• Uatrakcyjnianie designu
• Zwiększenie czytelności przekazu

Umiejętne dysponowanie ikonami zwiększa atrakcyjność graficzną każdego projektu, jednocześnie dodając im charakteru. Dobrze dopasowane do layoutu ikony, doskonale sprawdzają się jako spoiwo, forma pośrednia między grafiką a tekstami umieszczonymi na stronie internetowej lub w aplikacji. Są one też "wisienką na torcie" całego designu w prostej formie łącząc wszystkie jego cechy.
 

Ikony świetnie sprawdzają się w miejscach, gdzie layout daje nam wybór między kilkoma opcjami.

Nieograniczone możliwości

Osobiście, w projektowaniu ikon uwielbiam to niepisane wyzwanie, towarzyszące ich tworzeniu, aby przedstawić coś z pozoru absurdalnego przy użyciu kilku kształtów i linii, tak by rzeczywiście ikona trafnie ilustrowała dane zjawisko.
 

Absurdalny temat? Bardzo proszę!

Nie ma przedmiotu, zjawiska, problemu bądź informacji, której nie da się przedstawić ikoną. Ikona to najprostsze z możliwych, naturalne i pierwotne, będące z nami znacznie dłużej niż pismo zobrazowanie rzeczywistości – proste, ale jakże istotne, warte uwagi i docenienia.

  Szymon Igras (Graphic Designer / UI Designer )