Interactive Desig Final Project
2.Interactive Desig Final Project
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).
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).
2.1Development Process
Based on Project 2, the submitted revision plan and design proposal, I began creating this webpage.
The goal of this assignment was to transform my website redesign proposal into a functional, interactive prototype that demonstrates the new visual direction, improved usability, and refined user experience strategy. Using Figma, I created a clickable prototype consisting of three core pages: Home, About, and Contact. These pages illustrate how the redesigned interface improves clarity, visual appeal, and overall user friendliness while staying aligned with the project’s objectives.
2.1.1. Main Features of the Prototype
(1) Homepage
EN:
The homepage serves as the main entry point of the website, and therefore its design prioritizes clear visual hierarchy and intuitive navigation. A consistent top navigation bar provides direct access to all major sections. The hero section features strong Halloween-themed visuals and bold typography, setting the tone for the entire website.
Below the hero section, the homepage highlights the “Best Selling Products” area. Products are displayed as neat cards, each containing an image, price, name, and button. This card layout allows users to browse quickly and understand the content at a glance.
(2) About Page
EN:
The About page presents brand information in a clean and organized layout. Instead of long paragraphs, the content is divided into readable blocks with clear headings and spacing. A themed banner ensures consistency with the homepage visuals.
The “Our Honors” section introduces credibility elements using short descriptions and visual icons. This approach makes the page more engaging and easier for users to read compared to text-heavy layouts.
(3) Contact Page
EN:
The Contact page demonstrates how users can interact with the redesigned interface. A real-world map section is placed at the top to simulate the company’s location, and relevant details such as address and business hours are displayed beside it.
The form below includes clear input fields for Name, Email, Phone Number, and Comments. Interactive highlights and a visible “Send Message” button help guide users through the form submission process.
2.1.2 Key Design Decisions
Visual Style
EN:
The prototype uses a Halloween-themed visual style with dark backgrounds and vibrant colors. This creates a strong identity while maintaining readability and contrast.
Typography & Layout
EN:
Sans-serif fonts were chosen for readability, and text hierarchy is clearly defined using size, weight, and spacing. A grid layout keeps all pages visually consistent.
Navigation Structure
EN:
A fixed top navigation
Based on the original design created in Figma at this LINK, I added two additional pages to make the website content richer and more comprehensive.
Fig2.1.1 Development Process
Building upon the original design, I created two additional pages: a Shopping Cart page and a Login/Register page. Both pages adhere to the design scheme established in the previous prototypes, maintaining consistent color palettes, layout structures, and visual styles. The Shopping Cart page allows users to view and manage selected products efficiently, while the Login/Register page provides a clear and intuitive interface for account authentication. By extending the website with these pages, the prototype not only offers a more comprehensive user experience but also ensures design continuity across all sections, reinforcing usability, aesthetic coherence, and overall interface consistency.
Fig2.1.2 Development Process
Final Work
3.Feedback
Week 11
During Week 11, the professor noted that some of my HTML and CSS code contained errors that affected the layout on certain pages. He advised me to carefully check the syntax and ensure that all tags were properly closed. Additionally, he suggested reviewing responsive design principles to improve how the webpage looks on different devices.
Week 12
In Week 12, the professor mentioned that one of the pages was still incomplete, with missing content and images. He encouraged me to finish this page and ensure that the new elements matched the existing design style. He also highlighted that the navigation bar needed minor adjustments to maintain consistency across all pages.
Week 13
By Week 13, the professor gave feedback on the overall prototype. He praised the improved layout and added pages, noting that the website was becoming more comprehensive. However, some minor issues remained, such as small spacing inconsistencies and hover effects that could be smoother. He advised me to make these final adjustments before submitting the complete project.
Comments
Post a Comment