Перейти до вмісту

Редизайн 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: видно, якою технікою справді знімають фотографи сайту;
«Підсумки року» — сторінка зі статистикою фотографа та найкращими кадрами, якою хочеться поділитися;
AI-інструменти: аналіз фото, переклад статей, автозаповнення карток товарів у магазині та імпорт нових камер.

До і після: каталог фототехніки

Безпека та SEO по дорозі

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

Темна тема

Що ваш проєкт може взяти з цього

1.
Редизайн — не привід переписувати все. Якщо платформа працює, оновіть інтерфейс поверх неї: швидше, дешевше й без ризику для SEO.
2.
Почніть із дизайн-системи. Токени роблять темну тему, єдиний стиль і майбутні зміни майже безкоштовними.
3.
Видаляйте сміливо. Старі бібліотеки й невикористаний код — найлегший спосіб прискорити сайт.
4.
Використовуйте редизайн як аудит. Це найкращий момент, щоб знайти вразливості та функції, які тихо зламалися.
5.
Давайте людям причини повертатися. Новий вигляд привертає увагу, нові функції її втримують.

Повний кейс зі скриншотами — у нашому портфоліо, а оновлений сайт можна побачити наживо на supersnimki.ru.

Якщо ваш сайт давно потребує оновлення, але торкатися його страшно, розкажіть нам про свій проєкт — ми складемо план редизайну, у якому нічого не загубиться.

Усі статті

AI-аудит

Безкоштовний AI-аудит сайту за 2 хвилини

Вкажіть свій сайт — наш AI перевірить швидкість, SEO, юридичні сторінки Швейцарії, довіру та конверсію і покаже, що виправити насамперед.

Безкоштовно і без зобов’язань. Звіт також надійде на email.

Ще немає сайту? Дайте відповідь на 6 коротких запитань

Читайте далі