Für Engineering Specialists, Inc. übersetzte ich ein bestehendes Figma-Design präzise in eine responsive WordPress-Website. Aus sieben bis acht individuellen Templates entstand ein konsistentes, wartbares System für einen umfangreichen landesweiten Webauftritt.
Forensic Engineering und randursachenermittlung
Engineering Specialists, Inc. ESI Forensic
Nathan Siahpush
Figma-Umsetzung, WordPress-Entwicklung, Designsystem, Responsive Design und technische SEO
6–8 Wochen
WordPress, Hello Elementor und Elementor Pro
Website ansehen
https://www.esinationwide.com/
ESI benötigte mehr als eine optisch ähnliche Umsetzung. Die umfangreiche Website sollte das Figma-Design auf jedem Gerät zuverlässig wiedergeben, wiederkehrende Seitentypen effizient abbilden und vom internen Team langfristig gepflegt werden können. Dafür entstanden globale Gestaltungsregeln, wiederverwendbare Komponenten und klar definierte Elementor-Templates.
Projektvergleich und vom Kunden bereitgestellte Ergebnisdaten
mehr Serviceanfragen
mehr organischer Traffic
schnellere Ladezeit
wiederverwendbare Templates
Die Ergebnisangaben basieren auf dem von Sadeem bereitgestellten Projektvergleich. Falls verfügbar, sollten Zeitraum und Analytics-Quelle vor Veröffentlichung ergänzt werden.
Engineering Specialists, Inc. ist ein seit 1991 tätiges, multidisziplinäres Unternehmen für forensische Ingenieurleistungen und Brandursachenermittlung. ESI unterstützt unter anderem Versicherungen und Rechtsanwälte bei der objektiven Untersuchung von Bränden, strukturellen Schäden, Produktfehlern und weiteren Schadensfällen in den USA.
Die bestehende Website wurde der fachlichen Erfahrung des Unternehmens nicht gerecht. Nutzerführung, Branding und Seitengestaltung wirkten uneinheitlich, wodurch der Auftritt weniger professionell erschien als das Unternehmen selbst. Ein neuer Figma-Entwurf definierte die gewünschte Richtung; es fehlte jedoch ein technisches System, das den Entwurf präzise, responsiv und langfristig wartbar abbilden konnte.
Die Figma-Vorlage ohne sichtbare Kompromisse in Elementor und WordPress umsetzen.
Globale Stile, Komponenten und Templates für konsistente zukünftige Seiten bereitstellen.
Dem Kunden eine verständliche Struktur übergeben und die wichtigsten Abläufe erklären.
Vor Beginn der Entwicklung strukturierte ich gemeinsam mit dem Kunden den sinnvollsten technischen Aufbau. Ich erläuterte, wie aus dem Figma-Entwurf globale Gestaltungsregeln, wiederverwendbare Komponenten und flexible Seitentemplates entstehen können. Auf dieser Grundlage wurde das Projekt klar abgegrenzt und anschließend in WordPress realisiert.
Hello Elementor lieferte eine schlanke Basis, während Elementor Pro für Templates, Formulare und responsive Komponenten eingesetzt wurde. Farben, Typografie, Abstände, Buttons und wiederkehrende Inhaltsmodule wurden systematisch angelegt, damit neue Seiten nicht jedes Mal von Grund auf gestaltet werden müssen. Das Ergebnis folgte dem Figma-Design so genau, dass für den Kunden praktisch kein sichtbarer Unterschied zwischen Entwurf und Live-Umsetzung bestand.
Zu Beginn analysierte ich die Figma-Datei auf wiederkehrende Muster und übersetzte diese in globale Elementor-Einstellungen. Anstatt jede Seite isoliert aufzubauen, definierte ich einheitliche Regeln für Typografie, Farben, Abstände, Buttons, Formulare und Inhaltsmodule. Daraus entstanden sieben bis acht eigenständige Templates, die den großen Seitenumfang konsistent abbilden konnten.
Jede Vorlage wurde responsiv für Desktop, Tablet und Smartphone umgesetzt. Gleichzeitig achtete ich auf saubere semantische HTML-Strukturen, nachvollziehbare Überschriftenebenen und eine technisch sinnvolle Onpage-SEO-Grundlage. So blieb die visuelle Genauigkeit erhalten, ohne Wartbarkeit, Zugänglichkeit oder Suchmaschinenstruktur zu vernachlässigen.
Die Elementor-Formulare wurden an den tatsächlichen Anfrageprozess angepasst. Für eine zuverlässige Zustellung richtete ich die SMTP-Verbindung über das Microsoft-Konto des Kunden ein und nahm die erforderlichen DNS-Konfigurationen vor. Abschließend erhielt der Kunde eine verständliche Einführung in die Pflege der Templates und wiederverwendbaren Komponenten.
Eine leichte CMS-Basis für eine umfangreiche, langfristig pflegbare Unternehmenswebsite.
Templates, globale Komponenten, responsive Layouts und individuelle Formulare innerhalb eines konsistenten Systems.
Verbindliche Designgrundlage für Typografie, Abstände, Komponenten und sämtliche responsive Ansichten.
Authentifizierter Formularversand über das E-Mail-System des Kunden statt unzuverlässiger Standardzustellung.
Semantische HTML-Struktur, klare Überschriftenhierarchie und suchmaschinenfreundliche Seitentemplates.
Komprimierte Bilder, optimierte Scripts und eine reduzierte technische Grundlage für schnellere Ladezeiten.
Die Detailansichten zeigen, wie konsequent das Designsystem über unterschiedliche Leistungen, Seitentypen und Bildschirmgrößen hinweg umgesetzt wurde.
Great work from Malik Sadeem. He did a great job understanding our needs and producing something per our specifications. We’ll use him again.
— Nathan Siahpush, Engineering Specialists, ESI Forensic
Ich entwickle responsive Elementor-Websites, die dem gelieferten Design entsprechen und gleichzeitig sauber strukturiert, skalierbar und einfach zu pflegen sind.
