Баннеры для сайтов: Разработка баннеров для сайтов, логотипа и фирменного стиля компании

Содержание

как сделать баннер, за который не будет стыдно

Дизайн
7 мин на чтение
14450

Сегодня мы рассмотрим 15 дизайнерских приемов для создания баннеров, за которые не будет стыдно. Для примеров мы взяли победителей 2015 года по версии Webby Awards.

В интернете много шумихи по поводу баннеров. Они уже отжили свое? Кликает ли кто нибудь на них? Может, они уже мертвы? А вдруг появилась лучшая альтернатива баннерам? И хотя правда то, что по баннерам стали меньше кликать, это еще не конец популярного рекламного формата. Даже если вы не можете измерить эффективность рекламы, вы не будете возражать, что она все равно влияет на выбор пользователя в пользу того или иного продукта или сервиса.

Сегодня мы рассмотрим 15 дизайнерских приемов для создания баннеров, за которые не будет стыдно.

Для примеров мы взяли победителей 2015 года по версии Webby Awards.

1. Придерживайтесь стандартных размеров

Баннерная реклама не относится к типу продукта один «размер для всего». Вы должны исходить из тех спецификаций, которые нужны для ресурса, на котором вы планируете размещать рекламу, а большинство сайтов используют набор стандартных размеров. (Это также касается и email-рассылок)

На Google Adwords, одном из крупнейших серверов баннерной рекламы в интернете, можно узнать про наиболее популярные размеры.

Ниже размеры, которые вы должны выбрать в первую очередь:

728×90 px — полноразмерный баннер (часто показывается вверху или внизу страницы)
300×250 px — встроенный прямоугольник (преимущественно показывается в правой части сайта или вставляется в текст)
300×600 px — блок на половину страницы
320×100 px — мобильный баннер

2. Придерживайтесь последовательности

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

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

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

3. Один баннер равняется одному сообщению

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

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

4. Помните о том, где будет размещен баннер

Где вы планируете размещать баннеры после того, как сделаете сам креатив? Если вы используете сервисы подобные Google, у вас будет не сильно много возможностей контролировать размещение. Но если вы хотите разместить их на определенных вебсайтах, в приложениях или email рассылках, вам нужно будет изучить их и принять во внимание их дизайн, прежде чем делать свои баннеры.

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

5. Используйте призыв к действию

Какая самая главная задача баннера? Правильно — на него должны кликнуть. Используйте призыв к действию (Call to Action) в каждом баннере, который вы делаете. Подскажите пользователю, что ему нужно делать дальше.

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

6. Забудьте про Flash

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

Используйте вместо этого HTML5. Если вам нужно сконвертировать какие то свои старые креативы и вдохнуть в них новую жизнь, у Google есть небольшой урок, который поможет это сделать.

7. Используйте кнопки

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

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

8. Сфокусируйтесь на шрифтах

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

Согласно правилу большого пальца, обычно двух начертаний шрифтов бывает достаточно.

Делайте большие заголовки. Используйте жирные, немного необычные или цветные шрифты, чтобы привлечь внимание пользователей.
Отдавайте предпочтение шрифтам без засечек (sans serif). Вы можете использовать два размера или два начертания жирного — один для основного текста, а другой для кнопок или призыва к действию. Просто убедитесь, что они легко читаются.

9. Используйте простую анимацию

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

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

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

10. Сохраняйте правильно

Это важный момент. Никто не разместит вашу рекламу, если файлы слишком много весят или у баннера будет неправильный формат. Оптимизируйте размер по максимуму. Итоговый размер файлов не должен превышать 150 кб, в зависимости от площади рекламного баннера.

После этого убедитесь, что баннер сделан в правильном формате, стандартном для интернет-рекламы. Распространенные форматы баннеров — PNG и JPG для статических баннеров, GIF — для анимированных. SVG формат тоже набирает оборотов и все чаще принимается разными рекламными сетями. Забудьте об SWF (Adobe Flash) — от него сейчас уже практически все отказались, и даже браузеры перестают его поддерживать. Вместо него широкое распространение получили HTML5 баннеры, которые создаются с помощью таких программ, как Google Web Designer, Adobe Animation или рускоязычный онлайн конструктор баннеров Bannerboo.

11. Сфокусируйтесь на текстах

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

