Как правильно оформить главную страницу сайта


Как оформить главную страницу сайта: теория и примеры

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

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

Подпишись на рассылку и получи книгу в подарок!

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

Каким должно быть оформление главной страницы сайта?

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

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

На главной стоит обязательно указать:

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

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

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

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

Шапка и навигация

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

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

Хороший пример оформления шапки главной страницы сайта – «Сбербанка». Все просто и правильно – под каждую услугу отдельный блок, контакты интегрированы в шапку.

Блоки с информацией

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

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

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

Призыв к действию

Оформление главной страницы сайта должно решает две задачи: привлекает внимание пользователя к нужным вещам и плавно подводит его к покупке. Поэтому важно в подходящий момент подтолкнуть пользователя к нужному решению. С этим всегда справлялся грамотный «Call-to-acton» – «призыв к действию».

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

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

Пример – сайт «Семантики». Призыв к действию один для всех услуг, поэтому внимание пользователя не рассеивается.

Подвал

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

Советы

Не перегружайте

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

Выделяйте выгодные предложения

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

Так сделал «Связной» – акция на виду и привлекает внимание.

Используйте изображения

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

Не перехваливайте себя

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

Постоянно редактируйте страницу

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

Как оформить главную страницу сайта с точки зрения SEO-оптимизации

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

Итоги

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

В статье используются изображения Дмитрия Миролюбова.

Как правильно структурировать ваш сайт для поисковых систем и посетителей

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

Какая архитектура правильная для вашего сайта?

1.Выделите свои самые важные страницы

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

Пример
Если вы посмотрите на iSiteBuild.com, основные навигационные ссылки находятся на главной странице, а также на главной панели навигации на всех других страницах. Это позволяет посетителю легко перемещаться по всем разделам сайта. Ссылки на странице статьи не включаются на главную страницу, потому что они менее значимы.

2.Создание карты сайта

Карта сайта похожа на оглавление и обычно отображается на первой странице. он содержит ссылки на все страницы вашего сайта. Когда паук поисковой системы посещает домашнюю страницу, он автоматически просматривает все ссылки и соответственно ранжирует ваши страницы. Убедитесь, что вы включили краткое описание вместе со ссылкой для каждой страницы на карте сайта. Итак, если ваш веб-сайт содержит 100 страниц, у вас будет 100 ссылок на странице карты сайта. Теперь посетители могут быстро просматривать и переходить на все страницы вашего сайта.

3. Закодируйте меню навигации с помощью CSS

Многие веб-сайты используют изображения в качестве навигационных ссылок. Это затрудняет поисковым системам поиск ваших веб-страниц, поскольку они не могут сканировать изображения. Вместо этого кодируйте свои навигационные ссылки, используя HTML и CSS (каскадные таблицы стилей). Это не только сократит время загрузки, но и позволит паукам поисковых систем сканировать текст, содержащийся в ссылке.

4. Разрешить настраиваемые метатеги

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

5. Создание удобных для поисковых систем URL-адресов

Если вы используете систему управления контентом (CMS), такую ​​как WordPress, она не создает удобные для поисковых систем URL-адреса из коробки. Вместо этого он генерирует символы и числа как часть URL-адресов. Включение ключевых слов в ваш URL-адрес помогает поисковым системам находить и индексировать контент на этой странице.Это также помогает посетителям запомнить название страницы. Если вы используете WordPress, убедитесь, что вы добавили собственную структуру постоянных ссылок в настройках постоянных ссылок. Это автоматически создаст удобные для поисковых систем URL-адреса на основе заголовка страницы.

6. Перенаправление URL без www на URL с www

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

http: // www.domainname.com
http://www.domainname.com/index.html
http://domainname.com
www.domainname.com

Для перенаправления URL без www на URL с www используйте переадресацию 301, поэтому, если человек использует эти URL, он будет перенаправлен на http://www.domainname.com

Если вы изменяете дизайн своего статического веб-сайта, заменяя его сайтом управления контентом, URL-адреса страницы изменятся, что приведет к потере вашего рейтинга. Чтобы этого не произошло, используйте перенаправление 301. Это перенесет ранжирование ваших старых URL-адресов на новые.

