Як ми перезібрали creayou.com
Наш сайт був експортом з Webflow із заголовком, плаваючим відео і посиланням на контакти. Він показував, якими ми були у 2023 році. Ось як ми його перезібрали і чому тепер це звичайний HTML.
Почати з того, що вже працює
Ми не починали з чистого аркуша. У чернетці у Figma була структура, яка нам досі подобалась: логотип угорі ліворуч, навігація посередині, WhatsApp праворуч, перемикач теми і кнопка повідомлення, закріплені в нижніх кутах. Елементи керування це прямокутники з м’якими кутами і тонким контуром, деталь, яка проходить через усі наші проєкти. Типографіка: Inter великими літерами, щільний трекінг, дуже великий кегль.
Тож бриф самим собі вийшов коротким. Лишити макет і типографіку з Figma, лишити відео з логотипом з поточного сайту, переписати кожне слово.
Чому цього разу не Webflow
Більшість клієнтських сайтів ми робимо на Webflow і робитимемо далі. Це правильний інструмент, коли маркетинговій команді треба редагувати сторінки без розробника.
У нашого сайту інші потреби. На першому екрані працює власний WebGL-шейдер. Кабінет клієнта стане дашбордом з авторизацією і живими даними. Тексти не редагує ніхто, крім нас. Для цього статичний сайт у Git-репозиторії простіший: кожна зміна це коміт, кожен коміт розгортається приблизно за десять секунд, і між кодом і браузером немає нічого.
Сайт генерує невеликий скрипт на Python. Сторінки, кейси, сторінки послуг і Журнал збираються зі звичайних файлів, а одна команда збирає весь сайт. Хостинг це статичний застосунок на DigitalOcean, який розгортається заново з кожним пушем.
Рідкий логотип
Анімований логотип це коротке відео нашого знака, відрендереного у вигляді скла. Над цим елементом ми працювали найдовше, і він старший за сам сайт. Ми зробили його у 2022 році разом з 3D-художником у Blender: модель знака, безліч підходів до відблисків і заломлення, багато версій руху і цикл, який обертається без видимого шва. Він досі виглядає сучасно.
На старому сайті відео просто програвалось. Тепер воно проходить через невелику програму на WebGL.
Курсор залишає слід у текстурі з низькою роздільною здатністю. З кожним кадром слід рухається за власною швидкістю, трохи розтікається і згасає. Потім відео малюється крізь цей слід: пікселі зсуваються разом із потоком, кольори злегка розшаровуються на краях, а там, де слід найсильніший, знак розпадається на краплі. Коли курсор зупиняється, слід згасає, і логотип знову збирається докупи.
Увесь ефект займає близько 150 рядків коду без жодних бібліотек. Якщо WebGL недоступний або у відвідувача ввімкнене зменшення руху, замість ефекту програється звичайне відео.
Нижче на сторінці, за відгуками клієнтів, той самий знак з’являється пласким і сірим. Під курсором він розсипається на дрібні зерна, наче пісок, і знову осідає у форму.
Дві теми з одного набору токенів
У файлі Figma вже були темна і світла версії, тож кольори прийшли прямо з його змінних: чорний #1F1F1F, сірий #2B2B2B, молочний #F5F5F5 і один нейтральний сірий для другорядного тексту. За замовчуванням сайт слідує системному налаштуванню і запам’ятовує, якщо тему перемкнули вручну.
Відео з логотипом робили під темний фон. У світлій темі його інвертовано і змішано з фоном так, щоб скло лишалося видимим без прямокутника навколо.
Моушн з довгим загасанням
Усе рухається за однією кривою: швидкий старт, повільне і м’яке приземлення. Заголовки проявляються рядок за рядком з-під маски. Зображення проєктів відкриваються з-під маски і плавно стають на місце, коли з’являються в полі зору під час скролу. Текст під першим екраном світлішає слово за словом, поки ви його читаєте.
Спершу швидкодія
Моушн вартий чогось лише тоді, коли лишається плавним. Тому бібліотеки лежать на нашому хостингу, шрифти обрізані до символів, які ми використовуємо, а зображення масштабовані й віддаються у форматах AVIF або WebP у кількох розмірах, тож телефон ніколи не завантажує зображення для великого екрана. Плавний скрол вимкнено на пристроях, де він конфліктує з нативною прокруткою. Сторінки це звичайний HTML, тому перший екран з’являється ще до того, як запуститься будь-який скрипт.
SEO з першого коміту
Кожна сторінка має власні заголовок, опис і структуровані дані: студія як організація, кожна стаття як запис блогу, кожен кейс як творча робота, хлібні крихти на глибших сторінках. Карта сайту оновлює дату сторінки лише тоді, коли змінюється її контент. Кожна послуга має окрему сторінку, тож пошук за запитом «дизайн SaaS-продуктів» чи «розробка на Webflow» веде на потрібну сторінку, а не на головну.
Сайт також говорить українською. Українська версія живе в розділі /ua з власними сторінками послуг і Журналом і пов’язана з англійськими сторінками тегами hreflang, тож пошукові системи показують кожному відвідувачу потрібну мову.
Спроєктовано під телефон
Більшість перших візитів відбувається з телефону, тож кожну секцію ми перевіряли на малих екранах, перш ніж назвати готовою. Навігація згортається в одну кнопку, перший екран зберігає рідкий логотип, а зображення кейсів зберігають справжні пропорції.
Що змінилося
Сайт нарешті відчувається як студія, що за ним стоїть. Моушн став плавнішим, ефекти відгукуються на дії відвідувача, а щойно система запрацювала, кожна нова секція займала години замість днів. У цьому й робота першого екрана: зацікавити відвідувача настільки, щоб він лишився і подивився роботи. Як це вплине на кількість заявок, розповімо, коли з’являться цифри.
Що далі
Кейси з повним процесом за кожним проєктом, кабінет клієнта зі статусом проєкту і файлами, і цей журнал. Писатимемо про роботу по ходу: що пробували, що не вийшло і що запустили.
