Ikona jako narzędzie komunikacji – zastosowanie, rodzaje, bezpłatne źródła

Ikony na stronie i blogu, czyli jak używać piktogramów
Ikony to symbole graficzne, które otaczają nas w codziennym życiu na każdym kroku, zarówno online, jak i offline – w Internecie są tym, czym znaki drogowe na autostradzie – komunikują czynność, jaką użytkownik powinien wykonać, lub są symbolem funkcji strony czy aplikacji.
Ponad 4500 portali, 4100 influencerów, 60 dziennikarzy. Jedna platforma.
Załóż konto

Przykładami ikon są znaki drogowe, ikonki dyscyplin sportowych na olimpiadach, symbole oznaczające toalety, ikony aplikacji na naszych telefonach czy emoji. Ikony umieszcza się chociażby na sprzęcie AGD, przykładowo: oznaczenia programów pralki czy robota kuchennego zawsze przedstawiane są w formie graficznej.

Przekaz za pomocą znaków i symboli jest szybki i intuicyjny, dlatego ta najstarsza forma komunikacji pisanej, wywodząca się wprost od pisma obrazkowego, jest dziś tak chętnie wykorzystywana w świecie online. W Internecie znajdziemy wiele źródeł, z których możemy pobrać estetyczne ikony. Ułatwią one użytkownikowi poruszanie się na naszej stronie internetowej i zwiększą jej atrakcyjność.

Czym są ikony i do czego służą?

Ikony to proste znaki graficzne niosące za sobą jakiś przekaz. Przykładowo: w sklepach internetowych „koszyk” często oznaczany jest nie tylko samym wyrazem, ale również znakiem graficznym. Ikony to też symbole reprezentujące programy na naszym desktopie czy oznaczenia aplikacji zainstalowanych na telefonie. Dzięki nim możemy szybko odnaleźć poszukiwany program, bo kolory i kształty przemawiają do nas szybciej niż wyrazy.

ikona itunes
Źródło: apple.com

Projekty ikon mogą być proste. Mogą być to płaskie, dwuwymiarowe rysunki czy sylwetki, lub złożone, składające się z kombinacji elementów grafiki, kształtów, obiektów, gradientów, kolorów, cieni, konturów czy trójwymiarowych efektów perspektywicznych. Ich wspólnymi cechami zawsze powinny być spójność i czytelność.

Dlaczego warto posługiwać się ikonami na stronach internetowych?

Nasz mózg rozpoznaje znaki graficzne znacznie szybciej niż wyrazy. Dlatego ikony są tak chętnie wykorzystywane w sklepach internetowych, gdzie o podjęciu decyzji zakupowej często decydują sekundy. Koszyk zwykle oznaczony jest dodatkowym symbolem, po to by użytkownik szybko go odnalazł. Przecież każdemu sprzedającemu zależy na tym, aby klient z łatwością dokonał zakupu.

Zastosowanie ikon na stronie internetowej mixpanel.com
Przykład wykorzystania ikon na stronie internetowej. Źródło: mixpanel.com

Ważną funkcją ikon jest aspekt estetyczny. Ikony przyciągają uwagę, a te stworzone w odpowiedni sposób pomagają w zbudowaniu pożądanego wizerunku lub jego wzmocnieniu. Coraz częściej stosowane są, przykładowo, w ofertach. Umożliwiają podzielnie oferty na kategorie, tak by czytelnik mógł szybko odnaleźć informację, która go najbardziej interesuje, bez czytania całego tekstu. Ikony są wszechobecne, nie dziwi więc fakt, że coraz częściej stosujemy je nawet w CV.

Jak dobrać ikonę do strony lub bloga?

Właściwe dobrane ikony harmonizują z typografią i ogólnym designem strony. Są proste i komunikują tylko jeden przekaz. Dlatego powinny być przede wszystkim łatwe do odczytania. Powinny opierać się na intuicyjnie rozpoznawalnych kształtach i symbolach. Projektując lub wybierając ikony, należy zwrócić uwagę na wyeliminowanie wszystkich niepotrzebnych szczegółów oraz wyrównanie obrysów i obiektów do pikseli w małych rozmiarach ikon, aby uniknąć niechlujnych i zamazanych obrazów.

