Набор иконок для сайта или приложения: как спланировать и заказать

2 минуты чтения

Иконки — это маленькие картинки, которые подсказывают, куда нажать: главная, корзина, доставка, поддержка, профиль. Когда они взяты из разных бесплатных наборов, сайт выглядит лоскутным: толстые линии рядом с тонкими, скруглённые углы рядом с острыми. Единый набор это исправляет, и даже простой сайт начинает выглядеть законченным. Вот как его спланировать.

Единый набор иконок для сайта или приложения

Сначала составьте список

Пройдитесь по сайту или приложению и запишите все места, где пригодится иконка:

  • Главное меню: главная, каталог, поиск, корзина, личный кабинет.
  • Возможности и преимущества: быстрая доставка, безопасная оплата, возврат, поддержка.
  • Контакты и действия: телефон, почта, адрес, поделиться, скачать.

Опишите каждую иконку в нескольких словах, например «доставка: небольшой фургон» или «возврат: коробка со стрелкой». Чем понятнее список, тем меньше правок потом.

Сколько иконок нужно

  • Около 4: лендинг с тремя-четырьмя преимуществами или короткая презентация.
  • Около 8: основные разделы и возможности небольшого сайта.
  • Около 16: полный набор для приложения или большого сайта с множеством разделов.

Обычно лучше заказать чуть больше, чем нужно сегодня. Иконки, нарисованные позже отдельным заказом, сложнее точно подогнать к остальным.

Выберите один стиль

Выберите один стиль и держитесь его во всём наборе:

  • Контурный: тонкие линии, легко и современно, хорошо для чистых интерфейсов.
  • Залитый: сплошные формы, хорошо читаются даже в очень маленьком размере.
  • Двухтоновый: два оттенка одного цвета, чуть больше характера.
  • 3D: мягкий объём и тени, хорошо для ярких лендингов.

Если у вас уже есть несколько иконок, которые нравятся, дайте на них ссылку, чтобы новые были в том же духе.

Цвета

Используйте фирменные цвета и укажите их HEX-кодами, например #1A73E8, если они у вас есть. Обычно хватает одного основного цвета и одного акцентного. Если фирменных цветов пока нет, нейтральная палитра подойдёт к любому фону.

Всё решает маленький размер

Иконка в меню часто шириной всего 24 пикселя. В таком размере детали пропадают, поэтому выигрывают простые формы:

  • Одна идея на иконку. Фургон для доставки, а не фургон с дорогой, часами и коробкой.
  • Никакого текста внутри. В маленькой иконке слова не прочитать.
  • Знакомые символы. Лупу для поиска и тележку для покупок понимают везде.

Что вы получаете и как это использовать

Обычно набор приходит отдельными PNG-файлами на прозрачном фоне, чтобы каждую иконку можно было поставить на любой цвет. PNG — растровый формат: он подходит для сайтов, приложений и слайдов, но это не векторный файл, который можно увеличивать без ограничений. Если нужен фавикон, бесплатный онлайн-конвертер за минуту превратит PNG в файл ICO.

Коротко

Понятный список, нужное количество иконок, один стиль и фирменные цвета: так набор смотрится единым на любом экране. Если хотите, чтобы набор нарисовали за вас, закажите набор иконок: вы отправляете список иконок, стиль и свои цвета, а получаете 4, 8 или 16 иконок в одном стиле отдельными PNG-файлами на прозрачном фоне. Оплата переходит сервису только после того, как вы примете работу.