Открыть меню

9 секретов хорошего баннера для сайта

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

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

С чего начать?

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

Какую картинку использовать для фона?

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

Какого размера должен быть баннер?

Существуют общепринятые размеры для баннеров:

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

Какие шрифты использовать для надписей?

Лично вам могут нравиться надписи, выполненные шрифтами Comic Sans, Times New Roman, Papyrus, Arial..., но уже устарели для дизайна и их применение является дурным тоном. Применяйте современные шрифты: Open Sans, Roboto, Proxima Nova Pro, PT Sans, Ubuntu.

Шрифты с засечками или без засечек?

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

Сколько шрифтов использовать, какого цвета и размера?

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

Как акцентировать внимание на нужных элементах?

Акцент позволяет управлять вниманием посетителя и создается через контраст. А вот контрасты создают по-разному:

— при помощи размера (иерархия), например, заголовок, подзаголовок, текст;

— при помощи оттенков (цвет или одновременно цвет и размер);

— при помощи фигур (необычные фигуры привлекают внимание);

— при помощи цвета (создание точки акцента или интереса);

— при помощи расстояния (главное от второстепенного).

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

Какой должна быть кнопка?

Кнопки может не быть вообще! Но, если вы делаете баннер с кнопкой, то она однозначно должна быть заметной и современной. 3-D кнопки уже ушли в прошлое. С 2013 года с подачи Apple в моду вошел Flat-дизайн. А это плоские формы с тенями или без.

Анимированный баннер или статичный?

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

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

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

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

P.S. В данный момент мы тестируем новый канал привлечения читателей и публикуем некоторые статьи на Яндекс Дзен.

Вот ссылка на наш новый канал на Яндекс Дзен.

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

Обсуждение: 20 комментариев
  1. Отлично!

    Есть над чем поработать и исправить некоторые косячки )))

    Ответить
  2. Светлана:

    Спасибо! Очень полезный материал...

    Ответить
  3. Алексей:

    Как всегда полезно, понятно и без воды.

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

    Ответить
  5. Марина:

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

    Ответить
  6. Всем привет!

    Евгений Вергус и его команда, это те ребята, у которого я учился

    создавать сайты и постигал все тонкости заработка в интернете.

    Все статьи на сайте — это ,практически пошаговое, руководство для

    начала и продвижения своего онлайн бизнеса в различных нишах.

    Я очень часто обращаюсь к сайту, как к своеобразному справочнику

    в попытке найти ответы на те или иные вопросы, касающиеся моей

    деятельности в интернете.

    И новая статья не стала исключением.

    Ведь баннер, это практически самый короткий путь к подписчику,

    (разместил его на сайте и занимайся своими делами)

    и по этому в его оформлении не должно быть мелочей, точнее все

    они должны быть учтены.

    Применив нюансы, которые изложены в статье,

    и разместив баннер на всех доступных (бесплатных) площадках вы

    начнете сбор своей подписной базы. Пусть не быстро, но этот источник

    надо задействовать обязательно.

    Ну и материал, который спрятан под красивой правильной

    картинкой должен быть достойного содержания, естественно.

    К стати, на днях стартует тренинг Евгения по созданию сайтов.

    Кто испытывает в этом трудности или имеет желание создать свою

    интернет площадку для создания бизнеса — очень рекомендую.

    Кто уже начал свое продвижение в сети интернет с целью заработка

    и испытывает трудности в оформлении своих инфопродуктов,

    (книги 3D, коробки, чек листы и т.п.)

    милости прошу в свою студию lp.skyten.ru

    При ссылке на сайт «Я блогер» скидка 50%.

    Быстро, качественно, с гарантией!

    Ответить
  7. Спасибо, Евгений очень полезная и интересная информация. У меня такой вопрос: Что делать, если нужно создать обложку, а мысли, какую картинку поставить и что написать не идут? Что Вы делаете в таких случаях (кроме как заказать у фрилансера)?

    Ответить
    1. Евгений Вергус:

      Бывает что и у меня не все сразу получается )) Решаю задачу, пока не найду подходящую картинку или цвет ))

      Ответить
      1. Спасибо за совет))))

        Ответить
    2. Светлана:

      А я вдохновляюсь и составляю мудборды так — набираю в Гугле «сайты для вдохновения веб дизайнеров». Там столько классных сайтов выпадает, обязательно что-то вдохновит вас.

      Ответить
      1. Светлана, я тоже частенько гуляю по подобным страничкам!

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

    С уважением, Владимир.

    Ответить
    1. Евгений Вергус:

      Возможно в ближайшее время попробуем рассказать и том, как сделать баннер ))

      Ответить
    2. Владимир, в этом плане все просто! Берете свой любимый графический редактор, выбираете баннер-жертву и пытаетесь его повторить. Начинайте с простых. Только через практику можно придти к результату. Тут уже никто не сможет вам показать. Посмотрите видео. В нем четко сказано, что для баннера нужна идея. А кто знает Вашу идею кроме Вас? Все остальное — технические приемы.

      Ответить
    3. Владимир, я ответил Вам ниже.

      Ответить
  9. Получается, шрифт, цвета, кнопка, чем проще, тем лучше. Банер должен быть простеньким, но со вкусом и смыслом, в то же время не отвлекать от контента, но притягивать внимание. Этому еще нужно поучиться. 🙂

    Ответить
    1. Александр, всё как у Вашего тезки: «И опыт, сын ошибок трудных...» Просто нужна практика. Смотрите целенаправленно рекламу на TV — какие цвета, шрифты, фоны используются, какие композиции составляются из них. Реклама на TV очень дорогое удовольствие и делают ее настоящие ПРОФИ. Смотрите рекламу на раскрученных web-порталах, на уличные баннеры (иногда попадабтся шедевры)... В общем, ищите источники для вдохновения.

      Ответить
      1. Забыл добавить еще — нужно оценивать свою ЦА. Возраст — сильный аргумент для восприятия!

        Ответить
  10. Александра:

    Спасибо за полезную информацию.

    Ответить
  11. Евгений, как всегда очень понятно и на доходчивом языке все расписал и показал, Большое спасибо, для себя освежил информацию по баннерам =) Да, кстати, у себя на блоге я поставил интересный плагин MetaSlider слайдер, в него можно вставлять уже готовые баннеры и ссылки ... для перехода. Там есть интересные разные настройки как Баннеры будут работать и появляться. Вообщем идея такая я в одном рекламном месте использую 3-4 баннера которые меняются в слайдере ... 4 рекламы на одном месте=)) По моему получилось, нормально и интересно привлекает внимание... Можете заглянуть на блог и посмотреть в сайтбаре справа=))

    Ответить

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2018 Я блогер — Онлайн-школа Евгения Вергуса · ИП Вергус Е. Е. ОГРН 313618119000022. Копирование контента запрещено.
Служба поддержки  |  Политика конфиденциальности  |  Снятие ответственности