Руководство по оформлению сайта

Задумываетесь о создании сайта, но не до конца понимаете, зачем он нужен, когда все вокруг переходят в соцсети?

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

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

Веб-дизайнеры Анна Асадова и Ирина Павлова рассказали, как оформить сайт от иллюстраций до форм обратной связи. Читайте статью и узнаете, почему главная «фишка» крутого сайта — не дизайн, а удобство и простота.

Как оформить сайт: 5 секретов оформления

Как оформить сайт, чтобы он приносил пользу и вам, и вашим читателям? Обязательно ли делать сложный дизайн, включать фантазию и придумывать замысловатые описания? На самом деле всё просто — ваш сайт должен нести пользу и быть понятным.

Эксперты Анна Асадова и Ирина Павлова рассказали, какие простые правила и хитрости увеличивают эффективность сайтов.

5 советов для создания крутого сайта:

1. Используйте цвет, чтобы управлять вниманием пользователя.

Хотите, чтобы человек совершил действие и нажал на кнопку? Выделите её контрастным или ярким по отношению к фону цветом. Например, часто можно встретить белую кнопку на чёрном фоне или красную на белом.

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

2.   Добавляйте изображения.

Больше доверия вызывают «живые» фотографии, которые вы сделали самостоятельно. Если такой возможности нет — используйте фотостоки или закажите иллюстрации у дизайнера.

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

Например, для салона красоты хорошо работают фотографии «до» и «после», чтобы клиент сразу понимал выгоды от процедуры. Для магазина продуктов подберите яркие фотографии товаров или блюд, которые из них можно приготовить дома.

3.   Разместите отзывы на сайте.

Раздел с отзывами — доказательство вашей надёжности и подтверждение репутации. Отлично работают видео отзывы, если таких нет — оформите отзывы в формате скриншотов или изображений в едином стиле.

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

4.   Внедряйте сторителлинг.

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

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

Давайте проследим, как на сайте Курсбург закрывают боли клиентов.

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

На втором экране есть основной заголовок «Курсбург ваш сервис-помощник по выбору дополнительного образования». На экране приводится статистика по количеству учеников, курсов и направлений, чтобы вызвать доверие клиента.

После нескольких блоков с курсами онлайн, в Москве и Петербурге идёт блок с закрытием всех возражений «Почему лучше всего выбирать курсы в Курсбург?»

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

5.   Упрощайте там, где можно упростить.

Сайт должен быть максимально удобным и полезным. Не перегружайте его лишней информацией и дизайном ради дизайна. Человек, который переходит по ссылке вашего сайта, должен быстро находить информацию, которая ему нужна.

Если для этого придётся открыть 10 окон, он уйдёт к конкурентам, у которых получить нужную вещь можно быстрее и проще.

Что должно быть на сайте: 9 правил оформления

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

Виды сайтов:

1. Одностраничный — посадочная страница для продажи конкретного товара или услуги, личный сайт-визитка эксперта или блогера.
2. Многостраничный — сайт организации, блог, на котором пользователи могут регистрироваться и добавлять свои публикации, сайт для обучения с личным кабинетом для каждого пользователя.
3. Интернет-магазин — обычно многостраничный сайт-каталог, на котором есть несколько страниц: «о компании», «контакты», каталог с фильтрами для поиска и подробным описанием товаром.

Придерживайтесь правила простоты и понятности вашего сайта, вне зависимости от его категории. Сайты компаний оформляют в корпоративном стиле, блоги и образовательные платформы — минималистично и лаконично.

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

Конечно, сайт свадебного салона будет оформлен романтично, а интернет-магазин детских товаров — ярко, красочно и с множеством элементов.

9 правил оформления сайтов:

1. Цветовая палитра должна состоять не более чем из 3-4 цветов: чёрного, белого и 1-2 поддерживающих — в цветовом круге дополнительные должны находиться напротив друг друга.

2. Используйте не более 2-ух шрифтов: один декоративный для заголовков, второй для наборного текста.

