IVMED Donor Biomaterial Bank — Pixel-Perfect Figma Implementation
Pixel-accurate implementation of multiple website pages for an international reproductive medicine company
Role: Front-end implementation, WordPress development · Year: 2025 · Stack: WordPress / Astra Pro / Elementor / UAE
Figma-based implementation of website pages for an international fertility services provider
Year: 2025
Project type: front-end implementation based on Figma design
Platform: WordPress
Stack: Astra Pro / Elementor / Ultimate Addons for Elementor
Scope: implementation of selected website pages
Context: subcontracted work within a larger website development project
{/}
About the client
IVMED Donor Biomaterial Bank is an international company specializing in donor search and selection, donor program coordination, and reproductive treatment support.
The company provides access to extensive donor egg and sperm databases, coordinates IVF programs through partner clinics, and supports patients undergoing fertility treatment in Europe, the UK, Ireland, North America, Australia, and other regions.
Its services include donor selection, medical consultations, treatment coordination, and comprehensive support throughout the reproductive treatment process.
{?}
Project background
The client’s internal team was responsible for the overall website development.
To accelerate implementation, selected parts of the project were outsourced to external contractors.
My involvement was limited to creating several website pages based on completed Figma designs rather than developing the entire website.
Since no specific WordPress foundation had been defined and only Elementor compatibility was required, I proposed using Astra Pro as the technical base for the implementation.
The client approved this approach.
Development was carried out on a dedicated WordPress installation hosted in my own environment before being migrated to the client’s infrastructure.
Mobile · IVMED Donor Biomaterial Bank About
Desktop · IVMED — IVF programs
Mobile · IVMED — IVF programs
{&}
Task
The primary objective was to reproduce the provided Figma layouts as accurately as possible within a WordPress environment.
The implementation required:
- pixel-accurate reproduction of page layouts;
- preservation of spacing, proportions, typography, and visual hierarchy;
- responsive behavior across devices;
- preparation of pages suitable for integration into a larger website ecosystem;
- creation of demonstration blog content required for archive and listing templates.
Layout accuracy was verified using specialized design comparison tools, with tolerances measured down to individual pixels.
Desktop · IVMED IVF programs in Georgia
{*}
Implementation
The website pages were built using Astra Pro, Elementor, and Ultimate Addons for Elementor.
A total of six pages were implemented together with a collection of placeholder blog articles used to populate archive and listing layouts during development.
The primary objective throughout the project was precise reproduction of the supplied Figma designs rather than extending functionality or introducing additional features.
While Elementor and UAE provided most of the required building blocks, several interface elements required custom styling in order to achieve the desired visual result.
The most technically demanding part of the project was the blog archive page.
The archive design specified in Figma differed significantly from the default behavior of the UAE posts widget. Achieving the required result involved:
- removing interface elements not intended to be disabled through standard widget settings;
- changing the visual order and positioning of selected content elements;
- restructuring the presentation of the featured article block;
- adjusting spacing, proportions, alignment, and overall layout geometry;
- preserving the widget’s original functionality while substantially transforming its visual presentation.
These modifications were implemented through custom CSS rather than custom widget development, allowing the supplied design to be reproduced while maintaining compatibility with the existing Elementor and UAE ecosystem.
The remaining pages focused primarily on accurate implementation of the supplied layouts, responsive behavior, and consistency across the entire project.
Mobile · IVMED IVF programs in Georgia
Desktop · IVMED — Blog Archive
Mobile · IVMED — Blog Archive
{&}
Preview Description (Blog Archive)
The blog archive page became the most technically customized part of the implementation.
Although the page was built on top of a standard UAE posts widget, the layout defined in Figma differed substantially from the widget’s default structure and presentation.
Several default interface elements were removed despite not being configurable through the widget settings. Other elements were visually repositioned, reordered, and adapted to match the intended hierarchy of the design.
The featured article section at the top of the archive required the most extensive customization. Its visual structure, spacing, proportions, content arrangement, and overall layout behavior were rebuilt through custom CSS while preserving the underlying widget functionality and content architecture.
The result closely matched the provided design without replacing the original widget or introducing custom templates.
Desktop · IVMED Surrogacy Services
{#}
Migration and handoff
After implementation was completed, the project was cloned and transferred to the client’s server environment.
The migrated version received the required premium licenses and became the foundation for further development performed by the client’s internal team and other contractors.
Because the showcased version represents the original implementation environment, it intentionally contains placeholder elements such as placeholder buttons, demonstration content, and non-functional form substitutes.
These elements were sufficient for visual validation and were later replaced during the subsequent stages of development.
Mobile · IVMED Surrogacy Services
{%}
Scope limitations
The project focused exclusively on the pages assigned for implementation.
The website header was not included in the original scope but was created to provide a complete visual presentation of the implemented pages.
A simplified footer was also prepared for the same reason, including visual placeholders instead of fully functional integrations such as contact forms.
This approach allowed the pages to be reviewed in a realistic website environment while keeping development aligned with the agreed scope of work.
{!}
Result
The client received a set of production-ready website pages implemented with high visual accuracy and prepared for integration into the final website.
The delivered work provided:
- pixel-accurate Figma-to-WordPress implementation;
- responsive layouts built with Astra Pro and Elementor;
- customized interface elements matching the approved designs;
- prepared blog archive and content structure for future expansion;
- a clean development foundation for further work by the client’s internal team.
{+}
Notes
This project represents a common real-world development scenario where multiple teams contribute to different parts of a larger website.
In such situations, the value of the work lies not only in creating pages, but in ensuring that implementation can seamlessly integrate into a broader development process.
Accurate execution, predictable structure, and attention to detail become just as important as the visual result itself.
Projects like this demonstrate that pixel-perfect implementation is often less about building new functionality and more about understanding how existing tools can be adapted to faithfully reproduce a design while remaining stable, maintainable, and compatible with future development.
{!}
Collaboration Proof
The project was completed through Freelancehunt.
Below is a real client review that is still available on the platform.
{*}
<contact_me>
…If you’d like to discuss a project, clarify requirements, or explore possible collaboration, you can find all contact details on the contact page.