Баннеры

Баннеры используются на страничках в качестве рекламы других ресурсов и, как правило, их дизайн никак не связан с содержимым странички и оттого смотрится несколько отчуждённо. Правда , есть одно исключение - локальные баннеры. В этом случае мы можем оформить их, используя мотивы дизайна основного сайта.

При создании сайта необходимо учитывать наличие баннеров и соответственно выстраивать дизайн.

На просторах Рунета популярны несколько типоразмеров баннеров, самые распространенные из которых - это 468x60, 100x100 и 88x31 (обычно называемые кнопками). Баннеры остальных размеров применяются гораздо реже и обычно только для локальных баннерных сетей (125x125)

Кроме отличия в размерах, баннеры могут быть разного типа:

• графические
• html-баннеры
• flash-баннеры

Два последних типа достаточно сложные и специфические. Мы будем разбираться с классическим графическим баннером размером 468x60 пикселей.

Применение баннеров в качестве рекламного носителя в Сети накладывает на него несколько ограничений. Основное из которых - это "вес" баннера в килобайтах. В популярных баннерных сетях максимальный вес лимитируется цифрами от 10 до 15Кб. Я принимаю за базовую цифру в 12Кб. Если вес баннера больше, то он считается тяжелым и для рекламы непригоден, т.к. время, требуемое для загрузки, превысит среднее время просмотра странички, - проще говоря, баннер не успеет загрузиться.

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

При выборе формата баннера нужно придерживаться тех же принципов, что и при создании основной графики на страницах, - если изображение фотографическое, то выбираем формат JPEG. Во всех остальных случаях более подходящим будет GIF. Если баннер анимированный, то выбора нет - только GIF.

Немного отвлечёмся и поговорим о баннере как о носителе рекламы. С этой точки зрения он очень похож на рекламный плакат. И на то, и на другое посетитель для просмотра тратит не более 3-5 секунд, и в том, и в другом случае реклама занимает относительно большое пространство, и в том, и в другом случае нужно выражать мысли наиболее чётко и образно.

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

Баннеры можно подразделить на имиджевые и обычные. Имиджевые отличаются от обычных тем, что используют в дизайне элементы основного сайта, цвета и/или логотип. В отличие от обычного баннера, имиджевый работает не только при нажатии, но и само его присутствие раскручивает марку, т.к. баннер однозначно узнаваем и легко сопоставляется с конкретной фирмой или сайтом.

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

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

При измерении эффективности баннеров пользуются термином CTR - измеряемого в процентах и выражающего отношение числа показов баннера к числу нажатий на него. Это не единственный показатель, но наиболее известный. Для обычных баннеров он составляет от 0.5% до 1.5%. Большие значения присущи обычно только порноиндустрии (там может доходить и до 15%).

А теперь займёмся креативом - будем придумывать идею, слоган и подбирать подходящий образ.

Технические соображения

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

Художественные соображения

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

Что такое загадка в дизайне? Вы когда-нибудь видели такие картины, вглядываясь в которые снова и снова ты открываешь для себя что-нибудь новенькое? Это тот самый случай. Дизайнер как бы придумывает загадку, а потом ее "шифрует", зритель же постепенно открывает эти загадки (в большинстве случаев на подсознательном уровне), а в качестве разгадки чаще всего выступает слоган. Если мы используем анимированный GIF, то возможностей больше, и мы можем разбить загадку на несколько кадров и приоткрывать её постепенно...

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

1. Слогана
2. Визуала, иллюстрирующего слоган (вступающего в игру со слоганом)
3. Цветовой гаммы (для имиджевых баннеров цвета часто совпадают с цветом рекламируемого сайта)
4. Дополнительного текста (адрес странички, пояснительный текст)
5. Дополнительных элементов оформления, подчёркивающих основную мысль и стиль баннера. В случае имиджевых баннеров очень удобно сделать один шаблон и, подставляя разные слоганы и визуалы, получить целую серию баннеров.

Сделать эффективный и красивый баннер не так легко и может запросто занять несколько часов. Запомните одно правило - если созданный баннер Вам не нравится, то, вряд ли он понравится другим! Впрочем, это правило относится вообще к любой творческой деятельности. ;)

Давайте подытожим наши рассуждения и перечислим этапы, которые нужно пройти, чтобы создать качественный баннер:

