Як ми змінили дизайн нашого сайту та чому наш новий стиль став набагато легшим

Коли ми оновлювали дизайн нашого сайту, то одразу зрозуміли: розмиті розповіді про «нові шрифти, кольори та філософію» нікому не цікаві. Це теорія, яка нічого не пояснює. Набагато крутіше - показати все на живому прикладі. Тому мы взяли одну конкретну сторінку проєкту з нашого портфоліо та вирішили розібрати її за принципом «як було» і «як стало». На прикладі цього кейсу набагато простіше побачити, як змінилася логіка інтерфейсів, робота з текстом та візуальний стиль усього нашого оновленого ресурсу.

Розглянемо два макети сторінки, яка презентує розробку нами складної CRM-системи. One варіант показує, як цей кейс виглядав у минулому, а другий - як він функціонує тепер.

Ліквідація важких плашок та створення візуального фокусу

Перший екран сторінки проєкту - це найважливіша конверсійна зона, яка визначає, чи зацікавиться відвідувач матеріалом. У нашій старій версії дизайну цей фрагмент мав серйозні проблеми з ергономікою. Презентація розробки починалася з масивної темно-сірої плашки у шапці сайту, яка візуально тиснула на інтерфейс і штучно обрізала корисний простір. Текст заголовка зливався з цим важким оверлеєм, не залишаючи місця для повітря.

Одразу під цією плашкою ми розміщували розділ «Мета і призначення». З погляду сприйняття тексту це було невдале рішення: великий, важкий абзац дрібних літер, розтягнутий на всю ширину екрана. Погляду користувача просто не було за що зачепитися. На першому екрані ми взагалі не показували реальний вигляд самої системи, не використовували жодних графічних акцентів чи структурного розподілу думок. Людина була змушена витрачати сили на вичитування довгих речень із пасивними зворотами на кшталт «призначена для забезпечення автоматизації процесів», замість того щоб миттєво отримати відповідь на питання, у чому цінність цієї розробки.

У новому дизайні нашого сайту ми повністю змінили концепцію головних екранів. Шапка стала легкою та світлою, а перший блок перетворився на просторий простір із плавним фіолетово-рожевим градієнтом, який виглядає сучасно й технологічно. Ми винесли заголовок «CRM-система для фінансової консалтингової компанії» у центр, дали йому великий, легкий шрифт і додали під ним одну чітку кнопку «Презентація».

Саму текстову частину про призначення продукту ми безжально скоротили, прибрали складні канцеляризми та перетворили цей розділ на лаконічний блок «Передісторія». Ми додали туди делікатний графічний маркер у вигляді емодзі, що зробило технічний опис живим та легким для читання. Тепер перший екран не втомлює відвідувача, а за дві секунди вводить у контекст проєкту, демонструючи його головний зміст без візуального сміття.

Як ми показали етапи роботи без нудних текстів

Коли потенційний замовник вивчає виконані роботи, він хоче побачити не лише фінальний результат, а й логіку, за якою будується процес створення продукту. У нашій старій ітерації сторінки опис етапів розробки був відсутній як окремий логічний блок. Ми одразу кидали відвідувача у вивчення функцій, залишаючи за лаштунками аналітику, проектування, тестування та інтеграцію. Через це кейс виглядав відірваним від реальності розробки та не демонстрував нашого системного підходу. Для бізнесу, який шукає надійного виконавця, така непрозорість є мінусом.

Ми вирішили зробити наші внутрішні процеси повністю зрозумілими, тому інтегрували в оновлену структуру сторінок окремий блок - «Етапи роботи». Ми відмовилися від ідеї розписувати кожен крок розробки довгими розмовними абзацами. Замість цього ми застосували просте та функціональне графічне рішення у вигляді вертикального таймлайну.

Зліва розташована тонка лінія з круглими маркерами та нумерацією кроків від 01 до 04. Справа ми розмістили ємні назви етапів: від підготовки та формування вимог до безпосереднього проектування, розробки, інтеграції та запуску системи в експлуатацію. Кожен крок ми супроводили коротким поясненням, яке складається всього з двох речень. Така подача матеріалу дозволяє користувачеві логічно рухатися по сторінці зверху вниз, швидко зчитувати наш робочий алгоритм та бачити чітку послідовність дій без вивчення зайвої інформації.

