Mahdfam
Leading Construction and Engineering Solutions
Specification
- Theme: Custom UI by Blacko.studio
- Budget: 2000$
- Responsive: Yes
- Implementation Year: 2024
- Language: Persian
- Status: Online
Challenges
- Event Section
- Animated Header
- Custom Google Map
- AR for interior design
Portfolio Gallery
Mahdfam project Overview
As the developer of the Mahdfam Construction website, I aimed to showcase the company’s diverse and high-quality projects through a user-friendly and professional platform. The site highlights a range of construction endeavors, from luxurious residential complexes to cutting-edge commercial buildings. Each project is presented with detailed descriptions and high-resolution images, emphasizing the company’s commitment to sustainability, modern aesthetics, and functionality. My goal was to create a digital space that reflects Mahdfam’s excellence and innovation in the construction industry.
Design and Styling
The UI/UX design of the Mahdfam Construction website, crafted by the talented team at Blacko Studio, embodies a sleek and professional aesthetic using the brand’s main colors of dark blue and gold. The design ensures intuitive navigation, with a clear layout and user-friendly interface that guides visitors effortlessly through the site. High-quality images and detailed project descriptions are strategically placed to highlight Mahdfam’s excellence in construction. The responsive design ensures a seamless experience across all devices, making the site accessible and engaging for all users.
Languages and Technologies
For the Mahdfam Construction website, I utilized WordPress as the foundation, enhanced with Advanced Custom Fields (ACF) Pro for dynamic and customized content management. The front-end was meticulously styled using SCSS, while jQuery and PHP powered interactive elements and server-side functionalities. Ajax was employed for seamless data exchange, ensuring a smooth user experience. The site is optimized with Webpack, enabling efficient asset bundling and management.
To further enhance performance and visual appeal, I incorporated the next generation of image formats, AVIF and WebP, which significantly reduce load times while maintaining high quality. The standout feature of the site is the animated hero header, brought to life using Lottie, adding a dynamic and engaging visual element right from the landing page. This combination of modern technologies ensures the Mahdfam website is both functional and visually striking.
Events
The event section on the Mahdfam Construction website is designed to keep customers and audiences informed about the latest events related to the company. Implemented using Swiper.js, the main section features a slider showcasing ongoing and upcoming events, followed by an archive of previous events. This dynamic presentation ensures visitors are always up-to-date with Mahdfam’s activities. The event section emphasizes transparency and engagement, providing valuable information about industry events, company milestones, and community activities.
AR Technology
The Mahdfam Construction website features AR technology to enhance the user experience by showcasing 3D models of interior designs and building exteriors on project pages. This innovative approach allows visitors to explore and interact with detailed, realistic renderings of Mahdfam’s projects. Users can view intricate design elements and structural details, providing a comprehensive understanding of the projects. This immersive feature emphasizes Mahdfam’s commitment to utilizing cutting-edge technology to present their work in the most engaging and informative way possible.
Custom Google Map
The Mahdfam Construction website includes a custom Google Map tailored to the brand’s aesthetic, featuring a theme that matches their dark blue and gold color scheme. This interactive map showcases multiple pins marking key project locations and office addresses, providing users with a comprehensive view of Mahdfam’s geographical footprint. Each pin is clickable, offering detailed information about the respective project or office, enhancing user engagement and making it easier for clients to locate and learn more about Mahdfam’s work and services.
