Дерево сайта, что стволовые клетки у человека

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

 

Структура сайта – вид изнутри

 

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

  1. Общий дизайн сайта должен иметь блочную структуру, в котором каждый вид информации (текст/картинки) объединен логически и визуально в один единый блок.
  2. Логотип компании необходимо вынести в левый верхний угол всех страниц, либо в центр страницы, если это расположение будет служить более органичному дизайну.
  3. Разработке подлежит дизайн только 2 видов страниц на экране – Главная страница и второстепенная страница. Дизайн второстепенной страницы будет использован при создании всех остальных страниц сайта, кроме Главной страницы.
  4. На каждой странице – Главной и второстепенной – должны быть определены 3 основных зоны:
  1. Зона навигации
  2. Зона основного контента
  3. Зона дизайна
  1. Общий дизайн разделов и страниц подразделов (меню и подменю) должен быть одинаковым (по шаблону), но отличаться от дизайна Главной страницы максимум на 20%.
  2. На Главной странице в качестве основного фона должны быть изображения, которые плавно сменяют друг друга. Такой фон не должен занимать более 70% видимой части Главной страницы.
  3. На всех страницах необходимо разместить иконки социальных сетей, а также в разделах сайта там, где это будет органично вписываться в общий дизайн.
  4. Необходимо учесть, что на сайте будет использоваться всплывающее окно онлайн контактов Jivosite.
  5. Наш адрес и телефон должен присутствовать на всех страницах сайта, но только на Главной странице он выделяется визуально.
  6. На Главной странице в видимой зоне первоначальной загрузки страницы необходимо разместить ссылку на страницу с указанием месторасположения.
  7. Все разделы (меню сайта) необходимо продублировать в нижней части каждой страницы в виде текста с иерархической структурой (главное меню à подменю).
  8. На Главной странице, на первоначально загруженной зоне видимости экрана, необходимо разместить следующие ссылки:
  1. Бронирование
  2. Акции и спецпредложения
  3. Программа анимации на день
  4. Отзывы
  1. На Главной странице внизу (перед текстовыми ссылками на разделы сайта) необходимо разместить блок «Наши партнеры».
  2. В нижней странице обязательно должна присутствовать информация: об авторских правах; электронный адрес.
  3. В самом низу Главной станицы необходимо разместить блок для счетчиков и баннеров.

 

Читать также: почему движок WordPress можно легко назвать сеньор знаменитость

 

Меню сайта

 

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

  • О компании
  • Номера и цены
  • Ресторан, кафе, бар
  • Досуг и развлечения
  • Для детей
  • Услуги
  • Пляж и бассейны
  • Фотогалерея

Каждый раздел сайта должен иметь своё подменю, которое реализовано в виде отдельных страниц:

  • Об отеле
  • Заселение в отель
  • Карта отеля
  • Правила проживания
  • Система «Всё включено»
  • Акции, анонсы, скидки
  • Программа анимации
  • Отзывы об отеле
  • Вакансии
  • Контактная информация
  • Пожаловаться-похвалить
  • Документы
  • Номера и цены
  • 2-х местный
  • 2-х местный студио
  • 3-х местный
  • 4-х местный
  • Ресторан, кафе, бар
  • Система «Всё включено»
  • Ресторан «…»
  • Кафе-бар «…»
  • Кафе «…»
  • Досуг и развлечения
  • Анимация
  • Экскурсии
  • Для детей
  • Анимация для детей
  • Игровая комната
  • Детская площадка
  • Услуги
  • Бесплатные услуги
  • Платные услуги
  • Услуги трансфера
  • Пляж и бассейны
  • Пляж
  • Бассейн для взрослых
  • Детский бассейн
  • Фотогалерея
  • Номерной фонд
  • Территория отеля
  • Анимация
  • Ресторан, кафе, бар
  • Детская площадка
  • Спортивная площадка
  • Бассейны
  • Пляж

 

Читать также: что такое посадочная страница и нужна ли она вам

 

