Interactive Design | Final Project

-

Gao Yuan Yi 0373945

Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Final Project

INTRUCTION


Final Project

Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, and 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.

Chosen Website: Craigslist

Screenshot of Craigslist' s home page

Screenshot of Final Project on Figma

Screenshot of Final Project on DreamWeaver

Screenshot of Final Project on DreamWeaver

Final Outcome

Click here to visit my Final Project prototype

网站 (adorable-granita-feeaf3.netlify.app)

Purpose of the Test

The goal was to check the website’s usability, browser compatibility, and responsiveness. We wanted to find any issues, document them, and suggest solutions to make the website as smooth and user-friendly as possible.


Testing Process

1. Usability Testing

  • Tried out key features like navigation, buttons, and forms to see if they worked as expected.
  • Asked users to complete tasks (e.g., submitting a form or navigating between pages) and noted how easy it was for them.

2. Cross-Browser Testing

  • Tested the website on major browsers:
  • Chrome
  • Firefox
  • Safari
  • Microsoft Edge
  • Opera

3. Responsiveness Testing

  • Checked how the website looked and behaved on different devices: mobile phones, tablets, and desktops.
  • Adjusted browser window sizes to see if the layout adapted well.

4. Recording Issues and Fixes

  • Logged any problems during testing and came up with practical solutions for each.


Test Results

(1) Usability Testing

  • Task: 

  1. Navigation bar
  2. Form submission
  3. Page load speed
  4.  Dynamic elements

  • Result: 

  1. Worked perfectly, quick response
  2. Form validation and submission worked well
  3. Loaded within 3 seconds
  4. Hover effects didn’t work well on mobile Replaced hover with click actions on mobile

(2) Cross-Browser Testing

  • Browser:

  1. Chrome
  2. Firefox
  3. Safari
  4. Microsoft Edge
  5. Opera

  • Result:

  1. Everything worked fine
  2. Slight font rendering differences
  3. Animations loaded slower
  4. Worked perfectly
  5. Worked perfectly

 (3) Responsiveness Testing

  • Device Type：

  1. Mobile (375px)
  2. Tablet (768px)
  3. Desktop (1920px)

  • Result:

  1. Layout was fine, icons misplaced
  2. No issues
  3. No issues


Development Process and Challenges

(1) Development Process

1. The project had three main stages:

  • Design: Created a high-fidelity prototype using Figma.
  • Development: Built the website using HTML, CSS, and JavaScript.
  • Testing: Ran usability, browser, and responsiveness tests.

2. Figma was used for collaboration and refining user interactions.

3. We used a responsive framework (like Bootstrap) to make the site adapt to different screen sizes.

(2) Challenges and Solutions

1. Cross-Browser Compatibility

  • Challenge: Animations loaded slowly on Safari.
  • Solution: Reduced the complexity of animations and optimized JavaScript.

2. Responsive Layout Issues

  • Challenge: Some elements overflowed on small screens.
  • Solution: Updated CSS media queries and used flexible layouts instead of fixed widths.

3. Page Loading Speed

  • Challenge: Slow initial load times.
  • Solution: Compressed images and added lazy loading for better performance.

(3) Tools Used

  • Figma: For prototyping and user interaction design.
  • Chrome DevTools: For debugging and performance checks.
  • BrowserStack: For testing across different browsers.


Conclusion

After testing and fixing issues, the website is now user-friendly, responsive, and works smoothly on all major browsers. For future improvements, focus more on optimizing performance for low-bandwidth users and refining the mobile experience during the design stage.


Comments

Post a Comment

Popular posts from this blog

Typography | Task 1: Exercises

-
Image
  22/4/24-27/5/24（week 1-week 5） Gao Yuan Yi  0373945 Typography Task 1: Exercises Lecture Week 1   a） Typo_0_Introduction In this lecture, Mr. Vinod introduce us to typography, which can be seen in our daily lives and can be used in a wide range of different fields. What is Typography？ Typography is the art of creating letters. It is  also animated and can infiuence wedding website design, app design, ect. It is important for designers.  Typograpgy has evolved over 500 years, from calligraphy to lettering, and finally to typography.  The arrangement of types includes selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letter pair (kerning).  The terms Typography also applies to the style, arrangement, and appearance of leeters, numbers, and symbols created by the process.  Font : A fonts refers to the individual font or weight within the typeface, l.e.:  Fig.1.1 Exam...
Read more

Design Principles | Task 1 Exploration

-
Image
3/2/2025 - 17/2/2025  Week 1 - Week 3 Gao Yuan Yi  0373945 GCD60804  Design Principles  / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1 Exploration Lecture Intro_Elements & Principles of Design 1. Elements of Design Point : The simplest element; repetition forms lines, and movement creates shapes. Line : Defines boundaries of shapes, expresses motion or emotion, and can depict light and shadow when grouped. Shape : A two-dimensional area, divided into geometric (regular) and organic (irregular) shapes. Form : Three-dimensional shapes, often used in sculpture and architecture. Texture : The tactile quality or visual representation of surfaces, divided into actual and simulated textures. Space : Can be two-dimensional or three-dimensional, divided into positive (filled) and negative (empty) space. Colour : Determined by light wavelengths, with three properties: hue, value, and saturation. 2. Principles of Design Contrast : Attracts attent...
Read more

Advanced Typography: Task 1 Exercises

-
Image
25/9/2024 - 16/10/2024  Week 1 - Week 3 Gao Yuan Yi 0373945 GCD61004  Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1 Exercises - Typographic Systems & Type & Play LECTURES Lecture 1 AdTypo_1_Typographic Systems Shape Grammar: A set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.  Axial System: All elements are organised to the left or right of a single axis.  Fig.1.1.1  Axial System Radial System: All elements are extended from a point of focus.  Fig.1. 1. 2  Radial System Dilatational System: All elements expand from a central point in a circular fashion.  Fig.1. 1. 3  Dilatational System Random System: Elements appear to have no specific pattern or relationship.  Fig.1. 1. 4  Random System Grid System: A system of vertical and horizontal divisions.  Fig.1. 1. 5  Grid System Transitional System: An informal system ...
Read more