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
网站 (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:
- Navigation bar
- Form submission
- Page load speed
- Dynamic elements
- Result:
- Worked perfectly, quick response
- Form validation and submission worked well
- Loaded within 3 seconds
- Hover effects didn’t work well on mobile Replaced hover with click actions on mobile
(2) Cross-Browser Testing
- Browser:
- Chrome
- Firefox
- Safari
- Microsoft Edge
- Opera
- Result:
- Everything worked fine
- Slight font rendering differences
- Animations loaded slower
- Worked perfectly
- Worked perfectly
(3) Responsiveness Testing
- Device Type:
- Mobile (375px)
- Tablet (768px)
- Desktop (1920px)
- Result:
- Layout was fine, icons misplaced
- No issues
- 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