Іконки на сайтах – що вони роблять та як вибрати правильні?

Погодьтеся, що такий пульт дистанційного керування виглядав би дивним. Більше того, деякі з його функцій було б дуже складно описати словесно, щоб етикетка не займала надто багато місця.

Так само ми не змогли б уявити собі веб-браузер, в якому, наприклад, кнопки навігації ("Назад", "Далі"), кнопки оновлення або кнопки, що керують поведінкою вікна, були б замінені виключно текстом.

Я хочу сказати, що ікони "захопили" наше життя, і ми не можемо ефективно функціонувати без них.

Іконки на веб-сайтах, соціальних мережах, у всіх додатках для смартфонів, так - навіть на друкованої продукції (візитні картки, брошури). Вони буквально всюди.

Чому ми так прагнемо використовувати ікони? Які переваги їх використання? Як вміло підібрати набір та стиль іконок для власного сайту? Відповіді на ці запитання ви знайдете далі у цьому тексті.

Іконки на веб-сайтах - переваги їх використання

Вони вносять різноманітність у зміст

Нашим очам подобається, коли вони стикаються з різноманітним змістом. Дрібніший або більший текст, зображення, поділ контенту на абзаци - все це дозволяє нам не занудьгувати під час перегляду конкретного сайту.

Ікони, оскільки вони є відмінними від тексту елементами, є частиною цього різноманіття. При вмілому використанні вони роблять позитивний внесок у привабливість веб-сайту.

Вони привертають увагу, виділяючись на тлі тексту.

Іконки на веб-сайтах є різнокольоровими фігурами. Зазвичай вони супроводжуються текстом чи великими, рівномірно забарвленими областями.

Це робить їх привабливими, оскільки вони виділяються на тлі інших елементів.

Цей аспект можна успішно використовувати на веб-сайтах, спрямовуючи погляд користувачів у потрібні місця.

Незважаючи на свій невеликий розмір, вони висловлюють багато

Деякі солодощі "виражають більше, ніж тисяча слів". Цей рекламний слоган з таким самим успіхом можна використовувати для опису ролі ікон.

Зрештою, іконка – це піктограма. З іншого боку, піктограма - це спосіб уявлення будь-якого предмета чи поняття з допомогою графіки - отже слова не використовуються.

Піктографічний лист руйнує мовні бар'єри. На багатомовних веб-сайтах, незважаючи на переключення між мовами, іконки зазвичай залишаються незмінними - незалежно від того, якою мовою вони відображаються в даний момент. Їх розуміють усі.

Простота реалізації та стилю

Іконки на веб-сайтах дуже легко вплести в контент. Більше того, ви можете зробити це у різний спосіб.

У нашому розпорядженні є HTML-сутності та коди. Використання їх безпосередньо в коді сторінки призводить до відображення піктограм: ✓ ☎ ★

Також можна використовувати так звані шрифти іконок, тобто готові набори іконок у вигляді шрифтів. Серед найбільш популярних – Font Awesome, IcoMoon або Ionicons.

Завжди можна використовувати іконки як зображення - у форматах GIF, PNG або векторному SVG.

Як вміло вибирати іконки для сайтів?

1. Почніть із розгляду можливостей

Раніше я вже згадував, що існує кілька способів використання іконок.

Я рекомендую звернутися до іконкових шрифтів, таких як Ionicons. Установка дуже проста - вам потрібно зробити це лише один раз, щоб насолоджуватися набором іконок на всьому вашому сайті.

Пам'ятайте, що використання великої кількості таких шрифтів негативно позначається на швидкості роботи вашого сайту, тому краще покладатися лише на один набір, в якому є всі необхідні вам іконки.

Потім просто використовуйте CSS, щоб надати іконкам потрібний розмір та кольори.

2. Вибирайте значки так, щоб користувачі могли їх зрозуміти

У нашому блозі ми майже безперервно говоримо про те, що сайт повинен в першу чергу служити своїм користувачам.

Використовуючи іконки на своєму сайті, переконайтеся, що вони зрозумілі вашим відвідувачам.

Так, іноді приємно використовувати щось інноваційне і відмінне від інших, але все ж таки слід пам'ятати про аудиторію вашого контенту.