3. Выбирайте иконки из одного пака или подбирайте гармоничные — у всех иконок должны быть одинаковые толщина линий и стиль.

4. Не выравнивайте посередине текст высотой более 3-ёх строк.

5. Оставляйте больше «воздуха» и свободного пространства между блоками.

6. Делайте кнопки и формы обратной связи контрастными по отношению к фону и оформляйте их одинаково, чтобы клиент не запутался.

7. Не перегружайте кнопки и сайт в целом сложным дизайном — это уместно для сайтов дизайнеров, дизайн-студий и креаторов, которые хотят сразу показать свои навыки.

8. Тщательно продумывайте навигацию — она должна быть лёгкой. Пользователь должен легко перейти и вернуться на нужную страницу.

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

Как оформить элементы сайта: от главной страницы до заголовков и иллюстраций

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

4 элемента правильной структуры сайта:

1. Шапка с меню и логотипом компании (Header).
2. Главная страница с обложкой.
3. Подвал (Footer) — элемент, расположенный в нижней части сайта. В нём прописываются основные разделы, контакты, ссылка на поддержку сайта, правовая информация.
4. Блок с контактной информацией: адресом, телефонами, электронной почтой и ссылками на социальные сети.

Важно правильно оформить главную страницу сайта, чтобы пользователь быстро ориентировался на сайте, «зацепился» и совершил необходимое целевое действие: позвонил, оставил заявку, прошёл квиз.

3 признака, что главная страница оформлена хорошо:

1. Информативность. Пользователь сразу узнаёт важную информацию о компании или продукте, выгоды и основные преимущества.
2. Функциональность. Страница должна быть максимально простой и удобной. На ней можно разместить форму для заказа обратного звонка, сделать виджет с онлайн-консультантом, разместить кнопки для навигации по сайту.
3. Визуальная привлекательность. Используйте простой дизайн, гармоничные цвета, контрастные кнопки.

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

5 правил оформления заголовков и текстов на сайте:

1. Выравнивайте текст по левому краю. По центру можно выровнять текст высотой не более 3 строк.
2. Разделяйте текст на абзацы и оставляйте между ними «воздух». Текст-полотно читать неудобно, пользователь психологически воспринимает большой текст как что-то сложное и уходит.
3. Соблюдайте правильные размеры. Самый большой шрифт на сайте не должен быть крупнее 72 pt, а самый мелкий — не менее 12 pt.
4. Заголовок — обычно составляет 180–200% от размера основного шрифта или 32-36 пункта. Подзаголовок — 130-150% от размера основного шрифта или 21-24 пункта.
5. Междустрочный интервал «интерлиньяж» должен равняться 150% размера шрифта. Например, если размер текста 14 pt, интерлиньяж — 21 pt.

Последний по списку, но не по значимости, элемент — иллюстрации.

3 рекомендации для оформления иллюстраций на сайте:

1. Используйте оригинальные фотографии и делайте их в едином стиле.
2. Подбирайте изображения на фотостоках. Они бывают платными, тогда купите картинки и сохраните лицензию на изображение, чтобы избежать проблем с авторскими правами.

Среди бесплатных фотостоков можно выделить: Unplash, Freepic и Pixabay.

3. Оптимизируйте вес изображений через специальные сервисы, чтобы итоговый сайт загружался быстрее. Оптимальный вес файла — до 10 Mб. Сжать картинки можно с помощью специальных сервисом, например, Optimizilla.

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

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

Стоимость курсов по сборке сайтов на конструкторе Tilda варьируется от 2 000 до 25 000 рублей, продолжительность — от 3 до 25 занятий, в зависимости от программы.

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

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

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

Вам может подойти это обучение:

1. 10 Лучших Курсов Обучения Созданию Сайтов
2. 10 Лучших Курсов по Веб-Дизайну Онлайн
3. Лучшие Курсы Веб-Дизайна в Санкт-Петербурге
4. 10 Лучших Компьютерных Онлайн-Курсов от 2 000 Рублей
5. Лучшие Курсы Обучения Маркетингу от 990 Рублей
6. Курсы обучения NoCode
7. Курсы обучения ZeroCode

