Как иконки могут быть использованы в дизайне веб-сайта
Стратегические и технические методы добавления иконок в веб-дизайн
Иконки играют важную роль в современном дизайне веб-сайтов. На самом деле, трудно найти сайт, который бы не использовал иконки в той или иной форме, даже если это просто иконки социальных сетей в нижнем колонтитуле. Иконки могут служить различным целям на вашем сайте, в том числе:
Замена текстового контента
Наиболее распространенное использование иконок в веб-дизайне — замена текстового контента. Часто это делается для кнопок или ссылок определенного вида. Вышеупомянутый значок социальных сетей является примером такой практики. Вместо текста, который гласит что-то вроде "Посетите нашу страницу в Facebook", используется иконка с логотипом Facebook. Эту замену текста можно также выполнить в меню навигации. Использование иконок вместо кнопок с длинным текстом — распространенный дизайнерский прием, особенно в дизайне приложений и отзывчивых веб-сайтов.
При использовании иконок вместо текста необходимо помнить о четкости и не переусердствовать. Использование иконок вместо текста может быть чрезвычайно полезным при создании более чистого общего дизайна и упрощенного пользовательского интерфейса, но если смысл, заложенный в иконках, неясен или вы переборщите с их использованием, все преимущества, которые вы надеялись реализовать, будут быстро сведены на нет.
Экономия пространства
Заменяя текстовое содержимое иконками, вы неизбежно сэкономите место в дизайне. Это очень привлекательный вариант для небольших экранных версий отзывчивых веб-сайтов. Когда на маленьких экранах не хватает места, использование маленьких иконок для пунктов меню или иллюстрации других действий — один из способов максимально использовать имеющееся пространство.
Общайтесь, несмотря на языковые различия
В физическом мире мы постоянно видим иконки. От дорожных знаков до табличек, используемых в туалетах, иконки могут разрушать языковые барьеры и передавать смысл, несмотря на различия в языке. Это же преимущество можно применить и к цифровым интерфейсам, но опять же, вы должны убедиться, что ваши значки понятны и их смысл очевиден. Не все аналогии подходят для каждого языка, поэтому следует внимательно выбирать иконки, особенно если они обозначают ключевые действия на сайте.
Подчеркните текст
В некоторых случаях иконки используются не для замены текста, а для того, чтобы добавить смысл к тексту сайта. Это может быть особенно полезно при иллюстрации многоэтапного процесса или для выделения определенных функций или возможностей. Простой пример этого можно увидеть здесь на About.com. На главной странице этого сегмента веб-дизайна вы увидите большое изображение, которое используется для тематической статьи. Внизу этой картинки вы найдете слово "Поделиться" вместе с иконкой стрелки. Эта кнопка позволяет поделиться статьей в социальных сетях, и функциональность представлена как в виде текстового ярлыка, так и в виде сопровождающей иконки. В другом месте на этой странице вы увидите иконку, используемую самостоятельно, что является примером "замены текстового содержимого" пункт, рассмотренный ранее в этой статье.
Добавьте немного веселья
Еще один способ использования иконок — добавить немного веселья в дизайн сайта. Иллюстрированные элементы могут придать интерфейсу ощущение причудливости, в зависимости от того, как они используются. Конечно, не каждый дизайн позволяет "развлекаться" но вы удивитесь, когда увидите, где можно использовать чувство веселья и восторга — а преимущества такого подхода весьма значительны. В конце концов, восхитительный опыт часто является запоминающимся, а создание запоминающегося опыта — это то, к чему стремятся все веб-сайты.
Как добавить иконки
Существует несколько способов добавления иконок на ваш сайт. К ним относятся:
- Встроенные изображения — файлы изображений, включая JPG, GIF и PNG, могут быть добавлены непосредственно в HTML-код вашего сайта.
- CSS — вы также можете использовать фоновые изображения CSS для добавления иконок к элементам HTML, таким как ссылки. Вы даже можете использовать технику замены изображений CSS, чтобы "стереть" их HTML-текст и оставить только иконку на месте. Вы также можете использовать спрайты изображений, чтобы собрать все иконки, необходимые для вашего дизайна, в один файл, тем самым уменьшая количество HTTP-запросов, которые должен сделать ваш сайт, чтобы загрузить эти иконки.
- SVG — масштабируемая векторная графика также может быть добавлена в качестве встроенных изображений, и SVG имеет преимущество масштабируемости для различных устройств и размеров экрана. Иконки отлично подходят для выполнения в виде SVG-файлов, и размер файлов этих изображений часто очень мал, что помогает улучшить общую производительность сайта.
- Иконные шрифты — в некоторых случаях шрифтовые файлы, состоящие из иконок, также могут быть использованы на сайте. Как и другие файлы шрифтов, эти символы будут масштабироваться для различных размеров, но требовать от посетителей загрузки целого файла шрифта только для одного или двух глифов иконок часто является ненужной просьбой. Если вам нужно использовать несколько иконок в шрифте, они являются возможным вариантом, но в противном случае SVG-файл или другое изображение, вероятно, будет лучшим выбором