Структура страницы сайта

Автор: | 05.10.2015

struktura-stranicy-sajtaПриветствую вас, уважаемые читатели :-)

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

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

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

Структура страницы сайта — терминология

Для начала, как и при рассмотре основ создания сайтов, давайте разберёмся с терминами.

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

Внутренняя структура сайта определяет, из каких страниц будет состоять веб-проект и порядок их вложенности (категория-подкатегория-сущность).

В то время как внешняя структура сайта предусматривает вид отдельных страниц в зависимости от размещаемой на них информации. То есть внешняя структура – это как раз и есть структура страницы сайта.

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

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

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

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

Даже если вы решили заказать сайт и читаете эти строки только в целях самообразования — ваше время не будет потрачено зря 😉

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

А это кстати, немаловажно, т.к. благодаря чёткой постановке задачи можно сэкономить не только на времени, но и на стоимости дизайна страницы сайта, которая колеблется в пределах от 50 до 500$.

Необходимость разработки структуры страницы сайта

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

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

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

Даже при наличии каркаса в виде готового сайта в случае использования CMS и конструкторов, базовые решения далеки от совершенства.

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

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

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

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

Структура страницы сайта – это что?

Что касается требований к внешней структуре сайтов, то, как уже говорилось ранее, она должна быть едина. Т.е. все структурные элементы должны соответствовать единому шаблону.

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

В качестве наглядного примера мы возьмём OZON.ru, крупнейший сетевой торговый ресурс России, сайт которого является ярким представителем семейства Интернет-магазинов.

Структура страницы сайта у OZON.ru соответствует критерию единости. Именно поэтому мы не будем рассматривать каждую из них отдельно.

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

На OZON.ru она имеет разный вид (различный контент) в зависимости от того, произведён ли вход пользователя на сайт или нет. Поэтому для просмотра полного содержимого настоятельно рекомендую зарегистрироваться.

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

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

Прошу прощения за маленькое лирическое отступление :-)

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

Условно её можно разделить на следующие блоки.

1. Шапка или хедер (область вверху)

struktura-stranicy-sajta-header

В нём, как правило, содержится логотип магазина, блога, социальной сети… Одним словом, проекта :-) со ссылкой на главную страницу.

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

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

Помимо всего перечисленного здесь также размещается поиск по сайту.

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

2. Подвал или футер (область внизу)

struktura-stranicy-sajta-footer

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

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

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

Располагать их так же лучше в фиксированном месте. Именно поэтому на большинстве ресурсов они расположены в футере или хедере.

Помимо этого здесь также часто расположены ссылки на сайты партнёров, информация о годе основания ресурса с контактами его разработчиков и баннеры статистики (например, LiveInternet, HotLog, Яндекс.Метрика и др.)

3. Зона контента (информация, расположенная между хедером и футером)

struktura-stranicy-sajta-content

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

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

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

Разработчики OZON.ru вновь продемонстрировали оригинальный подход при разработке дизайна данного блока сайта.

Он заключается в размещении левого сайдбара, блока с промо-акциями и правого сайдбара в лестничном порядке.

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

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

Правда, в таком случае, к выбору материала для размещения нужно подходить очень осторожно, чтобы не завести себе армию конкурентов и не привести к уходу пользователей от Вас на ресурс рекламодателя :-)

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

Кстати, такой вариант дизайна страниц сайта является проверенным временем и универсальным.

Большинство ресурсов различных типов сегодня успешно её применяют в явном или модернизированном виде (может отсутствовать хедер, футер и один либо оба сайбара).

Иногда создатели веб-ресурсов наполняют сайдбары различным контентом, в зависимости от содержимого. Ярким подтверждением тому являются Интернет-магазины и, в частности, OZON.ru.

На странице со смартфонами в левом сайдбаре (рисунок вверху) выводятся параметры, характерные для этой категории (версия операционной системы, количество SIM-карт, типы беспроводных подключений и т.д.)

struktura-stranicy-sajta-filter-smartfony

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

struktura-stranicy-sajta-filter-knigi

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

На этом наша статья, в которой нами была рассмотрена структура страницы сайта, объявляется закрытой :-)

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

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

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

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

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

Жду ваших содержательных комментариев по поводу что понравилось/не понравилось и какую информацию вы бы ещё хотели увидеть на страницах данного блога.

Обещаю, что ваше мнение не останется незамеченным.

Следите за обновлениями! До встречи :-)

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
9 голосов, в среднем: 4.1 из 5

3 комментария к статье "Структура страницы сайта"

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *