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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

У нашому розпорядженні є 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. Ви також завжди можете подивитися, як це роблять ваші конкуренти

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

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

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

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

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

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

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