7. Создайте страницу ошибки 404

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

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

Видео: Архитектура сайта - Как правильно структурировать свой сайт для поисковых систем и посетителей

Статьи по теме

Как макет веб-страницы влияет на посетителей и поисковые системы
Как плохая веб-навигация на вашем сайте может испортить впечатления посетителей
Контрольный список для редизайна веб-сайта - 16 вопросов, которые нужно задать перед изменением дизайна вашего веб-сайта
Оценка веб-сайта - контрольный список из 16 пунктов
Перенаправление 301 - Как сделать Перенаправьте веб-сайт или веб-страницу и сохраните свой рейтинг
Как создать настраиваемую страницу с ошибкой 404, чтобы остановить потерю посетителей веб-сайта

Если вы хотите получать больше подобного контента, пожалуйста,
ПОДПИСАТЬСЯ на мой информационный бюллетень «Советы по маркетингу»

.

8 типов веб-сайтов и способы их создания

Внимание к дизайну веб-сайтов имеет решающее значение для построения вашего бизнеса. В настоящее время в Интернете насчитывается около 1,7 миллиарда веб-сайтов, которые предоставляют множество различных типов веб-сайтов для изучения, но также много путаницы в отношении того, какой тип и дизайн на самом деле подойдут вам лучше всего.

Иллюстрация от OrangeCrush

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

Вот 8 различных типов веб-сайтов:

1. Домашние страницы
-

Домашняя страница - это главный центр вашего сайта и лицо бренда.

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

Домашняя страница может принимать самые разные формы, но при разработке важно помнить о назначении домашней страницы как основной навигации и объекта, представляющего интерес для посетителей сайта. Объясните, что это за бизнес, и заранее предложите уникальное ценностное предложение (UVP). Установите иерархию сайта и структуру навигации на главной странице. Используйте цветовую палитру, логотип и изображения вашего бренда, наиболее актуальные для вашего бизнеса. Домашняя страница задает тон имиджу компании, поэтому она должна рассказывать историю о вас с помощью изображений и слов.

Via Matcha Kari

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

2. Сайты журналов
-

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

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

Via Urban Omnibus

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

3. Сайты электронной торговли
-

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

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

Via Flipkart

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

4. Блоги

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

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

Via Nourish Eats

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

5. Сайты-портфолио
-

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

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

Via Gautier Maillard

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

6. Целевые страницы
-

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

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

Via Shopify

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

7. Сайты социальных сетей
-

Мы только что отправили вам ваш первый урок.

Около 2,77 миллиарда человек пользуются социальными сетями с десятками различных платформ. Независимо от того, кто ваша целевая аудитория, вы, вероятно, найдете их в Facebook, Twitter, Instagram, Snapchat или LinkedIn.Хотя вы не можете изменить дизайн самих платформ, у вас есть некоторый контроль над внешним видом своей страницы и вы можете создавать контент, который стимулирует публикации в социальных сетях.

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

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

Via Nutella в Facebook

На странице Nutella в Facebook показано интересное сочетание содержания, которое соответствует общей цветовой палитре и внешнему виду бренда. В них есть мемы, созданные специально для социальных сетей, например «Сегодня я поделюсь своей Nutella с…». Однако они также предлагают видео и идеи о том, как использовать свой продукт уникальным образом. Обратите внимание на то, что на их веб-сайтах есть кнопки социальных сетей, чтобы пользователи легко находили их на разных платформах.

8. Справочник и контактные страницы
-

Каталог или страница контактов - это место, где пользователи могут связаться с вами или другими людьми.

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

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

Via Manta

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

Выберите подходящий тип сайта для своей аудитории
-

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

Получите веб-дизайн, идеально подходящий для вашего бренда!
Работайте с талантливым профессиональным дизайнером, чтобы создать веб-сайт, который понравится вам и вашей аудитории.

.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

Перед созданием веб-сайта может быть целесообразно нарисовать черновик макета страницы:

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера