Главная / События, кейсы, проекты / 14.08.2026

Редизайн сайта технического центра «Протор-Сервис». Современный интерфейс без потери накопленного контента

Сайт технического центра «Протор-Сервис» создавался в другой эпохе веб-дизайна — с плотной компоновкой, небольшими текстами, тяжёлыми рамками и большим количеством визуальных элементов.

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

Задача

Не было необходимости превращать сайт сервисного центра в модный одностраничный лендинг.

Для «Протор-Сервиса» важнее другое — ощущение надёжной технической компании, которой можно доверить бытовую технику, электронику и её обслуживание.

Поэтому мы выбрали сдержанный корпоративный подход:

От старого сайта — к современной системе

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

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

Мы не стали просто менять цвета или увеличивать шрифт.

Была пересмотрена сама визуальная система проекта.

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

Главная страница

БЫЛО

СТАЛО

Услуги

БЫЛО

СТАЛО

Вызов мастера

БЫЛО

СТАЛО

Контакты

БЫЛО

СТАЛО

Новая типографика

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

H1 → H2 → H3 → основной текст → вспомогательная информация

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

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

Новая боковая навигация

Левый столбец полностью переосмыслен. На месте старых блоков появилась система лёгких информационных карточек.

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

Для активного раздела предусмотрено отдельное визуальное состояние. Пользователь сразу понимает, в каком разделе находится.

При этом боковая колонка не конкурирует с основным содержанием страницы — она остаётся инструментом навигации.

Единый визуальный язык

Для интерфейса сформирована единая система оформления:

Радиус 16 px используется не только в карточках, но и в фотографиях, что визуально связывает разные элементы страницы в единую систему.

Информационные блоки

Отдельно переработаны акцентные информационные сообщения.

Вместо тяжёлых рамок по всему периметру используется светлый фон и тонкий вертикальный синий акцент.

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

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

Страница услуг

На странице услуг сохранён большой объём полезной информации, но изменён способ её подачи.

Текст получил больше пространства, изображения стали самостоятельными визуальными элементами, а списки услуг получили чёткую структуру.

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

Контактная информация

Контактная страница также получила новую структуру.

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

Карта и фотография сервисного центра стали частью общей композиции страницы.

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

Сохранение характера компании

При редизайне мы сознательно не стали делать сайт слишком «технологичным» или похожим на современный IT-сервис.

«Протор-Сервис» — технический центр с реальной историей, физическим адресом, мастерами и сервисной инфраструктурой.

Поэтому визуальный стиль получился спокойным и практичным.

Не модный ради моды, а современный ради удобства.

Результат

Обновлённый интерфейс:

• Лучше структурирует большой объём информации;
• Быстрее направляет пользователя к нужной услуге;
• Делает контактные данные заметнее;
• Формирует более современное представление о компании;
• Сохраняет фирменную связь с существующим логотипом;
• Создаёт единую систему оформления для разных типов страниц.

События, новости