Ważnym aspektem doboru ikon jest spójność. Dobierając ikony, należy zachować ten sam styl, w przeciwnym przypadku doprowadzimy do bałaganu stylistycznego, który zamiast ułatwić odnalezienie się na stronie, będzie wprowadzał niepotrzebny chaos.

Ikona aparatu wykonana dla microsoftu. Przykład zastosowania siatki.
Ikona microsoft. Źródło: microsoft.com

Projektowanie ikon polega na tworzeniu kompozycji wzorcowych zwykle dla największego rozmiaru, a potem dostosowanie ich do mniejszych formatów. Zestaw ikon powinien charakteryzować się wspólnym stylem, być komponowany przy użyciu tej samej palety kolorów, perspektywy i renderowany w ten sam sposób.

Przykład wykorzystania zbyt dużej ilości ikon na stronie ommegang.com
Ikony zbyt szczegółowe i w zbyt dużej ilości wywołują na stronie wrażenie chaosu.
Źródło: ommegang.com

Wiele nowoczesnych ikon ma maksymalny rozmiar 1024 x 1024 piksele. Wyzwaniem w projektowaniu ikon jest stworzenie obrazu, który jest komunikatywny, estetyczny i zrozumiały w każdym rozmiarze, od maksymalnej do minimalnej rozdzielczości 16 x 16 pikseli. By ikony dobrze się wyświetlały również na urządzeniach o mniejszych ekranach i były na nich w pełni czytelne, coraz większą wagę w projektowaniu przykłada się do projektowania tzw. ikon responsywnych (tutaj znakomity przykład: responsiveicons.co.uk/). Typowe formaty plików to: .ico, .bmp, .png, .svg i .eps.

Przykład makiety ikon stosowanej przez Google
Siatka projektów ikon Google Material Design. Źródło: material.io

Część firm tworzy własne wytyczne dotyczące tworzenia ikon. Przykładowo, Google dzieli swoje ikony na produktowe, systemowe i ikony reprezentujące aplikacje. Ikony produktowe mają na celu wizualnie reprezentować markę, produkty, usługi lub narzędzia. Podczas gdy każda z ikon wyraźnie się od siebie różni, wszystkie razem tworzą spójną całość. Ikony tworzone są na siatce - by zachować spójność, na siatce prowadzi się linie możliwych kształtów. W efekcie każda nowo powstała ikona pasuje do poprzednich.

Infografika przedstawiająca typy i rodzaje ikon internetowych.

Skąd pobrać darmowe ikony?

W Internecie znajdziemy wiele stron oferujących darmowe ikony. Korzystanie z nich jest bardzo proste, choć czasem wymaga rejestracji. Strony i wyszukiwarki umożliwiają wybór i pobranie ikon dostępnych w ramach domeny publicznej (oznacza to, że można z nich korzystać bez ograniczeń wynikających z praw autorskich) bądź na tak zwanych „wolnych” licencjach Creative Commons (pozwalających na bezpłatne użycie przy jednoczesnym spełnieniu ściśle określonych warunków, np. podaniu informacji o autorze, czy wykorzystaniu utworu w celach niekomercyjnych). Dlatego aby uniknąć naruszenia praw autorskich, należy każdorazowo dokładnie przeczytać licencję. Więcej cennych informacji na temat rodzajów licencji CC oraz w ogóle kwestii publikowania cudzych utworów w Internecie znaleźć można w naszym artykule Prawa autorskie w Internecie.

 

Przykładowe strony, z których możemy pobrać darmowe ikony:

 

Iconmonstr

Darmowa wyszukiwarka zawierająca ponad 1000 ikon; stale rozbudowywana; z formatami plików .svg i .png.
 

Przykładowe ikony na stronie Iconmonstr
Źródło: iconmonstr.com

 

Iconspedia

Darmowa wyszukiwarka zawierająca ponad 14 tys. bezpłatnych ikon w formatach .png, .ico i .icn oraz 850 paczek z ikonami.
 

Przykładowe ikony na stronie Iconspedia
Źródło: iconspedia.com

 

