Разработка сайта на WordPress для производителя домашних кинозалов

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

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

Клиент, инженерная группа «АртТелеСеть», с 2007 года создает персональные кинозалы и домашние кинотеатры «под ключ», профессиональные аудио/видеосистемы и эксклюзивные столярные изделия: от акустических панелей до специализированных помещений (винные комнаты, гардеробные). 

Компания обратилась к нам с запросом на обновление сайта: он прослужил более 10 лет без существенных доработок и морально устарел. Команда клиента уже привыкла работать в WordPress и не хотела менять платформу. Требовалось остаться в привычной CMS, но получить современный сайт с обновленным дизайном и расширенным функционалом.

WordPress

• Освежить дизайн сайта: сделать его более современным, но сохранить узнаваемость для постоянных клиентов и партнеров
• Улучшить функционал: добавить возможность детально демонстрировать выполненные проекты
• Обеспечить полную адаптивность под мобильные устройства и кроссбраузерную совместимость
• Сохранить привычную CMS и настроить админку так, чтобы контент-менеджеры могли самостоятельно обновлять контент без участия разработчиков
• Провести первичное наполнение сайта контентом и подготовить его к дальнейшему продвижению

На старте работ клиент подчеркивал, что полностью новый сайт ему не нужен: он должен посвежеть, но остаться узнаваемым для постоянных заказчиков. Поэтому мы не стали выстраивать стиль с нуля, а сохранили то, что уже стало частью айдентики, и обновили то, что устарело с точки зрения UX и визуала.

Сохранили:

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

Обновили:

• Типографику и сетку: заголовки в разрядку, крупные полупрозрачные надписи-подложки, больше воздуха. Теперь сайт «АртТелеСети» стал выглядеть аккуратнее и солиднее. 
• Услуги: вместо пяти коротких текстовых вкладок сделали три направления с вертикальным переключением и подробным описанием каждого.
• Оживили интерфейс: при наведении меняется цвет ссылок, карточки работ слегка смещаются, а переключение услуг и работ сопровождается плавными переходами. Сайт реагирует на действия пользователя и не ощущается статичным.
• Шоурум получил карусель фотографий, а текст «О компании» стал полноценным разделом с контактами и лентой проектов. 

В итоге сайт выгоднее подает работы компании, но постоянные клиенты попадают в знакомую среду.

Портфолио — главная продающая страница клиента: заказчики выбирают компанию по работам. В старой версии это была сплошная сетка миниатюр. По ней было непонятно, что на фото, какой объем работ выполнен и чем ценен проект.

Мы выстроили портфолио по привычному для современных сайтов принципу «каталог + карточка»:

• «Каталог» — сетка проектов с фильтром по типам работ. Посетитель сразувидит все направления работы компании и находит то, что релевантно его задаче. 
• «Карточка» — каждый проект открывается детальным кейсом: название, описание работ, список оборудования и материалов, галерея из нескольких фотографий. Для части проектов добавили видео и PDF-презентации. 

Теперь портфолио работает как продающий раздел: посетитель видит масштаб и качество работ: от акустической обработки и подбора оборудования до мебели, изготовленной на собственном столярном производстве компании.

Перенесли дизайн в код и интегрировали его с WordPress: сверстали все блоки по утвержденному макету — одностраничник с якорной навигацией, портфолио с фильтрами, страницы кейсов, карусели шоурума и первого экрана.

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

Протестировали отображение в популярных браузерах — Chrome, Safari, Firefox, Яндекс — чтобы все посетители видели сайт таким, каким он задуман.

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

Управление услугами и работами

Настроили удобное редактирование услуг и портфолио из админки: контент-менеджер сам обновляет тексты, добавляет новые проекты и фотографии, управляет их отображением на сайте. Для повседневных обновлений разработчики не нужны.

Доступы

Настроили в админке отдельную роль для контент-менеджера: он может обновлять тексты, добавлять проекты и фотографии, а вот системные настройки, дизайн и код для него закрыты. Это защищает сайт от случайных поломок — при наполнении просто невозможно что-то «сломать».

В итоге команда клиента работает с сайтом автономно: новые кейсы и обновленные услуги публикуются быстро и без риска для работы сайта.

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

Три направления услуг получили подробные описания, в раздел «О компании» перенесли историю и заслуги компании, наполнили разделы шоурума и контактов.

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

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

• Обновили дизайн, сохранив узнаваемость бренда: постоянные клиенты попадают в привычную среду, а новые посетители видят актуальный ресурс, соответствующий специализации компании.
• Портфолио стало главным аргументом в выборе подрядчика. Фильтры по типам работ, детальные кейсы, видео и PDF-презентации показывают масштаб работ и подтверждают экспертизу компании.
• Команда управляет сайтом самостоятельно. Настроенная админка и ограниченные доступы позволяют контент-менеджеру обновлять тексты, добавлять проекты и фотографии без разработчиков и без риска сломать сайт.
• Сайт удобен с любого устройства. Адаптивность и кроссбраузерность: на мобильных меню сворачивается в бургер, фильтры — в аккордеон, работы — в слайдер. Ничего не теряется, все под рукой.
• Техническая база надежна. Обновленный сервер, быстрая загрузка и стабильная работа — сайт готов к дальнейшему развитию и продвижению.

Клиент получил обновленный сайт и сохранил привычное управление им: все тот же понятный команде WordPress, узнаваемый дизайн и одностраничную структуру. При этом ресурс стал современным, портфолио превратилось в витрину кейсов, а админка — в удобный и безопасный инструмент.