Понравилась статья? Ставьте лайки и делайте репост, чтобы советы веб-дизайнеров всегда были под рукой!

Читайте также:

1. Что Такое Кейс? 10 Экспертных Советов, Как Создать и Оформить Свой Кейс!
2. Как Создать Сайт Самому? 7 Рабочих Правил и Пошаговый План, Которые Помогут Создать Качественный Сайт
3. Что Такое Цели по SMART? 6 Эффективных Способов, Как Ставить Цели и Достигать Их
4. Как Зарабатывать в Интернете? ТОП-8 Востребованных Онлайн-Профессий, Которые Позволят Зарабатывать в Интернете до 300 000 рублей
5. Как Набрать Подписчиков в Инстаграм? 16 Эффективных Способов, Как Быстро Набрать Подписчиков

Дата публикации:07.09.2021 @ 19:26

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

Какие задачи решает главная страница

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

Идеальная главная страница должна обладать следующими характеристиками:

1. Информативность. На главной посетитель должен найти короткий и четкий ответ на ряд вопросов:

• Общую информацию о бизнесе (что это за компания/сайт).
• Общую информацию о продуктах (что здесь можно купить).
• Информацию о выгодах (почему стоит сотрудничать с этой компанией и покупать ее продукт).

Если речь идет о главной странице известных брендов, например, «Сбербанка» или Microsoft, информацию о бизнесе и выгодах можно пропустить.

1. Резонанс с целевой аудиторией. Главная должна обращаться к потенциальным и существующим клиентам проекта на их языке. Избегайте профессионального сленга и не перехваливайте себя.
2. Убеждающее ценностное предложение. Вы должны в двух словах рассказать посетителю, почему стоит сотрудничать с вами. Кстати, эту информацию можно передать не только словами.

1. Юзабилити и функциональность. Главная должна быть интуитивно понятной и простой в использовании. Удобная навигация, формы регистрации и авторизации, возможность заказать обратный звонок, адаптация к мобильному трафику, возможность купить некоторые продукты с главной, — вот только некоторые компоненты, делающие страницу юзабильной и функциональной. При этом главная не должна быть перегружена контентом, элементами управления и функциональными блоками.
2. Наличие призыва к действию. Главная должна ненавязчиво приглашать пользователя совершить нужные владельцу сайта действия: от перехода в раздел сайта или подписки на рассылку до заказа обратного звонка или покупки.
3. Динамичность. Главная страница должна постоянно изменяться и отвечать актуальным потребностям аудитории. Этого можно добиться с помощью автоматического обновления анонсов статей и новостей, ротации продуктов, представленных на главной, других форм динамического контента.
4. Визуальная привлекательность. Это очевидное требование, однако владельцы сайтов иногда о нем забывают. Первое впечатление о сайте возникает в течение долей секунды после приземления. Оно зависит именно от визуальных характеристик посадочной страницы.

Как оформить логотип

Логотип в левом верхнем углу сайта — это не просто элемент брендирования. Он выполняет функцию навигационного центра. Пользователь может мгновенно вернуться на главную с любой страницы ресурса, просто кликнув по логотипу.

Не тратьте время и деньги на сложный графический дизайн. Вы можете самостоятельно сделать красивый текстовый логотип. Достаточно выбрать визуально привлекательный шрифт и написать название вашей компании. Обратите внимание на логотипы известных компаний:

Какой должна быть навигация

Проектируя навигацию, помните, что каждый посетитель вашего сайта побывал на тысячах других ресурсов. Он сталкивался только с двумя типами меню: вертикальным и горизонтальным. Он может найти кнопку «Контакты» практически с закрытыми глазами: она крайняя справа в горизонтальных меню и нижняя в вертикальных. Не изобретайте велосипед, сохраните привычную для пользователей навигацию.

