Як створити набір флет-іконок (сподіваюся, повна інструкція)

В’ячеслав Шестопалов, Lead Designer у ELEKS, поділився дизайн-лайфхаками та головними принципами, які знадобляться кожному, хто займається розробкою флет-іконок.

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

1. Використовуйте оптичну сітку

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

Залежно від форми іконки, впишіть її в один із базових форматів оптичної сітки. Наприклад, квадратні іконки компактніші за трикутні або видовжені.

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

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

2. Враховуйте піксельну сітку

Щоб зробити іконку чіткою на моніторах без ретини, тримайтеся піксельної сітки і робіть лінії завтовшки 2 пікселі.

Відцентровані відносно кривої двопіксельні контури забезпечать достатню товщину і чіткий силует. Якщо ви обрали однопіксельні лінії, зробіть їх зовнішніми або внутрішніми, але не відцентрованими. Інакше іконка буде нечіткою в масштабі 1:1.

Встановіть початкову та кінцеву точки діагоналі у відповідності з піксельною сіткою. Діагоналі під кутами 45°, 30° і 60° мають чіткіший вигляд, ніж скажімо, під 13.7° або 81°.

3. Дотримуйтеся однакової деталізації

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

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

4. Контролюйте проміжки

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

Для контурних іконок проміжок має бути не меншим за товщину лінії. Самі лінії мають бути або явно розірвані, або ретельно з’єднані. Але дві лінії не повинні бути майже з’єднаними.

5. Видаляйте повторення

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

Якщо користувач уже розуміє, з чим працює, не треба повторювати це знову і знову. Наприклад, якщо не використовувати в іконках образ конверта, користувач все одно знатиме, що працює з поштовим додатком.

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

6. Оберіть стиль і дотримуйтеся його

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

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

Корисно мати два варіанти кожної іконки. Контурну — для неактивного або звичайного стану. Залиту — для натиснутого або поточного.

7. Використовуйте розміри, кратні 2

8-піксельна сітка та верстка з 12 колонками для більшості випадків більш універсальні за розміри, кратні 10. 12 ділиться на 2, 3, 4 і 6 частин. Звідси стандарт у 24 або 48 пікселів для іконок. За потреби їх можна масштабувати до більшого розміру.

8. Слідкуйте за чистотою й акуратністю силуетів

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

Те саме з надокучливими розмірами на кшталт 8.999 або 100.001 пікселя. Контури іконки будуть чіткими, якщо опорні точки розставлені точно. Також ви уникнете появи зайвих точок та проміжків, коли об’єднаєте контури на фінальній стадії дизайну кожної іконки.

9. Позбудьтесь бруду в SVG-файлах

Багато програм на зразок Sketch експортують SVG-графіку з непотрібним мотлохом: зайвими групами, кольоровими шарами і відсічними масками.

Відкрийте SVG-файл в іншому графічному редакторі (Adobe Illustrator підійде) або в редакторі коду. Ви побачите порожні шари, непотрібні групи, іноді — відсічні маски. Всі ці елементи можуть призвести до проблем, коли фронтенд-розробник конвертуватиме іконки в іконковий шрифт або використовуватиме файл на веб-сторінці.