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

Тема сегодняшней беседы:

Пиктограммы в веб-дизайне и некоторые практические методики их использования.

Вживаясь в образ, начнем с далеких от сети вещей. Например, с системы пиктограмм, разработанной швейцарцем Жаном Видмером для французских автобанов. Или, олимпийских значков, придуманных для Олимпиады-80 в Москве, которые до сих пор используются в городском оформлении. Первая ссылка: проект Пиктомания Сергея Новикова. Не спеши читать дальше, отвлекись на указанный линк. Теоретическая подготовка!

Углубляться в терминологию сегодня не будем: пиктограммы, миниатюры или иконки... Надеюсь, мы поняли друг друга. Нам важна практика!

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

Миниатюра, как иллюстрация в существующем дизайне.

Например, Beep.ru. Разделы сайта проиллюстрированы стильными картинками, примерно соответствующими тематике этих разделов. Или Molotok.ru. Если миниатюры убрать, то сайт все-равно будет узнаваться, у него есть логотип, другие элементы оформления. Пиктограммы придают страницам колорит, оживляют дизайн. Визуально дублируя названия разделов, создают дополнительный интерес для посетителя. Но, обрати внимание, здесь миниатюра не является дизайно образующим элементом.

Логотипы.

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

Yahoo.com - ветеран в своей области. Сколько дизайнеров вдохновлялись этим простым и в тоже время сложным решением! Ведь кроме комиксообразных иконок на сайте больше нет никакой графики. Они же - логотипы проектов-спутников, они же главный элемент навигации. И, как видим, иконки справляются с нагрузкой!

Похожую работу недавно сделали РедГрафические дизайнеры Ира Зносок и Юрий Литвин - серия логотипов для группы сайтов Открытого Контакта. Например, Shop.by. Как видим, было решено пожертвовать элементами оформления каждого из проектов по отдельности, в пользу всей группы. Как и в случае с Yahoo, логотипы создают дизайн страниц. В них заложена идея пиктограмм, они объединены общей манерой исполнения, но при этом полны индивидуальности.

Ты можешь попробовать пойти таким путем, но он требует жертв. Пример: Мне импонирует оформление проектов Port.ru. Дизайнеры разработали в одном стиле целую группу отличных логотипов. Конечно, ставилась цель объединить контент-проекты компании. Славные логотипы, но они потерялись в индивидуальных дизайнах каждого из сайтов. Зачем было жертвовать наглядностью, разрабатывая тот же Mail.ru в корпоративном стиле? (глядя на лого, не скажешь, что это почтовый сервис) Жертва оказалась напрасной, логотипы утонули в других элементах оформления!

Акцент.

Иконка может быть использована для установки акцента на одной из ссылок. Например, часто делают анимированную картинку "NEW". Среди тех, кто не справляется сам, наблюдается повальное поклонение гифчику, скопированному с Yahoo . Не понимаю, что, самим сложно нарисовать?

Иконки сайтов (буквально иконки Windows).

Сохраняя в избранное любую из страниц Осиного Гнезда, ты потом обнаружишь маленькую синюю голову осы рядом с названием страницы. В Жужжальне уже поднимали этот вопрос, поэтому расскажу подробнее.

Речь идет об обычной иконке 16х16 pix. Сделать ее ты можешь сам и программок в сети для того масса. Из больших пакетов иконки редактирует Corel Photo-Paint (правда я не нахожу его удобным). Картинка может содержать до 256 цветов и иметь маску прозрачности. Секрет в том, что сделать приличную иконку 16х16 крайне хлопотно. Сперва такие корявки выходят...

Подключается к броузеру просто. Файл следует назвать favicon.ico и положить в корневой на сервере. а в Heade прописать link href="favicon.ico" rel="shortcut icon". Во всяком случае, я сделал именно так - работает.

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

Рисуют все!

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

Во всем важен стиль.

Среди разнообразных манер подач выделяется так называемый пиксельный стиль. Мне он особенно близок. Говоря о миниатюрах, нельзя не упомянуть Лебедевского протеже Рому Воронежского (картинки для Молоток, нового Yandex'a). В скором времени и E-start наполнится пиксельными миниатюрами. А еще напомню про известный источник вдохновения всех миниатюристов мира Kaliber10000.