Baza wiedzy » Blog » Content Marketing

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

Zaktualizowano: 2017-04-27  
(6 min czytania)
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.

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
- 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

Prowadzi agencje content marketingową ODISEO. Autorka książki „Pozyskaj klientów premium”, programu „Jak zwiększyć sprzedaż usług w internecie” i „LinkedIn w praktyce. Strategia pozyskiwania klientów”.
Wasze komentarze (5)
Redakcja WhitePress® zastrzega sobie prawo usuwania komentarzy niezgodnych z Regulaminem publikowania komentarzy oraz niezgodnych z prawem i dobrymi obyczajami.

Administratorem danych osobowych osób korzystających ze strony internetowej whitepress.com i wszystkich jej podstron (dalej: Serwis) w rozumieniu Rozporządzenia Parlamentu Europejskiego i Rady (UE) 2016/679 z dnia 27 kwietnia 2016 r. w sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (dalej: RODO) jest wspólnie „WhitePress” Spółka z ograniczoną odpowiedzialnością z siedzibą w Bielsku – Białej przy ul. Legionów 26/28, wpisana do rejestru przedsiębiorców KRS prowadzonego przez Sąd Rejonowy w Bielsku – Białej, VIII Wydział Gospodarczy Krajowego Rejestru Sądowego pod numerem KRS: 0000651339, NIP: 9372667797, REGON: 243400145 oraz pozostałe spółki z Grupy WhitePress (dalej łącznie: Administrator).

Dokonując zapisu na newsletter wyrażacie Państwo zgodę na przesyłanie informacji handlowych za pomocą środków komunikacji elektronicznej, w tym w szczególności poczty elektronicznej, dotyczących marketingu bezpośredniego usług i towarów oferowanych przez WhitePress sp. z o.o. oraz jej zaufanych partnerów handlowych, zainteresowanych marketingiem własnych towarów lub usług. Podstawą prawną przetwarzania Państwa danych osobowych uzasadniony interes Administratora oraz jego partnerów (art. 6 ust. 1 lit. f RODO).

W każdym momencie przysługuje Państwu możliwość wycofania zgody na przetwarzanie Państwa danych osobowych w celach marketingowych. Więcej informacji na temat przetwarzania oraz podstaw 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
2018-07-03, 14:48

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ż....
Zgłoś komentarz

Karol Zieliński
2017-05-22, 23:42

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

vertesdesign.pl

Zgłoś komentarz

Bartłomiej
2017-05-18, 11:15

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

Zgłoś komentarz

Adam
2017-05-04, 19:41

Bardzo dobre zestawienie ikon

alptec.pl

Zgłoś komentarz

Grupa TENSE
2017-04-28, 12:01

Ś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

Zgłoś komentarz

Polecane artykuły