Блог Тильды

Иконки в веб-дизайне

Что общего у бирок на одежде и веб-дизайна?

И на ярлычках одежды, и при создании сайтов используют небольшие изображения или иначе — иконки. Это графические элементы с узнаваемыми образами, которые привлекают внимание, упрощают навигацию и помогают структурировать информацию на сайте.

Найти иконку для своего проекта можно в библиотеке Tilda Icons: https://tilda.cc/ru/free-icons

Использование иконок на сайте

Иконки в дизайне выполняют разные задачи в зависимости от положения на сайте, например:

Привлекают внимание

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

Визуализируют информацию

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

Упрощают навигацию

Навигационные иконки помогают пользователю перемещаться по сайту. Например, стрелка показывает переход между страницами.

Типы иконок

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

Форматы иконок

Использовать иконки можно как в векторном формате — SVG, так и в растровом — PNG или JPG.

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

Если вы хотите использовать растровые иконки, убедитесь, что они имеют достаточное разрешение и не потеряют качество при масштабировании.

Поиск иконок для вашего сайта

При работе с базовыми блоками иконки можно найти в Контенте блока. Ищите иконки по категориям, через поиск или найдите подходящую, проскроллив библиотеку.

Также на Тильде есть коллекция бесплатных иконок в библиотеке Tilda Icons. Здесь более 700 вариантов в SVG формате, разделённых по тематикам: магазин, конференции, недвижимость и другие. Единственное условие использования — указание авторства Tilda Publishing и активная ссылка на https://tilda.cc
Made on
Tilda