Гайд по управлению корпоративным сайтом

1. ООО «ИНФОРМАЦИОННО-РЕСУРСНЫЙ ЦЕНТР АЙТИ» © 2015
ГА Й Д П О К О Р П О РАТ И В Н О М У С А Й Т У
КО М П А Н И И О О О « ГЛ А В Р У С С Т Р О Й - И Н В Е С Т »
Договор BS-2015-12 от 08 июля 2015 г.
АИТИАГЕНТСТВО ВЫСОКОЙ КОНВЕРСИИ

2. Один из самых значимых дизайн-трендов
последнего времени.
В основе flat дизайна лежит двухмерное
пространство (поэтому он и называется «плоским»).
Плоский дизайн представляется как
противоположность скевоморфизму.
По задумке «плоский дизайн» должен подчёркивать
эффект «очаровательной простоты» и утончённости.
Стал набирать популярность с 2010 года, а с 2014
— становится новым стандартом.в web-дизайне.
Р А З У М Н Ы Е Т Р Е Б О В А Н И Я К Д И З А Й Н У
ПРОСТОТА
СТИЛЬ
FLAT–ДИЗАЙН
Н А Ш В Ы Б О Р
ПРОСТОР
УДОБСТВО
СООТВЕТСТВИЕ
СОВРЕМЕННЫМ
ТРЕНДАМ ДИЗАЙНА
АИТИ
2

3. ПАЛИТРА
ТИПОГРАФИКА
З А Г О Л О В О К H 1
З А Г О Л О В О К H 2
З А Г О Л О В О К H 3
Proxima Nova Condensed
Header
Menu
Выступая в качестве девелопера, компания осуществляет
комплексный подход к реализации проекта – начиная
с подбора объекта инвестирования, разработки
концепции проекта, привлечения инвестиций
Proxima Nova
Paragraph
Plain
АИТИ
3
#E64A19
Dark primary
#FF5722
Primary
#FFCCBC
Light primary
#FFFFFF
Text / icons
#9E9E9E
Accent
#212121
Primary text
#727272
Secondary text
#B6B6B6
Divider

4. КОНТЕНТ ОБЛАСТЬ
ШИРИНОЙ 1140px
ГИБКАЯ СЕТКА
ИЗ 12 КОЛОНОК
АИТИ
ДЛЯ КАЖДОГО КОНТЕНТ-БЛОКА
ПРОДУМАНА ЭЛАСТИЧНОСТЬ

5. При разработке дизайна мы обязательно
учитываем современные устройства
с экранами сверхвысокого разрешения
и подготавливаем графику специально
для качественного отображения
на экранах retina.
RETINA
READY!
Retina (англ., «сетчатка») — обобщающее
маркетинговое название экранов очень высокого
разрешения. Благодаря высокой плотности пикселей
на квадратный дюйм (от 264 и выше), изображение
на экране максимально приближается по качеству
к изображениям на странице журнала.
Все элементы интерфейса в век-
торном формате - SVG
Растровая графика создается
в smart objects с учетом
увеличинного разрешения.
АИТИ
5

6. «Аудитория пользователей мобильных
устройств растет стремительными
темпами, игнорировать это при
разработке сайта - значит потерять
«мобильных» клиентов».
27% ПОЛЬЗОВАТЕЛЕЙ ИСПОЛЬЗУЮТ
МОБИЛЬНЫЕ УСТРОЙСТВА ДЛЯ ВЫХОДА
В ИНТЕРНЕТ И ГЕНЕРЯТ ПОЧТИ 50% ТРАФИКА.
Исследование LiveInternet 2014 год
Мы профессионально разработали
адаптивную верстку для вашего нового
корпоративного сайта
Блоки всех страниц динамически
подстраиваться под заданные размеры
окна браузера или устройства, которые
использует ваш посетитель, в любом
современном браузере.
Посетителям будет удобно!
АДАПТИВНОСТЬ
АИТИ
6

7. ПОДКЛЮЧЕННЫЙ К КОМПЬЮТЕРУ ПОД УПРАВЛЕНИЕМ
ЛЮБОЙ ОПЕРАЦИОННОЙ СИСТЕМЫ
МОНИТОР
С ВЫСОКИМ
РАЗРЕШЕНИЕМ
АИТИ
7

8. НОУТБУК ПЛАНШЕТ АИТИ
8

9. И ТЕЛЕФОН
АИТИ
9

10. На протяжении 8 лет имеем высший статус золотого партнера
1С-Битрикс, в нашем штате только сертифицированные
программисты, обладающие всеми необходимыми
компетенциями, которые соблюдают все стандарты
разработки и внедрения.
В качестве системы для создания сайтов мы используем проверенное временем
решение от лидера рынка коммерческих систем управления сайтом 1С-Битрикс.
МЫ ПРОВЕЛИ КОМПЛЕКСНУЮ ПРОВЕРКУ САЙТА НА СООТВЕТСТВИЕ
СТАНДАРТАМ ПО МОНИТОРУ КАЧЕСТВА 1С-БИТРИКС.
С И С Т Е М А У П Р А В Л Е Н И Я
АИТИ
10

11. Логин и пароль для
входа отправленны
на email, указанный
в Договоре
http://grsi.d4b.info/bitrix/
П А Н Е Л Ь У П Р А В Л Е Н И Я С А Й Т О М
АИТИ
11

12. ГЛАВНАЯ СТРАНИЦА
АИТИ

13. H E A D E R
АИТИ
13
В Т О Р О Й Э К РА Н
У С Л У Г И
А К Ц И И
П Р О Е К Т Ы
S E O
К О Н Т Е Н Т
Б Л О К
П А Р Т Н Е Р Ы
П Р И З Ы В
К Д Е Й С Т В И Ю
F O O T E R
С Т Р У К Т У РА
С Т РА Н И Ц Ы
Структура главной страницы
отлично продумана и представляет
пользователю краткий и емкий
перечень ключевых информационных
блоков сайта, позволяющий быстро
найти нужную информацию.

14. Ш А П К А С А Й ТА
Шапка сайта доступна на любой странице,
содержит логотип компании (ссылка на
главную страницу), навигационное меню,
контактный телефон, кнопку заказа
обратного звонка и входа на сайт.
При наведении на пункт меню он выделяется.
Аналогично отображается активный
(выбранный) пункт меню.
После авторизации на сайте пользователь
видит в шапке сайта свое имя и ссылку
в Личный кабинет, также доступна кнопка
выхода.
С Л А Й Д Е Р
Динамичный, полноэкранный промо-слайдер фоновых
изображений, управляемый через административную
часть сайта.
Для каждого слайда можно задать фон, заголовок,
короткое описание и ссылку.
Используйте слайдер для размещения общей
информации (например, об услугах компании)
и привлечения внимания к важным новостям
(например, крупнейшим акциям проектов).
АИТИ
14

15. Ф О Р М Ы
Р Е Г И С Т РА Ц И Я
И А В Т О Р И З А Ц И Я
Формы регистрации, авторизации
и запроса на восстановление пароля
доступны на любой странице сайта.
Формы появляются во всплывающем
окне, адаптирующемся под любые
размеры и пропорции экрана. Формы
осуществляют проверку (валидацию)
вводимых данных.
Предусмотрена возможность быстрой
авторизации через соц сети.
З А К А З З В О Н К А
Один из каналов лидогенерации на сайте.
Форма включает валидацию вводимых
значений.
Каждый пользовательский запрос
сохраняется в административной части
сайта, а менеджеры,обрабатывающие
заявки, (их список определяете вы
самостоятельно) получают e-mail
уведомления о заказе звонка.
АИТИ
15
КонверсияКонверсия
АналитикаАналитика
Почтовое
событие
Почтовое
событие
Форма должна
использоваться для
аналитики работы
сайта и оценки
конверсии.

16. В Т О Р О Й Э К РА Н
Содержит контент-блок с описанием
деятельности компании и блок новостей.
К О Н Т Е Н Т Б Л О К
Содержит 4 вкладки с текстом.
Управляется администратором.
Н О В О С Т Н О Й Б Л О К
Выводятся последние 3 новости по дате добавления.
Н О В О С Т Ь Д Е ТА Л Ь Н О
При клике на новость открывыается
модальное окно с подробным текстом.
АИТИ
16
АналитикаАналитика

17. У П Р А В Л Е Н И Е Н О В О С Т Я М И
Ссылка на управление новостями
Администратор может добавлять новости, а также
изменять или удалить уже созданные новости.
Для этого в контекстном меню слева от новости
необходимо выбрать пункт «Изменить».
Новостям можно выставлять статус «Активность»
для того, чтобы она не отображалась на сайте.
Перейдя в управление новостями, нажмите кнопку
«Добавить элемент» и заполните поля «Название» и
«Текст», установите дату начала активности,
загрузите изображение для анонса и, при необхо-
димости, для «Подробно».
АИТИ
17

18. У С Л У Г И
Выводится до 4х ключевых элемента раздела «Услуги», отмеченные галочкой.
«Показывать на главной». Подробную информацию о каждой услуге можно просмотреть
во всплывающем окне, отображающемся при клике на кнопку «Подробнее об услуге».
Фоновое изображение блока устанавливается администратором сайта.
АИТИ
18

19. А К Ц И И
В блоке выводится список (4 элемента) самых
свежих акций из раздела «Акции».
Каждая акция привязана к своему проекту.
Во всплывающем окне с подробной
информацией по акции можно перейти сразу
на страницу соответствующего проекта.
Детальное окно акции появляется
без перезагрузки страницы.
П Р Е Д Л О Ж Е Н И Е П О Д П И С К И
Возможно добавление модуля подписки, призывающего посетителя
подписаться наавтоматическую рассылку новых акций.
АИТИ
19
КонверсияКонверсия
АналитикаАналитика
Почтовое
событие
Почтовое
событие

20. С П И С О К
П Р О Е К Т О В
Блок содержит список
последних добавленных
элементов раздела
«Проекты», сгруппированных
по разделам (жилые,
коммерческие – продажа или
аренда, завершенные).
В каждом разделе выводится
до 8 проектов
Ф И Л ЬТ РА Ц И Я
П О К АТ Е Г О Р И Я М
Позволяет динамически
сортировать проекты по
принадлежности к категории.
П Р Е Д П Р О С М О Т Р
По каждому проекту можно
просмотреть краткую информацию
(название, адрес расположения,
анонс) и перейти на страницу
детального просмотра (через
вложенное меню).
АИТИ
20
АналитикаАналитика
И Н Д И К АТ О Р
С ТАТ У Т С А
Проекты имеющие
статус “в продаже“
маркеруются
специальным
индикатором.

21. S E O К О Н Т Е Н Т Б Л О К
Содержит текстовую информацию о
деятельности компании, предназначенную
для индексации ключевых слов поисковыми
системами.
Текст можно редактировать по мере
необходимости в режиме администратора
сайта.
Ф О Т О Р Я Д
На странице представлена отдельная
фотогалерея, не привязанная к остальным
разделам сайта.
Отображаются миниатюры тематических
фотографий, добавленных администратором.
При клике на фото в ленте открываются
полноразмерные изображения во всплывающем
окне, с возможностью пролистывания.
АИТИ
21

22. F O O T E R
“Подвал сайта“ состоит из блока ссылок
и контактной информации.
Ф О Р М А З А Я В К И З В О Н К А
Задачей блока «Призыв к действию» является
мотивация посетителя к заполнению формы заказа
обратного звонка для получения ответов
на интересующие вопросы.
Это важный блок сайта, решающий ключевую задачу
лидогенерации. Можно отслеживать целевое действие
(отправку запроса через форму) и рассчитывать
конверсию.
Б Л О К П А Р Т Н Е Р Ы
Выводятся логотипы партнеров с возможностью перехода
на их официальные сайты.
Ссылки закрыты от индексации и открываются в новом окне.
Содержимое блока управляется из административной части сайта.
АИТИ
22
КонверсияКонверсия

23. ПРОЕКТЫ / СПИСОК ПРОЕКТОВ
АИТИ

24. С П И С О К П Р О Е К Т О В
На странице выводятся все проекты
компании с возможностью предпросмотра
и фильтрации (жилые, коммерческие –
продажа или аренда, завершенные), а также
текстовой блок раздела.
При клике на элемент списка открывается
краткое описание проекта с ссылками
переходана детальную страницу проекта
(через вложенное меню).
АИТИ
24
АналитикаАналитика

25. ПРОЕКТЫ / ПРОЕКТ ДЕТАЛЬНО
АИТИ

26. С Т Р У К Т У РА
С Т РА Н И Ц Ы
“ П Р О Д Е К Т
Д Е ТА Л Ь Н О ”
Продуманная структура
отлично и позволяет
посетителю быстро получить
всю интересующую его
информацию о проекте.
H E A D E R
В Т О Р О Й Э К РА Н
П Р Е И М У Щ Е С Т В А
А К Ц И И
РА С П О Л О Ж Е Н И Е
И Г Е Н П Л А Н
П Л А Н И Р О В К И
Э ТА П Ы
С Т Р О И Т Е Л Ь С Т В А
Д О К У М Е Н Т Ы
И П О Т Е К А
К О Н ТА К Т Ы
А У К Ц И О Н
АИТИ
26

27. П Р Е Д З А Г Р У З К А С Т РА Н И Ц Ы
Учитывая большой объем информации,
содержащейся на странице проекта,
мы предусмотрели демонстрацию
прелоадера с индикатором процесса
загрузки, чтобы посетители сайта
с медленным Интернет-соединением
точно дождались открытия страницы.
На экране предзагрузки отображается
логотип проекта, его название
и текстовый анонс.
АИТИ
27

28. П Е Р В Ы Й
Э К РА Н
Полноэкранный слайдер
с видами объекта.
До 5 изображений
добавляются
администратором.
Автоматическкая смена
слайдов с эффектом
наплыва. Интервал задается
администратором.
Отображается название
объекта, краткий текст
описания (анонс), ссылка
на промо-сайт и кнопка
“Узнайте подробобнее“.
При клике на кнопку или
прокрутке страницы
срабатывает анимация,
появляется бокове меню,
контактная информация
и кнопка “Выбрать квартиру“.
АИТИ
28
АналитикаАналитика

29. ПЕРЕХОД НА ПЕРВЫЙ ЭКРАН
ОПИСАНИЕ ПРОЕКТА
АКЦИИ
ГЕНПЛАН ПРОЕКТА
ЭТАПЫ СТРОИТЕЛЬСТВА
П О Д Б О Р К В А Р Т И Р Ы
ДОКУМЕНТЫ
ИПОТЕКА
КОНТАКТЫ
Б О К О В О Е
М Е Н Ю
Отображается на втором экране.
Служит для быстрого перехода
между информационными
блоками проекта.
РАСПОЛОЖЕНИЕ
АИТИ
29
Доступно при ширине экрана/окна свыше 1320 пикселей.
На небольших экранах меню скрывается, чтобы не мешать
работе с контентом страницы.

30. Б Л О К О П И С А Н И Я П Р О Е К ТА
Отображает текстовое описание, принадлежность
к категории, площадь, адрес, ссылку для просмотра
расположения на карте, статус проекта, и адрес сайта.
П Р Е И М У Щ Е С Т В А
Содержит тематическое фоновое изображение подложки,
каждое преимущество имеет заголовок, текст описания
и изображение.
Блок выполнен в виде слайдера. Администратор может
добавить до 4х преимуществ к каждому проекту.
АИТИ
30
АналитикаАналитика

31. П О Д П И С К А И РА С С Ы Л К А
Автоматическая рассылка. При добавлении новой
акции у текущего проекта все пользователи, подписавшиеся
на рассылку по данному проекту, будут получать
автоматическое письмо на свой e-mail, указанный при
подписке, с текстом акции и ссылкой на страницу проекта.
По ссылке из письма можно будет отписаться от рассылки.
Подписка на рассылку доступна и для неавторизованных
пользователей.
А К Ц И И
Выводятся акции, связанные с проектом. При клике
на название акции появляется всплывающее окно
с детальной информацией.
Акцией можно поделиться в социальных сетях.
АИТИ
31
КонверсияКонверсия Почтовое
событие
Почтовое
событие
АналитикаАналитика

32. РА С П О Л О Ж Е Н И Е
В этом блоке вы сможете дать текстовое
описание расположения объекта,
рассказать о внешнем окружении
и транспортной доступности.
Также выводится интерактивная карта
с маркером объекта (вы сможете
загрузить индивидуальный маркер
в административной части сайта).
Г Е Н П Л А Н
Вы можете прикрепить
изображение генплана проекта
(схему / рендер / фотографию
с высоты птичьего полета) и дать
текстовое описание объектам
внутренней инфраструктуры,
учитывая особенности и интересы
вашей целевой аудитории.
АИТИ
32

33. В Ы Б РАТ Ь К В А Р Т И Р У
АналитикаАналитика
Матрица поэтаэных планировоко с фильтрацией
АИТИ
33

34. О Т П РА В И Т Ь Н А E - M A I L
Предлагаем добавить важную
возможность отправки сведений
об интересном пользователю помещении
ему на электронный почтовый ящик.
Так мы получим его контактную
информацию для дальнейшей
маркетинговой работы; узнаем, какой
продукт ему интересен; сделаем сайт
удобнее для пользователя; сформируем
положительное представление о сервисе
компании и получим дополнительные
аналитические данные для оценки
покупательского спроса.
Скачивание
PDF
Скачивание
PDF
Почтовое
событие
Почтовое
событие
КонверсияКонверсия
З А Я В К А
В качестве инструмента лидогенерации
мы предлагаем использовать форму
заявки на конкретное помещение.
П Л А Н И Р О В К И
Каждый ваш проект уникален. Наша
универсальная система позволит вам
автоматически сформировать любую структуру
объекта и вывести ее в виде шахматки.
Помещения в шахматке можно фильтровать.
Для каждого этажа загружается его детальный
план, а для каждого помещения публикуется
подробная информация.
АИТИ
34
Результаты заявок сохраняются
в административной части сайта
и отправляются менеджерам.