Вы же не собираетесь впихнуть в баннер 100 слов, правда? Неплохой вариант — поработать с копирайтером, который поможет подобрать правильное послание. Подбирайте такие выражения, которые отвечают на возможные вопросы пользователей, или придумайте интригующий посыл, чтобы привлечь их внимание.

12. Используйте элементы бренда

Рекламные баннеры — продолжение любой маркетинговой кампании, которую вы запускаете. Они должны выглядеть соответственно. Если формы и размеры могут немного отличаться, общий визуальный стиль должен сохраниться.

Поэтому, создавая баннеры, думайте о них, как о составляющей вашей маркетинговой стратегии.

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

13. Используйте яркие визуальные элементы

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

Если используете фотографии людей — давайте акцент на лица. Если вы продаете одежду — покажите один товар вместо всего гардероба. Склоняйтесь к простым композициям — картинка, и возле нее текст. Не картинка в тексте, и не текст в картинке. У пользователя есть всего пара секунд, чтобы увидеть ваше сообщение. Сильное смысловое изображение и сильный продающий текст возле него — ваш беспроигрышный вариант.

14. Релевантный контент

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

Да, возможно, вам нужно будет приложить немножко больше усилий, чтобы все сработало, как надо. Целевые страницы, созданные специально для рекламной кампании — как раз тот вариант. Придерживайтесь общего стиля на баннерах и на лендинге, чтобы посетитель не растерялся, перейдя по клику на вашу страницу. Изучайте аналитику и смотрите конверсию, чтобы понимать, все ли хорошо работает.

15. Будьте попроще

Это прописная истина. Если вы переутомите пользователя обилием текстов, анимаций, цветов, фактов, вы рискуете утратить первоначальный смысл. Будьте попроще.

В случае с баннерами, всего по одному будет достаточно.

Одна картинка
Одно текстовое сообщение
Один призыв к действию
Один элемент бренда

Выводы

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

Автор: Сarrie Сousins
Перевод: Bannerboo.com

#баннер
#веб
#дизайн
#перевод
#статья

что это, виды баннеров, как бороться с баннерной слепотой

Баннер (banner) — это кликабельное графическое изображение на сайте с коммерческой информацией. При клике пользователь попадает на сайт рекламодателя.

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

Баннеры можно встретить на любом сайте любой направленности. Основные их назначения:

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

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

Считается, что первый баннер в интернете появился осенью 1994 года на американском сайте HotWired.com. Интересно, что он не преследовал никаких коммерческих целей: кликнув по нему, можно было попасть на сайт с картой США, где были отмечены особо выдающиеся музеи и другие культурные учреждения.

Вы когда-нибудь кликали мышкой сюда? Вы кликнете»

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

Виды баннеров: графические, анимированные, Flash-баннеры

Онлайн-баннеры бывают статичными, анимированными и интерактивными.

Графические баннеры

Наиболее распространенными и простыми в производстве являются статичные баннеры. Это текст с картинкой в форматах PNG, GIF, JPEG), кликнув по которой пользователи попадают на другие веб-страницы.

Типичный пример баннеров на маркетплейсе Ozon

Анимированные баннеры, Flash-баннеры

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

Пример анимированного баннера

Видеобаннеры

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

Your browser does not support the video tag.

Одно и то же рекламное сообщение в трех форматах: баннер, видеобаннер и видео

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

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

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

Продающие баннеры призывают перейти на другой ресурс для непосредственного совершения покупки.

Плюсы и минусы баннерной рекламы

Основные преимущества баннерной онлайн-рекламы:

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

Легко узнать эффективность рекламы. Среди KPI баннерной рекламы — количество кликов, показов и их процентное соотношение — CTR. Также надо учитывать стоимость клика: чем он дешевле для владельца сайта, тем лучше.
Прямое попадание в ЦА. Но с оговоркой: если вы точно определите «места обитания» своих потенциальных покупателей и будете размещать баннеры именно на этих сайтах. В этом случае отдача от рекламы будет намного выше.

Как бороться с баннерной слепотой и сделать эффективный баннер

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

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

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

Рекламный баннер жилищного комплекса

Настроить контекстную баннерную рекламу в поисковых системах можно в рекламных кабинетах «Яндекс.Директ» или Google Ads.

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

Какое будущее ждет баннерную рекламу?

