Сайт Рустелематики
Рустелематика — оператор пультовой охраны. Устанавливает сигнализации и тревожные кнопки. Защищает от ограблений и чрезвычайных происшествий.
Первый сайт мы сделали «Рустелематике» в 2014 году, а второй в 2017 — сайт перестал соответствовать компании.
![Главная страница нового сайта](/upload/05b/rtm-large.png)
1. Сделали дизайн страниц
«Рустелематика» устанавливает и сопровождает охранное оборудование в квартирах, домах и коммерческих организациях.
Виталий, генеральный директор «Рустелематики», рассказал нам о пакетах услуг — «Стандарт» и «Премиум» для частных и корпоративных клиентов. Один был подешевле, другой подороже, как обычно.
Пока мы делали сайт, задавали Виталию вопросы, разбирались в его бизнесе, он решил, что пакетов больше не будет.
«Сейчас есть диссонанс у клиентов. Покупают стандарт и напрягаются, что это для лохов. В принципе, они правы — это некорректно», — Виталий.
Стало понятнее — выделили персонажей, их цели и сценарии заказа. Решили, что логичнее разделить услуги:
- На частных и корпоративных клиентов.
- Частных — на владельцев квартир и владельцев домов.
- Корпоративных:
- на банки и другие бизнесы;
- на обычные офисы и бизнесы, у которых много посетителей.
У них разные задачи, и поэтому нужно разное охранное оборудование. Например, у домов есть терраса, запасной вход, которые нужно охранять. У квартир — зависимость от этажа (первый и последней в зоне риска), балкон. Банкам нужно защищать больше объектов — банкоматы и комнаты хранения. Для магазинов и других бизнесов с большой проходимостью нужна тревожная кнопка на кассовых узлах.
У Виталия — сервисная компания, и в ней нет, как в магазине, одинакового набора товаров по одной и той же цене. Всё индивидуально, и это важно показать. «Пакеты», которые до этого использовал Виталий, не подходили под эту концепцию, поэтому мы сделали калькулятор, где подсчитывались и хранились предпочтения посетителя сайта.
![Страница «Частным клиентам» помогает выбрать оборудование для квартиры или дома](/upload/b47/home.png)
![Страница «Бизнесу» рассказывает о сигнализации, тревожной кнопке и оборудовании для банков](/upload/e77/business.png)
Мы всегда делаем главную после того, как определимся со структурой и поймём, что самое важное. Почитайте, как мы делаем сайты. На главной мы рассказали:
- об охране для частных клиентов и бизнеса;
- как работают сигнализация и тревожная кнопка;
- какие есть дополнительные услуги, например, видеонаблюдение;
- об экипажах, выезжающих на вызов;
- почему «Рустелематика» не пропустит сигнал о помощи;
- как проходит установка оборудования;
- разместили акции, логотипы клиентов и документы.
Подобрали заглавную фотографию. Вот какие были варианты:
![](/upload/block/fotorama/35c/mainphoto1.jpg)
![](/upload/block/fotorama/f25/mainphoto2.jpg)
![](/upload/block/fotorama/a0f/mainphoto3.jpg)
Выбрали этот, потому что нужно было показать, что по тревоге выезжает не только «Рустелематика», а ещё «Росгвардия» и полиция — это отличает компанию от конкурентов.
![Утверждённая фотография для главной страницы](/upload/730/banner.jpg)
На странице о «Рустелематике» рассказали, в каких регионах она работает, о подборе, разряде и экипировке сотрудников, автопарке и партнёрах. Прикрепили лицензии.
![Страница о компании](/upload/335/about.png)
Сверстали «Вопросы и ответы», «Блог», «Оплата» и «Контакты», страницу ошибки.
![Вопросы и ответы](/upload/876/faq.jpg)
![Блог переключается в два режима: крупно и мелко — как удобнее читателю](/upload/7d5/blog.jpg)
![Страница оплаты с интеграцией с АПИ Сбербанка — клиенты могут оплачивать счета на сайте](/upload/9b9/pay.png)
![Такой страницы нет](/upload/422/page404.jpg)
2. Провели фотосъёмку
Чтобы оформить страницы, сфотографировали офис, сотрудников, автомобили и снаряжение.
![](/upload/block/fotorama/5b5/rtm-photo6.jpg)
![](/upload/block/fotorama/2d7/rtm-photo7.jpg)
![](/upload/block/fotorama/e75/rtm-photo2.jpg)
![](/upload/block/fotorama/f7d/rtm-photo3.jpg)
![](/upload/block/fotorama/a01/rtm-photo4.jpg)
3. Нарисовали иконки
Лучший в мире дизайнер пиктограмм, Евгений Арцебасов, нарисовал сет для всех страниц.
4. Нарисовали планы помещений
![](/upload/block/fotorama/882/scheme1.png)
![](/upload/block/fotorama/a4f/scheme2.png)
![](/upload/block/fotorama/236/scheme3.png)
![](/upload/block/fotorama/ac3/scheme4.png)
![](/upload/block/fotorama/ae5/scheme5.png)
5. Согласовали работу внутри «Форма»
Дизайнер подготовил инструкцию для технолога, чтобы проще сверяться с макетом во время вёрстки и не допускать ошибок.
![Инструкция дизайнера технологу](/upload/633/techguide.jpg)
![Задание для вёрстки текстовой страницы](/upload/290/tech2.jpg)