Редизайн сайта с 13-летней историей: как обновить всё и ничего не сломать

28 сентября 2026 г.

У многих компаний есть сайт, который когда-то был гордостью, а теперь выглядит как привет из прошлого десятилетия. Переделывать страшно: там годы контента, позиции в поиске, привычки пользователей и код, который никто не хочет трогать. Мы как раз закончили такой проект — полный редизайн фотосообщества SuperSnimki.ru — и хотим рассказать, как он проходил.

SuperSnimki после редизайна

С чего всё начиналось

SuperSnimki мы запустили в 2013 году. С тех пор на сайте накопилось более 200 000 фотографий и свыше 4 700 авторов, тысячи статей и обсуждений на форуме. Платформа работала стабильно, но интерфейс застрял в своём времени:

стили собирались устаревшим инструментом прямо на сервере;
иконки хранились в трёх разных иконочных шрифтах;
основной JavaScript весил 674 КБ — и примерно половину занимали библиотеки, которые давно не использовались;
не было ни тёмной темы, ни удобной мобильной навигации;
часть проблем была незаметной: RSS-лента не работала с конца 2024 года, а удалённые фотографии отдавали редирект вместо честной 404.

Главное решение: не переписывать платформу

Самый дорогой и рискованный путь — «давайте всё перепишем на новом стеке». Мы от него отказались. Движок на Perl, базы MongoDB и MySQL, URL-структура и данные остались прежними. Меняли то, что видит пользователь, и то, что мешает сайту быть быстрым.

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

Было и стало: форум

Дизайн-система поверх старого кода

Первым делом мы описали дизайн-систему в виде токенов: цвета для светлой и тёмной темы, шкала типографики, отступы с шагом 4 px, скругления, длительности анимаций. Все 183 шаблона сайта перевели на эти токены — поэтому тёмная тема заработала сразу везде, а не только на главной.

Небольшой приём, который сэкономил много времени: 130 новых SVG-иконок получили те же имена классов, что и старые иконки из шрифтов. Шаблоны не пришлось переписывать ради иконок — они просто стали выглядеть по-новому.

Было и стало: журнал

Мобильная версия как у приложения

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

Мобильная версия

Скорость: удалить больше, чем добавить

Редизайн часто делает сайт тяжелее. У нас получилось наоборот:

основной JS-бандл похудел на 68% — с 674 до 213 КБ;
удалена 51 устаревшая библиотека, а редактор, карты и графики подгружаются только когда нужны;
для телефонов отдаются фото среднего размера, а пока снимок грузится, на его месте виден его средний цвет;
поиск по статьям, который на частых словах занимал до 30 секунд, теперь выполняется одним быстрым запросом.

В итоге код проекта стал на 27 000 строк меньше, хотя функций прибавилось.

Новые поводы вернуться

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

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

Было и стало: каталог фототехники

Безопасность и SEO — заодно

Когда проходишь по всем шаблонам, видишь и то, что годами оставалось незамеченным. Мы закрыли XSS-уязвимости в поиске, комментариях и на форуме, защитили удаление CSRF-токенами, вернули настоящие 404, починили RSS, дополнили разметку JSON-LD и карту сайта изображениями.

Тёмная тема

Что из этого стоит взять вашему проекту

1.
Редизайн — не повод переписывать всё. Если платформа работает, обновите интерфейс поверх неё: быстрее, дешевле и без риска потерять SEO.
2.
Начинайте с дизайн-системы. Токены делают тёмную тему, единый стиль и будущие изменения почти бесплатными.
3.
Удаляйте смело. Старые библиотеки и неиспользуемый код — самый простой способ ускорить сайт.
4.
Используйте редизайн как аудит. Это лучший момент найти уязвимости и тихо сломавшиеся функции.
5.
Добавьте поводы вернуться. Новый внешний вид привлекает внимание, а новые функции его удерживают.

Подробный кейс с экранами — в нашем портфолио, а обновлённый сайт можно посмотреть вживую на supersnimki.ru.

Если ваш сайт тоже просит обновления, но страшно его трогать, — расскажите нам о проекте, и мы предложим план редизайна без потерь.