Главная страница обычно является или транзитной, или сразу продающей.

Транзитная страница: посетитель зашёл, нашёл нужную ему ссылку, кликнул на неё. То есть задача транзитной страницы - переправить посетителя туда, куда ему нужно. Вот посмотрите на Озон: https://www.ozon.ru или на https://www.artlebedev.ru/ По сути просто наборы ссылок.

Если главная страница является продающей, то она содержит необходимую информацию для совершения какого-то целевого действия, а также ссылки на внутренние страницы. Вот посмотрите на https://www.masterclass.com, где цель главной страницы - продать подписку на курсы. Но также можно открыть презентации отдельных курсов, тем, авторов, можно перейти к статьям.

Мы будем делать главную страницу, имея цель продать что-то. То есть на странице будет содержаться информация, достаточная для того, чтобы понять, кто вы и что предлагаете. Если кому-то нужна будет дополнительная информация, то можно будет уйти на страницу с описанием услуг или в блог.

Первый экран — это первое впечатление, которое производим на посетителя.

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

Передача сути всегда происходит текстом. Текстовый заголовок — это базовый элемент первого экрана.

Заголовки могут быть простыми:

• Парикмахерские услуги
• Ремонт Audi
• Оформление свадеб
• Конференция по маркетингу
• Ремонт квартир
• Ремонт электрики
• Организация свадеб
• Регистрация товарных знаков
• Курсы английского языка
• Лечение зубов
• Косметология
• Создание сайтов
• Дизайн интерьеров

Простой заголовок не передаёт каких-то преимуществ, нюансов услуг. Но выполняет ключевую задачу: даёт однозначное понимание того, что находится на странице.

Многие услуги не требуют чего-то большего, чем простой заголовок.

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

И поскольку заголовок — это тот текст, который скорее всего прочитают, возникает желание заложить в него что-то большее, нежели просто название услуги.

Примеры заголовков, которые раскрывают детали об услуге:

• Авторизованный сервис по ремонту Audi c гарантией от 2 лет
• Лечение зубов без боли и страха
• За 1 месяц научим говорить на английском языке
• Ремонт квартир в рассрочку с ежемесячным платежом от 7000 рублей
• Организация свадеб без косяков
• Регистрация товарных знаков с финансовой гарантией

Заголовок, который раскрывает детали об услуге, не всегда лучше, нежели обычный. И для иллюстрации этой идеи стоит привести следующую аналогию. Есть кто-то уверенный, опытный, мудрый, кто говорит: "Строю дома". И этот кто-то внушает чувство уверенности своей немногословностью и отсутствием какой-то суеты.

И есть кто-то, у кого не особо большой опыт, но кто пытается получить клиента. И он пытается прямо на старте рассказать про что-то чудодейственное: "Построю дом за 2 месяца, главное, дайте предоплату. Гарантирую всем, что умею, что в срок уложусь". Вроде, предложение звучит лучше, но кому-то будет ближе спокойная уверенность.

Иногда не стоит вываливать главное сразу, а стоит постепенно к этому подвести.

Иногда стоит поговорить об услуге, показать фотографии, продемонстрировать результаты, прежде чем заявлять что-то из серии "Сделаем за 2 месяца или вернём деньги".

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

Текст для заголовка можно сделать на основе 4 составляющих:

• Польза
• Детализация
• Уникальность
• Время

Польза — это то, что мы даём клиенту:

• Увеличим продажи;
• Создадим интерьер мечты;
• Отремонтируем автомобиль;
• Вернём просроченную задолженность;
• Организуем свадьбу;
• Сэкономим на электроэнергии;
• Создадим имидж;
• Научим говорить на английском.

Уникальность — за счёт чего приносится польза, что у вас есть особенного, чтобы принести пользу:

• ... за счет авторской методики Гримми А.Н. ...
• ... с помощью внедрения IT-системы ...
• ... с использованием швейцарских материалов ...
• ... в новом event-пространстве ...
• ... погрузив в атмосферу 60-х ...
• ... без выезда и необходимости встречи ...
• ... по фотографии ...

Детализация — это уточнение нюансов оказания услуги

• ... в 2 раза ...
• ... на 30% дешевле ...
• ... за 1 млн. рублей ...
• ... за % от результата ...
• ... по 39 параметрам ...
• ... с пожизненной поддержкой ...
• ... с оплатой за результат ...
• ... с бесплатной диагностикой ...
• ... кандидатами медицинских наук ...
• ... с двойной гарантией по договору ...
• ... как у компании Тесла ...

