Создание баннеров для сайта
Баннер на главной видит почти каждый, кто зашёл на сайт, и чаще всего с телефона. Мы рисуем его сразу под ваш слайдер: картинка держит смысл при любой ширине экрана, заголовок и кнопка остаются текстом, а файл весит столько, чтобы первый экран не грузился секундами.
Компьютер: кадр виден целиком, текст набран поверх картинки.
Текст поверх картинки, а не внутри неё
Слайдер растягивает картинку на всю ширину блока. На широком экране видно всё, на телефоне — середина кадра, края уходят за рамку. Если заголовок нарисован в самой картинке, на телефоне он обрезается или становится мелким, как сноска.
- Заголовок, подпись и кнопка — текстомНа сайтах на нашей CMS эти три поля заполняются в админке отдельно от картинки. Поменять «−20 %» на «−30 %» может менеджер, дизайнер для этого не нужен.
- Свой текст на каждом языкеЕсли у сайта несколько языковых версий, подписи слайда переводятся в той же форме, а картинка остаётся одной.
- Главное — в безопасной зонеСлайдер берёт для всех экранов один кадр. Поэтому товар, лицо или предмет ставим в центральную полосу, которая видна и на компьютере, и на телефоне.
- Можно видеоВместо картинки слайдер принимает короткий ролик MP4 или WebM без звука. Готовим его вместе с неподвижным кадром на случай медленного интернета.
Сколько весит картинка в слайдере и во что это обходится при загрузке
Слайдер стоит в первом экране, поэтому браузер ждёт его раньше всего остального. Выберите формат, ширину и качество — увидите примерный вес файла и время его загрузки на мобильном интернете.
Оценка для фотографического кадра высотой в треть ширины; скорость — 10 и 1,5 Мбит/с. Настоящий вес зависит от картинки: на однотонном фоне файл легче, на мелкой фактуре — тяжелее.
Баннеры для РСЯ и ВКонтакте — в размерах площадки и с маркировкой
Если картинка уходит в рекламную сеть Яндекса или в рекламный кабинет ВКонтакте, рисуем его в размере выбранного места размещения — у площадок их несколько. Пометку «Реклама», рекламодателя и идентификатор креатива (erid) обычно добавляет сама площадка: в Яндекс Директе и VK Рекламе маркировку берут на себя их операторы рекламных данных, а erid передаётся в ссылке. Мы следим, чтобы важный текст не лёг под служебные элементы площадки. Без маркировки по закону о рекламе размещать такую рекламу нельзя.
От задачи до слайда на сайте
Место и цель
Где стоит слайд, куда ведёт кнопка и что человек должен понять за три секунды
Эскиз в вашем слайдере
Показываем кадр прямо в шапке вашего сайта, а не на белом листе
Три ширины
Проверяем компьютер, планшет и телефон: ничего важного не уходит за край
Сжатие и загрузка
Отдаём WebP и исходник. Если сайт на нашей CMS, ставим слайд сами
Стоимость баннеров
| Что | Что входит | Цена |
|---|---|---|
| Баннер для слайдера сайта | Кадр с безопасной зоной, проверка на трёх ширинах, сжатый WebP и исходник | от 4 500 ₽ |
| Полоса раздела или акции | Полоса в каталоге или на странице услуги в общем стиле со слайдером | от 4 500 ₽ |
| Рекламный баннер | Один размер под выбранное размещение в РСЯ или ВКонтакте | от 3 500 ₽ |
| Видео вместо картинки | Короткий беззвучный ролик из ваших материалов и неподвижный кадр к нему | после просмотра материалов |
Что спрашивают о баннерах
Сайт сделан не у вас. Нарисуете слайд под него?
Да. Пришлите адрес сайта: посмотрим размеры блока и то, как ваш слайдер обрезает картинку на телефоне, и нарисуем под это. Загрузить его на сайт сможете вы сами или ваш разработчик.
Почему не написать заголовок прямо на картинке?
На телефоне такой текст обрезается или мельчает, его не читает поиск и экранный диктор, а каждая правка цены означает новый файл. Текст поверх кадра меняется в админке за минуту.
Откуда возьмутся фотографии?
Лучше всего — ваши: товар, команда, объект. Если своих нет, подбираем на фотостоках с лицензией для коммерческого использования и сообщаем, откуда снимок. Сгенерированные нейросетью картинки используем, только если вы не против.
Сколько слайдов нужно?
Обычно хватает трёх. Дальше четвёртого слайда почти никто не листает, поэтому самое важное — на первом.
Сколько вариантов покажете?
Два направления на эскизе, затем доводим выбранное. На каждом этапе — до трёх кругов правок, дальше — 2 800 ₽ в час.
Сделаете анимацию?
Для слайдера сайта лучше короткое видео: GIF на всю ширину весит в разы больше и выглядит хуже. Для рекламных площадок анимацию делаем в формате, который они принимают.
Что ещё пригодится сайту
Пришлите адрес сайта — скажем, каким будет баннер
Расскажите о задаче — уточним детали, предложим состав и назовём стоимость по опубликованному прайсу.
- Цена и состав — в договоре
- Три круга правок на этап
- Гарантия 12 месяцев на наш код
- Домен и исходники ваши, лицензия бессрочная