INTERACTIVE DESIGN - FINAL PROJECT
Lim Jia Xuan 0371026
GCD60904 Interactive Design
Project 3: Website Redesign
1.0 INSTRUCTIONS
The development of this website was a gradual and iterative process that focused on translating visual wireframes into a functional and visually consistent website using HTML and CSS. Throughout the process, I worked step by step, starting from basic structure and progressively refining the layout, alignment, and styling of different components. Rather than building everything at once, I approached the development by breaking the website into smaller sections, such as the navigation bar, hero section, content cards, testimonial page, and call-to-action buttons. This allowed me to better manage the workflow and identify issues more efficiently.
The first stage of development involved structuring the website using HTML. I focused on creating a clear hierarchy by separating sections into containers such as headers, navigation bars, main content areas, and individual cards. Each page was built independently, for example, creating a separate page for testimonials, which helped maintain clarity and organisation in the code. Semantic elements were used where possible to improve readability and ensure that the structure reflected the intended layout of the wireframes.
After establishing the HTML structure, I moved on to styling the website using CSS. One of the main focuses during this stage was ensuring consistency in layout width and alignment across different sections. I implemented a fixed maximum width for content areas to match the design frame, while allowing the background of certain sections, such as the navigation bar, to stretch across the full width of the screen. This required the use of an inner container approach, where the outer element spans the full screen and the inner container controls the content alignment. This technique became a recurring solution throughout the project and significantly improved the overall visual balance of the website.
One major area of development was the navigation bar. Initially, I encountered issues where the navigation links were sticking too closely to the logo or being pushed too far to the edge of the screen. This was mainly due to incorrect flexbox usage, missing width definitions, and padding values. Through trial and error, I learned to use flexbox more effectively by applying properties such as margin-left: auto pushing navigation items to the right and adding padding within the inner container to ensure proper spacing. Fixing these issues helped me better understand how flexbox distributes space and how small CSS mistakes can significantly affect layout behaviour.
The hero section also required careful attention, especially when placing text over images. I learned how to position images using relative and absolute positioning so that text could be layered on top without disrupting the layout. However, this introduced a new challenge where the hero image would overlap and cover the navigation bar when scrolling. This issue was resolved by adjusting the stacking order by using z-index and ensuring the navigation bar had a higher stacking priority. This experience highlighted the importance of understanding CSS positioning and stacking contexts, which was something I initially found confusing but gradually became more comfortable with.
Another key part of the development process was designing content cards, such as profile cards and testimonial cards. These cards required consistent image sizing, rounded corners, and balanced spacing between text and images. I faced challenges when trying to make all images appear the same size while maintaining their proportions. This was solved by setting fixed height values and using object-fit: cover, which ensured the images filled their containers without distortion. Grid and flexbox layouts were both explored for organising multiple cards, and grid layouts were especially useful for maintaining even spacing across rows and columns.
Styling buttons was another important aspect of the website. Although buttons appear simple, I encountered issues such as unwanted borders, default browser outlines, and inconsistent hover behaviour. I learned that browsers apply default styles to buttons, which must be overridden to achieve a clean and consistent design. By removing default borders and outlines and applying custom border-radius values, I was able to create buttons that matched the visual language of the website. Additional hover effects were added to improve interactivity and user experience.
Throughout the development process, responsiveness was a recurring consideration. While the initial focus was on desktop layout, adjustments were made to ensure the website remained usable on smaller screens. Media queries were used to adjust grid layouts, stack elements vertically, and reduce padding on smaller viewports. Although this was challenging at times, it helped reinforce the importance of designing with flexibility in mind rather than relying on fixed layouts.
One of the biggest challenges faced during this project was debugging CSS issues. Small errors such as missing units (for example, forgetting to add “px”), incorrect selectors, or misplaced properties often caused layouts to break or behave unexpectedly. These issues required patience and careful inspection using browser developer tools. Over time, I became more confident in identifying problems by checking computed styles, box models, and layout boundaries, which significantly improved my debugging efficiency.
In conclusion, the development of this website was both challenging and educational. It strengthened my understanding of HTML structure, CSS layout techniques, and the importance of clean, organised code. The challenges faced, particularly with alignment, positioning, and responsiveness, played a crucial role in improving my problem-solving skills and technical confidence. Through continuous refinement and testing, I was able to achieve a final outcome that closely reflects the original design intent while also gaining valuable experience in front-end web development.
Final Website Link (Submission): https://spineartchiro-redesign.netlify.app/contact
Comments
Post a Comment