Haarmeyer Electric
Haarmeyer Electric provides electrical services for commercial and industrial clients, including the oil and gas sector. Built on WordPress with Avada Builder from supplied Figma designs.
Haarmeyer Electric provides electrical services for commercial and industrial needs, including work within the oil and gas sector. For businesses in this space, a website needs to present services clearly and give potential customers a professional place to understand the company’s capabilities.
This project came through Artoria Media, which owned the client engagement and supplied the Figma design. My responsibility was to translate that design into a working WordPress website using Avada Builder.
The focus was to carry the approved visual direction into the live site while ensuring the layouts, content sections, and responsive behavior worked as intended.
The Objective
The task was not to redesign the brand or rethink the supplied interface. It was to implement the existing design and bring its pages to life in WordPress.
That meant paying attention to three key areas:
Design fidelity: Preserve the supplied layouts, visual hierarchy, and styling throughout the build.
Professional presentation: Ensure the completed website presented the business and its services in a clear, consistent way.
Responsive implementation: Adapt the layouts for different screen sizes without losing the structure or intent of the original design.
My Role
Figma Implementation and WordPress Development
I handled the website build using WordPress and Avada Builder, working from the Figma designs supplied through Artoria Media.
My contribution focused on implementing the page layouts, recreating the visual styling, building the website sections, and adapting the experience for desktop and mobile screens.
Rather than introducing a new visual direction, I concentrated on accurately translating the approved design into a functioning website.
The Build
01 – Translating the Figma Layouts
I used the supplied designs as the reference for the website’s structure and appearance. This involved recreating the page sections, spacing, typography, and visual hierarchy within WordPress while maintaining consistency across the build.
02 – Building with Avada Builder
I developed the website using Avada Builder, translating the design into page layouts and reusable building elements where appropriate. The aim was to keep the implementation aligned with the supplied design while making use of the chosen WordPress building environment.
03 – Adapting the Responsive Experience
The website needed to work beyond the desktop layout shown in the design files. I adapted the page structure and styling for smaller screens, paying attention to how sections, text, and imagery behaved across different viewport sizes.
The Outcome
The completed Haarmeyer Electric website brought the supplied Figma design into a live WordPress experience, giving the business a digital presence for presenting its services and company information.
For me, the project demonstrates the implementation side of website design: taking an established visual direction, translating it into a working website, and maintaining consistency across the experience.
View the live website: https://haarmeyerelectric.com
Project credit: This project was delivered through Artoria Media, which owned the client engagement and supplied the Figma design. My role was WordPress development and implementation using Avada Builder.
Got a similar project in mind?
Let’s talk about your goals and figure out if we’re a good fit.