Создание сайтов. Откуда брать иконки для сайта .

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

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

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

   • Структурировать и оживлять текст. Пиктограммы могут применяться как микроиллюстрации к отдельным пассажам (в частности, символ замка уместен рядом с фрагментом, в котором говорится о безопасности продукта) или как разделители абзацев. В таких случаях допустимы сложные метафоры: например, на сайте хостинг-провайдера RackSpace услуги хостинги визуализированы очень изящными иконками (рис. 30).

 

   Применимы иконки и в маркированных списках: порой куда удачнее вместо стандартного буллета использовать зеленую галочку, например, когда перечисляются обстоятельства, при стечении которых следует выбрать описываемый продукт. Знаем, звучит глуповато, но это так: людям приятно видеть такой «заполненный чеклист», они невольно считывают его как отчет о выполненной за них работе.

   • Обозначать действие. Если б ы любая активность в веб-интерфейсах осуществлялась по нажатии на кнопки с пояснительными надписями, то сайты выглядели бы безобразными скопищами разноразмерных прямоугольников. В сервисе микроблогов Twitter пиктограмма с листом бумаги и гусиным пером архаична, зато недвусмысленно предлагает написать новый твит, а шестеренка явно приглашает заглянуть в «Настройки».

   • Призывать к действию. Необязательно, чтобы иконка апеллировала к действию, которое выполняется на сайте. Зеленый значок трубки рядом с номером телефона на сайте онлайн-сервиса «МоеДело» прекрасно справляется со своей задачей: «Бери и звони, мы готовы ответить».

 

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

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

   Рассказать о том, что такое «хорошие иконки», ничуть не проще, чем растолковать принципы «хорошего веб-дизайна». Но главные критерии мы обрисуем.

   • Выдерживайте единство стиля. Во-первых, недопустимо, чтобы иконки смотрелись чужеродно в дизайне сайта. Во-вторых, в самом наборе иконок должна прослеживаться общая линия. Хуже всего, когда в него было понадергано с миру по нитке. Отталкивайтесь от специфики своего веб-проекта. Какому-нибудь модному вебзину [19 - Вебзин (от англ. web magazine) – онлайн-журнал.] подойдут ностальгические «псевдовосьмибитные» значки с крупными пикселями, соцсети для детей – трех-четырехцветные яркие иконки в трехмерной проекции, ну а строгому, но стильному онлайн-изданию – плоские, притом монохромные. Только не воспринимайте наш пример как аксиому и прямое руководство к действию: часто из сочетания условно несочетаемых компонентов и рождаются тренды.

   • Да здравствует простота. В подавляющем большинстве случаев нежелательно использовать в иконке более двух отдельных объектов. Чем меньше элементов, тем лучше. Реалистичные многоцветные трехмерные иконки с бликами и полутенями зрелищны, но сфера их применения ограниченна. В силу своей приметности и детальности они не слишком хороши в качестве сугубо служебных элементов на сайтах, тяготеющих к умеренному консерватизму (каковыми является львиная доля интернет-магазинов).

   Впрочем, как и в веб-дизайне вообще, в проектировании иконок наблюдаются две разнонаправленные тенденции. С одной стороны, благодаря техническому прогрессу стало возможным широкое использование детализированных реалистичных значков, ч ем славится (по крайней мере, до конца 2013 года) корпорация Apple, с другой – не менее популярны нарочито схематичные плоские пиктограммы, главные апологеты которых засели в Microsoft.

   • Однозначность и еще раз однозначность. Плохо, когда два человека трактуют одну иконку совершенно по-разному. Так что пусть даже малочисленная фокус-группа при окончательном выборе иконок полезна не меньше, чем при тестировании прототипа сайта.

   Также в пределах интернет-ресурса иконки должны явственно различаться между собой. Скажем, когда онлайн-сервис предполагает много действий с документом (традиционно обозначается листом бумаги), не всегда удается четко их разграничить. Тщательно продумайте, с помощью каких метафор можно было бы их размежевать.

   • Не гонитесь за оригинальностью. У наглядности в нашем случае приоритет перед креативностью. Часть иконок, отображающих широко распространенные в Интернете объекты, явления и действия, резон но сделать стандартными. Например, предложение напечатать документ нерационально иллюстрировать чем-либо, кроме значка с изображением принтера. Лупа – значит поиск. Тележка из супермаркета – значит «Корзина».

   Небольшое отступление. Cлужба дорожной помощи Britannia Rescue выяснила, что 98 % водителей Великобритании не до конца понимают значение всех значков-индикаторов на приборной панели автомобиля. Нетрудно догадаться, что такое полузнание чревато дорожными происшествиями. В Вебе возможны менее трагичные, но нисколько не приятные ЧП, в том числе неслучившиеся продажи.

   • Используйте иконки только там, где они упрощают жизнь посетителю сайта. Задайтесь вопросом, действительно ли значок служит опорой при навигации или при восприятии информации. От чрезмерного количества иконок пользователь, скорее всего, стушуется.

   Упорство в мелочах (хотя внимание к ним похвально) способно сыграть злую шутку с дизайнером и плодами его тру да. Так, в онлайн-издании TheNextWeb.com (TNW) есть развертывающееся меню All Channels, где предлагается выбрать рубрику (канал) и где название каждой из них сопровождается иконкой. Региональные новостные потоки на первый взгляд проиллюстрированы логично: контуры Африки и Австралии знакомы каждому мало-мальски грамотному человеку. Однако у TNW географическое разделение контента ведется не только по континентам, но и по странам, а также по группам государств. Вы распознаете «очертания Ближнего Востока», вырезанного из карты мира и поданного отдельно? Силуэт Канады навеки в вашем сердце? Между тем Канада и Ближний Восток находятся в правой части меню – там, куда в первую очередь смотрят девять из десяти посетителей. Смотрят – и дивятся.

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

   • Еще раз: иконка – вспомогательное средство. Она либо сопутствует тексту (например, названию раздела в меню), либо, как минимум, сопровождена подсказкой, которая возникает при наведении курсора на значок.

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

   • По возможности придерживайтесь стандартных размеров иконок. Самые распространенные – 24 ? 24, 32 ? 32, 48 ? 48 и 64 ? 64 пикселей. Исторически сложилось так, что фавиконы (см. далее) ужимаются до 16 ? 16.

   • Заранее определите, иконки какого размера вам понадобятся. Обсудите это с дизайнером сайта. Как уменьшение, так и укрупнение готового значка чревато малоприятными графическими искажениями. Вдобавок – предупреждаем вас! – дизайнеры-профе ссионалы зачастую на просьбу бесплатно сделать еще две версии значка, «покрупнее и поменьше», реагируют нервным смехом: простым изменением размера в случае с иконками дело не обходится, необходима тонкая «доводка». За дополнительную плату.

 

  Обратите внимание  

   Предпочтительно делать иконки с прозрачным фоном, чтобы в случае необходимости можно было разместить их где угодно.

 

   Где брать иконки? С нашей точки зрения, если вы не стеснены в средствах, предпочтительно заказать их у дизайнера соответствующего профиля. Комплект иконок в веб-студии с крепкой репутацией обойдется вам, конечно, не дороже, чем все остальное хозяйство на сравнительно простом сайте, но на 60–90 тысяч рублей может потянуть. У фрилансера почти наверняка выйдет дешевле, но в таком случае вы должны быть вдвойне придирчивы в выборе исполнителя и тщательно изучать его портфолио. Зато, если иконки вам рисовал профи, они гарантированно будут вписываться в стиль сайта и работать на решение ваших бизнес-задач.

   Если бюджет ограничен, вам остается купить наиболее подходящие (из числа доступных) значки в специализированном онлайн-магазине, а точнее, стоке или подобрать что-нибудь в одном из бесплатных архивов. Составить внутренне непротиворечивый, неэклектичный набор значков таким путем сложно, но и эта задача обычно имеет решение. Правда, лучше поручить поиск дизайнеру сайта за небольшое дополнительное вознаграждение.

   Есть сервисы, упрощающие поиск готовых иконок, включая www.iconsearch.ru и www.iconfinder.com: по крайней мере, у вас есть возможность предварительно изучить доступные варианты.

   Какой бы вариант вы ни предпочли, есть случаи, когда допустимо, чтобы часть иконок была взята извне. Например, кнопки связи с соцсетями AddThis и Pluso (притом что они имеют варианты под разные виды дизайна) вполне узнаваемы и вписываются в оформление большинства сайтов.<