Interactive Design Project 3: Website Development

02/12/25 - 11/01/25 (Week 11 to Week 15)

Choong Yee Leng || 0381980

Interactive Design || Bachelor Degree in Creative Media || Taylor’s University 

Project 3: Website Development

TABLE OF CONTENT

1.Instructions

2.Developed website submission

3.Brief report

4.Reflection

INSTRUCTIONS

Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.

Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).

Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.

Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.

Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).

Core Features:

Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.

Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.

Technical Considerations:

Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.

Final Testing and Deployment:

Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.

Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.

Submission:

A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).

SUBMISSION

Netlify link: https://whitenoise-project3.netlify.app/

Google Drive link: https://drive.google.com/drive/folders/1O8tdJLuUY8c5lL4l5PdbhMG8VJN2Ujxk?usp=sharing

BRIEF REPORT

This website is developed using 5 HTML files (homepage, about us, our services, showcase, contact us) and 1 CSS file to maintain consistency in styling across all pages.

Navigation Bar:

• To create a navigation bar that is easy to access and highly visible, it is set with position: fixed and a z-index: 10, ensuring it remains on screen while users scroll through the page.
• I used justify-content: space-between to separate the logo and the navigation list, allowing both elements to sit at the far left and right corners, maximizing visual balance and readability.
• By studying this figure, I gained a better understanding of how justify-content affects layout arrangements and spacing.

Figure 3.1 justify-content

Hero Section:

• Every hero section across different pages shares the same hero class, as only the HTML content (images and body text) needs to be changed.
• By defining a fixed width and height, all hero sections maintain a consistent size and neat appearance. overflow: hidden is applied to ensure the background image fits neatly within the container.
• To overlay text on the hero image, position: sticky, z-index: 2, and a negative margin-bottom value are used to achieve the desired layered effect.

Figure 3.2 overflow

Footer:

• The footer is divided into three sections and styled using display: flex, flex-direction: row, and justify-content: space-between so that content is evenly distributed.
• object-fit: contain is applied to ensure icons maintain their proportions without distortion.
• By studying this figure, I understood how object-fit influences image scaling and display behavior.

Figure 3.3 Object fit

Homepage:

About Us Section:

• The section is split into two parts, image and text, and aligned using display: flex with flex-direction: row, allowing content to appear clearly on the left and right.
• A button with a hover effect linking to the About Us page is placed below the description to encourage navigation.
• By applying padding, border-radius, and background color, the button appears more interactive and visually distinct compared to a simple hyperlink.

Our Services Section:

• The service containers are evenly distributed using justify-content: space-between and styled with border-radius to create a softer, more approachable visual appearance.

        Challenges Faced:

• I spent a considerable amount of time creating a hover effect where text appears when hovering over an image.
• This tutorial helped me achieve the effect: https://www.youtube.com/watch?v=tF3RE5CGt9U
• I learned that setting the text box opacity to 0 initially and changing it to 1 on hover creates the desired transition effect, which was a very eye-opening discovery.
• By applying overflow: hidden, the text box remains confined within the image container.

Our Latest Work Section:

    Challenges faced

• The sliding effect is really confusing at first.
• This section is built as an image slider using HTML radio buttons and CSS, without using JavaScript.
• This tutorial: https://www.youtube.com/watch?v=mYh53IM2KLA&list=PLpwngcHZlPae68z_mLFNfbJFIJVJ_Zcx2&index=3 helped me understand that radio buttons can be used to control slide states, where only one slide is active at a time.
• I learned that the :checked property allows CSS to detect which radio button is selected and apply different styles to each slide.
• By applying left positioning and the transition property, images slide smoothly into position when switching slides.
• Opacity, transform: scale(), and z-index are used to create focus and depth, making the active slide more prominent.

About Us Page:

Our Mission & Meet Our Team Section:

• Development for both sections progressed smoothly. 
• The blocks in the “Our Mission” section are center-aligned, while the “Meet Our Team” section uses space-between for balanced spacing.
• Since I had already implemented image hover effects earlier, applying the same technique here was more efficient.

Our Studio Section:

Challenges Faced:

• I spent a significant amount of time creating a layout where images of inconsistent sizes fit neatly into a structured grid, achieving a clean yet visually engaging effect.
• Although display: grid can arrange content into blocks, creating varied image sizes required additional experimentation.
• This tutorial helped me better understand grid system in CSS: https://www.youtube.com/watch?v=RhUuMl3R1PE
• Through this tutorial, I learned that grid-template-columns: repeat (3, 1fr) allows three items per row with equal width, while grid-template-areas enables custom sizing within the grid. I also learned how nth-child () can target specific elements within a class.
• Below is a comparison between the knowledge learned from the tutorial and its application on the website.

Figure 3.4 Tutorial application

Our Services Page:

• I created an additional layout draft using Figma, as this page was not included in the Project 1 prototype.

Figure 3.5 Layout draft in Figma

• By adjusting z-index values and margins, an overlay effect was successfully applied to enhance visual depth.

Showcase Page:

• Videos were embedded from Vimeo and arranged with two items per row.
• Since I had previously learned display: grid, aligning the content was straightforward using grid-template-columns: repeat (2, 1fr).

Contact Us Page:

• I used the <form> element to create the contact form, selecting input fields for the name and email, while the enquiry section uses a text area to allow longer user input.
• A Google Map is embedded in the section below to provide location context and improve accessibility.

    Challenges:

• I spent some time figuring out how to style both the form elements and the embedded map consistently.
• Through this process, I learned that by targeting elements such as input, text area, and iframe together with their classes, I could apply properties like border-radius to create a unified and polished appearance.

REFLECTION

This assignment has been extremely valuable, and I feel that I have truly gained a lot from the entire process. Starting with Project 1, analyzing an existing website allowed me to approach it from both a user and a designer perspective. I learned to identify what makes a website effective, as well as what design choices should be avoided to ensure better usability and visual appeal.

Moving on to Project 2, where I worked on creating a prototype, I understood the importance of planning and building a prototype before coding. This stage highlighted how prototyping can reduce errors, anticipate potential layout issues, and save time in the long run. It also allowed me to experiment with different designs and interactions before committing to the actual code.

Finally, in Project 3, I was tasked with coding the full website. This stage presented many challenges, as I had to acquire new knowledge beyond what was taught in class, using YouTube tutorials and online resources. I encountered multiple problem-solving situations, from layout alignment to hover effects and interactive elements. Through persistence and experimentation, I gradually became more confident and familiar with HTML and CSS, applying newly learned techniques smoothly and effectively.

By the end of the project, seeing the fully functional website gave me a strong sense of accomplishment and pride. This assignment not only improved my technical skills but also strengthened my critical thinking, problem-solving, and design awareness, which I know will be valuable in future projects.