Задача проекта: разработать новый сайт с современным адаптивным дизайном и личным кабинетом для поддержки клиентов
О клиенте
АВТОМАТИКА-ВЕКТОР — одна из крупнейших компаний в России по разработке и внедрению автоматизированных систем для предприятий лесопромышленного комплекса. Крупнейшие предприятия ЛПК (не только в России, но и за рубежом) работают с их программным обеспечением и оборудованием.
С чем обратился клиент
Клиент обратился к нам с просьбой провести редизайн старого сайта компании, который был разработан в далёком 2009 году, и давно утратил свою актуальность на фоне современных решений. Попутно доработать функционал сайта, в том числе личного кабинета для клиентов и перенести сайт на 1С-Битрикс для более удобного администирования.
Основные задачи, которые мы определили совместно с клиентом:
- разработать современный лаконичный дизайн, придерживаясь корпоративных цветов;
- сохранить основную структуру сайта, при этом оптимизировать содержимое его разделов;
- создать личный кабинет для клиентов, где они смогут быстро формировать заявки и отслеживать их статус;
- реализовать разделение сайта на две версии — на русском и английском языках;
- адаптировать сайт для удобного просмотра на планшетах и смартфонах;
- новый сайт должен презентовать компанию как серьезную, современную, идущую в ногу со временем, готовую решать сложные и актуальные задачи в своей отрасли.
Проектирование и прототип
После получения задачи, наши проектировщики проанализировали структуру старого сайта клиента, определили её слабые стороны. Основными минусами были недостаточное количество информации о компании, её преимуществах и оказываемых услугах непосредственно на Главной странице сайта.
На основе полученных результатов анализа и пожеланий клиента, была спроектирована итоговая структура нового сайта. На основе структуры — сформированы прототипы всех новых страниц.
На Главной странице клиент попросил сохранить уже имеющиеся блоки (Слайдер с банерами, Новости) и добавить блок с описанием услуг, предоставляемых компанией. Помимо этого, на Главную решили добавить описание компании, описание продукции компании, карту реализованных проектов, отзывы клиентов и форму обратной связи.
Таким образом мы получили Главную страницу сайта, которая предоставляет посетителям исчерпывающую информацию о деятельности компании, её услугах и преимуществах.
Дизайн
На основе сформированного прототипа, наш дизайнер приступил к отрисовке дизайн-макетов. Сначала был отрисован макет главной страницы сайта. В ходе работ над главной страницей была сформирована основная концепция дизайна, которую одобрил клиент, и далее мы использовали её для отрисовки всех остальных страниц.
Главная страница до редизайна:
Главная страница после редизайна:
Цвета, шрифты, логотип
На этапе подготовки к проектированию сайта, клиент предоставил файлы с фирменными цветами и логотипом, среди которых были зеленый и оранжевый цвета.
В ходе работы над дизайном мы приняли решение отказаться от использования оранжевого цвета, чтобы не перегружать сайт большим количеством ярких акцентных цветов, что позволит пользователям удобнее им пользоваться и проще находить нужную информацию. Оттенок зеленого цвета немного изменили, чтобы он лучше вписался в общую стилистику сайта.
В итоге оставили один акцентный цвет — зелёный, и несколько дополнительных: чёрный, белый, несколько градаций серого.
Логотип немного освежили: оставили его основную фигуру в исходном виде, но перекрасили её в белый цвет и поместили на зелёный фон.
В качестве шрифтов для использования на сайте была подобрана шрифтовая пара:
- Montserrat — для заголовков и кнопок
- Roboto — для обычных текстовых абзацев
Верстка страниц
На основе дизайн-макетов, подготовленных на предыдущем этапе, была сделана адаптивная вёрстка всех страниц. Как результат — сайт удобно и красиво отображается на любых экранах, в том числе на планшетах и смартфонах.
Программирование и запуск сайта
Готовую вёрстку страниц наши программисты интегрировали в систему управления сайтом 1С-Битрикс. Помимо прочего, был реализован следующий функционал сайта:
- разделение на две языковые версии,
- разграничение прав доступа к некоторым страницам для авторизованных и неавторизованных пользователей,
- личный кабинет пользователя с возможностью регистрации, редактирования профиля, формирования и отслеживания заявок на тех. поддержку, восстановления пароля через e-mail в случае его утраты.
После внесения всех финальных правок и прохождения тестов, сайт был перенесен на хостинг заказчика. Мы написали для него специальную инструкцию, которая позволяет с лёгкостью управлять новым сайтом и наполнять информацией, даже не имея каких-либо специальных навыков.
Новый сайт со свежим дизайном стал хорошей визитной карточкой для новых клиентов, удобным инструментом для работы с текущими клиентами, а также качественной платформой для владельцев сайта, которая позволяет легко редактировать информацию на нём и расширять его возможности.