Как выбрать лучшее изображение баннера для главной страницы
Выберите главное изображение для своей домашней страницы
Выбор основного изображения баннера на главной странице вашего сайта влияет на цвета, настроение и выбор шрифта для всего вашего веб-сайта. Дизайнеры принимают во внимание множество факторов, включая цвета, размер и расположение, прежде чем выбрать так называемый «изображение героя». Чтобы найти подходящее изображение для вашего сайта, примите решение, принимая во внимание четыре фактора: тема, цвета, место, доступное для вашего сообщения, и то, как фотография будет выглядеть при обрезке на мобильном телефоне.
Найдите подходящую тему
Изображение баннера может отображать коллекцию ваших продуктов, вашу фотографию или физическое местоположение вашего бизнеса. Он также может изобразить сцену, которая вызывает эмоции, которые вы хотите, чтобы клиенты почувствовали, используя продукт или услугу, или демонстрирует ценность, которую они получат. Изображение не обязательно должно быть фотографией; это также может быть иллюстрация, которую вы нашли или для создания которой наняли художника.
Не стесняйтесь использовать собственные фотографии для баннера
Не бойтесь делать собственные фотографии для баннера. Мобильные телефоны позволяют делать высококачественные фотографии, а ваши личные фотографии являются подлинными и уникальными для вашего бизнеса. Создайте фотографию как горизонтальное изображение с достаточным пространством вокруг него, чтобы при необходимости нужно было его обрезать. Удалите отвлекающий фон, который не имеет отношения к фотографии. Убедитесь, что освещение хорошее, а фокус кристально чистый. Важно помнить, что при отображении вашего сайта на мобильном телефоне будет отображаться только центральная часть изображения, поэтому помните, что такое центральная часть изображения, или убедитесь, что она хорошо работает в качестве изображения баннера.
Выбирайте правильные цвета
Цвета изображения баннера очень важны. Они должны дополнять или соответствовать цветам вашего логотипа (если есть логотип) и цветам заголовков, кнопок и фона на вашем сайте. Когда я разрабатываю новый веб-сайт, я часто сначала нахожу изображение баннера, и это определяет выбор цветов.
Сопоставьте цвета изображения с цветами сайта
Если ищете стандартную фотографию, вы можете использовать названия цветов в качестве ключевых слов, например «бирюзовый», «фуксия» или «зеленый». Есть также несколько забавных генераторов цветовой палитры, которые позволяют загрузить изображение, и затем увидеть цветовую палитру, которую нужно использовать для сопоставления его с цветами веб-сайта.
Собаки вдохновили цвета сайта питомника Sweetbriar . Для баннеров мы использовали их собственные домашние фотографии, потому что их собаки очень фотогеничны, у них преобладают коричневые и бежевые окрасы. Рассмотрев несколько различных генераторов цветовой палитры для этого поста в блоге, я загрузил изображение домашней страницы и сгенерировал палитру цветов, которые есть в изображении. Хотя цвета для веб-сайта я подбирал вручную, результаты Colormind.io оказались очень похожими. Результаты цвета отображаются в виде шестнадцатеричных значений, что является стандартом для веб-цветов. Если вы использовали их в своих стилях дизайна, сначала они используются с хэштегом, например #EID5C2 для бежевого цвета, показанного в палитре ниже.
Squarespace — цветовая палитра для сайта
Изображение баннера — это первое изображение, которое люди видят, когда открывают ваш веб-сайт, поэтому это идеальное место, чтобы подчеркнуть ваше сообщение и призыв к действию. Если вы используете изображение баннера в качестве фона для текста или других элементов дизайна, вам нужно быть уверенным, что текст, кнопки или формы подписки по электронной почте, которые вы добавляете, отображаются таким образом, который подходит как для компьютеров, так и для мобильных телефонов. Обратите внимание: не обязательно добавлять текст к изображению баннера, если вы предпочитаете, чтобы оно само по себе говорило, но посетителям полезно сразу знать, что вы делаете, когда они открывают веб-сайт.
На моем веб-сайте Squarespace навигация является частью изображения баннера. Основное сообщение и кнопка-ссылка на страницу «Услуги») размещаются поверх изображения. Я также показываю значки социальных сетей и электронной почты в верхней части сайта для удобства посетителей.
И Squarespace, и большинство других конструкторов DIY создают адаптивный дизайн, автоматически изменяя размер дизайна вашего сайта для соответствия различным устройствам, включая ноутбуки, планшеты и мобильные телефоны. На экранах мобильных телефонов изображение баннера обрезается, поэтому отображается только центральная часть фотографии. Вам следует использовать функцию предварительного просмотра на мобильных устройствах при разработке своего сайта, чтобы убедиться, что автоматическое кадрирование, а также текст или другие элементы дизайна на фотографии по-прежнему выглядят хорошо.
Как видите, изображение баннера моего сайта показывает только центральную часть изображения баннера.
Фотография баннера на главной странице обрезается при просмотре на мобильном устройстве.
Оптимизируйте изображение баннера перед загрузкой
Помните об этих рекомендациях для окончательной версии изображения баннера, которое вы загружаете на свой сайт.
Обрежьте изображение, чтобы удалить ненужный фон, и убедитесь, что центральная часть изображения хорошо подходит для версии, которая будет отображаться на мобильных телефонах.
Если загружаете фотографию со стокового фотосайта, вы можете выбрать размер, близкий к 1920 пикселей в ширину и 1280 пикселей в высоту (средний размер для загрузки на Unsplash или большой размер на Pixabay). Соотношение сторон 3:2 кажется хорошей целью. Для исходных изображений измените размер изображения до 2000–2500 пикселей в ширину для Squarespace или до 1500–2000 пикселей в ширину для Weebly (и не менее 1080 пикселей в ширину). Высота может быть гибкой, но обычно я получаю х баннер паук на главной странице высотой от 1000 до 1500 пикселей. Верхняя и нижняя часть изображения баннера, вероятно, будет обрезана на большинстве дисплеев, поэтому просмотрите изображение в редакторе вашего сайта, чтобы убедиться, что оно выглядит хорошо.
Сохраните изображение в формате .jpg с низким качеством, которое по-прежнему будет выглядеть четким и резким. Это уменьшает размер файла и увеличивает скорость загрузки сайта. Я стараюсь использовать файлы размером от 100 до 200 КБ, если изображение по-прежнему выглядит хорошо.
Не сможете решить, какое изображение баннера нравится?
Дизайнеры и маркетологи агентств используют так называемое A/B-тестирование. Это необычный способ сказать, что они пробуют разные версии дизайна, чтобы увидеть, какой из них предпочтут их клиенты. Если вы выбрали пару изображений баннера и не сможете решить, какое из них использовать, вы можете попробовать одно из них на некоторое время и посмотреть, просматривает ли ваш сайт больше людей и посещают ли они больше страниц вашего сайта. Вы также сможете увидеть, успешен ли ваш призыв к действию (конвертирует ли он посетителей?). Затем попробуйте другое изображение, которое нравится, и сравните результаты, чтобы решить, какое изображение больше нравится вашим клиентам.
А как насчёт баннеров на других страницах?
В этом сообщении блога я сосредоточился на выборе изображения баннера для домашней страницы, но на многих веб-сайтах изображения баннеров есть на каждой странице. Вам решать, хотите ли вы повторять одно и то же изображение баннера на каждой странице или иметь разное изображение баннера на каждой странице. Я опробовал оба подхода на своем сайте, изменив его дизайн, и обнаружил, что у меня нет предпочтений. Если решили использовать разные изображения баннеров для каждой страницы веб-сайта, убедитесь, что каждое изображение имеет тот же стиль, внешний вид и цвета, что и изображение баннера, которое вы выбрали для домашней страницы. Вместе они должны составить соответствующий набор. Также обратите внимание, что баннеры на других страницах веб-сайта обычно немного ниже, чем на главной странице, даже если они используют то же изображение баннера. Это позволяет изображению главной страницы оказывать большее влияние.
Используя эти лучшие практики, поиск изображения баннера для вашего сайта может стать увлекательным и творческим процессом. А правильное изображение баннера также может сначала превратить случайных посетителей в заинтересованных читателей, что побудит их совершить действие, например заказать бесплатную консультацию, подписаться на список рассылки или купить ваш продукт.
