Как сделать картинку главной страницей
Как правильно оформить главную страницу сайта
Назначение главной страницы сайта
Главная страница — лицо сайта. Даже если наиболее востребованная информация содержится в каком-то определённом разделе, пользователям так или иначе время от времени будет необходимо пользоваться домашней страницей. Поэтому её содержимое и дизайн должны быть максимально продуманными.
В зависимости от типа сайта главная страница будет построена по уникальной схеме:
Тем не менее, существует стандартный набор элементов, почти неизменный от кейса к кейсу. Без него любой сайт будет выглядеть непонятным и неудобным. Оформление главной страницы сайта — это важная задача.
Что должно быть на главной странице сайта
Заголовок
Сайт должен в течение трёх секунд сообщить посетителям, о чём он и что вы можете предложить. В заголовке может быть всего несколько слов, но это одни из самых важных слов на сайте.
Аудитория сайта может быть неоднородной, и вам будет сложно найти несколько слов, чтобы достучаться всех. KISSmetrics рекомендуют составлять заголовок, охватывающий 20–35% посетителей, которым продукт или предложение ближе всего.
Мы выбрали простую формулировку, максимально общо описывающую продукты компании. Это B2B-предложение, которое сразу даёт понять, чем мы можем быть полезны бизнесу при построении digital-маркетинговой стратегии:
Система сквозной аналитики, коллтрекинга и управления рекламой
Коллтрекинг
Подзаголовок
Дополнение основного заголовка кратко описывает то, что вы делаете и предлагаете. Эффективный подзаголовок сосредотачивает внимание на болевой точке, которую решает ваш продукт или услуга, а также может приводить дополнительные доводы в пользу выбора именно вас.
Чтобы оптимизировать заголовки и текст для мобильных устройств, используйте более крупные шрифты. Небольшие шрифты могут заставить мобильных посетителей лишний раз масштабировать страницу, чтобы просто прочитать текст или нажать на ссылку.
Размер заголовков и подзаголовков должен быть не менее 22 пикселей, а основного текста — не менее 14 пикселей.
Мы решили сделать акцент на том, что наша целевая аудитория — бизнес, и она многочисленна.
Нам уже доверились более 20 000 компаний.
Оформление главной страницы сайта, примеры ниже: 
Призывы к действию — CTA
Цель главной страницы — заставить посетителей изучить сайт глубже или продвинуть их дальше по воронке. Включите два-три призыва к действию выше линии сгиба, направляющие на разные этапы цикла покупки.
CTA должны быть яркими и размещены на видном месте. Идеальны цвета, которые контрастируют с цветовой схемой домашней страницы, и в то же время вписываются в общий дизайн.
Оптимизируя CTA для мобильных пользователей, убедитесь, что он достаточно большой, чтобы его легко можно было нажать пальцем. Если вы используете кнопку, установите минимальный размер 44px на 44px, чтобы она был достаточно большой.
Подумайте и о добавлении отступов между CTA и прочими элементами, чтобы мобильные пользователи легко в него попадали, не нажимая случайно туда, куда не хотели.
Призывы к действию должны сопровождать пользователя и далее на странице. Вторичные CTA могут обеспечить дополнительные возможности конверсии для потенциальных клиентов, которые не заинтересованы в вашем основном предложении.
Это своего рода запасной план, альтернативный путь для посетителей, которые еще не готовы к решительным действиям или нуждаются в дополнительной информации.
В то время как основные CTA должны быть выше линии сгиба, на первом экране, вторичные CTA идут ниже, сопровождая посетителей при прокрутке вниз.
Мы предлагаем пользователям ознакомиться с большим количеством видео, кейсов, перейти на страницы продуктов, чтобы узнать о них больше.
Главная страница сайта, примеры, где есть CTA:
Вспомогательное изображение
Большинство людей — визуалы. Обязательно используйте изображение или даже короткое видео, которое четко указывает на то, что вы предлагаете. Изображения должны вызывать эмоции и побуждать к действию. Ни в коем случае не прибегайте к стоковым фото. Идеально, если вы провели фотосессию или сняли видео о своей работе.
Чтобы оптимизировать изображения для мобильных пользователей, используйте сжатые изображения. Причём сжаты они должны быть до загрузки на сайт — часто CMS сохраняют тяжеловесные картинки, просто номинально вписывая их в блок указанного размера. Кроме того, добавьте атрибут alt к изображениям на случай, если мобильное устройство пользователя блокирует любые изображения.
Мы выбрали визуализацию своего продукта на компьютере пользователя — это говорит о продукте наглядно и в то же время соответствует стилистике сайта.
Преимущества
Важно не только описать, что вы делаете, но и почему это имеет значение. Потенциальные клиенты хотят знать о ваших преимуществах.
Делайте текст простым и удобным для чтения, говорите на языке своих клиентов.
Социальное доказательство
Социальное доказательство является мощным показателем доверия. Ваш продукт или услуга могут быть лучшими в мире, но люди могут не поверить вам, если не услышат об этом и от других людей. Именно для этого следует разместить социальное доказательство.
Кейсы — лучший формат, подтверждающий экспертизу B2B.
Добавьте несколько отзывов на главной странице и, если это возможно, дайте ссылки на тематические исследования. Имена и фотографии придают отзывам больше веса.
Навигация
Чтобы снизить показатель отказов, предоставьте посетителям четкую навигацию по сайту. Сделайте меню навигации видимым вверху страницы и организуйте ссылки в иерархической структуре.
Обязательно проводите пользовательские тесты, чтобы убедиться, что посетители могут легко и просто найти тот или иной контент. Добавьте строку поиска.
Контентное предложение
Чтобы привлечь ещё больше потенциальных клиентов прямо с домашней страницы, предложите полезный контент:
Люди, которые могут быть не готовы купить продукт или заказать услугу, окажутся готовы вместо этого загрузить контент, который даст им больше информации по интересующей теме.
Отличительные особенности
В дополнение к преимуществам перечислите некоторые свои ключевые функции. Это даёт людям больше понимания, что представляют собой ваши продукты и услуги.
Опять же, соблюдайте лёгкую и ненавязчивую подачу.
Ресурсы
Большинство посетителей сайта поначалу не будут готовы покупать. Для тех, кто ищет дополнительную информацию, предложите ссылку на ресурсный центр, где представлены дополнительные данные о продукте и знания о нём.
Предложение узнать больше через специальный контент и поддержку не только дольше удерживает посетителей на сайте, но также помогает вам завоевать авторитет в своей отрасли и выработать позицию экспертов.
Возможно, вам понравится идея вставить пару-тройку дополнительных CTA, каждый для своего этапа в цикле покупки:
Показатели успешности
Помимо историй успеха клиентов награды и регалии также помогут произвести хорошее первое впечатление. Возможно, вы являетесь рестораном, получившим признание критиков. Ваше приложение могло быть признано лучшим.
Пусть посетители узнают о ваших достижениях прямо на главной странице. Как и социальное доказательство, это даст бизнесу больше доверия со стороны людей, не знакомых с историей компании.
Оптимизация для мобильных устройств
Независимо от того, настраиваете ли вы домашнюю страницу по шаблону или разрабатываете с нуля, убедитесь, что она полностью оптимизирована для мобильных устройств.
Сайты, оптимизированные для мобильных, не только эффективнее с точки зрения SEO, но и значительно улучшают пользовательский опыт для посетителей, открывающих страницу со смартфонов.
Создание удобной для мобильных устройств домашней страницы включает в себя оптимизацию заголовков, подзаголовков, основного текста, призывов к действию, изображений и многого другого.
Как сделать домашнюю страницу лучше
Простота — залог успеха
Сайты с простым дизайном имеют более высокие показатели конверсии.
Некоторые стараются втиснуть как можно больше информации в небольшое пространство главной страницы. Владельцы хотят похвастаться всеми своими продуктами, услугами, связями, контактной информацией и всем, что только можно представить.
Размещать много информации на сайте — не плохо, но весь контент не обязательно должен быть именно на домашней странице.
Когда объём текста минимален, а меню представлено только самым нужным набором опций, пользователям очень легко усвоить содержимое и сосредоточиться на главном.
Поэтому дизайн главной страницы должен быть простым.
Главная страница сайта, примеры:
Повысьте скорость загрузки
Скорость загрузки оказывает огромное влияние на показатели конверсии. Если сайт загружается слишком медленно, это приведет к потере конверсий.
Люди нетерпеливы. Сегодня в цифровую эпоху мы привыкли получать контент с молниеносной скоростью. Если сайт не загружается сразу, показатель отказов — bounce rate — может увеличиться.
Время загрузки страниц напрямую связано с их простотой.
Если на них размещены мегабайты изображений, длинные блоки текста, сложные динамичные меню, мигающие CTA и другие ненужные элементы, сайт будет загружаться очень долго.
Но бывает, что при всей простоте дизайна загрузка сайта всё ещё занимает значительное время.
В таком случае стоит пересмотреть хостинг. Самый дешёвый вариант размещения сайта может показаться привлекательным, но в итоге вы получаете соответствующее качество.
Стоит выделить дополнительные средства, но быть уверенным, что на сайте нет сбоев или проблем с загрузкой страниц, особенно главной.
Увеличение трафика на сайте и повышение конверсий легко окупят дополнительные расходы, как текущие, так и в долгосрочной перспективе.
Используйте качественные изображения
Изображения могут повысить показатели конверсии, это так. Сайты без изображений кажутся пустыми, скучными и непрофессиональными. Но это не значит, что нужно сходить с ума и размещать как можно больше картинок на главной странице.
Как мы упомянули, избыточное количество изображений может ухудшить скорость загрузки страниц. Кроме того, исследования Google показали, что страницы с меньшим количеством изображений имеют более высокие конверсии.
Используйте изображения экономно. Убедитесь, что все они выглядят профессионально. Если они смотрятся, как нелепые пробы пера в Paint, это плохой знак.
Не стоит делать вывод, что вообще нельзя использовать необходимые фотографии. Просто не нужно размещать их все на главной странице.
У вас должна быть подборка высококачественных изображений каждого товара, который вы продаёте. Это может быть и шесть, и десять фотографий только одного предмета.
Если бы вы размещали пять самых продаваемых товаров на домашней странице, у вас было бы на ней до 50 изображений, лишних и неуместных. Используйте одно изображение для каждого товара. Когда посетитель нажмёт на одно из них, только в том случае он увидит другие фото продукта в соответствующем окне.
Запускайте A/B-тесты
Допустим, вы внесли некоторые изменения в наполнение домашней страницы или обновили дизайн, а позже заметили, что конверсии увеличились. Это отличные новости, но есть нюанс.
Хотя показатель конверсий возрос, вы ещё не знаете, благодаря чему, а также достигнут ли пик.
Один из лучших способов подобрать оптимальный дизайн для главной страницы — это A/B-тестирование, также известное как сплит-тестирование.
A/B-тест подразумевает запуск альтернативных версий одной и той же страницы с целью определить, какая из них имеет более высокий коэффициент конверсии. 50% трафика видит один дизайн, а остальные 50% — другой.
Важно, чтобы при запуске тестов вы не меняли слишком много элементов. В противном случае невозможно определить, какой фактор повлиял на результаты. Лучше изменить только один элемент, например, текст кнопки CTA, цвет или расположение.
Люди, как правило, убеждены, что предложение, такое как скидка в 20%, поможет увеличить продажи и конверсии. Но как только они запускают A/B-тест, обнаруживают, что это в действительности не работает.
После того, как протестируете один элемент, измените что-то ещё и запустите другой тест.
Если сначала вы тестировали текст кнопки, то потом найдите оптимальный цвет. После этого — размер или размещение.
A/B-тестирование — это непрерывный процесс. Он должен продолжаться столько времени, сколько потребуется, пока вы не поймёте, что достигнут существенный результат.
Анализ результатов
Как понять, что страница оптимизирована и удобна для пользователей?
Во-первых, об этом скажут показатели конверсий. С помощью A/B-тестирования измеряйте влияние различных элементов дизайна и содержимого на поведение посетителей.
Часто изменение некоторого элемента страницы ведёт к повышению переходов, подписок, продаж. Нельзя с первого раза найти идеальное решение. Необходимо постоянно работать над дизайном и измерять эффект от нововведений.
Используйте сервисы измерения скорости загрузки сайта — например, Pingdom Tools. В нём подробно описаны технические характеристики тестируемой страницы, время появления каждого простейшего элемента на странице.
Учитывайте рекомендации таких сервисов. Проработка кода и структуры — важная составляющая эффективности главной страницы. Пользователи не терпят ожидания и покидают медленный сайт в первые три секунды.
Как сделать фон для сайта?
Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:
Фон для сайта
Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.
Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.
Основы работы с фоном в html
В качестве фона можно использовать несколько элементов:
Разберемся с применением каждого из них подробнее.
В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.
Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!
Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:
Воспользуемся самым простым вариантом центрирования:
Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]
Текстурный фон сайта
В первом примере для фона мы использовали большой и красивый пейзаж пустыни. Но за такую красоту приходится платить сполна. Вес изображения, выполненного в высоком качестве, может достигать нескольких мегабайт.
Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?
Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.
Средства CSS
Результат будет аналогичным.
Ну, вот мы и рассмотрели все варианты, как поменять фон на сайте. Теперь осталось лишь создать рисунок будущего ковра и расстелить его на страницах своего ресурса. Но это уже ваших рук дело.
Как сделать обложку сайта: практические советы арт-директора
Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте.
Сообщение важнее всего, а фоновое изображение задает правильную атмосферу. Поэтому стоит подобрать фотографию, которая не затрудняет чтение и соответствует тематике сайта.
При этом фотография не обязательно должна прямо иллюстрировать ваше предложение. Фотография — это фон, поэтому она может просто поддерживать коммуникацию. Например, обложка Tilda Education — девушка делает исследование, но это не значит, что сайт посвящен только исследованиям. В данном случае обложка — это настроение. Она вдохновляет и погружает в контекст.
Бесплатные изображения для сайта можно найти на профессиональных фотостоках, распространяющих картинки по лицензии Creative Commons Zero (CC0). Это значит, что изображение освобождено от ограничений авторского права, то есть его можно как угодно использовать и изменять, в том числе в коммерческих целях.
Примеры ресурсов с качественными изображениями: Unsplash, Pexels, Stocksnap, Rawpixel.
В идеале фотография для обложки должна быть пустой по центру: без сюжета и мелких деталей.
Текст на первом экране практически всегда располагается по центру. Если важный объект или сюжет спрятать под заголовком, его никто не увидит, а читать текст станет сложнее.
Фотография в обложке — это фон, который задает определенную атмосферу. Он может помочь усилить ваше сообщение, а может остаться незамеченным.
В целом, главное, чтобы посетитель легко прочитал текст. Например, у вас сайт конференции. На обложке написано название конференции, дата, время и место проведения. Если текст сливается с фоном и плохо читается, человек может просто не обратить внимания, проскроллить и не найти важную информацию.
Когда текст читается хорошо, то удачная фотография сделает его сильнее. Например, на обложку вы ставите фото с прошлой конференции. Люди видят, как проходят ваши события — у вас был большой зал и много людей, или наоборот камерная обстановка. Фотография заменяет пару-тройку абзацев текста. Но сначала все-таки люди должны узнать про место и время.
Моя цель — подобрать такое изображение, чтобы пользователь точно понял тему страницы. Это значит, что фотография должна отражать тему либо конкретно (интерьер со стульями для мебельной мастерской), либо косвенно (красивое морское побережье для лендинга турагентства). Чтобы подобрать изображение с косвенной темой, нужно понять, что в итоге получит клиент, или поставить фотографию с атрибутами, характерными именно для этой темы.
Вот несколько примеров шаблонов, которые сделали дизайнеры Тильды. Каждый из шаблонов — пример разного подхода к подбору обложки: