Готовые дизайн-макеты — это визуальная концепция будущего сайта, но не готовое решение для разработки. Они показывают внешний вид страниц, однако не учитывают все технические особенности: работу на разных устройствах, возможности CMS и дальнейшее сопровождение.
На примере проекта «Регион Медсервис» показываем, как перенесли дизайн-концепцию заказчика в корпоративный сайт на 1С-Битрикс, доработав технические моменты для адаптивов.
Клиент
«Регион Медсервис» — сервисная медицинская компания, которая с 2009 года оказывает услуги ассистанса страховым организациям в России и за границей. Компания сопровождает застрахованных клиентов на всех этапах получения медицинской помощи и организует взаимодействие с медицинскими учреждениями.
Сегодня «Регион Медсервис» обслуживает более 350 000 застрахованных клиентов и сотрудничает с более чем 9 500 клиниками и медицинскими организациями.
Ситуация до начала проекта
У компании уже были разработаны дизайн-макеты будущего корпоративного сайта. Они включали оформление страниц, фирменную цветовую палитру, типографику, навигацию и основные элементы интерфейса, полностью соответствующие корпоративному стилю.
Однако готовый дизайн — это прежде всего визуальная концепция. Обычно дизайнер создает макеты отдельно от команды разработки, поэтому часть решений невозможно перенести в рабочий сайт без изменений. Некоторые элементы требуют доработки с учетом особенностей CMS, адаптивной верстки и логики работы сайта.
Поэтому компании требовался подрядчик, который сможет не просто реализовать готовые макеты, а превратить их в полноценный корпоративный сайт, сохранив качество и первоначальную идею.
Подобная задача возникает у многих компаний с сильным брендом. Когда уже есть брендбук, собственный дизайнер или утвержденная концепция, для запуска сайта важно, чтобы подрядчик имел собственную дизайн-команду. Это позволяет оперативно согласовывать изменения между дизайнерами и разработчиками без потери времени.
Во время разработки необходимо учитывать сразу несколько важных факторов:
корректное отображение страниц на устройствах с разными разрешениями экранов;
возможности и ограничения выбранной CMS;
удобство работы сотрудников с административной частью сайта;
простоту дальнейшего сопровождения и обновления контента.
Если не учесть эти моменты еще на этапе адаптации макетов, готовый сайт может заметно отличаться от первоначального дизайна, а отдельные элементы окажутся неудобными как для пользователей, так и для сотрудников компании.
Цель и задачи проекта
Цель — превратить готовую дизайн-концепцию в современный корпоративный сайт на 1С-Битрикс, который будет одинаково удобен на любых устройствах.
Задачи:1
Доработать готовые макеты, сохранив фирменную дизайн-концепцию и адаптировав ее под требования веб-разработки.
2
Настроить систему управления контентом, чтобы сотрудники компании могли самостоятельно публиковать новости, статьи и другие материалы.
Реализация проекта
Команда разработки изучила структуру страниц, элементы интерфейса и оценила, какие дизайнерские решения можно реализовать без изменений, а какие потребуется адаптировать. Уже в процессе анализа стало понятно, что часть макетов необходимо доработать.
Выбор CMSДля разработки мы выбрали 1С-Битрикс. Эта CMS позволяет создавать сайты с индивидуальным дизайном, поэтому утвержденную концепцию удалось реализовать практически без изменений и компромиссов.
При выборе CMS важно было предусмотреть возможности для дальнейшего развития проекта. 1С-Битрикс позволяет постепенно расширять функциональность сайта, добавлять новые сервисы и разделы, а также подключать необходимые интеграции без полной переработки проекта.
Еще одним преимуществом платформы стало удобное управление контентом. Благодаря административной панели сотрудники компании могут самостоятельно обновлять материалы сайта без участия разработчиков.
Готовая дизайн-концепция стала основой проекта, а архитектура сайта была адаптирована под возможности 1С-Битрикс.
Как правило, дизайнер готовит макеты для трех основных разрешений: компьютера, планшета и смартфона. Но в реальности пользователи заходят на сайт с устройств самых разных размеров, поэтому добиться абсолютно одинакового расположения элементов невозможно.
В макетах заказчика использовались разные контейнеры и системы отступов на отдельных страницах. Для статичного макета это допустимо, однако при адаптивной верстке подобные решения могут нарушить целостность интерфейса.
Софья Орлова, инженер-программист:
«Особенности адаптивной верстки важно учитывать уже во время дизайна. Мы объясняли заказчику, какие решения будут корректно работать на разных разрешениях. При этом старались сохранить композицию, общую логику интерфейса и визуальное впечатление независимо от размера экрана.»В проекте участвовали два дизайнера — со стороны клиента и нашей команды. Вместе они дорабатывали отдельные элементы интерфейса с учетом рекомендаций и замечаний разработчиков.
Благодаря адаптивной верстке сайт аккуратно выглядит на широких мониторах, планшетах и смартфонах.
При разработке было важно сделать сайт удобным не только для посетителей, но и для сотрудников компании, которые регулярно работают с контентом.
Новости, статьи и другие материалы были реализованы как управляемые сущности системы, а не как отдельные статичные страницы. Благодаря этому сотрудники получили возможность самостоятельно создавать, редактировать и публиковать материалы через административную панель без привлечения разработчиков.
Результаты
Корпоративный сайт «Регион Медсервис» получился стильным и удобным. Его можно просматривать на разных устройствах, что повышает конверсию. Главная страница, внутренние разделы, карточки, навигация, типографика и графические элементы были реализованы в соответствии с первоначальным дизайном.В результате:
Выросло доверие потенциальных клиентов. Современный внешний вид сайта, понятная структура и удобная навигация помогают быстрее находить нужную информацию и формируют положительное впечатление о компании.
Снизились расходы на дальнейшее развитие сайта. Благодаря возможностям 1С-Битрикс проект можно масштабировать, расширять функциональность и подключать новые сервисы без полной переработки.
Упростилась работа сотрудников с контентом. Специалисты компании самостоятельно публикуют, обновляют и удаляют материалы через административную панель, не обращаясь к разработчикам по каждой задаче.
Работа над проектом продолжается. Сейчас мы создаем для компании личный кабинет на базе собственного решения. Он расширит функциональность сайта, поможет автоматизировать взаимодействие с клиентами и станет частью единой цифровой экосистемы «Регион Медсервис».