Иногда инновации вредят эффективности. Обратите внимание на это меню навигации:

Подробнее о навигации читайте в нашей статье.

Нужен ли футер

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

Каким должно быть ценностное предложение

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

• О чем этот сайт, какой бизнес он представляет?
• Что можно приобрести на этом ресурсе?
• Почему это выгодно, каковы преимущества перед конкурентами?

Не вздумайте публиковать ответы на главной. Пользователи перегружены информацией, поэтому им некогда читать скучные тексты о компании «А», которая производит лучшие продукты и продает их по самым низким ценам.

Постарайтесь сократить ответы до нескольких предложений. Структурируйте текст, попробуйте заменить некоторые мысли изображениями. Обратите внимание на следующие изложения ценностных предложений:

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

К сильным сторонам этого варианта изложения относятся:

• Привлекающий внимание заголовок. Посетитель сразу видит, что он может получить и для кого предназначен продукт.
• Описание сервиса подчеркивает его преимущества. Оно короткое и информативное.
• Изображение удачно вписывается в концепцию страницы.

Здесь можно было бы добавить разве что несколько слов об отличиях от конкурирующих продуктов.

Банк «ТКС» не нуждается в представлении. Поэтому ценностное предложение акцентировано на флагманском продукте организации. К преимуществам этого способа изложения относятся:

• Лаконичное описание преимуществ.
• Отсутствие лишней информации.
• Ориентация на немедленную конверсию.

Помогите посетителю выбрать наиболее желаемое для вас действие

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

Если вы не можете ограничиться одним предложением на главной, как это сделал «ТКС», помогите посетителю выбрать правильный вариант. Выделите наиболее желаемое для вас действие. Это можно сделать за счет размера и цвета кнопки или формы, их расположения или описания.

На сайте «Евросети» есть несколько предложений: подписка на рассылку, сопутствующие сервисы, разделы сайта. Однако главное предложение пользователь видит в центре экрана. Он может купить самую новую продукцию, сэкономив время на поиске товара в каталоге.

Изображения на главной

Изображения обеспечивают визуальную привлекательность страницы. Представьте следующий сайт без фоновой фотографии:

Можно написать о красоте дома, его удачном расположении и уютных комнатах. А можно показать все это с помощью фото.

Если вы продаете дома, ювелирные услуги, дорогие авто или услуги массажа, то легко найдете фото, заставляющие пользователей немедленно захотеть ваш продукт. Как быть, если вы продаете полисы страхования, услуги факторинга, терминальные серверы или обучение трейдингу? Не вздумайте покупать стоковые фотографии с радостно улыбающимися людьми. Лучше сделайте реальные скриншоты ваших программ, сфотографируйте настоящих клиентов или сотрудников в офисе.

Оформление главной — это бесконечный процесс

Главная страница должна постоянно совершенствоваться. Используйте сплит-тесты для проверки новых гипотез, помогающих развивать лицо вашего сайта. В погоне за совершенством избегайте ловушек: не перегружайте главную страницу лишними элементами. Используйте «Вебвизор», чтобы понять поведение и потребности посетителей. Благодаря этому у вас всегда будут идеи по улучшению главной страницы.

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

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

Что должно быть на главной странице сайта, как увеличить ее конверсию и как определить ее успех? Обо всем этом поговорим в сегодняшней статье!

Почему главная страница так важна

Тони Хайль (Tony Haile) из Chartbeat утверждает, что у сайта есть всего 15 секунд, чтобы заинтересовать посетителя, иначе он неимоверно пойдет искать дальше то, что не смог найти на вашем ресурсе. Это совсем не значит, что у вас нет удовлетворяющей пользователя информации, может быть, она есть, но находится, например, в конце страницы либо в другом разделе. Но пользователь до туда не дошел, так как сайт не произвел особого впечатления.

Основные задачи главной страницы:

