Грамотная структура сайта не только помогает привлечь и удержать посетителей, но и влияет на SEO-показатели — индексацию и позиции сайта в поисковой выдаче.
Коллеги из REG.RU рассказали, из чего состоит современный функциональный сайт. Из статьи вы узнаете о базовых и дополнительных элементах, которые помогут сделать хорошую структуру любой страницы сайта.
Будет интересно и полезно как новичкам в сфере веб-дизайна, так и опытным специалистам.
Основные элементы страницы
Базовые элементы, без которых сложно представить любую страницу сайта:
шапка (header),
верхнее меню,
тело (body),
боковое меню (sidebar),
подвал (footer).
Базовая структура страницы сайта.
Ловцы лидов
убеждают посетителей сайта связаться с менеджером,
Шапка сайта (или хедер, header) — верхняя часть страницы, которая находится над основным контентом. Обычно в этой части сайта размещают логотип организации, контакты и меню (о нём мы расскажем отдельно).
Логотип — важный пункт для сайта любой компании. С помощью уникального изображения вы выделите себя среди конкурентов, пользователям будет проще запомнить ваш бренд. Лучше всего разместить логотип в левой верхней части хедера и оформить его в виде кнопки — перехода на главную страницу сайта.
Пример логотипа в шапке сайта.
В зависимости от того, какой сайт вы планируете сделать, хедер может содержать и другие элементы. Например, владельцам интернет-магазинов стоит разместить в шапке значок корзины, а также кнопку входа в личный кабинет.
Кнопка входа в личный кабинет на сайте REG.RU.
На странице юридической фирмы важно указать в хедере контакты — номер телефона и адрес офиса, а на сайтах частных клиник добавить кнопку онлайн-записи к врачу.
Также в хедер можно добавить смену языка или настройки отображения для слабовидящих.
Верхнее меню и поиск по сайту
Верхнее (навигационное) меню играет две важные функции.
Во-первых, сайт с хорошей навигацией выглядит логичным и упорядоченным. Часто пользователи попадают на сайт по ссылкам из других ресурсов или соцсетей. Если навигационное меню есть на всех страницах, посетителям будет легче ориентироваться и искать информацию.
Во-вторых, хорошая навигация напрямую влияет на SEO-показатели:
если сайт структурирован, поисковым роботам будет проще его индексировать.
если пользователя заинтересуют другие страницы, он проведет больше времени на сайте. Это поможет снизить показатель отказов, что положительно скажется на индексации.
Меню может быть горизонтальным, вертикальным или раскрывающимся. Для меню в хедере оптимально подходит первый вариант. Если на сайте очень много разделов, подразделов или отдельных страниц, лучше оформить навигацию в виде выпадающего списка, а в верхней панели оставить названия только основных разделов.
Выпадающий список в меню на сайте REG.RU.
С точки зрения юзабилити (удобства использования) важно:
не перегружать меню — лучше, если оно будет лаконичным. Посетителям должно быть интуитивно понятно, куда идти и на что нажимать.
выделять текущий раздел на фоне остальных (это можно сделать цветом или подчеркиванием).
фиксировать меню для длинных (больше 2-3 экранов) страниц так, чтобы оно всегда было вверху страницы и не прокручивалось.
Если у вас многостраничный сайт, добавьте строку поиска — она «облегчит жизнь» посетителям. Главное, чтобы поиск был оптимизирован, хорошо настроен и выдавал релевантные результаты.
Пример строки поиска в верхнем меню.
Меню будет не лишним и для навигации внутри одной длинной страницы (например, лендинга или лонгрида) — когда информации много, можно сделать ссылку на каждый раздел страницы.
Тело сайта
Тело сайта (body) — часть страницы, где размещают основную информацию: предложение, описание продукта или мероприятия, «презентацию» компании и многое другое. Например, если вы создаете блог, то в теле сайта будут размещаться сами тексты публикаций.
В отличие от шапки и подвала, body ― часть сайта, которая меняется от страницы к странице.
Всю информацию, которую вы хотите донести до клиента, лучше всего распределить по смыслу и выделить в тематические блоки. Какие блоки выбрать, зависит от конкретной страницы, общей направленности сайта и других индивидуальных нюансов. Мы расскажем об основных блоках: обложка, предложение, преимущества, ответы на вопросы и отзывы.
Обложка
Обложка (или первый экран) — это сущность страницы. Первый экран потому так и назван, что является первым, что видит посетитель. Именно на этом этапе пользователь понимает, останется он на странице или закроет вкладку. Поэтому задача обложки — зацепить, увлечь, заинтересовать.
Пример обложки на сайте фотографа.
Две главные составляющие обложки — иллюстрация и короткий текст. Четко и емко (фразой или предложением) сформулируйте основной посыл страницы и подкрепите его визуально (с помощью фото или видео). В идеале — посмотрев на обложку, посетитель должен сразу понять, о чём эта страница.
Пример обложки на сайте салона по обслуживанию автомобилей.
Создание обложки — более индивидуальная и творческая задача, которая зависит от темы страницы. Вот несколько общих рекомендаций:
нередко основа обложки — это сообщение, которое нужно донести до посетителя. Тогда фотография является фоном, который задает атмосферу. Если главный посыл вы доносите текстом, фото должно быть без сюжета и мелких деталей.
иллюстрация должна соответствовать теме — напрямую (например, кухонный гарнитур, если вы продаете мебель) либо косвенно.
если на фото есть объект, предмет или другой важный элемент, располагайте текст так, чтобы он не перекрывал последний и не мешал восприятию.
иногда одна иллюстрация лучше целой страницы текста. Если у вас есть четкое предложение и вы можете наглядно показать, что получит клиент — сделайте это.
Предложение
В этой части может быть рассказ о компании, представление специалистов, описание основных услуг и товаров, тарифы, цены, а также любая другая информация, благодаря которой посетители поймут, чем вы занимаетесь и что предлагаете.
Пример описания и оформления услуг.
Как и в случае с обложкой, тут важно обратить внимание на содержание и оформление. Используйте тексты «без воды», подбирайте подходящие иллюстрации (картинки, фото, видео), которые помогут верно донести до пользователя смысл и усилят эффект предложения.
Как ещё можно оформить описание услуг.
Если на обложке вы кратко и емко передаете основной смысл, то в следующей части раскройте подробности, расскажите про нюансы. Грубо говоря, эта часть страницы должна содержать ответы на вопросы кто, что, когда, где, зачем и как.
Преимущества
Расскажите, чем вы отличаетесь от конкурентов. Перечислите конкретные события, факты и цифры. Типичная структура блока «почему стоит выбрать нас» — это список из 3-6 преимуществ, оформленный в виде лаконичного подзаголовка и короткого поясняющего текста.
Пример описания и оформления преимуществ.
Иногда главным преимуществом может быть сам факт того, как вы предоставляете услугу. Например, заказ удобно оформить, а вы быстро его выполните. Расскажите об этом:
Пример этапов выполнения заказа.
Отзывы
Сайты с отзывами помогают расположить к себе потенциальных клиентов. Попросите наиболее лояльных и готовых рекомендовать вас клиентов оставить небольшие отзывы (3-5 предложений). Пусть расскажут, что им понравилось больше всего, почему они выбрали вас и как оценивают результат работы. Отзывы — ещё один способ показать, почему и в чём вы хороши.
Если среди ваших клиентов есть известные бренды или целый список компаний, готовых вас рекомендовать, упомяните их в блоке «Наши клиенты»:
Пример оформления списка клиентов.
Также можно добавить истории клиентов, которым вы помогли.
Пример оформления историй клиентов.
Ответы на вопросы
Этот блок ориентирован на тех клиентов, которые хотят узнать все подробности, тщательно всё взвесить, а уже затем принять решение. В этой части сайта можно не только собрать ответы на частые вопросы, но и отработать возможные страхи клиентов и подробнее рассказать о том, для чего не хватило места в главной части страницы.
Пример оформления блока «Вопрос-Ответ».
Также в тело сайта часто добавляют формы подписки — это актуально для сайтов-портфолио, блогов и крупных сайтов с регулярными рассылками:
Пример оформления формы подписки.
Карты с адресом — важный элемент для сайтов организаций, компаний с офисами и всех, кто оказывает офлайн-услуги:
Пример карты с адресами Дата-центров на сайте REG.RU.
Боковая панель (sidebar) — это боковая часть сайта, которая визуально отделена от основной части страницы — тела. Обычно сайдбар выглядит как колонка с левой или правой стороны страницы, которая содержит информацию или навигационные элементы. Что обычно размещают в сайдбаре:
дополнительное меню — у интернет-магазинов в сайдбаре может быть меню с фильтрами.
списки публикаций — лучше размещать самые популярные статьи либо свежие материалы.
рекламу или выгодные предложения — можно рассказать как о своей, так и о сторонней продукции, скидках и акциях.
формы подписки — на рассылки, публикации блога, акции и новости.
Пример оформления бокового меню в блоге REG.RU.
Обычно боковая панель отображается не сразу по открытию сайта, а после того, как пользователь уже немного полистал страницу. Также можно настроить появление сайдбара по клику.
Sidebar — полезный блок для крупных сайтов. На одностраничниках или небольших ресурсах он обычно не нужен.
Подвал
Подвал сайта (или футер, footer) — это нижняя часть страницы, которая находится под всеми остальными блоками. Это завершающий элемент, без которого невозможно представить хороший сайт.
Чаще всего в футере размещают полезную, но не первостепенную информацию. Например, ссылки на скидки и акции, блог, раздел о компании и актуальные вакансии, форму с отзывами, а также форму для подписки на рассылку.
Также в футере можно разместить ссылки на соцсети и продублировать контакты. Не лишним будет повторить основные разделы меню или дать ссылки на основные товары и услуги.
Несколько советов по созданию футера:
не перегружайте футер информацией. Лучше, если он будет небольшим.
выделяйте подвал, чтобы он не сливался с остальной частью страницы и легко считывался. Это можно сделать жирным шрифтом, подчеркиванием или цветом (либо его отсутствием, если сайт сам по себе яркий).
футер должен отображаться на всех страницах сайта.
Пример оформления подвала.
Подведём итоги
Ещё раз перечислим основные структурные элементы сайта и для чего они нужны:
Шапка — позволяет разместить логотип, контакты, меню и другую важную информацию.
Верхнее меню — помогает ориентироваться и находить нужные разделы сайта.
Тело — содержит основную информацию о компании, продукте или предложении.
Боковое меню — помогает создать навигацию на конкретной странице, разместить рекламу, новость или акцию.
Подвал — содержит дополнительную информацию, ссылки на документы, соцсети или блог.
У Callibri есть телеграм-канал — присоединяйтесь, чтобы не пропустить свежие кейсы, материалы блога и обновления сервисов.
Комментарии