Визуализация – лучший способ объяснить любую вещь понятно и просто. Человек воспринимает графическую информацию за доли секунды, а уже после этого читает сопроводительный текст. Поэтому очень важно правильно подбирать иконки и иллюстрации в процессе создания приложений и сайтов. Они должны быть максимально понятными и соответствующими посылу.

При верном размещении графического символа не нужны никакие пояснения – это незаменимый прием при разработке сайтов международного уровня. Даже если ты не знаешь иностранный язык и как на нем звучит слово “Корзина”, ты всегда узнаешь символ тележки из супермаркета, который неизменно сопровождает заказы в интернет-магазинах. И так во всех случаях.

Символы помогают сформировать мнение благодаря ассоциациям. Ты можешь воздействовать на посетителя сайта при помощи иконок, создавая нужный настрой. Ведь одни и те же слова можно сопровождать разными иконками, от этого изменится тон повествования.

Но другой вопрос в типичных приемах – не стоит изобретать велосипед там, где уже давно пользуются электромобилями. Как уже говорилось выше, есть символы, понятные на любых языках и на всех континентах. Пользователь ожидает их увидеть, не разочаруй его. Если вместо привычной трубки телефона возле номера будет стоять звезда – ожидай снижения количества звонков.

Современные тренды

Иконкам уделяется все больше внимания в современных дизайнах. Идет тенденция к упрощению – делай меньше текста, добавляй больше символов и обозначений, которые понятны без слов. Немудрено, что при увеличении роли иконок растут и требования к ним.

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

Нельзя игнорировать разные рынки, территориальные, отраслевые и культурные отличия пользователей. Имеет значение пользовательский опыт, восприятие и возраст целевой аудитории (про особенности приложений и сайтов для детей читай тут). В Европе принято оформлять сайты одним способом, в Азии – другим. Хотя это иногда может помочь в создании оригинального контента, если использовать фишки из совершенно других сфер в своей работе. Тренируй насмотренность, бери лучшие решения и применяй в собственных проектах.

Все в одном стиле

Когда ты делаешь новый проект, придерживайся одного стиля иконок. Бери один пак и применяй его. Чтобы не напортачить, сразу удостоверься, что этот пак соответствует твоей тематике и в нем есть специфические символы, которые могут пригодиться. Хорошо, что уже есть наборы иконок на все случаи жизни – в сети легко найти решения даже для редких направлений.

Высший пилотаж – сделать свои оригинальные иконки под проект. Иногда это необходимость, когда требуется исполнение в фирменном стиле или просто роль иконок в приложении или на сайте очень важна (когда они используются в качестве кнопок на основных продуктах и т.д.). Также не стоит исключать вариант, когда ты все-таки не сможешь найти подходящий пак под свой проект. Брать иконки из разных наборов будет ошибкой, которая может и не броситься в глаза заказчику, но точно испортит полную картину сайта и нарушит целостность дизайна. В этом случае потребуется разработка с нуля. Это не так сложно, как звучит. Подробнее – в онлайн-премьере «Создаем креативный набор иконок».

Где взять готовые иконки

Наша рекомендация – использовать специальные библиотеки, а не стандартные стоки. На профессиональных ресурсах ты найдешь паки, сделанные с учетом современных трендов и с самыми разнообразными дизайнами.

Буквально в прошлом году наблюдался бум создания новых качественных иконок на всех главных ресурсах. В конце 2020 свои шаблоны пополнили такие гиганты как Apple и Sketch.

Приятный бонус: очень много действительно классных современных паков есть в бесплатном доступе. Для поиска используй английский язык – так у тебя будет большой выбор вариантов и более корректное отображение. Вот 10 ресурсов, откуда их можно взять:

  1. Flaticon – одна из наиболее обширных библиотек бесплатных иконок, есть разные направления, тематики и стили исполнения;
  2. Ikonate — кастомизируемые векторные иконки с настройкой толщины, цвета и других параметров;
  3. Streamline symbols — 1285 бесплатных иконок для Visual Studio Code;
  4. Icons8 – тут ты найдешь не только иконки, но и другой бесплатный контент, который пригодится для создания сайтов;
  5. Hicon Pack — простой, но стильный базовый набор для дизайнеров и разработчиков;
  6. Icon Park — тут 1200+ настраиваемых иконок, разделенных на категории;
  7. The noun project – подборки по темам и стилям, а также регулярное обновление самых популярных категорий;
  8. Remix icon — больше 2 тысяч бесплатных иконок, простой наглядный поиск по ключевым словам и категориям;
  9. Iconhub — настраиваемые иконки, которые легко сортировать по разным параметрам, чтоб выбрать подходящий стиль и тип (размеры, толщина линий, варианты расцветок);
  10. Endlessicons – есть платный и бесплатный разделы, в бесплатном разделе более 300 простых базовых иконок.

Создание собственных иконок, как и применение готовых паков, требует понимания вопроса и определенных навыков. Для полноценной работы на фрилансе тебе нужно как минимум освоить Adobe Illustrator и Figma, уметь создавать профессиональные иллюстрации, знать основы композиции, работать с цветом и формой.

Где этому научиться? Записывайся на онлайн-интенсив «Векторная графика в веб-дизайне за 4 недели». В процессе обучения ты научишься создавать не только иконки и иллюстрации, но и шикарные баннеры с анимацией. А еще получишь три готовых работы в свое портфолио. Успей попасть в ближайший поток – сейчас на эту образовательную программу действует скидка!

Воспользоваться скидкой