• Информационная. Рассказывает посетителю куда именно он зашел, какие услуги предоставляет компания и чем она вообще занимается.
• Направляющая. Быстрое перемещение между всеми разделами – одна из ключевых функций. Не должно быть такого, что какой-то важный раздел был «зарыт в дебрях». Навигация может быть организована с помощью меню либо активных кнопок.
• Продающая. Доверие компании повышается с помощью демонстрации преимуществ, выгод для пользователя, а также хорошим маркетинговым ходом.
• Коммуникативная. Без коммуникации сейчас никуда. Если на главной странице не будет никаких способов взаимодействия с вами, то о высокой конверсии можно забыть.

Реализация всех задач выполняется за счет правильно структурированной страницы, ее стиля, удобства, простоты. Несмотря на то, что бывают разные типы сайтов (интернет-магазин, блог, новостной сайт и т.п.), существует стандартный набор элементов, без которых главная страница любого веб-ресурса будет выглядеть непонятной и неудобной. Что это за элементы – поговорим далее.

Что должно быть на главной странице сайта

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

Первый экран

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

Один из важнейших элементов – это офферная конструкция, включающая в себя заголовок, подзаголовок, призыв к действию и кнопку. Начнем с заголовка – он должен быть информативным, отвечать на вопрос «А что тут вообще происходит?». Содержит он, как правило, всего несколько слов: например, для компании, которая занимается профессиональной уборкой, он может выглядеть так: «Профессиональная уборка квартир, домов, офисов и других объектов в Москве». Если нам нужно провести уборку в квартире, то мы сразу поймем, что пришли в нужное место и пойдем исследовать сайт дальше.

Подзаголовок раскрывает суть заголовка – он может быть расположен как снизу, так и сверху заголовка. Например, для той же клининговой компании он может выглядеть так: «Работаем с фиксированной стоимостью. Это займет всего несколько часов».

Следом за подзаголовком идет призыв к действию. Иногда бывает, что подзаголовок вовсе опускают и вместо него сразу прописывают призыв к действию. Его цель – подтолкнуть пользователя кликнуть по кнопке, которая предназначена для оформления заявки, просмотра дополнительной информации либо чего-то другого. Например, «Оставьте заявку сейчас и получите 10% скидку на уборку вашего дома» либо «Рассчитайте стоимость уборки под ваши задачи и получите мойку 1 окна в подарок».

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

Название кнопки происходит от призыва к действию: если вы призываете оставить заявку, то и кнопку называйте так же («Оставить заявку»). Если призываете рассчитать стоимость, то и кнопка будет называться «Рассчитать стоимость».

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

Вот несколько примеров удачного первого экрана:

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

Преимущества

Расскажите, почему клиент должен сотрудничать именно с вами. Здесь важно написать все кратко и по делу. Не нужно писать фразы вроде «Гарантия качества 100%», «Сделаем все в сроки» и так далее. Этим давно уже никого не зацепить. Следует писать конкретику, например «Гарантируем 100% качество деталей: каждое изделие проходит профессиональную проверку до ввода в эксплуатацию».

Чаще всего подобные преимущества состоят из заголовка и основного текстового контента. Выглядеть это может так:

Либо вот так:

И еще один пример:

Информация о компании

Рассказать о своей компании можно в нескольких предложениях. Важным здесь будет фотография персонала. Счастливая фотография коллектива – залог успеха. Если ваш сайт посвящен вовсе не компании, а предназначен для продажи каких-либо товаров, то можно рассказать о его создателе. Напишите о себе, расскажите, что значит для вас бизнес, которым вы руководите.

Выглядеть это может так:

Также можно в отдельном блоке рассказать о себе и предоставить свой номер телефона, если вы привыкли общаться с клиентами напрямую:

Дополнительное предложение

Чтобы привлечь еще больше потенциальных клиентов с домашней страницы, предложите полезный контент, если таковой имеется. Это может быть:

• путеводитель или руководство;
• электронная книга;
• видеокурс.

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

Выглядеть это может так:

Или так:

Социальное доказательство

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

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

Вот так, например, можно оформить портфолио:

