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

    Interactive Design - Exercise 1

    -
    Image
    Interactive Design - Exercise 1 21/4/2025 - 4/5/2025 / Week 1 - Week 2 An Hongzheng / 0378415 Interactive Design / Bachelor of Design in Creative Media / Taylor's University Exercise 1 TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Exercise 1: Web Analysis     3.1 Baci Baci Matera     3.2 Praxis Leandra Isler     3.3 Language Inclusion - Google Research      3.4 Altly.AI      3.5 Augment Therapy 4. Feedback 5. Reflections LECTURES Week 1 Lecture 1 INSTRUCTIONS   Figure 2.1: Instruction / Week 1 (21/4/2025) EXERCISE 1: WEB ANALYSIS Exercise 1: Choose  FIVE (5) websites  from the link given. Review the website that you've selected carefully, taking note of its  design, layout, content, and functionality . Identify the  strengths and weaknesses  of the website, and consider  how they impact the user experience . Write a brief report summarising your findings and recommendations. What To Have in...
    Read more

    Typography Task 1 / Exercises

    -
    Image
    28/09/2024 - 03/11/2024 / Week 1 - Week 4 An Hongzheng / 0378415 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 1 : Exercises CATALOGUE Lectures Instruction Task 1 - Exercises Task 1 - Exercises 2 Feedback Reflections Further Reading LECTURES Week 1 : Typo_0_Introduction Typography is a fundamental aspect of design, used in various fields like animation, graphic design, and new media. It involves creating letters, typefaces, and type families, and is essential in website and app design, signage, and product packaging. Typography focuses on arranging text to enhance legibility and visual appeal, making it a skill practiced by many today. Figure 1.1.1 Examples of typography using in website design, app design, signage design, labels . Typography is the art and techniques of arranging type to make written language legible, readable and appealing when displayed.  /It is now something everybody does./ Terminology Font:a font refers to the individ...
    Read more

    Typography Task 3: Type Design and Communication

    -
    Image
    4/11/2024 - 24/11/2024 / Week 7 - Week 9 An Hongzheng / 0378415 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University Task 3 :  Type Design and Communication CATALOGUE Lectures 2. Instructions 3. Task 3: Type Design and Communication       3.1 Research       3.2 Sketches       3.3 Identify and deconstruct references       3.4 Digitalized       3.5 FontLab       3.6 Final Outcome 4. Feedback 5. Reflection 6. Further Reading LECTURES Week 7 (Lecture 7): Mr. Vinod briefly introduced us to the content of our Task 3. We use prepared markers and grid paper to draw sketches with uppercase and lowercase letters: "h, o, b, g". We need at least three different styles. Fig.1.1.1  Deconstructed "r" Fig.1.1.2  References Fig.1.1.3  Additional reference of a writing tools Tools: 1. The broad-edge pen (flat)...
    Read more