IVMED Donor Biomaterial Bank — Pixelgenaue Umsetzung eines Figma-Designs
Pixelgenaue Umsetzung mehrerer Webseiten für ein internationales Unternehmen im Bereich der Reproduktionsmedizin
Rolle: Frontend-Umsetzung, WordPress-Entwicklung · Jahr: 2025 · Stack: WordPress / Astra Pro / Elementor / UAE
Figma-basierte Umsetzung von Webseiten für einen internationalen Anbieter von Fruchtbarkeits- und Reproduktionsdienstleistungen
Jahr: 2025
Projekttyp: Frontend-Umsetzung auf Grundlage eines Figma-Designs
Plattform: WordPress
Stack: Astra Pro / Elementor / Ultimate Addons for Elementor
Umfang: Umsetzung ausgewählter Webseiten
Kontext: Subunternehmerleistung innerhalb eines größeren Website-Projekts
{/}
Über den Kunden
IVMED Donor Biomaterial Bank ist ein internationales Unternehmen, das sich auf die Suche und Auswahl von Spendern, die Koordination von Spenderprogrammen sowie die Begleitung reproduktionsmedizinischer Behandlungen spezialisiert hat.
Das Unternehmen bietet Zugang zu umfangreichen Datenbanken für Eizell- und Samenspenden, koordiniert IVF-Programme gemeinsam mit Partnerkliniken und unterstützt Patientinnen und Patienten während ihrer Kinderwunschbehandlung in Europa, Großbritannien, Irland, Nordamerika, Australien und weiteren Regionen.
Zum Leistungsangebot gehören die Auswahl geeigneter Spender, medizinische Beratung, die Koordination der Behandlung sowie eine umfassende Begleitung während des gesamten reproduktionsmedizinischen Prozesses.
{?}
Projekthintergrund
Für die Gesamtentwicklung der Website war das interne Team des Kunden verantwortlich.
Um die Umsetzung zu beschleunigen, wurden ausgewählte Projektbereiche an externe Auftragnehmer vergeben.
Mein Aufgabenbereich beschränkte sich auf die Umsetzung mehrerer Webseiten anhand bereits fertiggestellter Figma-Designs und umfasste nicht die Entwicklung der gesamten Website.
Da keine konkrete WordPress-Basis vorgegeben war und lediglich die Kompatibilität mit Elementor gefordert wurde, schlug ich Astra Pro als technische Grundlage für die Umsetzung vor.
Dieser Vorschlag wurde vom Kunden angenommen.
Die Entwicklung erfolgte zunächst auf einer separaten WordPress-Installation in meiner eigenen Entwicklungsumgebung und wurde anschließend auf die Infrastruktur des Kunden übertragen.
Mobil · IVMED-Spender-Biomaterialbank – Über uns
Desktop · IVMED – IVF-Programme
Mobil · IVMED – IVF-Programme
{&}
Aufgabe
Das Hauptziel bestand darin, die bereitgestellten Figma-Layouts innerhalb einer WordPress-Umgebung möglichst exakt nachzubilden.
Die Umsetzung umfasste:
- pixelgenaue Reproduktion der Seitenlayouts;
- Beibehaltung von Abständen, Proportionen, Typografie und visueller Hierarchie;
- responsives Verhalten auf unterschiedlichen Endgeräten;
- Vorbereitung der Seiten für die Integration in eine größere Website-Struktur;
- Erstellung von Demo-Bloginhalten für Archiv- und Listenansichten.
Die Layoutgenauigkeit wurde mithilfe spezieller Vergleichswerkzeuge überprüft. Die Abweichungen wurden bis auf einzelne Pixel kontrolliert.
Desktop · IVMED-IVF-Programme in Georgien
{*}
Umsetzung
Die Webseiten wurden mit Astra Pro, Elementor und Ultimate Addons for Elementor erstellt.
Insgesamt wurden sechs Seiten umgesetzt sowie eine Sammlung von Demo-Blogbeiträgen erstellt, um Archiv- und Listenlayouts während der Entwicklung realistisch zu befüllen.
Während des gesamten Projekts lag der Schwerpunkt auf der möglichst präzisen Umsetzung der bereitgestellten Figma-Designs und nicht auf einer Erweiterung des Funktionsumfangs.
Obwohl Elementor und UAE den Großteil der benötigten Funktionen bereitstellten, mussten mehrere Oberflächenelemente individuell per CSS angepasst werden, um das gewünschte Erscheinungsbild exakt nachzubilden.
Der technisch anspruchsvollste Teil des Projekts war die Blog-Archivseite.
Das in Figma definierte Archivlayout unterschied sich erheblich vom Standardverhalten des UAE-Posts-Widgets. Um das gewünschte Ergebnis zu erreichen, wurden unter anderem:
- Interface-Elemente entfernt, die sich über die Widget-Einstellungen eigentlich nicht deaktivieren lassen;
- ausgewählte Inhaltselemente visuell neu angeordnet und positioniert;
- der hervorgehobene Beitragsbereich vollständig umstrukturiert;
- Abstände, Proportionen, Ausrichtung und die gesamte Layoutgeometrie angepasst;
- die ursprüngliche Funktionalität des Widgets vollständig erhalten.
Diese Änderungen wurden ausschließlich mithilfe von individuellem CSS umgesetzt, ohne eigene Widgets oder Templates zu entwickeln. Dadurch blieb die Kompatibilität mit Elementor und Ultimate Addons for Elementor vollständig erhalten.
Die übrigen Seiten konzentrierten sich hauptsächlich auf die präzise Umsetzung der gelieferten Layouts, responsives Verhalten sowie ein konsistentes Erscheinungsbild innerhalb des gesamten Projekts.
Mobil · IVMED-IVF-Programme in Georgien
Desktop · IVMED — Blog-Archiv
Mobil · IVMED — Blog-Archiv
{&}
Vorschaubeschreibung (Blog-Archiv)
Die Blog-Archivseite stellte den technisch am stärksten angepassten Bereich der Umsetzung dar.
Obwohl sie auf dem Standard-Posts-Widget von Ultimate Addons for Elementor basiert, wich das in Figma definierte Layout deutlich von dessen Standardstruktur ab.
Mehrere standardmäßig vorhandene Oberflächenelemente wurden entfernt, obwohl sie über die Widget-Einstellungen nicht konfigurierbar waren. Andere Elemente wurden visuell neu angeordnet und an die gewünschte Informationshierarchie angepasst.
Der hervorgehobene Beitragsbereich im oberen Teil der Archivseite erforderte den größten Anpassungsaufwand. Struktur, Abstände, Proportionen, Anordnung der Inhalte sowie das gesamte Layoutverhalten wurden mithilfe von individuellem CSS neu aufgebaut, während Funktionalität und Inhaltsarchitektur des Widgets vollständig erhalten blieben.
Das Ergebnis entsprach dem gelieferten Design sehr genau, ohne das Original-Widget auszutauschen oder eigene Templates einzusetzen.
Desktop · IVMED Leihmutterschaftsdienste
{#}
Migration und Übergabe
Nach Abschluss der Umsetzung wurde das Projekt geklont und auf die Serverumgebung des Kunden übertragen.
Die migrierte Version erhielt die erforderlichen Premium-Lizenzen und bildete anschließend die Grundlage für die weitere Entwicklung durch das interne Team des Kunden sowie weitere Auftragnehmer.
Da die hier gezeigte Version die ursprüngliche Entwicklungsumgebung repräsentiert, enthält sie bewusst Platzhalter wie Demo-Schaltflächen, Beispielinhalte und nicht funktionsfähige Formularersatzlösungen.
Diese Elemente dienten ausschließlich der visuellen Prüfung und wurden in späteren Entwicklungsphasen ersetzt.
Mobil · IVMED Leihmutterschaftsdienste
{%}
Projektumfang
Das Projekt umfasste ausschließlich die zur Umsetzung vorgesehenen Seiten.
Der Website-Header gehörte ursprünglich nicht zum Leistungsumfang, wurde jedoch ergänzt, um eine vollständige Darstellung der entwickelten Seiten zu ermöglichen.
Aus demselben Grund wurde auch ein vereinfachter Footer erstellt, der lediglich visuelle Platzhalter anstelle vollständig integrierter Funktionen – beispielsweise Kontaktformulare – enthält.
Dadurch konnten die Seiten in einer realistischen Website-Umgebung präsentiert werden, ohne den vereinbarten Projektumfang zu überschreiten.
{!}
Ergebnis
Der Kunde erhielt einen Satz produktionsreifer Webseiten mit hoher visueller Präzision, die unmittelbar in die endgültige Website integriert werden konnten.
Die Umsetzung umfasste:
- pixelgenaue Umsetzung von Figma nach WordPress;
- responsive Layouts auf Basis von Astra Pro und Elementor;
- individuell angepasste Interface-Elemente entsprechend den freigegebenen Designs;
- vorbereitete Blog-Archiv- und Inhaltsstruktur für zukünftige Erweiterungen;
- eine saubere Entwicklungsgrundlage für die weitere Arbeit des internen Teams.
{+}
Hinweise
Dieses Projekt steht exemplarisch für ein typisches Entwicklungsmodell, bei dem mehrere Teams parallel an unterschiedlichen Bereichen einer größeren Website arbeiten.
In solchen Projekten besteht der eigentliche Mehrwert nicht allein in der Erstellung einzelner Seiten, sondern vor allem darin, dass sich die Umsetzung nahtlos in einen größeren Entwicklungsprozess einfügt.
Präzision, eine nachvollziehbare Projektstruktur und konsequente Detailgenauigkeit sind dabei ebenso wichtig wie das visuelle Endergebnis.
Solche Projekte zeigen, dass Pixel-Perfect-Umsetzungen häufig weniger mit der Entwicklung neuer Funktionen zu tun haben als mit der Fähigkeit, vorhandene Werkzeuge so anzupassen, dass ein Design möglichst originalgetreu reproduziert werden kann, ohne Stabilität, Wartbarkeit oder zukünftige Erweiterbarkeit zu beeinträchtigen.
{!}
Nachweis der Zusammenarbeit
Das Projekt wurde über Freelancehunt umgesetzt.
Unten finden Sie eine echte Kundenbewertung, die weiterhin auf der Plattform verfügbar ist.
{*}
<Kontakt>
…Wenn Sie ein Projekt besprechen, Anforderungen klären oder eine mögliche Zusammenarbeit erkunden möchten, finden Sie alle Kontaktdaten auf der Kontaktseite.