Тому використовуйте символи, які зрозумілі всім із самого початку.

3. Встановіть єдиний стиль

Також важливо, щоб іконки на цьому сайті належали до однієї "родини". Це робиться для того, щоб стиль був єдиним та послідовним.

Давайте ще раз подивимося на Ionicons. Цей тип значок має два набори всередині. Перший створений на зразок iOS, а другий містить іконки, схожі на ті, що використовуються в Material Design.

Це дозволить вам зробити ставку на той стиль, який більше підходить вашому сайту.

Найголовніше - дотримуватися послідовності. Ваш сайт від цього тільки виграє, тому що вся графічна концепція стає послідовною та гармонійною. Навіть один випадковий персонаж може " вкусити" і викликати відчуття, що тут щось не так.

4. Намагайтеся використовувати вектори

Іконки на веб-сайтах все частіше використовуються у вигляді векторів (формат SVG), а не растрової графіки.

Перевага векторів у тому, що вони масштабуються відповідно до простору, який вони мають займати. Іншими словами, вони добре виглядають як на великих екранах, так і на невеликих пристроях, таких як смартфони та планшети. Маніпулюючи їх розміром, вони не втрачають фокус і чіткість.

Детальніше про це ви можете дізнатися з нашого тексту про SEO-оптимізацію зображень.

5. Вміло поєднуйте кольори піктограм

Ця порада є однією з найбільш очевидних, але її не можна забувати.

Переконайтеся, що кольори іконок гармонійно поєднуються з іншими елементами на вашому сайті.

Знову ж таки, вся справа в послідовності всього дизайну. Якщо кольори іконок правильно підібрані, весь сайт буде просто красивіше.

6. Якщо контекст не зрозумілий, використовуйте ярлики

Деякі ікони очевидні для нас.Вони ілюструють, наприклад літак, будинок, екран комп'ютера. Вони відтворюють форми, знайомі нам із дитинства.

Інші, такі як так званий гамбургер (три рисочки, що ілюструють мобільне меню), оновити (обведена стрілка), закрити (хрестик) або трикутник, спрямований вправо ("play"), не представляють реальних об'єктів. Вони просто умовні - їхнє значення мало бути засвоєно в якийсь момент нашого життя.

Я говорю про це, щоб звернути вашу увагу на контекст. Це слово надзвичайно важливе, коли йдеться про ікони.

Буває, що ікони можуть функціонувати самі собою. Переважна більшість користувачів можуть розпізнати, що вони представляють лише за їх формою. Якщо дія асоціюється з іконкою при натисканні або торканні, ми розуміємо інтуїтивно, з якою функцією маємо справу. Проте це має сенс, коли контекст очевидний нам. У багатьох випадках це негаразд.

Зображення вище взяте з тексту, який я опублікував у нашому блозі у 2015 році (зручний сайт). Як бачите, цей звичай, пов'язаний з UX (користувацький досвід), актуальний і сьогодні.

Етикетка додає контекст і найбільше просто пояснює нам, для чого це дія.

7. Ви також завжди можете подивитися, як це роблять ваші конкуренти

Іконки на сайтах використовуються настільки широко, що сайти ваших найбільших конкурентів майже напевно сповнені ними.

Хорошою практикою є вивчення того, як інші вирішують ті чи інші питання.

Подивіться на сайти ваших конкурентів. Можливо, ви знайдете там натхнення, яке зможете використовувати у разі зміни стилю власного сайту.

Я також рекомендую, до речі, один із наших текстів про те, чого ви можете навчитися у своїх конкурентів.

Чому іконки на веб-сайтах такі важливі?

Насамперед тому, що вони вносять різноманітність у вигляд веб-сайтів і передають у короткій формі те, що інакше довелося б пояснювати довго.

Є причина, через яку перша писемність, яка була створена, була піктографічною. Завдяки своїй універсальності та відтворенню реальних об'єктів, він швидко викликав резонанс.

Саме тому він використовується і сьогодні. Не лише в Інтернеті, а й – як я вже згадував у вступі до цього тексту – в інших сферах нашого повсякденного, реального життя.