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

 

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

 

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

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. Прокрутка – запрещена.

2. Главное меню сайта

1. Находится в Зоне 1.
2. Расположение – сверху страницы, горизонтально.
3. Размер текста (графики) – крупный, визуально отличающийся от основного контента.
4. При прокрутке страницы главное меню закреплено на своем месте.
5. Фон меню – однородный, из гаммы корпоративного цвета (в согласии с цветом логотипа).
6. Прокрутка – запрещена.

3. Контактная информация

1. Находится в Зоне 1.
2. Расположение – справа вверху страницы.
3. Содержание: бесплатный телефон 8-800, краткий адрес со ссылкой на местоположение на карте.
4. Бесплатный телефон 8-800 должен хорошо визуализироваться (выделяться, но не очень).
5. На мобильных устройствах – возможность вызова нажатием на номер телефона.
6. Прокрутка – запрещена.

4. Фон Зоны 1

1. Содержание – фото отеля/пляжа/моря.
2. Основное требование к уровню прозрачности – изображения не должны мешать восприятию основного контента и в то же время быть красивыми и презентабельными.
3. Фон анимированный – картинки плавно сменяют друг друга.
4. Фоновые картинки должны быть высокого качества, но без большого объема. Это влияет на скорость загрузки сайта в целом.
5. Прокрутка – разрешена.

5. Презентационный блок

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

6. Онлайн бронирование

1. Находится в Зоне 1.
2. Расположение – справа на странице, под блоком Контактная информация.
3. Реализация – в виде анимированной кнопки.
4. При прокрутке страницы кнопка закреплена на своем месте.

7. Акции, анонсы, скидки

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

 

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

 

8. Программа анимации на сегодня

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

9. Отзывы об отеле

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

 

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

 

10. Блок иконок социальных сетей

1. Находится в Зоне 1.
2. Расположение – справа на странице, на усмотрение дизайнера.
3. Реализация – в виде иконки размером, органично вписывающимся в общий дизайн сайта.
4. При прокрутке страницы кнопка закреплена на своем месте.

11. Приветственное слово об отеле

1. Находится в Зоне 2.
2. Расположение – снизу от анимированного Фона, размер 2/3 от ширины страницы, ориентация – по центру.
3. Реализация – текстовая информация на белом фоне.
4. Прокрутка – разрешена.

12. Наши партнеры

1. Находится в Зоне 2.
2. Расположение – снизу от «Приветственного слова об отеле», размер 3/5 от ширины страницы, ориентация – по центру.
3. Реализация – графические баннеры партнеров.
4. Прокрутка – разрешена.

13. Текстовые ссылки на разделы сайта

1. Находится в Зоне 2.
2. Расположение – под блоком «Наши партнеры».
3. Здесь располагаются все текстовые ссылки на разделы и подразделы сайты (по иерархическому принципу).
4. Прокрутка – разрешена.

14. Дополнительная информация

1. Находится в Зоне 2.
2. Расположение – под блоком «Текстовые ссылки», на усмотрение дизайнера.
3. Прокрутка – разрешена.

15. Зона счетчиков

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

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

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