From code to canvas — A web design project for an Architectural firm
Introduction
In this project, I have aimed to build an official website for an architectural company as their main website representing them in the digital world. The primary goal of this project is to design a comprehensive website showcasing the company’s portfolio and other architectural services provided by them. For this, I have created a hypothetical company called “A & A Designs” and created a simple logo with dedicated brand colors. The website targets the general public who are interested in purchasing new custom house plans or exploring pre-prepared general plans available in the shop section.
Using HTML, CSS, JavaScript, and related libraries like Bootstrap and jQuery, I aimed to create a visually appealing and user-friendly website that reflects the architectural nature of the company while ensuring a minimalist design for a seamless user experience.
Design Choices
For the A & A Designs website, I decided on an architectural-inspired design with ornate elements to capture the essence of the company’s sophistication. However, I balanced it with a minimalist layout to cater to the general public’s preferences and provide a smooth user experience.
To create a unique brand identity for A & A Designs, I designed a custom logo which is simple and selected two primary colors: #054A91 and #007EFF. The deep blue shade (#054A91) symbolizes trust and reliability, while the vibrant blue (#007EFF) represents creativity and innovation, both essential traits in the architectural industry.
Throughout the website, I consistently applied these colors to various design elements. The background color light ash (#F2F2F2) complements the primary colors and ensures content readability. The use of white (#FFFFFF) as the secondary background color maintains a clean and modern appearance. To prioritize legibility, I chose classic black (#000000) as the text color.
Following are the used colors in the website as a summary.
Website Structure
The structure of the A & A Designs website is organized into various sections to facilitate easy navigation for visitors. The main components of the website include:
Home Page: Featuring a captivating hero section showcasing the company’s architectural creations, an engaging “Why Choose Us” segment highlighting the company’s unique selling points, services, portfolio gallery, testimonials, trusted brands, an online shop section for house plans, and footer section for quick links and quick contact details.
About Page: Presenting the company’s core values, and team members to establish A & A Designs’ authority and expertise in the architectural domain.
Blog Page: Providing a platform to share insights, trends, and innovative concepts in architecture, positioning A & A Designs as a thought leader in the industry.
Contact Page: Enabling visitors to reach out for inquiries through contact forms and providing other essential contact details.
Technical Implementation
The technical implementation of the A & A Designs website involved using mainly HTML, CSS, JavaScript, Bootstrap, and jQuery to create a responsive and interactive user interface.
Bootstrap — The main CSS part was handled using Bootstrap. And specially carousels were used to add some interactive features
jQuery
All the functionality parts are done using jQuery. Especially reading data from a text file and fetching it on the web page for the single post page.
In the shop section, I have developed a 3-layer filtering system to filter the available house plans according to the number of stories, bedrooms, and bathrooms.
To make the prototype, I used Figma, a versatile design tool, to create prototypes and make informed decisions regarding UI/UX design, colors, and branding. The iterative design process allowed me to refine the website’s visual elements and user experience based on my preferences and insights.
Click here to see the Figma design 👈
Challenges Faced During the Project
While working on the A & A Designs website, I encountered several challenges that required careful consideration and problem-solving. One major challenge was finding the right balance between an ornate design suitable for an architectural company and a minimalist approach to cater to the public’s preferences. To address this, I iterated on different design concepts until I achieved a design that felt both sophisticated and user-friendly.
Documents/ External Resources/ Libraries/ Frameworks Used
In the development process, I used external resources, libraries, and frameworks to enhance the website’s functionality and aesthetics.
Bootstrap: Utilized to streamline and expedite the design process with consistent styling and responsiveness.
jQuery: Implemented to create DOM manipulation and event handling.
GIT: Utilized to take backups of the source code and other assets and continuously sync with the cloud repository throughout the project.
Github: Used as the cloud repository to ensure the safety of the project.
Figma: Employed to create prototypes and refine the website’s design based on iterative feedback.
Canva: Used to design a custom logo, aligning it with the company’s visual identity.
ChatGPT: Integrated to generate creative content efficiently, saving time and ensuring high-quality content creation.
Google Analytics: Integrated to gain insights into user behavior and website traffic patterns.
Final Conclusion
Completing the A & A Designs website project has been a valuable learning experience in web design and development. From conceptualization to branding and final deployment, I gained a comprehensive understanding of the project life cycle in the IT industry.
Future Improvements
As I continue to develop the A & A Designs website, I have identified several areas for future improvements:
Enhanced Interactivity: I plan to explore additional animation effects and interactive elements to captivate visitors and create a dynamic user experience.
Color Experimentation: To keep the website visually engaging, I will experiment with alternative color combinations that align with the company’s branding and evoke specific emotions.
Accessibility Optimization: Improving accessibility features will ensure the website is inclusive and user-friendly for all visitors, including those with disabilities.
Click the following links for Figma design, Git hub repository, and the hosted website.
