Редизайн сайту хостингу: стимпанкова серверна, троє котів-фахівців зі справжньою роботою й кабінет клієнта на власній темі та плагіні замість конструктора сторінок.
Ілюстрація, використана на опублікованому сайтіKOTKA.DEV / CASE FILE 02
Формат
Сайт і кабінет клієнта
Сфера
Хостинг сайтів
Мова
Українська, англійська
Статус
Опублікований сайт
01 / Дизайнерська задача
Показати турботу, якої не видно
Коли хостинг працює, його ніхто не бачить: сервери, резервні копії й безпека живуть десь за лаштунками. Сайт мав зробити цю турботу помітною й дати компанії обличчя, яке запам’ятовується, — і не перетворити технічну послугу на іграшку. А ще — піти з конструктора сторінок, WordPress з Elementor, на рішення, яке команда повністю контролює.
Головна ідея
Ваш сайт працює. Котики стежать
02 / Рішення в інтерфейсі
Команда, а не парад талісманів
Лист персонажів — еталон для кожної ілюстрації на сайті
A
У кожного кота — своя справа
Арчі відповідає за сервери й запуск сайтів, Нокс — за безпеку, моніторинг і резервні копії, Мія — за підтримку. На головній кожна картка послуги каже, хто за неї відповідає, тож персонажі пояснюють послуги, а не прикрашають їх.
Для команди є записані правила: на головній лише ці троє, жодних декоративних котів, у кожній сцені та сама порода, шерсть, одяг і спорядження. Кожен персонаж з’являється у своєму контексті: Арчі — біля серверів, Нокс — біля сейфа й моніторів, Мія — у підтримці, чаті й FAQ.
Кольори прийшли з макетів і живуть у темі як токени: теплі метали на глибокому синьому, а бірюзовий — лише для статусів.
Глибокий синій#08141F
Стара латунь#B88746
Мідь#A65D37
Бурштин#F3A83B
Бірюзовий статус#20B8B0
03 / Деталь, яку можна спробувати
Менше котів, більше сенсу
У першому концепті головної коти були всюди: у кожній картці послуг, у кожному кроці, навіть замість облич клієнтів. Фінальна версія лишає трьох персонажів, дає кожному роль, а решту перетворює на зрозумілі піктограми. Порівняйте верх обох макетів.
↔
Перший концептФінальний макет
Рухай повзунок або користуйся стрілками на клавіатурі
Макети з архіву проєкту, а не знімки живого сайту.
04 / Під капотом
Зроблено так, щоб пережити редизайн
A
Тема — для вигляду, плагін — для даних
Конструктор сторінок поступився власній темі й плагіну. Клієнти, послуги й рахунки живуть у плагіні, тож переживуть будь-який майбутній редизайн. Сторінки кабінету описані кодом, а не збережені як звичайні сторінки: їх ніхто випадково не перейменує й не відправить у кошик.
B
Лише те, що знаємо напевно
У макеті кабінету були шкали на кшталт «використано 75 %». Джерела таких живих чисел поки немає, тож справжній кабінет показує ліміти тарифу й залишок оплаченого періоду. Шар даних готовий перейти на живі показники, щойно джерело з’явиться.
C
Жодних запитів до чужих серверів
Шрифти локальні, а сторінки не звертаються до сторонніх серверів: жодної зайвої затримки й жодних адрес відвідувачів у чужих руках. Українська в корені й англійська на /en/ працюють без плагіна перекладу.
05 / Що склалося в результаті
Серверна, куди можна зазирнути
З вересня 2026 року сайт працює українською та англійською: стимпанковий світ із трьома фахівцями, тарифи й кабінет клієнта, де зібрані послуги, домени, рахунки й звернення до підтримки. За кабінетом, сторінками й перекладами наглядають сотні автоматичних перевірок.
Висновок для дизайну: талісман — це прикраса, а команда — обіцянка. Коли кожен персонаж відповідає за щось справжнє, фантазія починає працювати на довіру.