Довгі чи короткі сайти, що вибрати? Іконки чи анімація
Пост опубликован: 10.10.2016
Ми живемо в епоху «довгих» сайтів. Люди звикли крутити коліщатко «мишки», ніхто не хоче відкривати купу нових вікон, всі хочуть бачити інформацію на одній сторінці. Створення сайтів Луцьк дуже часто відбувається на основі скроулінгу і не завжди розуміючи, куди це нас приведе, і тоді на допомогу приходять іконки — простий і дієвий спосіб зорієнтуватися на незнайомому сайті.
Іконки повернулися в ужиток приблизно тоді ж, коли в моду увійшов плоский дизайн. Їх плюс в тому, що вони прості, лаконічні, але при цьому дуже виразні. З їх допомогою легко привернути увагу відвідувача до якого-небудь розділу сайту або донести до нього важливу інформацію.
Перш ніж почати додавати іконки на сайт, непогано б зрозуміти, як це взагалі робиться. У веб-дизайні багато тонкощів і нюансів, іконки — не виняток, тому давайте розбиратися.
Загальна інформація
Отже, ми виходимо з того, що іконки — елемент корисний, особливо якщо розуміти, як і для чого ви їх використовуєте.
Коротка класифікація іконок
Іконки для навігації. З назви зрозуміло, що ці іконки потрібні для того, щоб людям було простіше орієнтуватися на сайті. Стрілка, наприклад, говорить сама за себе. Спрямована вгору, вона пропонує перейти в верхню частину сторінки, а вниз — в нижню. Дві стрілки, що вказують направо, використовуються для позначення посилання або для переходу на внутрішні сторінки сайту. Популярністю користуються і http://lutskmaster.com.ua з символами: іконка з візком перенаправляє людини в кошик, конверт — в розділ з контактами, а кнопки Твіттера, Фейсбук або «Вконтакте» — на сторінки в соціальних мережах.
Інформаційні іконки. Іконки — це не обов»язково посилання. З їх допомогою можна показати, які послуги ви надаєте, розповісти про ключові цінності компанії або переваги вашого продукту. До таких іконка бажано додавати невеликі опису. Наприклад: ілюстрація вантажівки, а поруч — інформація про доставку. Або скарбничка — і коротенький текст про те, як ваш продукт допомагає знизити витрати. Подумайте, що ви хочете повідомити покупцям, знайдіть відповідні ілюстрації і поясніть, про що мова.
Іконки-заклики до дії. Ними треба користуватися з обережністю, тому що люди не завжди правильно розуміють їх зміст. Жирну стрілочку в колі можна трактувати і як «Завантажити», і як «Вниз». У значка «+» теж кілька поширених значень — і «Додати в корзину», і «Дізнатися більше інформації». Якщо ви використовуєте подібні символи в якості кнопок, радимо додавати до них короткі підписи — для більшої ясності.
Основні правила використання
Тепер, коли ви знаєте, які бувають іконки, давайте поговоримо про те, як ними правильно користуватися. Ось що радять наші дизайнери:
Дотримуйтеся одного стилю. Іконки повинні вписуватися в загальну концепцію оформлення і не сперечатися з колірною схемою, інакше сайт буде виглядати недоладно і не дуже красиво.
Виберіть кілька іконок і намагайтеся користуватися тільки ними. Зайва строкатість вам зовсім ні до чого.
Якщо іконка виконує роль посилання — покажіть це. Наприклад, вона може підсвічуватися при наведенні курсору і міняти колір після того, як відвідувач на неї натиснув. Людям буде відразу зрозуміло, що елемент — клікабельним, і що вони вже переходили за цим посиланням. Щоб зробити таку кнопку, вам треба буде зайти в редактор і виконати пару нескладних дій, дотримуючись інструкції.
Анімація. Хороша ідея, особливо якщо знати міру. У міру рухливі іконки привертають увагу відвідувачів і нікого не втомлюють, але варто хоча б трохи переборщити — все пропало.
Сервіс з іконками
В інтернеті маса сайтів з безкоштовними іконками, але щоб з ними працювати, потрібно вміти користуватися графічними редакторами на кшталт Фотошопа або Індізайна. На щастя, є і більш прості сервіси, які не потребують ніяких спеціальних навичок.
Illustrio
Хороший сервіс з іконками, які можна доопрацьовувати вручну (правда з недавнього часу не безкоштовний). Крім них тут є відмінні ілюстрації, діаграми і варіанти оформлення тексту. Ми спробували, нам дуже сподобалося. Тепер ваша черга!