Несмотря на то, что некоторые маркетологи считают баннерную рекламу несколько устаревшей, а пользователям предлагается всё больше способов ее блокировки, вряд ли она прекратит в ближайшее время свое существование. Скорее всего, будут появляться всё более усовершенствованные и «умные» виды баннеров, подстраивающиеся под интересы каждого конкретного пользователя.

Продвижение сайтов

Любой формат сотрудничества: позиции, лиды, трафик.
Подбираем запросы, которые приводят реальных покупателей!

750+ изображений баннеров веб-сайтов | Скачать бесплатные изображения на Unsplash

750+ изображений баннеров веб-сайта | Download Free Images on Unsplash

A photoPhotos 9k
A stack of photosCollections 10k
A group of peopleUsers 0

background

website

business

computer

design

office

workspace

Unsplash logo

Unsplash+

Совместно с Марией Шалабаевой 9

Джорджи Коббс –––– – – –– ––– –– –––– – –.

SABRI TUZCU

HQ FOOSH IMAGERESDESKATAKENT MAHALLESI

Jeshoots.com

Workblogstudy

Jeff Sheldon

Workspacetechspeaker

Annie Spratt

Business -BusinessTeambker

ANNI0024 Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

furniturewhite peoplebedding

Alesia Kazantceva

Hd computer wallpapersottawacanada

Igor Miske

Hd laptop wallpapersdresdengermany

Shapelined

Hd grey wallpapersHd pattern wallpapersHd chicago wallpapers

Leone Venter

Hd белые обоиминимализмHd минималистские обои

Ben Kolde

САМЕТСКИЙ СПАСИБОЙ СПАСИОН ИСПРАВЛЕНИЕ ОБОЛОСИТЕЛЬНЫЙ ЛОГОПОТ

UNSPLASH

UNSPLASH+

в сотрудничестве с Getty Images

UNSPLASH+

Unlock

онлайн -датистический фон. блоки

фоны клавиатурытехнологииHd обои на рабочий стол

freestocks

fashionshoppingstyle

Markus Spiske

codedataweb

Unsplash logo

Unsplash+

In collaboration with Getty Images

Unsplash+

Unlock

bathtubwashingsoap sud

Samantha Gades

interiorhomewall

renderHd 3d wallpapersdigital image

Hq background imagesdeskatakent mahallesi

workspacetechspeaker

hd компьютерные обои ottawacanada

hd серые обои hd узор обои hd чикаго обои

Фоны веб-сайтаHd design wallpapersquote

профессиональный рабочий ноутбук

fashionshoppingstyle

ваннастирка мыло пена

–––– –––– –––– – –––– –––– –– – –– ––– – – – –– ––– –– –––– – –.

офисHd желтые обоицифровой

рабочийблогисследование

бизнескомандная работа

мебельбелые людипостельные принадлежности

Hd обои для ноутбукаdresdengermany

Hd белые обоиминимальныйHd минималистские обои

онлайн DatingBeautySparse

Texture Foansparty Foanleshd Blue Wallpapers

Клавиатура Фоны Стехнологии. Баннер веб-сайта 40 фото · Куратор Ариэль Нил

codedataweb

interiorhomewall

renderHd 3d wallpapersdigital image

workblogstudy

furniturewhite peoplebedding

Hd grey wallpapersHd pattern wallpapersHd chicago wallpapers

online datingbeautysparse

professionalman workingwork laptop

codedataweb

officeHd yellow wallpapersdigital

workspacetechspeaker

Hd computer wallpapersottawacanada

Website backgroundsHd design wallpapersquote

Keyboard фонытехнологииHd обои на рабочий стол

мыльная пена для мытья ванн

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Hq background imagesdeskatakent mahallesi

businessteamworking

Hd laptop wallpapersdresdengermany

Hd white wallpapersminimalHd minimalist wallpapers

Related collections

Website Banner

121 photos · Curated by Geeta Vara

Website banner

69 photos · Curated by Diana Петти

Баннер веб-сайта

40 фото · Куратор Ариэль Нил

Текстурные фоныФоны для вечеринокСиние обои HD

fashionshoppingstyle

interiorhomewall

Просмотр премиальных изображений на iStock | Скидка 20% на iStock

Unsplash logo

Сделайте что-нибудь потрясающее

Баннеры для веб-сайтов — Etsy.de

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

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

Баннеры для сайтов: Разработка баннеров для сайтов, логотипа и фирменного стиля компании