Interactive Design - Project 3

-

 Interactive Design - Project 2

26/5/2025 - 16/6/2025 / Week 6 - Week 8
An Hongzheng / 0378415
Interactive Design / Bachelor of Design in Creative Media / Taylor's University
Project 2
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Project Report
4. Final Outcome
5. Reflection

Links:

    LECTURES

    Week 10

    Lecture 10
    Basic layout of a homepage （HTML and CSS）

    Fig.1.1 Lecture / (Week 10, 24/6/2025)

    INSTRUCTIONS
    Fig 2.1: Instruction / Week 1 (21/4/2025)

    Project Report

    Introduction

    This report documents the development of a 5-page website for "Eminent Suite," an apartment rental service website, created to fulfill a fully functional, responsive, and accessible website based on my figma prototypes in project 2. The website, built using HTML and CSS with custom fonts (Aboreto and Roboto), comprises five pages: Homepage, Apartments, About Us, Contact, and Blog. The project aimed to implement a user-friendly interface, consistent design, cross-browser compatibility, and performance optimization. This report outlines the development process, challenges, solutions, and my final conclusion and reflections.



    Development Process

    The development transformed the prototypes of 5 website pages (designed in Figma) into a functional website. Key steps included:

    1. HTML Structure: 5 Semantic HTML elements (<header>, <nav>, <main>, <section>, <footer>) ensured accessibility. The Homepage(Overview) features a hero banner and apartment listings (home-page.html), the Apartments page details properties (Apartments.html), the About Us page includes terms and privacy policies (aboutUs.html), the Contact page offers a form for customers(Contact.html), and the Blog page showcases reviews from our geust and hotel itself. (blog.html).



    2. CSS Styling: 5 custom CSS files connected to each 5 html files respectively (home-page.css, Apartments.css, aboutUs.css, Contact.css, blog.css). They maintained a consistent design with a dark header (#212121), yellow accents (#f2a81d), and a 1440px max-width container (.w class).The fonts (Aboreto for headings, Roboto for body) were imported via @font-face.


    Fig 3.1 Homepage Hero Banner /Week 12 /07/11/2025


    The hero banner on the Homepage/Overview page (home-page.html, .banner class) showcases a responsive 700px image with navigation dots, maintaining design consistency with a dark header and yellow accents.

    Fig 3.2 home-page.html (lines with <div class="banner">) /Week 12 /07/11/2025


    Fig 3.3 home-page.css (.banner and .dot-box styles) /Week 12 /07/11/2025



    3. Responsive Design: Flexible layouts (e.g. .card-box with display: flex) and media queries ensured adaptability across devices. The Apartments page’s card layout adjusts to stack vertically on mobile.

     Fig 3.4 Apartments Page Card Layout /Week 12 /07/11/2025


    The Apartments page (Apartments.html, .card-box class) displays responsive cards that stack on mobile devices, ensuring usability.

    Fig 3.5 Apartments.html (lines with <div class="card-box">) Week 12 /07/11/2025

     Fig 3.6 Apartments.css (.card-box and .card styles) Week 12 /07/11/2025



    4. Interactivity: The Contact form and “Check Rates” buttons includes a hover effects (e.g., .check-btn:hover) and enhances user engagement.

    Fig 3.7 Contact Form /Week 12 /07/11/2025


    Caption: The Contact form (Contact.html, .contact-ipt-box class) features styled inputs with rounded borders and hover effects, improving interactivity.

    Fig 3.8 Contact.html (lines with <div class="contact-ipt-box">) /Week 12 /07/11/2025

    Fig 3.9 Contact.css (.contact-ipt-box and .sub-btn styles) /Week 12 /07/11/2025



    5. Performance Optimization: Placeholder images were used, with plans for compression. CSS was streamlined by reusing classes (e.g., .w, .card). Caching was planned via meta tags.


    6. Testing and Deployment: Usability, responsiveness (breakpoints at 320px, 768px, 1200px), and cross-browser compatibility (Chrome, Firefox, Safari, Edge) were tested. The site was deployed on Netlify.



    Challenge and Solution

    1. Challenge: Incorrect Homepage File Naming Leading to Deployment Failure
    The Homepage was named home-page.html, causing Netlify to return a 404 error as it expects index.html.

    Solution: Renamed home-page.html to index.html and updated navigation links across all HTML files (e.g., <a href="home-page.html"> to <a href="index.html"> in Apartments.html, aboutUs.html, Contact.html, blog.html under <div class="head-nav">). 


    2. Challenge: Inconsistent Button Hover Effects Across Pages
    Button hover effects (e.g., .check-btn on Homepage, .sub-btn on Contact page) varied in color and transition speed, leading to an inconsistent user interaction experience.

    Solution: Standardized hover effects across all buttons by defining a uniform style in CSS files (e.g., .check-btn:hover, .sub-btn:hover { background-color: #f2a81d; color: #fff; transition: all 0.3s ease; } in home-page.css and Contact.css). Tested to ensure consistent visual feedback on hover.
    Code Reference: index.html (lines with <a class="check-btn">), Contact.html (lines with <button class="sub-btn">), home-page.css (.check-btn:hover), Contact.css (.sub-btn:hover).
    Fig 3.10 Button Hover Effect /Week 12 /07/11/2025

    The “Check Rates” button on the Homepage and “Submit” button on the Contact page show consistent hover effects.


    3. Challenge: Cross-Browser Font and Gradient Rendering
    Custom fonts (Aboreto, Roboto) and gradients (.date-tab-box, background #c48718) rendered inconsistently in Safari.

    Solution: Added fallback fonts in @font-face (e.g., font-family: 'Aboreto-Regular', sans-serif) and simplified gradients to solid colors in all CSS files (e.g., home-page.css, .date-tab-box { background: #c48718; }). Tested across Chrome, Firefox, Safari, and Edge.

     Fig 3.11 CSS files (lines with @font-face, .date-tab-box) /Week 12 /07/13/2025


    4. Challenge: Navigation Consistency Across Pages
    The navigation menu (.head-nav) risked misalignment due to varying page content lengths.

    Solution: Standardized .head-nav styling in all CSS files (e.g., margin-left: 315px; width: 96px in home-page.css) and ensured consistent HTML structure (<div class="head-nav">) across all pages. Added hover effects (.head-nav a:hover { color: #f2a81d; }).

    Fig 3.12 css file (.head-nav, .head-nav a:hover) /Week 12 /07/13/2025


    Fig 3.13 Navigation Menu /Week 12 /07/13/2025

    The navigation menu shows consistent styling and hover effects.


    5. Challenge: Limited Accessibility Features
    The HTML lacked sufficient ARIA attributes and alt text for images, reducing screen reader compatibility.

    Solution: Added alt attributes to images (e.g., <img src="images/logo.png" alt="Eminent Suite Logo"> in index.html) and recommended ARIA labels for navigation (e.g., <a href="index.html" aria-label="Homepage">OVERVIEW</a>). Ensured high-contrast colors (e.g., white text on #212121 in .header).

    HTML files (image tags)

    Fig 3.14 home-page.css (.header) /Week 12 /07/13/2025

    The About Us page uses clear typography, with added alt text improving accessibility.


    6. Challenge: Inconsistent Footer Styling Across Pages
    The footer section (<footer> with .footer-nav and .bottom-icons) had inconsistent alignment and spacing of social media icons and navigation links across pages, affecting visual uniformity.

    Solution: Standardized footer styles in all CSS files by setting consistent properties (e.g., .footer-nav { display: flex; justify-content: center; gap: 20px; } and .bottom-icons { display: flex; gap: 15px; } in home-page.css, aboutUs.css, etc.). Ensured identical HTML structure for <footer> across all pages. Tested to confirm uniform appearance.
    Fig 3.15 HTML files (lines with <footer>) /Week 12 /07/13/2025

    Fig 3.16 CSS files (.footer-nav, .bottom-icons)


    Fig 3.17  Footer Section /Week 12 /07/13/2025

    The footer section across all pages shows consistent alignment of navigation links and social media icons.

    Final Outcome

    Fig 4.1 Website Page- Overview / Week 13 /07/17/2025

    Fig 4.2 Website Page- Aprtments / Week 13 /07/17/2025 


    Fig 4.3 Website Page- About Us /Week 13 /07/17/2025


    Fig 4.4 Website Page- Contact / Week 13 /07/17/2025


    Fig 4.5 Website Page- Blog /Week 13 /07/17/2025
    • Design Consistency: Dark headers (#212121) and yellow accents (#f2a81d) unify pages (e.g., .header, .date-tab-box). Standardized footer styling enhances cohesion (Challenge 6).
    • Responsive Design: Flexible layouts (.card-box, .w) adapt to devices.
    • Cross-Browser Compatibility: Fallback fonts and simplified gradients ensure uniformity (Challenge 3).
    • Navigation: Standardized .head-nav ensures easy access (see Screenshot 4).
    • Interactivity: Consistent button hover effects enhance engagement (see Screenshot 3).
    • Performance Optimization: Streamlined CSS and planned image compression improve load times.
    • Accessibility: Semantic HTML and alt attributes improve readability (see Screenshot 5).
    • Testing and Deployment: Usability testing verified navigation and form functionality. Responsiveness was tested at 320px, 768px, and 1200px. Cross-browser testing resolved Safari issues (Challenge 3). Deployment on Netlify required renaming home-page.html to index.html and adding netlify.toml (Challenge 1). Files are uploaded to Google Drive (link pending), and the site is accessible at Netlify URL pending.

    Reflection

    - Building the Eminent Suite website was a big step for me. I turned a prototype into a 5-page site that’s easy to use, looks good, and meets the assignment goals. Fixing the Netlify issue by renaming home-page.html to index.html (Challenge 1) was tricky but taught me to check platform rules. Making button hover effects (Challenge 2) and footer styling (Challenge 6) the same across pages (.check-btn, .footer-nav) helped me get better at CSS and focus on details. Adding alt text for images (Challenge 5) showed me how to make websites work for everyone. I learned a lot about HTML and CSS, like using clear tags and flexible layouts (.card-box, .w). Keeping multiple files organized was hard, but it improved my planning skills. Not having JavaScript limited things like form checks, which was tough. In the future, I want to learn JavaScript to add more features and try tools like Bootstrap to make responsive design easier. I’m proud of my work—it’s a solid site that shows off the Eminent Suite brand, and I feel ready for bigger projects.

    Comments

    Post a Comment

    Popular posts from this blog

    Design Research Dissertation / DIS60304

    -
    Image
    25/9 /2025 - 25/12/2025 / (Week 1 - Week 14) An Hongzheng / 0378415 Design Research Dissertation / DIS60304 Bachelor of Design (Hons) in Creative Media TABLE OF CONTENT 1. Instruction 2. Task 1: Draft Dissertation 3. Task 2: Visual Design Publications 4. Task 3: Final Dissertation 5. Task 4: Journal Article 6. Feedback 7. Reflection INSTRUCTIONS Figure 1.1: Module Information TASK 1 - Draft Dissertation Figure 2.1: Task 1: Draft Dissertaton TASK 2 - Visual Design Publication QR for e-publication book Figure 3.1: QR for E-publication Book Figure 3.2: Visual Desgin for Publication TASK 3 - Final Dissertation Figure 4.1: Task 3: Final Dissertation TASK 4 - Journal Article Figure 5.1 Journal Article FEEDBACK Figure 6.1: Weekly Progression and Feedback REFLECTION Experience:   Looking back at this semester, the journey felt like leveling up in a high-difficulty RPG—starting with low stats and high anxiety. Honestly, when I first saw the requirement for a 7000-word Dissertation (Assignm...
    Read more

    Major Project 1

    -
    Image
    23/4 /2026 - 7/24/2026 / (Week 1 - Week 14) An Hongzheng / 0378415 Major Project 1 / PRJ64904 Bachelor of Design (Hons) in Creative Media TABLE OF CONTENT 1. Instruction 2. Weekly Progress 3. Mid 4. Final 5. Reflection INSTRUCTIONS Figure 1.1: Module Information Weekly Progress Week 1 - Week 3 - After deciding to make a game, I conceived four projects. My teacher advised me to be realistic and not spend too much time researching gameplay. I then refined the projects by finding relevant resources and established the game's world-building. Week 4 - The game's world was designed with main characters and antagonists. Week 5 - A color scheme was determined for the previously designed character. Week 6 - As per the teacher's requirements, two new characters were improved and designed: a villain in a monster form and a new saintess image. Week 7 - A color scheme was determined for the villainous monster design.  - Several weapons were designed. Week 8 - A complete...
    Read more

    Information Design - Project 1

    -
    Image
    2/2 /2025 - 20/3/2025 / (Week 1 - Week 7) An Hongzheng / 0378415 Information Design / GCD60504 Bachelor of Design (Hons) in Creative Media TABLE OF CONTENT 1. Instruction 2. Lectures 3. Project 1: Instructable Poster 4. Reflection INSTRUCTIONS Figure 1.1: Module Information Lectures Week 6 Objective & Deliverables Goal: Animate Project 1's static infographic poster to improve clarity, hierarchy, and aesthetics through motion . Video (Pair/Group): Create a maximum 60-second animated infographic . Blog (Individual): Document your process in an updated reflective e-portfolio . Timeline Week 5: Create a 60s timing map and a storyboard showing appearances and transitions . Week 6: Build a motion wireframe (animatic) and finalize the visual system . Week 7: Complete a rough cut with a sound pass, followed by the final submission of the video and portfolio updates . Technical Specs Format: 720p (1280 × 720 px) exported as H.264 / MP4 . Submission: Publish via an "Unlisted...
    Read more