Ситуация
«Автомобиль года» — это проект со своим журналом, ежегодной престижной премией и сайтом. В 2015 году стало очевидно, что сайт пора адаптировать под мобильные устройства. Также была проблема с дизайном — он не соответствовал фирменному стилю журнала.
Задача
Перед нами стояла задача сделать сайт адаптивным, создать дизайн, который соответствовал бы фирменному стилю проекта, поработать над главной страницей и добавить новые разделы: «Тест-драйвы» и «Дни марки».
Проектирование
Главная страница была задумана как «разводящая» — у редакции много интересных идей, постоянно появляются новые форматы. И две большие активности: сама премия и рейтинги автомобилей. Поэтому было решено сделать ее полностью настраиваемой из админки: чтобы контент-редактор мог выбирать блоки для главной, менять их местами, создавать новые.
Одновременно на главной выводится десяток блоков: проекты, новости, дни марки, конкурсы, видео, тест-драйвы, интервью, блоги. Мы спроектировали сетку таким образом, чтобы читатель не заскучал, пролистывая страницу — блоки выполнены в одном стиле, но смотрятся контрастно относительно соседних.
Дизайн
Мы учли главное пожелание к стилю и приблизили дизайн сайта к актуальному брендбуку компании. Отказались от темной подложки, темных тонов в принципе — у нас всё легко, светло и чисто, почти как в салоне новенького Land Rover.
Фирменные цвета, синий и красный, используются для выделения ссылок, кнопок, так что навигация тоже в общем стиле.
Часть страниц подверглась редизайну, часть — была спроектирована и создана с нуля. Помимо главной, это разделы «Тест-драйвы» и «Дни марки».
Чтобы пользователи могли в любой момент перейти в нужный раздел, мы добавили меню-гамбургер — оно появляется и прилипает к верхней части экрана, если пользователь листает сайт вниз.
Техническая реализация
Чтобы редактор сайта мог легко настраивать блоки на главной странице и в разделах, мы использовали инфоблоки 1С-Битрикс — и дописали сверху кучу уникальных функций. Например, добавляя новый раздел, редактор выбирает не только его расположение на странице и меняет контент, но и может выбрать любой из вариантов сетки.
Получается гибкий и функциональный «конструктор» страницы внутри административной панели «Битрикса». Просто, привычно и удобно.
Также мы выполнили еще одну важную задачу — сделали адаптивную версию для мобильных устройств. Блоки перестраиваются, верхнее меню с горизонтального меняется на вертикальное, читать контент так же комфортно, как и на десктопе.