Время — это элемент заголовка, имеющий отношение к какому-то временному аспекту вашей услуги:

• ... за 2 месяца;
• ... до конца августа;
• ... в течение недели;
• ... быстрее в 2 раза;
• ... 14 дней бесплатно;
• ... месяц бесплатно;
• ... точно в срок;
• ... без опозданий.

• Используя данные 4 составляющих, вы можете создавать заголовки, подстёгивающие к дальнейшему изучению страницы и обращению в компанию.
  
  Акцентируем внимание на том, что не стоит указывать:
• Заявления, которые нельзя подтвердить: "лучший", "самый дешевый"
• Выражения-клише: "широкий ассортимент", "гибкий подход", "индивидуальный подход"
• Обычно не стоит использовать выражения с акцентом на негатив: "при поломке", "в случае неудачной стрижки", "если свадьба пойдёт не плану".

1. Подзаголовок. Можно даже добавить вводный текст.
2. Изображение или видео.
3. Кнопка, слайдер. Попробуйте, действительно интересный формат, когда ключевая идея передаётся двумя способами: с помощью текста и с помощью текста и изображения. Данный блок находится на Базиуме в категории Слайдеры (Sld08: Слайдер с текстом и кнопкой).
4. Часто первыми экранами выступают обложки (в списке блоков на Базиуме они так и называются "Обложки"). Это блоки, которые занимают 100% экрана вне зависимости от того, это экран смартфона или компьютера.

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

Если обобщать, то первый экран — это чёткая передача ключевой идеи. Задача минимум: сделать так, чтобы посетитель захотел изучить информацию далее. Задача максимум: сообщить информацию так, чтобы посетителю захотелось обратиться за услугой.

Первый экран — это как начало общения в реальной жизни. Вот мы представились, а затем спросили: "О чем вам рассказать в первую очередь?"

Так, а что будем делать на вашем сайте на первом экране? Потом, при развитии сайта, возможны варианты и разные спецэффекты, но пока мы берём следующий формат:

Следующее, что отразим на главной странице, будут услуги.

Услуги отразим с помощью сочетания двух блоков:

• Блок с карточками, где каждая карточка = 1 услуга.
• Кнопка перехода на страницу с услугами.

Вот такая структура:

Вот тут можно посмотреть на то, что пишут компании: https://ratingruneta.ru/web/, https://tagline.ru/design-studios-rating/.

А тут просто специалисты: https://uslugi.yandex.ru/213-moscow/category/kompyuteryi-i-it/sajtyi-pod-klyuch--346 

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

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

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

Обычно человек без опыта ставит там какой-нить ужас-ужас. Я вот такие иллюстрации уже вижу лет 10, и их продолжают использовать:

Например, абстракции.

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

Это также изображения из Pexels. Найдены по запросам "Дизайн", "Онлайн магазин" и "графики".

Также можно использовать иллюстрации (можно брать в фотобанке Shutterstock + в гугле по запросам вида "design bundle"). Вот пример с сайта https://www.ls.graphics (я там покупал набор графики для салона красоты)

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

*** Просто для справки. Должность человека, подбирающего иллюстрации, называется бильдредактор. Название происходит от немецкого bild - изображение. Так что вы не просто подбираете изображения, а выполняете работу бильдредактора. ***

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

После услуг вставляем блог с работами.

Ранее мы создали 4 поста и опубликовали их (то есть перевели их режима "черновик" в "опубликовано").

Теперь добавим блог на главную.

Также включайте заголовок блока с блогом и пишите туда что-нибудь из серии: Блог / Последние работы / Портфолио / ...

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

Цитата

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

Выбирайте один из 3 блоков в категории Цитаты:
Fb01: Отзыв
Fb04: Отзыв
Fb06: Цитата

И добавляете после блока с услугами. Напишите что-то о работе с вами. Только, пожалуйста, не пишите про "дёшево". Напишите что-то душевное :-)

Форма

Потом берёте и добавляете блок с формой. Называете её как-нибудь из серии "Получить коммерческое предложение" или "Рассчитать стоимость работ".

И готово!

Наша главная страница структурно готова. Далее мы её отшлифуем в плане шрифтов, отступов и цветов.

У меня получилась вот такая страница (я делал её для гипотетического Степана Гаврилова):