IVMED Donor Biomaterial Bank — Ідеальна реалізація в Figma
Реалізація декількох сторінок сайту з точністю до пікселя для міжнародної компанії, що спеціалізується на репродуктивній медицині
Role: Front-end implementation, WordPress development · Year: 2025 · Stack: WordPress / Astra Pro / Elementor / UAE
Реалізація веб-сторінок на базі Figma для міжнародного постачальника послуг у сфері репродуктивної медицини
Рік: 2025
Тип проєкту: реалізація інтерфейсу на основі дизайну, створеного в Figma
Платформа: WordPress
Стек: Astra Pro / Elementor / Ultimate Addons for Elementor
Обсяг робіт: реалізація окремих сторінок сайту
Контекст: робота на субпідряді в рамках масштабнішого проєкту з розробки сайту
{/}
Про клієнта
IVMED Donor Biomaterial Bank — це міжнародна компанія, що спеціалізується на пошуку та відборі донорів, координації донорських програм та наданні підтримки в галузі репродуктивної медицини.
Компанія надає доступ до обширних баз даних донорів яйцеклітин та сперми, координує програми екстракорпорального запліднення через партнерські клініки та надає підтримку пацієнтам, які проходять лікування безпліддя в Європі, Великій Британії, Ірландії, Північній Америці, Австралії та інших регіонах.
До послуг клініки входять підбір донорів, медичні консультації, координація лікування та всебічна підтримка протягом усього процесу репродуктивного лікування.
{?}
Історія проєкту
За загальну розробку сайту відповідала внутрішня команда замовника.
З метою прискорення реалізації окремі етапи проєкту були передані на виконання зовнішнім підрядникам.
Моя участь обмежувалася створенням кількох сторінок сайту на основі готових макетів у Figma, а не розробкою всього сайту.
Оскільки конкретна платформа WordPress не була визначена, а необхідною вимогою була лише сумісність з Elementor, я запропонував використовувати Astra Pro як технічну основу для реалізації.
Клієнт схвалив це рішення.
Розробка здійснювалася на окремій інсталяції WordPress, розміщеній у моєму власному середовищі, після чого проєкт було перенесено на інфраструктуру клієнта.
Mobile · IVMED Donor Biomaterial Bank About
Desktop · IVMED — IVF programs
Mobile · IVMED — IVF programs
{&}
Завдання
Головною метою було якомога точніше відтворити надані макети Figma на сайті WordPress.
Реалізація потребувала:
- відтворення макетів сторінок з точністю до пікселя;
- збереження інтервалів, пропорцій, типографіки та візуальної ієрархії;
- адаптивної поведінки на різних пристроях;
- підготовки сторінок, придатних для інтеграції в більш масштабну екосистему сайту;
- створення демо-контенту блогу, необхідного для формування макету архіву блогу.
Точність макету перевірялася за допомогою спеціалізованих інструментів порівняння дизайну, причому допуски вимірювалися з точністю до окремих пікселів.
Desktop · IVMED IVF programs in Georgia
{*}
Реалізація
Сторінки сайту створено за допомогою Astra Pro, Elementor та Ultimate Addons for Elementor.
Загалом було створено шість сторінок, а також набір демо-статей для блогу, які використовувалися для заповнення макетів архіву блогу під час розробки.
Головною метою протягом усього проєкту було точне відтворення наданих дизайнів у Figma, а не розширення функціоналу чи впровадження додаткових можливостей.
Хоча Elementor та UAE забезпечили більшість необхідних віджетів, деякі елементи інтерфейсу потребували індивідуального дооформлення для досягнення бажаного візуального результату.
Найскладнішою з технічної точки зору частиною проєкту була сторінка архіву блогу.
Дизайн архіву, визначений у Figma, суттєво відрізнявся від стандартної поведінки віджета публікацій UAE. Для досягнення необхідного результату потрібно було:
- видалення елементів інтерфейсу, які не призначені для вимкнення за допомогою стандартних налаштувань віджетів;
- зміна візуального порядку та розташування вибраних елементів вмісту;
- зміна структури блоку «Рекомендовані статті»;
- регулювання відступів, пропорцій, вирівнювання та загальної геометрії макету;
- зберігаючи початкову функціональність віджета, водночас істотно змінити його візуальне оформлення.
Ці зміни були реалізовані за допомогою власного CSS, а не шляхом розробки власних віджетів, що дозволило відтворити наданий дизайн, зберігши при цьому сумісність з існуючою екосистемою Elementor та UAE.
Решта сторінок була присвячена насамперед точному відтворенню наданих макетів, адаптивній поведінці та узгодженості в межах усього проєкту.
Mobile · IVMED IVF programs in Georgia
Desktop · IVMED — Blog Archive
Mobile · IVMED — Blog Archive
{&}
Опис прев’ю (Архів блогу)
Сторінка архіву блогу стала найбільш технічно налаштованою частиною проєкту.
Хоча сторінка була створена на основі стандартного віджету публікацій UAE, макет, визначений у Figma, суттєво відрізнявся від стандартної структури та зовнішнього вигляду віджету.
Декілька елементів інтерфейсу, що були встановлені за замовчуванням, було видалено, незважаючи на те, що їх вимкнення не можна було налаштувати за допомогою параметрів віджета. Інші елементи було візуально переміщено, перегруповано та адаптовано відповідно до запланованої ієрархії дизайну.
Розділ «Рекомендовані статті», розташований у верхній частині архіву, вимагав наймасштабнішої настройки. Його візуальна структура, інтервали, пропорції, розміщення вмісту та загальна поведінка макета були перероблені за допомогою власного CSS, при цьому було збережено базову функціональність віджета та архітектуру вмісту.
Результат майже повністю відповідав наданому дизайну без заміни оригінального віджета та без використання власних шаблонів.
Desktop · IVMED Surrogacy Services
{#}
Міграція та передача
Після завершення впровадження проєкт було клоновано та перенесено в серверне середовище замовника.
Перенесена версія отримала необхідні преміум-ліцензії та стала основою для подальшої розробки, яку здійснювали внутрішня команда замовника та інші підрядники.
Оскільки представлена версія відображає оригінальне середовище реалізації, вона навмисно містить елементи-заповнювачі, такі як кнопки-заповнювачі, демонстраційний контент та нефункціональні замінники форм.
Цих елементів було достатньо для візуальної перевірки, і згодом їх було замінено на наступних етапах розробки.
Mobile · IVMED Surrogacy Services
{%}
Обмеження обсягу
Проєкт був зосереджений виключно на сторінках, призначених для реалізації.
Хедер (“шапка”) сайту не був включений до початкового обсягу, але був створений для забезпечення повного візуального представлення реалізованих сторінок.
З тієї ж причини було підготовлено спрощений футер (нижній колонтитул), який включає візуальні заповнювачі замість повнофункціональних інтеграцій, таких як контактні форми.
Такий підхід дозволив переглянути сторінки в реалістичному середовищі сайту, водночас зберігаючи відповідність розробки узгодженому обсягу робіт.
{!}
Результат
Клієнт отримав набір готових до продакшену сторінок сайту, реалізованих з високою візуальною точністю та підготовлених до інтеграції у кінцевий сайт.
Виконано наступні роботи:
- піксельно-точна реалізація Figma-to-WordPress;
- адаптивні макети, створені за допомогою Astra Pro та Elementor;
- налаштовані елементи інтерфейсу, що відповідають затвердженим дизайнам;
- підготовлений архів блогу та структура контенту для майбутнього розширення;
- чиста основа розробки для подальшої роботи внутрішньої команди клієнта.
{+}
Нотатки
Цей проєкт являє собою поширений реальний сценарій розробки, де кілька команд працюють над різними частинами більшого сайту.
У таких ситуаціях цінність роботи полягає не лише у створенні сторінок, а й у забезпеченні того, щоб реалізація могла безперешкодно інтегруватися в ширший процес розробки.
Точне виконання, передбачувана структура та увага до деталей стають такими ж важливими, як і сам візуальний результат.
Подібні проєкти демонструють, що піксельна реалізація часто стосується не створення нових функціональних можливостей, а більше розуміння того, як існуючі інструменти можуть бути адаптовані для точного відтворення дизайну, залишаючись при цьому стабільними, придатними для обслуговування та сумісними з майбутніми розробками.
{!}
Підтвердження співпраці
Проєкт було реалізовано через Freelancehunt.
Нижче — реальний відгук замовника, який досі доступний на платформі.
…Якщо ви хочете обговорити проєкт, уточнити вимоги або розглянути можливі варіанти співпраці, ви можете знайти всі контактні дані на сторінці контактів.