Как и зачем использовать иконки в веб-дизайне
Мы живем в эпоху «длинных» сайтов. Люди привыкли крутить колесико «мышки», никто не хочет открывать кучу новых окон, все хотят видеть информацию на одной странице. Мы скроллим, не всегда понимая, куда это нас приведет, и тогда на помощь приходят иконки — простой и действенный способ сориентироваться на незнакомом сайте.
Иконки вернулись в обиход примерно тогда же, когда в моду вошел плоский дизайн.Их плюс в том, что они простые, лаконичные, но при этом очень выразительные. С их помощью легко привлечь внимание посетителя к какому-либо разделу сайта или донести до него важную информацию.
Прежде чем начать добавлять иконки на сайт, неплохо бы понять, как это вообще делается. В веб-дизайне много тонкостей и нюансов, иконки — не исключение, поэтому давайте разбираться.
Общая информация
Итак, мы исходим из того, что иконки — элемент полезный, особенно если понимать, как и для чего вы их используете.
Краткая классификация иконок
Иконки для навигации. Из названия понятно, что эти иконки нужны для того, чтобы людям было проще ориентироваться на сайте. Стрелка, например, говорит сама за себя. Направленная вверх, она предлагает перейти в верхнюю часть страницы, а вниз — в нижнюю. Две стрелки, указывающие направо, используются для обозначения ссылки или для перехода на внутренние страницы сайта. Популярностью пользуются и другие символы: иконка с тележкой перенаправляет человека в корзину, конверт — в раздел с контактами, а кнопки Твиттера, Фейсбука или «Вконтакте» — на страницы в социальных сетях.
Информационные иконки. Иконки — это не обязательно ссылки. С их помощью можно показать, какие услуги вы оказываете, рассказать про ключевые ценности компании или преимущества вашего продукта. К таким иконкам желательно добавлять небольшие описания. Например: иллюстрация грузовика, а рядом — информация о доставке. Или копилка — и коротенький текст о том, как ваш продукт помогает снизить расходы. Подумайте, что вы хотите сообщить покупателям, найдите подходящие иллюстрации и объясните, о чем речь.
Иконки-призывы к действию. Ими надо пользоваться с осторожностью, потому что люди не всегда правильно понимают их смысл. Жирную стрелочку в круге можно трактовать и как «Скачать», и как «Вниз». У значка «+» тоже несколько распространенных значений — и «Добавить в корзину», и «Узнать больше информации». Если вы используете подобные символы в качестве кнопок, советуем добавлять к ним короткие подписи — для большей ясности.
Основные правила использования
Теперь, когда вы знаете, какие бывают иконки, давайте поговорим о том, как ими правильно пользоваться. Вот что советуют наши дизайнеры:
Придерживайтесь одного стиля. Иконки должны вписываться в общую концепцию оформления и не спорить с цветовой схемой, иначе сайт будет выглядеть аляповато и не очень красиво.
Выберите несколько иконок и старайтесь пользоваться только ими. Излишняя пестрота вам совсем ни к чему.
Если иконка выполняет роль ссылки — покажите это. Например, она может подсвечиваться при наведении курсора и менять цвет после того, как посетитель на нее нажал. Людям будет сразу понятно, что элемент — кликабельный, и что они уже переходили по этой ссылке. Чтобы сделать такую кнопку, вам надо будет зайти в редактор Wix и выполнить пару несложных действий, следуя инструкции.
Анимация. Хорошая идея, особенно если знать меру. В меру подвижные иконки привлекают внимание посетителей и никого не утомляют, но стоит хотя бы чуть-чуть переборщить — все пропало.
Cервисы с иконками
В интернете масса сайтов с бесплатными иконками, но чтобы с ними работать, нужно уметь пользоваться графическими редакторами вроде Фотошопа или Индизайна. К счастью, есть и более простые сервисы, не требующие никаких специальных навыков.
Наш редактор — бесплатный кладезь полезных элементов, в том числе и хороших иконок. Можете добавлять их на сайт прямо в исходном виде, а можете дорабатывать на свое усмотрение: обрезать, менять форму или цвет, накладывать визуальные эффекты и т.д.
Хороший сервис с иконками, которые можно дорабатывать вручную (правда с недавнего времени не бесплатный). Кроме них здесь есть отличные иллюстрации, диаграммы и варианты оформления текста. Мы попробовали, нам очень понравилось. Теперь ваша очередь!
Нужно создать сайт? Сделайте его на Wix — это просто и бесплатно!
Автор Команда Wix
