Всі ми знаємо такі прості речі, як те, що іконки у дизайні пов | Дизайнаріум

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

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

Про що ж ми забуваємо?
1. По-перше - це композиційний центр.
Одна із поширених помилок - це вирівнювати іконки налаштуванням Align по центру. Кожна іконка - це унікальний графічний елемент із своєю композицією та розмірами. Деякі іконки можуть мати форму вузького прямокутника, деякі заповнювати весь квадрат. І вирівнюючи їх рівно по центру (вираховуючи міліметри) - втрачається відчуття центру і візуально ці іконки будуть відчуватись різними та не на своїх місцях.

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

2. По-друге - це правило лише для вебдизайну - кожна іконка повинна бути у власному фреймі (контейнері).
Що це означає? вирівнювання "на око" - спрацює не всюди. Якщо макет буде друкуватись - нікому не важливо як у вас стоять іконки, головне щоб було красиво. У вебдизайні така річ вже не допоможе. Оскільки усі відступи (між іконками, навколо і т.д.) - прописуються кодом, нам потрібно щоб усі відступи були чіткі та однакові.

Саме в такому випадку нам допомагає фрейм. Для усіх іконок фрейм повинен бути однакового розміру (наприклад 30x30 px), із прозорим фоном та без ефектів/обводок. А всередині цього фрейму буде наша іконка, яка вже може бути вирівняна як завгодно відносно візуального центру.

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