INTERACTIVE DIESGN - FINAL TASK
NAME: Miao Xinjun
I.D: 0379525
SECTION: 02
Interactive Design | Bachelor of Design in Creative Media | Taylor's University
TABLE OF CONTENT
2. Final Work: The Fully Functional Website
4. Google Drive Link of Final Project Main Folder
INSTRUCTION
fig 1: Instruction
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.
FINAL WORK
The Website Link here:
eggshed-miaoxinjun.netlify.app
Note: Please click the first link that appears after clicking this URL to browse the website.
BRIEF REPORT
Brief Report: Website Design Concept, Process, Challenges, and Solutions
1. Introduction
This report explains the design concept, development process, and problem-solving experience involved in creating a food ordering and venue service website. The main goal of the website is to provide users with a clear, friendly, and functional platform where they can browse products, place food orders, and learn about event and venue services. Throughout the project, both visual design and technical structure were carefully considered to ensure usability, responsiveness, and consistency across devices.
2. Website Design Concept
The overall design concept of the website focuses on warmth, simplicity, and clarity. Since the website is related to food, catering, and gatherings, a welcoming and comfortable feeling was important. Soft background colors, clean layouts, and readable typography were chosen to create a pleasant user experience.
The structure of the website follows a familiar e-commerce layout. It includes a header with navigation, a banner image to set the visual tone, a product listing section with filters, and a footer containing contact information and legal links. This structure helps users quickly understand how to use the website without confusion.
Bootstrap was used as the main layout framework because it provides a reliable grid system and responsive components. This allowed the website to adapt smoothly to different screen sizes, such as desktop, tablet, and mobile devices.
3. Design and Development Process
The development process started with planning the content and layout. First, the main pages were identified, including the home page, food ordering page, venue rental page, and checkout page. Each page was designed with a clear purpose and user flow in mind.
Next, the HTML structure was built using semantic elements such as header, nav, main, and footer. This helped organize the content logically and improved readability of the code. After that, Bootstrap’s grid system was applied to arrange the layout into columns and rows.
CSS was then used to customize the appearance. While Bootstrap provides default styles, custom CSS was added to match the website’s branding, such as background colors, buttons, spacing, and hover effects. Special attention was paid to keeping the layout clean and avoiding overcrowded elements.
JavaScript was added at a later stage to support interactive features. These included product quantity controls, shopping cart updates, and filter selection logic. The scripts were written in a simple and readable way to ensure they were easy to understand and maintain.
4. Key Challenges Encountered
One major challenge was making the website responsive while keeping the layout stable. At first, some elements such as text blocks and images overlapped or shifted incorrectly on smaller screens. This happened mainly because fixed pixel values (such as large margins and absolute positioning) were used.
Another challenge was related to background colors not appearing as expected. In some sections, the background color applied to the body or container elements was hidden by other elements like full-width images, Bootstrap containers, or sections with their own background colors.
Positioning text over images was also difficult. The text sometimes moved away from the intended position when the screen size changed. This made the layout look inconsistent across devices.
Finally, managing repeated product cards and filters required careful structure. Without proper class usage and spacing, the page could easily become cluttered or hard to navigate.
5. Solutions and Improvements
To solve the responsiveness issues, fixed pixel values were gradually replaced with relative units, Bootstrap grid classes, and flexbox layouts. For example, instead of using large margin-left values, the grid system and alignment utilities were used to position content more reliably.
For the background color issue, the structure was reviewed carefully. It was important to understand that images and sections with their own background colors can visually cover the body background. By ensuring that content sections had transparent backgrounds or consistent colors, the main background color became visible again.
When placing text over images, the parent container was set to position: relative, and the text container was positioned absolutely inside it. Flexbox was used inside the text container to control alignment, which made the layout more flexible and responsive.
To manage multiple product cards, reusable classes and consistent spacing were applied. This reduced repetition in the CSS and made the layout easier to adjust. Bootstrap’s responsive column classes (col-12, col-md-4, col-lg-3) helped ensure that product cards rearranged smoothly on different screen sizes.
6. Conclusion
In conclusion, this website project was a valuable learning experience that combined design thinking with practical front-end development skills. Through planning, testing, and problem-solving, the final result is a website that is visually consistent, responsive, and user-friendly.
The challenges encountered during development helped improve understanding of layout systems, positioning, and responsiveness. By applying structured solutions and using Bootstrap effectively, these issues were resolved in a clean and maintainable way. Overall, the project demonstrates a clear design process and thoughtful technical implementation.
GOOGLE DRIVE LINK
The Google Drive Link of Final Project Main Folder Here:
https://drive.google.com/drive/folders/18an-CpLFrtI31-VWRViOuM8NwKpreu0u?usp=sharing
Comments
Post a Comment