Как выглядит Главная страница сайта – заглянем внутрь

 

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

  1. Логотип компании
  1. Находится в Зоне 1.
  2. Расположение – слева в верхнем углу или сверху посередине страницы, в зависимости от дизайна.
  3. Фон логотипа – обязательно белый.
  4. Прокрутка – запрещена.
  1. Главное меню сайта
  1. Находится в Зоне 1.
  2. Расположение – сверху страницы, горизонтально.
  3. Размер текста (графики) – крупный, визуально отличающийся от основного контента.
  4. При прокрутке страницы главное меню закреплено на своем месте.
  5. Фон меню – однородный, из гаммы корпоративного цвета (в согласии с цветом логотипа).
  6. Прокрутка – запрещена.
  1. Контактная информация
  1. Находится в Зоне 1.
  2. Расположение – справа вверху страницы.
  3. Содержание: бесплатный телефон 8-800, краткий адрес со ссылкой на местоположение на карте.
  4. Бесплатный телефон 8-800 должен хорошо визуализироваться (выделяться, но не очень).
  5. На мобильных устройствах – возможность вызова нажатием на номер телефона.
  6. Прокрутка – запрещена.
  1. Фон Зоны 1
  1. Содержание – фото отеля/пляжа/моря.
  2. Основное требование к уровню прозрачности – изображения не должны мешать восприятию основного контента и в то же время быть красивыми и презентабельными.
  3. Фон анимированный – картинки плавно сменяют друг друга.
  4. Фоновые картинки должны быть высокого качества, но без большого объема. Это влияет на скорость загрузки сайта в целом.
  5. Прокрутка – разрешена.
  1. Презентационный блок
  1. Находится в Зоне 1.
  2. Расположение – слева на странице.
  3. Размер блока – не меньше ¼ от фона Зоны 1, выделен прозрачным белым фоном и органично вписываться в общий дизайн страницы.
  4. Содержимое блока – текстовая информация об отеле. Блоки текста сменяют друг друга плавно, задержка смены должна быть достаточна для полного прочтения текста.
  5. Размер текста должен быть достаточно крупным и хорошо читаемым.
  6. Прокрутка – разрешена.
  1. Онлайн бронирование
  1. Находится в Зоне 1.
  2. Расположение – справа на странице, под блоком Контактная информация.
  3. Реализация – в виде анимированной кнопки.
  4. При прокрутке страницы кнопка закреплена на своем месте.
  1. Акции, анонсы, скидки
  1. Находится в Зоне 1.
  2. Расположение – справа на странице, под кнопкой Онлайн бронирование.
  3. Размер блока – ширина не менее 1/3, а высота не меньше 2/3 от фона Зоны 1, должен быть выделен прозрачным белым фоном и органично вписываться в общий дизайн страницы.
  4. Содержимое блока – краткая текстовая информация с возможностью перехода на страницу с полным содержанием (по ссылке).
  5. Текст должен иметь возможность изменения/редактирования пользователем (отдел бронирования) каждый день через соответствующий инструмент размещения.
  6. Прокрутка – разрешена.

 

Читать также: зачем нужен продающий лендинг пейдж

 

  1. Программа анимации на сегодня
  1. Находится в Зоне 1.
  2. Расположение – справа на странице, под блоком «Акции, анонсы, скидки».
  3. Реализация – в виде анимированной кнопки.
  4. Размер кнопки – ширина чуть менее 1/2 от Блока «Акции, анонсы, скидки».
  5. Фон кнопки должен органично вписываться в общий дизайн страницы.
  6. Содержимое кнопки – картинка + текстовая информация.
  7. Прокрутка – разрешена.
  1. Отзывы об отеле
  1. Находится в Зоне 1.
  2. Расположение – справа на странице, под блоком «Акции, анонсы, скидки» и слева от кнопки «Программа анимации».
  3. Реализация – в виде анимированной кнопки.
  4. Размер кнопки – как у кнопки «Программа анимации».
  5. Фон кнопки должен органично вписываться в общий дизайн страницы.
  6. Содержимое кнопки – картинка + текстовая информация.
  7. Прокрутка – разрешена.

 

Читать также: 15 маркетинговых фишек по разработке структуры сайта

 

  1. Блок иконок социальных сетей
  1. Находится в Зоне 1.
  2. Расположение – справа на странице, на усмотрение дизайнера.
  3. Реализация – в виде иконки размером, органично вписывающимся в общий дизайн сайта.
  4. При прокрутке страницы кнопка закреплена на своем месте.
  1. Приветственное слово об отеле
  1. Находится в Зоне 2.
  2. Расположение – снизу от анимированного Фона, размер 2/3 от ширины страницы, ориентация – по центру.
  3. Реализация – текстовая информация на белом фоне.
  4. Прокрутка – разрешена.
  1. Наши партнеры
  1. Находится в Зоне 2.
  2. Расположение – снизу от «Приветственного слова об отеле», размер 3/5 от ширины страницы, ориентация – по центру.
  3. Реализация – графические баннеры партнеров.
  4. Прокрутка – разрешена.
  1. Текстовые ссылки на разделы сайта
  1. Находится в Зоне 2.
  2. Расположение – под блоком «Наши партнеры».
  3. Здесь располагаются все текстовые ссылки на разделы и подразделы сайты (по иерархическому принципу).
  4. Прокрутка – разрешена.
  1. Дополнительная информация
  1. Находится в Зоне 2.
  2. Расположение – под блоком «Текстовые ссылки», на усмотрение дизайнера.
  3. Прокрутка – разрешена.
  1. Зона счетчиков
  1. Находится в Зоне 2.
  2. Расположение – справа от блока «Дополнительная информация».
  3. Возможные кнопки счетчиков – Яндекс, Мейл.ру, LiveInternet, Google, Рамблер. Размер 31х88 пикселей.
  4. Ориентировочное количество – не более 8 шт.
  5. Прокрутка – разрешена.

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

Команда Без Возни

Оповести друзей:

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

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