Как сделать кирпичный баннер

Обновлено: 07.07.2024

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

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

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

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

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

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

728x90 px — полноразмерный баннер (часто показывается вверху или внизу страницы)
300x250 px — встроенный прямоугольник (преимущественно показывается в правой части сайта или вставляется в текст)
300x600 px — блок на половину страницы
320x100 px — мобильный баннер

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

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

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. Будьте попроще

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

Выводы

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

Что делать, если в команде нет дизайнера, работать в сложных графических редакторах вы не умеете, но нужно создать красивые рекламные баннеры? На помощь приходят специальные сервисы для создания графического контента. Мы выбрали шесть популярных онлайн-редакторов: Canva, Adobe Spark, Desygner, Bannersnack, Bannerboo и Fotor, протестировали их и готовы рассказать об их преимуществах и недостатках.

Canva

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

Вводим параметры высоты и ширины баннера и переходим в редактор.

Сначала сделаем фон. Canva предлагает различные варианты оформления: однотонные, орнаменты, узоры, градиенты, флористические и т. д.

Теперь добавим текст.

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

Изменение цвета текста, выравнивания и т. д. — в меню сверху. Текст можно перетаскивать, растягивать и сжимать.

Осталось добавить несколько простых декоративных элементов. В Canva нет возможности свободно выделить часть изображения, обрезать и вставить элемент в баннер, как в более сложных и продвинутых фоторедакторах. Если нужно добавить на баннер элемент изображения, придется обрезать его в другом графическом редакторе, сохранить и загрузить в медиатеку Canva. Зато в Canva большая библиотека фонов и иллюстраций. Так как дизайн нашего баннера простой, можно выбрать что-то из иллюстраций в библиотеке сервиса.

Плюсы

Минусы

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

Adobe Spark

Adobe Spark — это веб-приложение, им можно пользоваться с десктопа, также есть версия для iOS. У приложения три основных назначения:

Создание графического контента.
Создание видеороликов.
Верстка веб-страниц.

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

Спускаемся вниз страницы, нажимаем Create a graphic.

Сервис предлагает воспользоваться шаблонами, но мы будем создавать баннер самостоятельно, поэтому нажимаем Start from scratch.

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

Переходим в редактор.

Начнем с логотипа. Чтобы загрузить его с компьютера, нажимаем на круглый значок с плюсом и выбираем Photo.

Затем выбираем расположение логотипа и корректируем размер.

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

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

Сохраняем, нажав Download справа вверху. Когда один баннер готов, можно оставить макет и поменять размеры, перейдя во вкладку Resize на правой боковой панели и выбрав вариант Custom.

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

Потрясающие шаблоны баннеров

Выберите подходящий шаблон для баннеров из сотен готовых и настройте картинки, графику и шрифты в соответствии с вашим брендом. Меняйте размер своих баннеров под разные платформы и загружайте дизайны в высоком разрешении JPG или PNG.

Создать баннер с нуля

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

Настройте каждый аспект баннера с помощью вашей собственной графики и шрифтов

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

Настройте каждый аспект баннера с помощью вашей собственной графики и шрифтов

Дополнительные возможности конструктора баннеров

Поделитесь своим баннером

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

Что такое баннер?

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

Используйте онлайн конструктор баннеров для создания веб-графики любого размера.

Откройте вкладку с графикой для соцсетей на дашборде Visme. Выберите нужную соцсеть и размер картинки. Конструктор баннеров предлагает шаблоны для всех основных платформ: Facebook, Twitter, YouTube, LinkedIn. Вы также можете сделать баннер-небоскреб или рекламный баннер для боковой панели.

Больше, чем просто конструктор баннеров

Редактор баннеров от Visme помогает вам создать любой тип онлайн-рекламы или веб-графики — всё в рамках целостного бренда. Разрабатывайте баннеры в любое время с удобным интерфейсом Visme.

ПРИВЛЕКАЙТЕ ЮЗЕРОВ

Воспользуйтесь преимуществом функций анимации Visme для создания анимированных баннеров для соцсетей, новостных рассылок, блога и других площадок.

Изображения и графика

СДЕЛАЙТЕ ВАШ КОНТЕНТ КРАСИВЫМ

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

ВИЗУАЛИЗАЦИЯ ДАННЫХ

Графики и дата-виджеты

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

Шаблоны для баннеров

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

select * from templates where type = 'banner' and content_type LIKE '%facebookcovers%' order by is_featured DESC , is_premium ASC LIMIT 0,8

Как использовать конструктор шаблонов

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

Часто задаваемые вопросы

Легко создавать баннеры с инструментом вроде Visme. Выберите платформу, для которой вы создаете дизайн, выберите шаблон, настройте его под свой бренд и посыл, а затем выгрузите готовую картинку на сайт.

Да! На дашборде можно найти шаблоны для всех основных соцсетей: Facebook, Twitter, YouTube, LinkedIn, Pinterest иInstagram.

Да. Конструктор баннеров позволяет легко масштабировать ваш дизайн. Сделайте копию файла на дашборде и поменяйте размеры внутри редактора.

Да, шаблоны для рекламных баннеров тоже есть. Их можно найти во вкладке “веб-графика” на дашборде. Есть 4 размера: широкий небоскреб, leaderboard, большой и средний прямоугольник.

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

Да, абсолютно! Все картинки доступны для личного и коммерческого использования, так что не бойтесь использовать любую сток-фотографию из библиотеки на своем баннере.

Your banners deserve to be beautiful

…and so does the rest of your content

All-in-one Visual Communication Tool

Go beyond schedules. Visme is “the only” tool you’ll need to create all forms of visual content.

Design beautiful and interactive Presentations and Infographics to Reports, Surveys, Social Graphics, and over 20 other content formats.