Короткі факти
| Тип | Самостійний технічний демо-проєкт — не замовлення клієнта |
| Джерело | Сторонній Figma-файл, Whitepace — SaaS Landing Page V2 від Al Razi Siam, CC BY 4.0 |
| Реалізовано як | WordPress Classic Theme, без плагінів, без конструкторів |
| Обсяг | Усі 11 секцій, 5 брейкпоінтів (320–1920px) |
| Живе демо | demo.noircraftlab.com |
| Код | github.com/noircraftlab/agency-demo-01 (публічний, GPL-2.0-or-later) |
| Оцінка відтворюваної збірки | ~28–32 години |
Я взяв чужий, професійно зроблений Figma-файл і зібрав з нього production-тему WordPress — піксель у піксель. Завдання було не в тому, щоб щось вигадати, а в тому, щоб довести конкретну обіцянку, яку я даю агентствам і клієнтам: надішли Figma-файл — отримай фікс-ціну і збірку, яка їй справді відповідає. Без «приблизно так само», без роздутих плагінами тем, без сюрпризів при звірці з оригіналом.
Завдання
Більшість портфоліо показують смак самого дизайнера/розробника. Це доводить, що ти вмієш вигадувати. Але не доводить, що ти вмієш чесно реалізувати чужий дизайн у реальних умовах — з неузгодженою типографікою, яку ніхто не просив виправляти, з ілюстраціями, які не можна використати за ліцензією, з п’ятьма брейкпоінтами і клієнтом, який звірятиме твою збірку з вихідним фреймом. Мені потрібен був проєкт, що перевіряє саме це — а не вітрина власних уподобань.
Підхід
- Обрав справжню складність. SaaS-лендинг з 11 секцій, а не односторінковий сайт — і зобов’язався зібрати всі секції без скорочення обсягу заради швидкості.
- Нуль залежностей. WordPress Classic Theme, без Elementor, без Bootstrap, без jQuery, без збірних фреймворків окрім Sass — так само лаконічно й переносно, як і хотів би клієнт.
- Два повних pixel-perfect проходи, а не «достатньо адаптивно». На 1152px і 1920px переноси тексту вимірювались за точним інстансом шрифту з дизайну ще до написання CSS.
- Чесно закрив ліцензійну прогалину. Три блоки з ілюстраціями у вихідному файлі були плейсхолдерами — оригінальна графіка ліцензована окремо і не підлягає поширенню. Замінив на ілюстрації з відкритою ліцензією, перефарбував під палітру дизайну, вказав джерело в README.
- Документував по ходу. Специфікація написана до збірки, changelog — по ходу, і чесний розділ «відомі компроміси» замість того, щоб мовчки виправити — або мовчки приховати — кілька неузгодженостей, закладених у вихідному дизайні.
Результати
Заміряно 26.07.2026, живе демо:
- W3C-валідація: 0 помилок
- Lighthouse desktop: Performance 99 · Accessibility 96 · Best Practices 100 · TBT 0мс · CLS 0.008
- Чиста активація на свіжій інсталяції WordPress, без плагінів
- Усі 11 секцій реалізовані — жодна не скорочена і не спрощена
- Оцінка відтворюваної збірки аналогічного лендингу: ~28–32 години
Відомі компроміси
Три моменти належать до вихідного дизайну, а не до моєї збірки — я відтворив їх як є, а не «виправив», бо завдання полягало у відповідності дизайну, а не в його покращенні: навігація в шапці набрана іншим шрифтом, ніж решта макета, одна CTA-кнопка — третім шрифтом, а відступи між колонками у футері відрізняються на піксель між колонками.
Один компроміс — справді мій: декоративні підкреслення відхиляються приблизно на 2px від вихідного фрейму на кількох проміжних ширинах. Вони прив’язані до слова, яке підкреслюють, — тому переживають будь-який перенос рядка, замість того щоб стояти на фіксованій позиції, яка зламалася б при першій же зміні тексту.
Стек
WordPress Classic Theme · PHP 8.3+ · SCSS (Dart Sass, 7-1-lite) · Vanilla JS (ES6+). Свідомо відсутні: конструктори сторінок, CSS/JS-фреймворки, батьківські теми.
Для нетехнічного читача
Якщо фрилансер колись здавав тобі сайт, який «загалом» схожий на затверджений дизайн — з трохи зсунутими відступами, шрифтом «майже таким самим», мобільною версією, яку явно ніхто не перевіряв, — ось як виглядає альтернатива: незалежна пересборка порядково, звірена з оригінальним файлом, де решта розбіжностей названі навмисно, а не приховані.