Плиточна сітка замість розмитих тез

У старому варіанті оформлення кейсу завдання, які ми ставили перед собою на початку роботи, були розмиті по тексту або взагалі не виносилися в окрему смислову категорію. Ми припускалися типової помилки: вважали, що звичайного переліку функцій достатньо, щоб відвідувач сам зробив висновки про рівень складності проєкту. Проте без чіткого розуміння початкових викликів і цілей клієнта сторінка портфоліо перетворювалася на сухий технічний звіт, який не ніс у собі бізнес-історії.

У новому дизайні нашого сайту ми виправили цю помилку та зафіксували початкові орієнтири у блоці «Основні цілі проєкту». Для візуалізації ми використали сучасну плиточну сітку (grid layout), яка складається з шести компактних карток ніжно-фіолетового відтінку. Щоб структура виглядала охайно, ми додали акуратну нумерацію у правому верхньому кутку кожної плитки, що допомагає правильно фокусувати погляд під час сканування сторінки.

UX-копірайтинг у цьому блоці ми зробили максимально коротким та точним. Ми сформували прямі тези: «Удосконалення технологічного процесу», «Аналітика ринку нерухомості», «Розрахунок інвестиційних ризиків», «Створення зручної екосистеми», «Розділення клієнтських потоків», «Забезпечення необхідного рівня безпеки». Під кожним пунктом розміщено всього одне речення, яке деталізує задачу. Інформація більше не тисне на відвідувача сайту, а кожна окрема ціль сприймається як чітке завдання, яке ми успішно вирішили в межах кейсу.

Заміна нескінченного скролу на інтерактивні таби

Центральна частина старої сторінки кейсу створювала колосальне візуальне навантаження. Презентація розділів «Інтерфейс Адміністратора» та «Інтерфейс Клієнта» будувалася за принципом лінійного «шахового» порядку. Ми викладали великі скриншоти системи один за одним, чергуючи їх із дрібними текстовими поясненнями окремих підрозділів: «Модуль Рухомості», «Пошук Нерухомості», «Розділ Комерції», «Розділ Налаштування».

На практиці це перетворювало сторінку на безкінечну стрічку, де екрани просто зливалися в один потік. Користувачеві доводилося дуже довго гортати сторінку вниз, щоб просто побачити вигляд різних панелей розробленої системи. Велика кількість макетів утомлювала відвідувача, створювала відчуття хаосу і заважала порівняти між собою функціональні можливості різних модулів системи.

Цей структурний недолік нашої старої сторінки ми повністю вирішили під час оновлення сайту за допомогою впровадження блоку «Функціональність CRM». Ми повністю відмовилися від кілометрового вертикального скролу і перейшли до компактної та зручної системи горизонтальних вкладок (табів). Тепер у верхній частині блоку розміщено зрозуміле меню перемикання: «Клієнтська панель», «Менеджерська панель», «Система інтеграцій», «Аналітичні звіти», «Панель адміна».

На сторінці знаходиться лише один великий, чіткий та деталізований макет інтерфейсу CRM. Кони користувач клікає на певну вкладку в меню, зображення системи та короткий текстовий опис ліворуч від нього миттєво змінюються. Це дозволило нам зменшити фізичний розмір цього розділу в кілька разів, прибрати втомлююче прокручування сторінки та надати відвідувачеві можливість самостійно, легко та в один клік вивчати складну архітектуру системи в межах одного екрана.

Як правильно показувати бізнес-результати розробки