Либо так:

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

Контактные данные, формы обратной связи

Быстро и бесплатно связаться с представителем компании – одна из основных задач любой успешной организации. Как мы уже говорили ранее, контакты размещаются на первом экране в меню сайта, но чаще всего этого недостаточно. Дополнительно контактную информацию рекомендуется указывать в отдельном разделе либо внизу сайта. В таком случае можно не просто написать адрес, но и показать его на карте либо разместить схему проезда до вас.

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

И по традиции несколько примеров:

Удобный и понятный дизайн, хорошее юзабилити

Последнее, о чем еще хотелось поговорить, – это внешний вид сайта и удобство его использования. Можно сделать все необходимые блоки для успешного сайта, но без хорошо проработанного дизайна и юзабилити ничего не выйдет, ровно как и наоборот.

Страница должна быть удобной и легкой в навигации – я это уже неоднократно говорил. Необязательно использовать «кричащие» элементы, например флэш-баннеры, анимации или другие чересчур сложные элементы.

Главное правило хорошего дизайна – дизайн не должен отвлекать клиента. Главной задачей является оптимизация материала и функций сайта.

Вот список ресурсов, где вы сможете найти хорошие примеры сайтов разных типов и стилистик:

• Behance,
• MadeOnTilda,
• Land-book.

Проанализируйте интересующие вас сайты: посмотрите, как оформлен тот или иной блок, насколько продуманы переходы между страницами и так далее.

Оптимизация для мобильных устройств

Без мобильных гаджетов сегодня никуда – большая часть посетителей заходит на сайт со смартфонов или планшетов, поэтому особенно важно проработать этот аспект. Кроме того, оптимизация для мобильных устройств играет особую роль для поисковых систем. Если ваш сайт не будет хорошо оптимизирован под мобильные устройства, то Google и Яндекс будут плохо на это реагировать.

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

Посмотреть рекомендации по улучшению мобильной версии вы можете в специальном сервисе от Гугла – Google PageSpeed. Он позволяет выявить не только «косяки» адаптивной версии, но и десктопной. Также в нем вы можете проверить скорость загрузки сайта, что играет важную роль как для посетителей, так и самих поисковых систем.

Дополнительные рекомендации

Простота – залог успеха

Еще раз вспомните про удобство использования – все должно быть максимально просто. Это касается как самого интерфейса, так и дизайна. Не стоит добавлять кучу ненужных элементов ради дизайна – такой подход скорее отпугнет посетителя, нежели привлечет.

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

Используйте фотографии хорошего качества

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

Найти бесплатные картинки вы можете в следующих сервисах:

• Unsplash,
• Pixabay,
• Pexels.

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

Проводите A/B-тесты

Бывает, что измененная страница увеличивает конверсию сайта, но часто сложно понять, из-за чего это произошло. То ли дизайн стал привлекательным, то ли интерфейс –простым. В таких случаях используют A/B-тестирование (сплит-тестирование).

A/B-тесты подразумевают запуск нескольких альтернативных версий одинаковой страницы. Их цель – определить, какой элемент вызвал наиболее высокую конверсию. Здесь важно, чтобы вы не меняли много элементов, иначе будет сложно определить, какой фактор повлиял на результат.

Начать тестирование можно, например, с простого изменения цвета кнопок или всей офферной конструкции. Постепенно меняйте элементы и смотрите на результат. A/B-тесты – это долгий процесс, который требует времени и анализа.

Анализ результатов

Регулярно анализируйте свой веб-сайт – для таких задач существуют специальные сервисы.

Подключите сайт к Яндекс.Метрике – она позволит отследить просмотры, последние поисковые фразы, с каких устройств и из какого города к вам чаще всего заходят. Кроме того, с помощью данного инструмента можно анализировать клики по номеру телефона, почте, а также отслеживать, когда была отправлена заявка через форму.

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

Google Search Console – аналог Вебмастера от Google, а Google Analytics – аналог Яндекс.Метрики.

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