Doric Co.
Luxury mansion builder
- Theme: Custom UI
- Designed by: Ostudio24.com
- Budget: 2500 $
- Responsive: Yes
- Implementation Year: 2023
- Language: English - Arabic
- Status: Online
- Multilingual With LTR & RTL Language
- The need for projects page and services page with two-way relationship
- One page to upload images, 5 places to display images
- Page speed
Portfolio Gallery
UI/UX design
The goal of Doric Company’s website is to showcase their luxurious mansion constructions to potential clients in the best possible way. The user interface (UI) of the website was designed by Ostudio, a design company that specializes in creating beautiful and user-friendly websites. However, the design alone is not enough to provide a great user experience (UX) for the audience. That’s where I came in – I worked on the development side of the website, making sure that the code behind the UI was efficient, user-friendly, and bug-free.
As a developer, my role was to work closely with the design team to translate their vision into a functional website. I optimized the website’s code to ensure that it loads quickly and smoothly, and I also made sure that the website was mobile-friendly and responsive. Additionally, I incorporated various features into the website, such as a contact form for potential clients to get in touch with the company and a gallery of past projects to showcase the quality of their work.
Projects
The projects page on Doric Company’s website features a unique design approach to showcase their luxury mansion projects. Each project image is initially presented in black and white, creating a sophisticated and elegant look. Upon hovering over an image, it becomes colored, highlighting the beauty of each project.
The page has a black background, adding to the luxurious and premium feel of the website. This design choice helps to keep the audience engaged and create a lasting impression of the brand’s quality and attention to detail.
Project Page
For the projects page, I ensured that each project was showcased comprehensively by including sections for the building face, plan, construction stages, interior design, and materials used. To enhance the user experience, I implemented a gallery of images for each section, and enabled users to click on each photo for a closer view. Additionally, I added a floating menu for easy navigation between sections.
The next slide shows an enlarged image
Services
To address this challenge on the service page, I used a creative approach to categorize the images based on the different parts of a project such as interior design, landscaping, and construction stages. Each category is displayed in a separate section with a preview image, and by clicking on each category, the user can view the related project images. To enhance the user experience, I also implemented a smooth animation effect for transitioning between the different categories.
Service page
To provide a better user experience, I created a section for each service and displayed three images of the related project in that section. Users can click on “See more” button to go to the project page and see more pictures. This design helped to showcase the company’s expertise in each service and attracted the users’ attention to the high-quality images of the projects.
Arabic version
Designing a website in both English and Arabic languages requires careful attention to detail in terms of layout, typography, and overall user experience. I made sure that the website was optimized for both languages, taking into account the different reading directions, font styles, and character sets.
The challenge was to ensure that the website had a consistent look and feel in both languages, while providing a seamless experience for users who switch between them. I also made sure that the website was fully responsive in both languages, adapting to different screen sizes and orientations.
Overall, I am confident that I was able to deliver a high-quality website that meets the client’s requirements and exceeds their expectations in terms of design and functionality.
