Як правильно вибрати іконки, веб-дизайн
У веб-дизайні підбір іконок це стандартна задача, але далеко не така проста, як може здатися на перший погляд.
Як і все інше, що стосується вашого сайту, це вимагає продуманого підходу. Незважаючи на те, що прикраса вашого сайту декоративними іконками додасть йому унікальний вид, це не завжди наймудріший з можливих варіантів.
У даній статті ми дамо деякі рекомендації, які варто тримати в голові при підборі іконок, а також розглянемо короткий список моїх особистих фаворитів.
Універсальний символізм і фігури
Наприклад, в програмі Mondrian.io для позначення інструмента «Текст» часто використовується значок друкарської машинки.
В першу чергу, ваші іконки повинні бути легко і швидко впізнати. Не робіть їх занадто мудрі.
Часом, зустрівся барвистий набір іконок може вас зачарувати, але коли ви почнете інтегрувати його в дизайн сайту, то може з'ясуватися, що він не вписується в задуману концепцію.
А іноді, вам може захотітися бути дуже оригінальним у виборі іконок. «А чому б не поставити значок ракети для кнопки відправки повідомлення? »- міркуєте ви.
Основне правило. якщо у вас є сумнів в правильності вибору, значить ви з великою часткою ймовірності взяли невірне рішення.
Mondrian.io - це векторне додаток для інтернет-браузера з відкритим вихідним кодом, яке виглядає дуже багатообіцяюче, і, в той же час, воно прекрасно ілюструє дилему вибору відповідного набору іконок.
Поточна (на момент написання статті) версія Mondrian використовує іконку друкарської машинки для інструменту «Текст» (дивіться картинку вище).
На перший погляд, такий вибір може здатися цілком резонним. Зрештою, друкарська машинка є реальним друкованим інструментом, вірно?
Однак запитайте себе:
- Як багато ви знаєте людей, у яких є друкарська машинка?
- Чи зможе школяр середніх класів легко зрозуміти призначення іконки?
- Де ще, крім кіно, ви останній раз бачили справжню друкарську машинку?
Друкарська машинка, як символ листи, технологічних досягнень і сучасних офісів, втратила своє значення 30 років тому.
Іконки текстових інструментів в програмних продуктах: Fireworks. MacPaint. Freehand і Photoshop.
Ще з початку 80-х років минулого століття склалася традиція зображати значки текстових інструментів у вигляді великої літери «T» або «A». Будь-яка людина, від секретаря, що використовує MS Word. до архітектора, який працює в Autocad і з серйозними 3D-пакетами, легко зрозуміє сенс цього символу.
Запам'ятайте. якщо у вас є можливість використовувати перевірений часом спосіб, щось не будьте занадто гордими - використовуйте його.
Як і погане поєднання кольорів, невдалий підбір іконок може вбити ваш сайт. Зауважте, що деякі іконки можуть мати різне значення в різних контекстах.
Якщо ви не впевнені у своєму виборі, не бійтеся його випробувати: розпитати своїх друзів і родину, що вони про це думають.
Якщо ви не отримуєте бажаного результату, то повісьте на сайті текстову підказку, що повідомляє призначення інструменту.
Пам'ятайте, що єдиним призначенням іконки служить передача призначення через образ.
Вибір розміру і розташування
Розмір іконок в вашому проекті має дуже важливе значення. Зазвичай в веб-дизайні створюють візуальну ієрархію значків - від найбільшого до найменшого - для збільшення зручності сприйняття.
Для таких елементів як логотипи і заголовки, це допомагає створити баланс і гармонію. Однак важливо дотримуватися відповідність розмірів, щоб ваша сторінка не виглядала неакуратно.
Загальне співвідношення розмірів також дуже сильно впливає на сприйняття дизайну. Занадто великі іконки будуть захаращувати сторінку і заважати нормальному читання тексту, в той час як занадто маленькі значки складно розрізнити.
Для зручності кінцевого користувача потрібно буде підібрати золоту середину.
В кінцевому підсумку, це допоможе вам бути впевненим в тому, що погляд відвідувача безперешкодно переміщується по вмісту.
Вибір відповідних розмірів захистить очі від зайвої напруги, а також підвищить швидкість і повноту сприйняття матеріалу і всіх елементів сторінки відвідувачем.
Колір і узгодженість
Як дизайнери, ми добре обізнані, наскільки важливим є підбір кольорів.
Колір, як правило, використовується для викликання певних емоцій. Те ж саме стосується і до іконок. Якщо ваші значки повинні закликати до дії переконайтеся, що їх кольору підібрані відповідним чином.
Також, майте на увазі, що іконки служать іншої мети, ніж зображення або діаграми - вони є «візуальної рукою допомоги» і служать для полегшення взаємодії, а не допоміжними картинками або декоративними елементами.
Це означає, що пріоритетом для вас є не детальність і не кольору.
Серйозне питання полягає в тому, як багато квітів вам потрібно, щоб досягти поставлених цілей, і чи потрібні вам кольору взагалі. Хороший значок це за своєю суттю візуальне примітка, а не картина маслом.
Пропоную вам ознайомитися з прикладами того, як грамотно підбирати іконки. Нижче представлена десятка моїх особистих фаворитів, які до того ж безкоштовні і знаходяться у вільному доступі для скачування і використання.
50 Glyph Icons
Metro UI Icon Set
Flat Red Icon
108 Mono Icons
Vectory Mini
Mono Social Icons Font
Rectangular Icons
60 SEO Services Icons
Переклад статті «How to Choose the Right Icons» був підготовлений дружною командою проекту Сайтобудування від А до Я.