35. П О Д Б О Р П О П А РА М Е Т РА М
На странице проекта детально в разделе
«Проекты» Сайта под блоком «Выбрать
квартиру» (в подразделе «Жилые»)
/ «Выбрать площадь» (в подразделе
«Коммерческие») будет размещен
динамичный фильтр по всем доступным
параметрам опубликованных в данном
проекте помещений,
Результатом подбора будет таблица
с подходящими по параметрам помещениями
(подбор только по помещениям просматриваемого
проекта).
При клике на строку результата открывается
блок с детальной информацией по выбранному
помещению.
АналитикаАналитика
АИТИ
35

36. И П О Т Е К А
Расскажите об индивидуальных ипотечных программах
и предложениях, действующих по конкретному проекту, или разместите общую
информацию об условиях ипотечного кредитования в банках-партнерах.
АналитикаАналитика
Д О К У М Е Н ТА Ц И Я
Динамичный раздел со списком элементов, доступных
для скачивания, для каждого документа можно задать
заголовок и описание.
Скачивание
PDF
Скачивание
PDF
Э ТА П Ы
Для каждого проекта есть возможность
загрузить собственную динамическую
фотогалерею с альбомами, объединяющими
изображения по временным периодам.
АИТИ
36

37. АИТИ
37
И П О Т Е Ч Н Ы Й
К А Л Ь К У Л Я Т О Р
Содержит поля: сумма кредита,
срок кредита, процентная ставка,
первоначальный взнос, начало выплат.
После ввода всех значений калькулятор
выдает информацию о ежемесячных
платежах (с остатком долга в текущем
месяце, сумме начисленных процентов,
сумме погашения основного долга),
размере общей переплаты, дате окончания
выплат по кредиту.
Предлагаемый функционал калькулятора
не привязан к конкретному банку или
ипотечному предложению, а служит
для примерной оценки планируемой
пользователем сделки.
Наличие ипотечного калькулятора на сайте
станет дополнительным удобным бонусом
для ваших посетителей.
КонверсияКонверсия
Почтовое
событие
Почтовое
событие
АналитикаАналитика
Р Е З У Л ЬТАТ Ы РА С Ч Е ТА
График платежей, сформированный калькулятором, клиент
сможет скачать себе на компьютер, отправить на свой почтовый
ящик (вы получите контакт клиента) или распечатать.

38. АналитикаАналитика
К О Н ТА К Т Ы
Блок содержит текстовую информацию
о способах связи по проекту.
П О К А З АТ Ь Н О М Е Р
При клике на кнопку отображаются
контактные номера телефонов.
Действие посетителя считается
конверсией.
П О К А З АТ Ь Н О М Е Р
КонверсияКонверсия
АИТИ
38

39. КОНТАКТЫ
АИТИ

40. К А Р ТА
С О Т М Е Т К О Й
О Ф И С А
К О М П А Н И И
К О Н ТА К Т Н Ы Е
Д А Н Н Ы Е
О П И С А Н И Е
М А Р Ш Р У ТА
АИТИ
40
АналитикаАналитика
КонверсияКонверсия

41. АНАЛИТИКА
АИТИ

42. W E B - А Н А Л И Т И К А
Подключение системы web-
аналитики, настройка целевых
действий, событий, показателей
вовлеченности, и целей.
Интеграция с рекламными
кампаниями через utm-метки.
Детализированные отчеты и оценка
расходования рекламного бюжета
по каждому каналу привелечения
траффика.
АИТИ
42
Обмен данными с системами контекстной
и тизерной рекалмы.
Интеграция с CRM
Расчет ROI (рентабельности инвестиций)
в интернет-маркетинг.

43. www.ircit.ru
+7 499 215-34-34
+7 916 953-57-60
mailbox@ircit.ru
А Л Е К С А Н Д Р У С П Е Ш Н Ы Й
Генеральный директор
АИТИ
ОБРАЩАЙТЕСЬ
ПО ЛЮБЫМ ВОПРОСАМ!