Flaticon

Zawiera 300 tys. + darmowych ikon do użytku prywatnego i komercyjnego w formatach .svg, .eps, .png, .psd i 6 tys. + paczek z ikonami.
 

Przykładowe ikony na stronie Flaticon
Źródło: flaticon.com

 

freepik

Zawiera 99 tys. + darmowych ikon wektorowych do użytku prywatnego i komercyjnego, w formatach .png, .eps i .svg.
 

Przykładowe ikony na stronie freepik
Źródło: freepik.com

The Noun Project
Zawiera prawie milion płatnych i bezpłatnych ikon.

Przykładowe ikony na stronie The Noun Project
Źródło: thenounproject.com

Fontello
Obszerny zbiór ikon w formacie .svg pozwalający także na tworzenie fontów zawierających wybrane zestawy piktogramów

Przykładowe ikony na stronie fontello
Źródło: fontello.com

Ikony komunikacji przestrzennej AIGA
Dostępne do użytku publicznego ikony komunikacji przestrzennej:

Ikony komunikacji przestrzennej na stronie AIGA
Źródło: aiga.org

Obecnie ikony są tak powszechne w naszym otoczeniu, że często nie zauważamy, jak bardzo ułatwiają nam życie. Te najlepsze są rozpoznawalne niezależnie od kontekstu kulturowego, części globu czy wieku odbiorcy. W przypadku projektowania i wyboru ikon o sukcesie decyduje zachowanie prostoty, czytelności i estetyki projektu. Odpowiedni dobór ikon do stylistyki strony internetowej i dbałość o zachowanie poprawnej rozdzielczości pozytywnie wpłyną na wygląd strony czy sklepu i ułatwią użytkownikom poruszanie się po witrynie.

 

Zobacz pozostałe artykuły z tej serii:
- Zdjęcia i ilustracje w Internecie
- Grafika wektorowa i jej zalety w Internecie
- Typografia od A do Z
- Barwy w Sieci
Prawa autorskie w Internecie
- Wszystko o filmach na stronach www
- Animacje – czyli jak poprawić wygląd strony lub bloga

  • Autor: Justyna Fabijańczyk

    zwiekszesprzedaz.pl

    copywriterka z 10-letnim doświadczeniem, autorka bloga Cyfrowi Nomadzi oraz kursu pozyskiwania klientów Premium „Jak Zwiększyć Sprzedaż Usług w Internecie”. Prowadzi szkolenia i warsztaty dla osób pracujących zdalnie. Pracuje zdalnie podróżując po świecie.

Wasze komentarze (5)
Redakcja WhitePress zastrzega sobie prawo usuwania komentarzy obraźliwych dla innych osób, zawierających słowa wulgarne lub nie odnoszących się merytorycznie do tematu obiektu.
Administratorem danych osobowych jest WhitePress sp. z o.o. z siedzibą w Bielsku-Białej, ul. Legionów 26/28, Państwa dane osobowe przetwarzane są w celu marketingowym WhitePress sp. z o.o. oraz podmiotów zainteresowanych marketingiem własnych towarów lub usług. Cel marketingowy partnerów handlowych WhitePress sp. z o.o. obejmuje m.in. informacje handlową o konferencjach i szkoleniach związanych z treściami publikowanymi w zakładce Baza Wiedzy.

Podstawą prawną przetwarzania Państwa danych osobowych jest prawnie uzasadniony cel realizowany przez Administratora oraz jego partnerów (art. 6 ust. 1 lit. f RODO).