Показ результатів у старому варіанті оформлення кейсу зводився до звичайного текстового абзацу, який губився ближче до кінця сторінки. Текст складався з простого переліку опцій: «Мультивалютність... інтеграція з Telegram... формування звітів». Найважливіша інформація - реальні показники ефективності, відсотки автоматизації та бізнес-ефект від впровадження системи - була повністю розмита в загальному масиві слів. B2B-замовник, вивчаючи кейси, шукає відповідь на питання, яку саме вигоду отримав бізнес від розробки проєкту. Старий текстовий формат не давав чіткої відповіді та не переконував у продуктивності нашого інженерного підходу.

Ми докорінно переробили цей розділ і створили блок «Результати», перевівши його на мову твердих і зрозумілих фактів. З погляду UI ми повністю відмовилися від суцільних текстів та винесли ключові показники проєкту у великі, чисті картки на спокійному синьому фоні. Головним елементом кожної картки стали великі, жирні акцентні цифри у відсотках: «80%», «100%», «100%», «90%», «95%».

Під кожним цифровим показником ми розмістили лаконічний та чіткий підпис без води: «Економічність розробки та впровадження системи», «Правильність та точність розрахунків», «Доступність та робота під навантаженням», «Чистота коду системи», «Час на автоматизацію рутинних процесів». Такий хід кардинально змінює сприйняття кейсу: замовнику не потрібно вишукувати зміст у реченнях, він одразу бачить бізнес-результати нашої роботи, виражені в конкретних метриках.

Оптимізація форми та логіки захоплення уваги

Форма зворотного зв'язку в кінці сторінки проєкту - це головна конверсійна точка всього кейсу. У старому макеті блок «Замовити CRM - систему» виглядав застарілим та громіздким. Форма складалася з трьох довгих сірих полів вводу, розтягнутих на всю ширину екрана, та невеликої синьої кнопки. Одразу під полями ми розміщували об'ємний текстовий блок-цитату, наповнений класичними копірайтерськими кліше: «Якщо вам сподобалась наша CRM-система або ви хочете замовити розробку CRM системи під потреби вашого бізнесу...». Цей текст створював відчуття надмірного тиску на користувача, що лише знижувало конверсію. Нижче йшов важкий блок блогу з трьома великими картками статей, а закривало сторінку темне заплутане підвальне меню сайту (футер), де всі посилання були змішані в купу.

Ми повністю ліквідували ці інтерфейсні та текстові бар'єри в оновленій версії сторінки нашого портфоліо. Ми перетворили точку лідогенерації на стильну, компактну конверсійну картку, розміщену на приємному градієнтному фоні. Ми безжально видалили застарілий блок-цитату зі штампами, а кількість полів у формі скоротили до двох - залишили лише найнеобхідніше для швидкого першого контакту.

Зліва від форми ми додали чіткий текстовий заголовок «Замовити CRM - систему» та акуратні круглі іконки для швидкого переходу в популярні месенджери. Це дало користувачеві свободу вибору та максимальний комфорт: він може або заповнити коротку форму за кілька секунд, або миттєво написати нам у зручний чат.

Одразу під формою ми впровадили новий лаконічний блок «Підтримка» з фірмовим чорним мінімалістичним банером SKYLEX : //, який закріплює візуальний стиль нашого бренду. Сам футер ми зробили повністю білим, чистим та структурованим за чотирма чіткими категоріями посилань, додавши акуратні іконки соціальних мереж у правому кутку.

Допрацювання після запуску

Розгортання основної версії оновленого сайту та публікація інтерфейсних рішень - це лише перший видимий крок. Справжнє полірування проєкту завжди відбувається на етапі збору реальних даних взаємодії, коли ми оптимізуємо внутрішню архітектуру та робимо взаємодію з користувачем ще бездоганнішою. Саме після перших запусків ми провели серйозну роботу над двома критичними вузлами: навігаційною системою сайту та блоком відображення технологічного стеку проєкту.
 

Навігація та головне меню

Досвід взаємодії починається не з контенту сторінки, а з того, як легко користувач може знайти потрібний розділ. Наша стара панель навігації у темних тонах була серйозним бар'єром. Вона являла собою просту лінійну стрічку текстових посилань: «Про нас», «Послуги», «Приклади робіт», «Контакти», «Блог». Такий підхід змушував користувача блудати по сайту навмання. Наприклад, щоб дізнатися, які саме послуги ми надаємо чи які конкретно продукти розробляємо, людина мала перейти на загальну сторінку, дочекатися її завантаження і лише потім шукати деталі. Це створювало зайві кліки та знижувало конверсію.

