7 принципів дизайну іконок

Як якісно «задизайнити» іконки – 7 важливих правил
Зрозумілість, розбірливість, вирівнювання, лаконічність, логічність, індивідуальність, простота використання.

Переклад матеріалу дизайнера Хелени Джан.

Cтворення якісної колекції іконок потребує розважливості, професійного погляду, невеличкої ітерації і великої практики.

Давайте на реальних прикладах розкажемо вам про основні принципи якісної розробки іконок.

1. ЗРОЗУМІЛІСТЬ

 

Основна мета іконки – швидко донести концепцію.

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

Розмістимо значки за рівнем зрозумілості:

Коли для ілюстрації використовуються незвичні метафори, це важко зрозуміти.
Наприклад, «сигнал нагадування» про ремені безпеки (третій зліва) досить точний, і ми можемо його швидко зрозуміти. А от «Сигнальна лампа електропідсилювача керма» (крайній праворуч) невизначена.

Незрозумілі іконки не просто розчаровують. Для водія неправильне розуміння попереджувальних індикаторів може бути небезпечним.

Ось кілька значків, які здаються більш знайомими: символи кохання, попередження, музики і напрямки вгору / вперед:

 

Стрілка – це функціональний символ, який можна використовувати для пошуку шляху:

Ефективні значки є універсальними та зрозумілими в різних середовищах та для різних людей, незалежно від національності, віку та освіти.

Поважайте свою аудиторію – використовуйте такі метафори і кольори, котрі близькі людям.

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

2. РОЗБІРЛИВІСТЬ

 

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

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

Трішки підправимо і ось виглядає краще:

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

Ось приклад лаконічних значків з Google Map:

3. ЦЕНТРУВАННЯ

 

Щоб переконатися, що кожен значок виглядає збалансованим, зробіть оптичне вирівнювання елементів.

У цій іконці Play трикутник метрично розташований в центрі кола, але наші очі бачать його зміщеним. Ширша частина трикутника здається «важчою» і зміщується вліво.

Ось чому дизайнери налаштовують оптичний баланс в шрифтах (зверніть увагу на зміщені від центру точки над буквами «i» та «j» і виступи у літери «о»):

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

 

Так виглядає краще. Урок: не довіряйте сліпо цифрам, а перевіряйте свою роботу «на око».

4. ЛАКОНІЧНІСТЬ

 

Чим менше слів, тим зрозуміліша суть.

Прочитайте це речення: «Навчання інших предмету, що ви знаєте, зміцнює ваше власне розуміння теми». А тепер сформулюємо коротше: «Коли один вчить, вчаться двоє». Ідеально!

Ось як компанія Material Design продемонструвала нам принцип стислості з допомогою іконок. Замість того, щоб малювати надто складний значок човна:

Краще намалюйте простий значок човна:

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

В інтерфейсі користувача редуктивний стиль допомагає роз’яснити зміст і звільнити місце для контенту. Іконки Telegram – лаконічні і приємні:

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

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

5. ЛОГІЧНІСТЬ

 

Якщо ви намалювали серію іконок, бажано, щоби вся колекція виглядала гармонічно, в одному стилі.

Доки не з’явилася версія iOS 13, на іконках Apple використовувалися всілякі штрихи, заливки і розміри:

Подивіться на цей набір. Хіба не здається, що деякі значки виглядають «важче» інших? Будь-яка іконка має візуальну вагу, яка визначається такими параметрами: заливка, товщина обведення, розмір і форма. Дотримуйтеся однакових параметрів, тоді набір іконок буде в єдиному стилі.

Погляньте на інший набір іконок від Apple – SF Symbols. Ці іконки виконані в дев’яти вагах і трьох масштабах (можливо, трохи складно, але ретельно). Виглядає гармонійніше.

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

6. ІНДИВІДУАЛЬНІСТЬ

 

Кожен набір іконок особливий. Що робить його унікальним? Що це говорить про бренд? Який настрій це створює?

В інтерфейсі Waze використовується багато іконографії. Ці яскраві іконки ніби кажуть: «Ми дивакуваті!».

А тепер звернемо увагу на значки в Twitter – спокійні кольори, легкі і чіткі лінії:

Іконки Sketch дуже вишукані і невагомі:

Freemojis милі та симпатичні:

7. ПРОСТОТА ВИКОРИСТАННЯ

 

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

Якісний процес дизайну іконок – організований, детально задокументований і протестований. Добре, якщо є спеціальні інструменти, наприклад, менеджер іконок.

Організація

Тримайте базовий файл в «чистоті», коректно називайте об’єкти і розміщуйте так, щоб їх було легко знайти. Подумайте, як вам буде зручніше класифікувати файли – за алфавітом, по розміру, по типу?

Створення документів

Сформулюйте основні принципи для набору іконок. Наприклад:

☑ Зрозумілість. Перш за все – чіткість. Значки мають легко розпізнаватися.

☑ Стислість. Використовуйте якомога менше деталей. Дотримуйтесь принципів мінімалізму і враховуйте кожен штрих, щоб передати суть.

☑ Образ. Будьте оригінальними. Декілька унікальних деталей здатні оживити занадто строгі іконки.

Сформулюйте технічні вимоги. Наприклад:

  • Полотно 48×48 px.
  • Обведення по центру 1,5 px.
  • Заокруглені кінці.
  • Суцільні лінії, крім випадків, коли розбиті сегменти необхідні для розуміння.
  • Прямі сегменти, ідеальні вигини і збільшення кута на 15° там, де це можливо.
  • При необхідності відрегулюйте криві, щоб дотримуватися принципів дизайну.
  • Для нарощування використовуйте цілі числа, зменшіть до 1 px і 0,5 px при необхідності.
  • Дотримуйтеся контурів: 28×28 px – коло, 25×25 px – квадрат, 28×22 px – альбомна орієнтація, 22x28px – портретна орієнтація.
  • Зберігайте область обрізки товщиною 6 px.

        Тестування:

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

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

Уявіть, що набір іконок – це жива істота. Для успішного розвитку потрібно трішки любові, знань та інструментів.

ДАВАЙТЕ ТВОРИТИ РАЗОМ!

Приходьте на кухню, поговоримо
по ділу!

Плануєте створити власний бренд, масштабувати бізнес, запускати нові проекти, вдосконалити маркетингові комунікації?

Тааакс, а хтось забув вказати свої контакти) Ми просимо не багато, лише Телефон або Email

Нас не провести, ми знаємо, що телефон повинен містити як мінімум 10 цифр

Ой вей, це де Ви бачили такий Email?)

Ми вже отримали Вашого листа і дуже, дуже скоро з Вами зв'яжемося)

Ooops, Невдача спіткала(