После заметки «Раз, два, три, четыре, пять», в которой рассказывалось о допустимом количестве рекламных баннеров на веб-странице, я хочу продолжить тему интеграции рекламы в WWW и поговорить о дизайнерских приемах оформления «рекламных мест» на веб-страницах.

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

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

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

В результате дизайнеры воспринимают баннеры как неизбежность, с которой нужно просто смириться и терпеть ее, как тещу в своей квартире. Они предпочитают просто повесить баннер на страницу, никак не заботясь о том, будет ли он сочетаться с остальными элементами дизайна. «Какое уж тут сочетание, — думает дизайнер, — ведь картинки на месте баннера появляются всегда разные, разной цветовой гаммы и разных стилей исполнения. Пускай уж висит себе и не мучается».

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

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

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

Сначала — о взаимном расположении баннеров на странице.

Как известно, баннеры бывают самых различных форматов, наиболее распространенные из которых — 468x60, 120x60, 100x100, 88x31. Часто бывает нужно расположить баннеры разных форматов рядом на странице. Как правило, баннеры, размеры которых отличаются, в непосредственной близости друг от друга смотрятся неважно. Здесь можно использовать такой метод: с помощью графических прямоугольников-распорок «дорастить» меньшие по размерам баннеры, чтобы они визуально были той же ширины (при вертикальном расположении рекламы) или высоты (при горизонтальном расположении), что и большие баннеры.

Например, часто встречается вариант, когда в одной колонке по вертикали располагаются квадратные баннеры 100x100 и кнопки 88x31:

Не очень хорошо выглядит, правда? Но стоит только добавить слева от баннериков 88x31 небольшие распорки (для чего пригодится картинка размером 1x1 пиксель, растянутая до нужных габаритов), как картина кардинально преображается:

Задача в данном случае облегчается тем, что баннеры 88x31 обычно являются статическими (то есть не меняющимися при перезагрузке страницы), что позволяет подобрать более сочетающиеся по оформлению распорки.

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

Другая распространенная комбинация баннеров разных размеров — расположение по горизонтали баннера 468x60 и двух баннеров 100x100 справа и слева от него:

Здесь уже рисуется распорка размерами шириной 468 и высотой примерно 30 пикселей, при этом она, конечно, уже не должна быть залита одним цветом, иначе она будет выглядеть довольно скучно. Можно, например, сделать ее стилизацией под основную заставку сайта.

Если распорка выполнена в темных цветах, то ее лучше расположить внизу баннера, если же применена светлая цветовая гамма — вверху. Это придаст композиции устойчивость, ведь визуальный «центр тяжести» будет находиться внизу. Хотя лучше будет поэкспериментировать: в зависимости от исполнения, темная распорка может очень неплохо смотреться и сверху от большого баннера.

Честно говоря, я не являюсь сторонником выстраивания баннеров 468x60 и двух квадратов 100x100 в одну линию. На мой взгляд, даже при использовании всяких интересных элементов оформления эта комбинация выглядит довольно сомнительно. Лучше все-таки поискать другой вариант сочетания баннеров или отказаться от 100x100 вообще.

Не стоит забывать и о том, что баннеры ни в коем случае не должны соприкасаться краями: между ними должно быть какое-то пространство, и не 1-2 пикселя, а 10-12 как минимум, а в идеале — графическая распорка-разделитель (некоторые баннерные системы, например, RB2, предлагают своим участникам готовые распорки для использования на своих сайтах). Иначе два расположенных рядом баннера начинают восприниматься как единое целое, порождая самые необычные, а порой и откровенно идиотские комбинации.

Такие «баннизмы» не только раздражают пользователей, но и вредят имиджу сайта, так как сайт приобретает довольно дурацкий вид.

Дистанция в 10-12 пикселей не является правилом для размещения кнопок 88x31: эти баннеры лучше смотрятся, когда расстояние между ними составляет 5-6 пикселей.

Пожалуй, самая простая для реализации комбинация — два баннера 468x60 и 120x60, выстроенные в одну линию. С учетом распорки в 12 пикселей, размещенной между этими баннерами, они составляют полосу одинаковой высоты и шириной в 600 пикселей — минимальной рекомендуемой шириной для веб-страницы. 468x60 и 120x60 — форматы, словно созданные друг для друга.

Теперь — о расположении баннеров относительно веб-страницы.

Представьте, что веб-страница — это стена вашей квартиры. А баннер — картина, которую вы хотите повесить на эту стену.

Скажите, вы стали бы вешать картину под самым потолком, чтобы верхний край рамы подпирал его? Конечно же, нет — это выглядело бы просто ужасно.

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

Другой пример неудачного расположения баннера — когда вокруг него остаются большие пустые поля: так бывает, скажем, когда баннер 100x100 располагают в колонке шириной 200-250 пикселей. Из-за пустых пространств баннер словно «вываливается» из страницы. Он выглядит откровенно чужеродным объектом на веб-странице, разобщая другие ее элементы и, таким образом, «разваливая» дизайн. Для того, чтобы избежать этого неприятного эффекта, нужно либо заполнить пустые места чем-то еще (теми же графическими распорками), либо уменьшить ширину колонки до 120-130 пикселей.

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

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

Основная идея такова: пусть баннеры не висят на страницах, как бедные родственники. Для них нужно оборудовать свои «гнезда», оформленные в том же стиле, что и заголовок страницы, колонки с текстом и другие элементы. Это позволит смягчить контраст между баннерами и дизайном страницы.

Вот, например, как замечательно сделан «подвал» на странице слегка заброшенного, но, тем не менее, прекрасно оформленного проекта «Партнерский совет». Дизайнер позаботился о том, чтобы и большой баннер 468x60, и кнопка 88x31 «чувствовали себя уютно».

Другой прием, который можно использовать — дополнение «баннероместа» различными декоративными элементами: распорками, «ушами», кнопками «реклама на этом сайте» и т.п. Главное — эти элементы должны быть выполнены в едином стиле с остальными, чтобы, повторюсь еще раз, связывать чужие баннеры и дизайн, созданный специально для этого сайта.

И, напоследок, еще один совет. Все усилия по безболезненной интеграции баннеров и дизайна окажутся напрасными, если не стремиться по возможности не пускать на свои страницы баннеры с томными красотками, надписями «кликни меня нежно» и раздражающим мерцанием. Для этого нужно тщательно подходить к выбору обменных систем для размещения баннеров на своем сайте, отдавая предпочтение тем, кто предъявляет высокие требования к качеству баннеров, а не сулит низкую комиссию или перевод показов. Лично я перепробовал практически все более-менее крупные обменные системы в Рунете (за исключением разве что откровенно порнографических), пока не остановился на RLE Gold (468x60), RB2 (100x100) и BBN (120x60), несмотря на то, что они предлагают не самые лучшие условия по сравнению с конкурентами.