+7 (495) 055-13-21inbox@aquatos.ruг. Москва, Авиационный переулок, дом 5

Структура и проектирование страниц сайта

  • 28 Августа, 2017
  • Posted by admin
  • структура сайта, разработка сайта, создание сайта
  • Comments:0

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

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

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

  • Главная
  • Текстовая
  • 404 ошибка

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

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

  • Форма заказа обратного звонка
  • Форма заказа товара или услуги

Если сайт коммерческий, то скорее всего компания занимается продажей различных товаров и/или услуг. Для них требуются отдельные страницы, на которых будут представлены характеристики, изображения, описания и цены. Такие страницы можно объединить в один тип: “Карточки товаров”. Но для карточек товаров всегда требуется оглавление, некий раздел, где пользователь сможет ознакомится с товарами или услугами в кратком виде и перейти к деталям заинтересовавшей его записи. Такой тип назовем : “Каталожным разделом”. Итак:

  • Каталожный раздел
  • Карточка товара

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

  • Раздел корпоративного блога
  • Страница материала корпоративного блога

И наконец, перечислим служебные страницы сайта. Допустим, что у нас есть поиск и соответственно должна быть страница с результатами поиска. Добавим ее:

  • Страница с результатами поиска

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

  • Нотификация “спасибо за обращение”
  • Нотификация “что-то пошло не так”

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

  • Результаты поиска, когда не найден ответ

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

  • Главная
  • Текстовая
  • 404 ошибка
  • Форма заказа обратного звонка
  • Форма заказа товара или услуги
  • Каталожный раздел
  • Карточка товара
  • Раздел корпоративного блога
  • Страница материала корпоративного блога
  • Страница с результатами поиска
  • Нотификация “спасибо за обращение”
  • Нотификация “что-то пошло не так”
  • Результаты поиска, когда не найден ответ

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

  • Главная
  • Текстовые страницы
  • Каталожный раздел
  • Карточка товара
  • Раздел корпоративного блога
  • Страница материала корпоративного блога
  • Страница с результатами поиска
  • Результаты поиска, когда не найден ответ
  • 404 ошибка

Таким образом в структуре мы имеем три уровня:

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

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

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

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

Давайте перечислим блоки, которые необходимо разместить на этой странице:

  • Шапка с логотипом и контактами
  • Навигационная строка по сайту (меню)
  • Изображение товара в увеличенном виде и ряд дополнительных изображений
  • Название товара
  • Его стоимость
  • Кнопка заказа товара
  • Преимущества вашего сервиса (например: доставка в день обращения, бесплатная доставка, круглосуточная горячая линия, дополнительная гарантия и проч.)
  • Характеристики товара
  • Описание товара
  • Похожие товары или товары, покупаемые с этим товаром
  • Специальные условия при покупки от … штук
  • Блок заказа обратного звонка для консультации со специалистом
  • Подвал сайта с логотипом, контактами и навигацией

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

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

Тэги:
  • структура сайта, разработка сайта, создание сайта
Последние публикации
01 Июня, 2017 Фронтенд vs Бэкенд

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

Comments: 0
28 Августа, 2017 Разработка дизайна сайта

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

Comments: 0
28 Августа, 2017 Техническое задание на разработку сайта

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

Comments: 1
28 Августа, 2017 Тенденции современного web-дизайна

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

Comments: 0
28 Августа, 2017 Структура и проектирование страниц сайта

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

Comments: 0
Comments(0)
Оставить комментарий
Популярное
Соц. сети
Популярное
Соц. сети
Спасибо,за ваше обращение!
Наши специалисты вскоре свяжутся с вами
Спасибо,за подписку!
мы будем держать вас в курсе всего самого интересного
Спасибо,за ваш вопрос!
Мы постараемся ответить максимально быстро и развернуто
Что-то,пошло не так!
Наш искусственный интелект не может обработать один из ваших запросов!
Заказать похожую работуМы не клонируем сайты!

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

Оформить рассрочкуЗакажи сайт с рассрочкой 20 000 руб./мес.

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

Хотите задать вопрос?Акция

Для получения информации об акции сообщите нам пожалуйста ваше имя и телефонный номер

Хотите задать вопрос?Вакансии

Для получения информации о вакансиях сообщите нам пожалуйста ваше имя и телефонный номер

Хотите задать вопрос?Бесплатная консультация специалиста

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

Сайт за 100 000 РУБВы хотите заказать сайт?

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

Заказать дополнительную услугуВы уже наш клиент и хотите расширить функциональность сайта?

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

проверка сайта на адаптивность
Бесплатная консультация со специалистом

Хотите получить развернутую консультацию специалиста и решить все возникшие проблемы на сайте? Укажите ваш номер телефона и email.