Ми повністю переосмислили логіку головного меню, зробивши його світлим, чистим та інтерактивним. Тепер це не просто список посилань, а повноцінний навігаційний хаб. Ми структурували напрямки та впровадили випадаючі панелі для ключових категорій.

Коли користувач наводить на розділ «Послуги», перед ним відкривається акуратна, логічна сітка з великих білих карток. Ми чітко розбили наші компетенції на окремі зрозумілі продукти з лаконічним UX-описом та іконками: від великих систем, internet-магазинів і бізнес-сайтів до автоматизації через чат-боти, SEO, контент-менеджменту та адміністрування серверів. Користувачеві достатньо одного погляду на меню, щоб зрозуміти весь спектр наших можливостей і в один клік перейти на потрібну цільову сторінку.

Аналогічно ми вчинили з розділом «Приклади робіт». Замість сухого списку ми інтегрували у випадаюче меню компактний інтерактивний віджет. Зліва розміщено список категорій та проєктів, а справа динамічно відображається прев'ю макета та короткий опис конкретного кейсу, наприклад, розробки систем для депо, фінансових консультантів чи шкіл. Тепер відвідувач сайту може почати знайомитися з портфоліо безпосередньо з головної шапки, а кнопка «Обговорити проєкт» у правому кутку стала чітким та яскравим закликом до дії.

Від сухих маркованих списків до впізнаваних логотипів

Презентація технологій, на яких побудовано продукт, - це важлива частина будь-якого технічного кейсу в нашому портфоліо. У старому варіанті блок «Використані технології» містив три вертикальні білі картки. Попри наявність окремого фону, всередині карток знаходилися звичайні марковані списки дрібним шрифтом: «База даних... Мова... Back-end...». Користувачеві доводилося вчитуватися в кожне слово, інтерфейс виглядав монотонно, сіро і не викликав відчуття сучасної високотехнологічної розробки системи.

У новому інтерфейсі сторінки ми повністю переосмислили цей розділ, перетворивши його на наочний блок відображення технологічного стеку проєкту, який став візуально привабливим та легким для сканування. Ми зменшили габарити карток, закруглили їхні кути, додали ледь помітні тіні та прибрали текстові списки. Замість них ми інтегрували офіційні, кольорові графічні логотипи технологій: PHP, Laravel, MySQL, Node.js.

Поруч із кожною іконкою ми залишили дуже короткий підпис про призначення цього інструменту в межах реалізації проєкту. Нове дизайн-рішення дозволяє користувачеві миттєво ідентифікувати стек розробки на підсвідомому рівні, просто глянувши на знайомі логотипи. Це додає блоку професійного вигляду та підкреслює наш серйозний підхід до інженерної архітектури систем.

Висновок

Проведений порівняльний аналіз на прикладі сторінки портфоліо наочно доводить, що еволюція дизайну сторінок нашого сайту - це не просто косметичне оновлення колірної палітри чи закруглення кутів у карток. Це повна зміна філософії подачі матеріалу та перехід до продуктового b2b-мислення, яке ми масштабували на весь наш оновлений сайт.

Ми повністю відмовилися від довгих, стомлюючих текстових абзаців, хаотичного розташування скриншотів у шаховому порядку та перевантажених форм зворотного зв'язку зі штампами копірайтингу. Натомість ми збудували чітку модульну систему, впровадили зручні горизонтальні таби для вивчення архітектури системи, перевели демонстрацію результатів на переконливу мову конкретних цифр та інтегрували впізнавані логотипи технологій. Це дозволило нам створити легке, повітряне та інтуїтивно зрозуміле цифрове середовище, яке поважає час користувача, наочно транслює нашу інженерну експертизу та ефективно перетворює звичайних відвідувачів сайту на наших довгострокових бізнес-партнерів.