Użytkownikom przysługują następujące prawa: prawo żądania dostępu do swoich danych, prawo do ich sprostowania, prawo do usunięcia danych, prawo do ograniczenia przetwarzania oraz prawo do przenoszenia danych. Więcej informacji na temat przetwarzania Państwa danych osobowych, w tym przysługujących Państwu uprawnień, znajdziecie Państwo w naszej Polityce prywatności.
Czytaj całość
  • red

    Trochę ryzykowne polecać strony gdzie łamane są prawa własności intelektualnej chociażby facebooka, który zabrania w ten sposób modyfikowania swojej ikony. Tyczy się to większości ikon dla social media. Oczywiście nikt się o to nie doczepi, chociaż....

    2018-07-03, 14:48
  • Karol Zieliński

    Konkretny artykuł, fajny zbiór informacji i źródeł z dostępnymi ikonami na stronę www. Na pewno się przyda wielokrotnie. vertesdesign.pl

    2017-05-22, 23:42
  • Bartłomiej

    To prawda, żyjemy w erze obrazkowej, ludzie są leniwi i nie chcą tracić czasu na czytanie wyrazów. Dlatego na moim FB często w postach zamieszczam emotikony, które sugerują czego dotyczy tekst, oczywiście wszystko dodatkowo opatrzone obrazkiem :) budocomplex.com.pl

    2017-05-18, 11:15
  • Adam

    Bardzo dobre zestawienie ikon alptec.pl

    2017-05-04, 19:41
  • Grupa TENSE

    Świetnie, że powstają takie artykuły, dzięki którym właściciele stron/sklepów mogą czerpać inspirację i nawet jeśli tylko część osób wdroży je w życie, to jednak "internety" zyskają na jakości i estetyczności, a my będziemy mogli nacieszyć oko. Ikony są też idealnym elementem różnicującym, który znacząco przyciąga wzrok, więc z ich pomocą można skutecznie wyróżnić się na tle konkurencji - w dzisiejszych czasach więcej ludzi przykłada wagę do samego wyglądu strony, jej dopracowania, zastosowania innowacyjnych rozwiązań i jeśli klient ma dylemat z którą firmą nawiązać kontakt jako pierwszą, prawdopodobnie wybierze tę, której wizytówka spodobała mu się najbardziej.

    Osobom, które zdecydują się na wdrożenie ikon na swoich stronach, proponuję najpierw wypić kubek melisy - przebicie się przez te tysiące obrazków przyprawia o zawrót głowy, ale to jest jedna, jedyna wada :-). Mimo wszystko nie zniechęcajcie się, bo efekt końcowy naprawdę jest warty poświęcenia! grupa-tense.pl

    2017-04-28, 12:01
Administratorem danych osobowych jest WhitePress sp. z o.o. z siedzibą w Bielsku-Białej, ul. Legionów 26/28, Państwa dane osobowe przetwarzane są w celu marketingowym WhitePress sp. z o.o. oraz podmiotów zainteresowanych marketingiem własnych towarów lub usług. Cel marketingowy partnerów handlowych WhitePress sp. z o.o. obejmuje m.in. informacje handlową o konferencjach i szkoleniach związanych z treściami publikowanymi w zakładce Baza Wiedzy.

Podstawą prawną przetwarzania Państwa danych osobowych jest prawnie uzasadniony cel realizowany przez Administratora oraz jego partnerów (art. 6 ust. 1 lit. f RODO).

Użytkownikom przysługują następujące prawa: prawo żądania dostępu do swoich danych, prawo do ich sprostowania, prawo do usunięcia danych, prawo do ograniczenia przetwarzania oraz prawo do przenoszenia danych. Więcej informacji na temat przetwarzania Państwa danych osobowych, w tym przysługujących Państwu uprawnień, znajdziecie Państwo w naszej Polityce prywatności.
Czytaj całość
Polecane artykuły
Jak skutecznie zainteresować swoich czytelników
Jak pisać, by zainteresować odbiorców?

Praca copywritera nie należy do najprostszych. Z jednej strony powinien on spełnić oczekiwania swojego klienta – firmy zlecającej konkretny tekst. Z drugiej jednak strony musi mieć przede wszystkim na uwadze oczekiwania docelowego odbiorcy. Ale w jaki sposób zainteresować czytelnika tekstem typowo reklamowym?

Dziennikarz a copywriter
Dziennikarz a copywriter – czym się różnią?

Choć na pierwszy rzut oka wydawałoby się, że zawody copywritera i dziennikarza są niemal identyczne, to w rzeczywistości bardzo wiele je dzieli. Owszem, ich praca z pozoru wygląda bardzo podobnie. Przy bliższym spojrzeniu stają się jednak widoczne drobne, ale wciąż niezmiernie ważne różnice... o których więcej w artykule.