Создание общего стиля и доработка существующего сайта

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

Этапы разработки:

1 Этап

Для этого мы провели глубинное интервью с заказчиком и выяснили его пожелания по оформлению. Было принято совместное решение взять за основу цветовую гамму из уже имеющегося логотипа, а именно оттенки серого, зеленого и белого. Серый в дизайне ассоциируется с серьезностью и строгостью — это отлично передает подход к работе компании заказчика, а оттенки зеленого, ассоциируются со спокойствием и безопасностью, и прекрасно его дополняют. Для фона мы взяли белый цвет, чтобы создать баланс и контраст между элементами для лучшего восприятия информации. Основные шрифты сайта — простые и лаконичные, чтобы пользователям было легко прочитать текст. Для дизайна мы отрисовали кнопки, а на этапе проектирования добавили к ним переливающуюся анимацию для повышения интереса к следующим страницам. Также использовали большое количество иконок в цветах основной гаммы.

Первым делом наша команда приступила к разработке дизайна будущего сайта

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

Создание общей структуры сайта

2 Этап

3 Этап

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

Отображение основной информации

4 Этап

Отдельно выделили блок преимуществ работы с компанией и специальный тест для пользователя, чтобы эффективнее определить действительно нужные ему услуги. Раздел «О нас» реализован в формате слайдера, для более удобного знакомства с руководителями компании

Реализация пошагового теста

На страницу обязательно были добавлены все лицензии и документы по аккредитации компании, чтобы наглядно показать добросовестность, честность и законность работы.

Добавление необходимых документов

5 Этап

6 Этап

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

Размещение отзывов и кейсов

7 Этап

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

Создание личного кабинета

Провели необходимые SEO-настройки: для каждой страницы выставили заголовок h1; сделали описание и заголовок страниц; добавили favicon. Подключили Яндекс Метрику, Яндекс Вебмастер, Google Search Console, Google Analytics для отображения сайта
в поисковой выдаче и дальнейшего анализа посещаемости

SEO-Настройка сайта

8 Этап

Результат:

Ссылка на сайт: