The design team provided the initial design mockups, which the client agreed on and was later applied and implemented in Elementor to build the website.
Over the course of three revision cycles, my colleague and I met with the client in their office to review the website pages in detail. During these sessions, we made certain adjustments in real time based on immediate feedback, while other requested changes were documented and implemented afterwards during development. This approach ensured clear communication, faster alignment with client expectations, and an organized revision process between on-site discussions and online updates.
The client did not have a specific font preference in mind, so I took the initiative to curate and present three different typography options for review. This helped guide the decision-making process and ensured the final selection aligned with the brand’s visual direction and overall user experience.
I start by setting the global properties in Elementor based on the brand guidelines and design assets provided by the client, including fonts, colours, spacing, and overall styling preferences. This helps establish consistency throughout the website before development begins.
Once the global settings are in place, I begin building the page structure section by section using the provided mockups as a reference. During this stage, I focus on layout accuracy, spacing, responsiveness, and maintaining the overall visual hierarchy of the design. As the pages are being developed, I also continuously test different breakpoints to ensure responsiveness is accurate across desktop, tablet, and mobile devices before presenting the website to the client for the first revision round.
As the pages are being developed, I also continuously test different breakpoints to ensure responsiveness is accurate across desktop, tablet, and mobile devices before presenting the website to the client for the first revision round.
Revisions and feedback are then implemented through an iterative process, ensuring all requested updates are carefully applied while maintaining consistency with the overall design before the website is finalized for launch.
In addition, I acted as the project lead, overseeing the workflow and ensuring an agile methodology was applied throughout each phase of the project. This included coordinating tasks, managing iterations, and applying fundamental project and project management practices.
One of the main challenges in this project was accurately translating the client’s mockups into a fully functional and responsive Elementor build. Certain design components, such as the arch-shaped section headings on the left side of the layout, required careful implementation to ensure they remained responsive while staying true to the original mockup provided by the client.
Another challenge involved the hero header video, which needed to maintain high visual quality while also supporting fast loading performance, creating limitations around media handling and optimization.
Additionally, the client provided reference websites for inspiration, which introduced further complexity in aligning those design styles within the existing structure of the project using Elementor.
Recreating the inspired visual elements while maintaining consistency with the overall website design added an extra layer of technical and creative challenge during development.
During this time flexbox was introduced to elementor so learning how to use flexbox through youtube helped me alot.
The solutions were found through a process of testing, refinement, and close alignment with the client’s requirements. For the mockups, I worked through iterative adjustments in Elementor to ensure the layout matched the design while maintaining responsiveness across all devices.
For the hero header video, I tested different file formats and compression levels to find the right balance between visual quality and loading performance, while ensuring it remained suitable for web use.
For the inspiration-based sections, I analysed the reference websites to understand their structure and design patterns, then adapted and rebuilt those elements within Elementor using available widgets and custom layout techniques to achieve a similar result within the project’s framework.
The client’s team provided the initial design mockups, which I applied and implemented in Elementor to build the website.
Client feedback and revisions were managed through regular communication and collaborative review sessions throughout the project. I conducted Zoom meetings with the client across three revision rounds to discuss feedback, clarify design expectations, and ensure all requested changes were accurately understood before implementation.
Each revision was carefully reviewed and applied within Elementor while maintaining consistency with the original mockups and overall website structure. This process helped ensure the final outcome aligned closely with the client’s vision while keeping the project on schedule for launch.
On the first feedback the client provided the arch shaped section headings was not displaying correctly because client was viewing through a laptop that was overlooked during the development phase and also because Elementor breakpoints dont always get the laptop view correct. I wrote down the client feedback plus any other new updates they wanted. I then went to the responsiveness issue and realized I was using more fixed values compare to components that will flow according no matter the device size.
I start by setting the global properties in Elementor based on the brand guidelines and design assets provided by the client, including fonts, colours, spacing, and overall styling preferences. This helps establish consistency throughout the website before development begins.
Once the global settings are in place, I begin building the page structure section by section using the provided mockups as a reference. During this stage, I focus on layout accuracy, spacing, responsiveness, and maintaining the overall visual hierarchy of the design. As the pages are being developed, I also continuously test different breakpoints to ensure responsiveness is accurate across desktop, tablet, and mobile devices before presenting the website to the client for the first revision round.
Revisions and feedback are then implemented through an iterative process, ensuring all requested updates are carefully applied while maintaining consistency with the overall design before the website is finalized for launch.