1. Для начала необходимо выяснить, какую цель мы преследуем, создавая данный баннер. А для этого зададим себе несколько вопросов о том, что рекламирует этот баннер и кого он может потенциально заинтересовать. Поставим себя на место посетителя, который ищет рекламируемый нами сайт, и спросим себя, что бы мы хотели увидеть на баннере?
2. Получив ответы на предыдущие вопросы, необходимо сформулировать идею или сценарий (это уже в случае с анимированным баннером).
3. Наконец, подходим к придумыванию слогана, который наиболее точно выразит нашу идею или сценарий (придумать нужно обязательно несколько вариантов - минимум 10-15). Остаемся на этом этапе до тех пор, пока придуманный слоган нам самим не понравится. :)
4. Графическая часть - вот теперь можно запускать PhotoShop и реализовывать идею в картинке. Подбирать из клипарта или самому рисовать подходящий под слоган визуал.
5. Делаем первую версию баннера, потом ещё одну, и ещё одну, и ещё одну, пока ... не начнёт очень сильно нравиться.
6. Окончательно оптимизируем баннер.

Статьи по теме

Метатеги для сайта: исчерпывающее руководство по Title, Description, Canonical, Robots и другим тегам

В данном материале мы разберем ключевые метатеги и предоставим практические советы по их применению для повышения эффекти�...

2025-12-02

NFT 2.0: новые стандарты токенов

Стандарт ERC-6551 — это современный протокол для невзаимозаменяемых токенов (NFT), вызвавший активное обсуждение в сообществе Ethereum. Разра...

2025-10-27

Основные принципы DevOps

Содержание: Преимущества DevOps Ключевые принципы DevOps Лучшие практики DevOps Заключение DevOps — это культурная трансформа�...

2025-10-27

Искусственный интеллект в SEO: новые правила борьбы за цифровое внимание

От 29% до 36% пользователей уже обращаются к возможностям искусственного интеллекта вместо традиционных поисковых систем. В ответ на э�...

2025-10-24

Сложности управления данными в эпоху облачных технологий

В условиях глобальной цифровой экономики передача данных между юрисдикциями создает серьезные правовые вызовы. При использовани�...

2025-10-10

Почему прозрачность решений ИИ — это вопрос, касающийся каждого

Современные системы искусственного интеллекта, включая ChatGPT, Gemini, Deepseek и BERT, демонстрируют феноменальные возможности. Он�...

2025-10-03

Индексация сайта: что это и как ускорить попадание страниц в поисковики

Индекс — это база данных, в которой поисковая система ищет ответы на запрос пользователя. Пока веб-страница не проиндексирована, ...

2025-07-09

Персональные данные: правила хранения и обработки и изменения 2025 года

Персональные данные (ПДн) сотрудников и клиентов обрабатывает почти каждая компания. В 2025 году внесен ряд изменений в порядок работ...

2025-07-04

Что такое VPN и зачем он нужен?

Каждый раз, когда мы подключаемся к Wi-Fi в кафе, листаем ленту новостей или совершаем онлайн-покупки, за кулисами остается немало детал�...

2025-06-10

Нейросети для создания видео: 7 инструментов и что они могут

Создание картинок с нейросетью не попробовал уже только ленивый. А что там с генерацией видео? Всё тихо. Мы протестировали семь инструме�...

2025-06-10

12 нейросетей для работы с маркетплейсами: создание карточек и описаний для Wildberries и Ozon

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

2025-06-10

Топ-6 лучших российских нейросетей, в которых можно генерировать тексты и изображения бесплатно и без VPN

Многие уже пробовали сгенерировать качественные тексты в ChatGPT и реалистичные картинки (без искажений и лишних пальцев) в Midjourney. Од...

2025-01-15

Новая модель LAM способна выполнять задачи в Word

Новая модель LAM способна выполнять задачи в Word Исследователи Microsoft разработали модель, которую они называют "Large Action Model" (LAM) — иску...

2025-01-09

Универсальный промпт для нейросети: как выжать максимум из ChatGPT, YandexGPT, Gemini, Claude в 2025

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

2024-12-26

Капитан грузового судна, или Как начать использовать Docker в своих проектах

Рассказываем, что такое Docker, как его использовать, а также пробежимся по сильным сторонам, терминологии и установке инструмента. Docker я...

2024-11-26