Interactive Design - Final Task

 Interactive Design - Task 3



Lee Jong Yun / 0358356 



TABLE OF CONTENTS

I. Instructions

II. Lectures

III. Exercises

I. Instructions

Final Project


This website redesign project for The Chicken Rice Shop began with wireframing and prototyping in Figma. The design was planned with a clean, modern layout using a red-based color scheme to reflect the brand identity. Once the visual structure and user flow were finalized, I transitioned the design into a functional website using HTML, CSS, and basic JavaScript. The project includes responsive layout adjustments for mobile devices and aims to improve user experience and accessibility compared to the original site.



Home Page Introduction

The Home page serves as the landing point for visitors, showcasing the brand’s identity with a visually appealing hero banner, navigation bar, and a brief call to action. 




Menu Page Introduction

The Menu page highlights the core offerings of The Chicken Rice Shop. The layout was carefully designed in Figma to be both clean and informative, and then implemented with HTML and CSS grid layouts. Visual hierarchy is established using card components for each dish, ensuring clarity and readability across devices. Special promotions and combos are also featured to encourage customer interest.




About Page Introduction

The About page gives insight into the brand story, values, and mission of The Chicken Rice Shop. Designed in Figma with storytelling in mind, this section uses a combination of text and imagery to build trust and connection with the customer. In the live version, layout spacing and typography were carefully applied to reflect the tone of a trusted local favorite.




Contact Page Introduction

The Contact page allows users to get in touch or locate the nearest outlet. From the Figma design, a simple and accessible contact form was included along with clean typography and a structured layout. This was translated into code using form elements and responsive CSS, ensuring usability across all screen sizes.




Customer Review Page Introduction

The Customer Review page displays testimonials and feedback from real customers to build credibility and social proof. Each review is formatted clearly, ensuring user trust and engagement.




Final Reflection Report: Redesigning The Chicken Rice Shop Website

This project aimed to redesign and develop a professional, responsive website for The Chicken Rice Shop by transforming a Figma prototype into a fully functional live website. The initial stage involved evaluating the existing website’s design issues, including outdated aesthetics, poor layout organization, and a lack of responsiveness. I began by creating a new prototype in Figma that focused on improving usability and user experience. The new layout emphasized a clean and modern visual style, consistent branding through the use of a red color palette, and intuitive navigation for users.

After finalizing the Figma design, I moved on to developing the website using HTML and CSS. I structured five main pages: Home, Menu, About, Contact, and Customer Reviews. Each page was carefully styled to match the Figma prototype while also being adaptable for various screen sizes. I used CSS flexbox and grid systems to create a responsive layout that adjusts content and images depending on the device’s screen width. Throughout the process, I ensured that the website maintained a consistent aesthetic and followed modern web standards. I also added a more refined footer section to improve the site's completeness and professionalism, including key contact information and future placeholder icons for social media integration.

One of the biggest challenges I faced during development was making sure that images and background sections fit perfectly across the full width of the screen. The hero sections, in particular, required adjustments with CSS to ensure the background images stretched to both ends of the screen without being cropped or distorted. I experimented with techniques such as setting the container width to 100vw and managing margins using calc() and box-sizing rules. Another issue was optimizing the food menu card layouts, ensuring that they aligned properly across different breakpoints and remained visually appealing on smaller screens. Debugging these layout inconsistencies helped me strengthen my understanding of CSS positioning, box models, and responsive design techniques.

For mobile responsiveness, I used Chrome Developer Tools to simulate various mobile devices. I applied media queries in my CSS to adjust padding, font sizes, button placements, and image scaling for smaller screens. These adjustments ensured that the site was functional and aesthetically consistent across desktop, tablet, and mobile devices. I also ensured that text remained legible and clickable elements were easily accessible on touch devices.

Overall, this project was a valuable learning experience. It allowed me to apply both my design thinking and technical development skills in a complete workflow, from ideation in Figma to deployment-ready HTML and CSS. I improved my front-end development skills significantly, especially in creating modular, scalable CSS and understanding layout behavior across screen sizes. I also learned how to think critically about user experience and how to implement a design system that reflects a brand’s identity while maintaining functionality.

Looking back, as this was my first time creating a website from scratch, I recognize there are many areas where I could improve in the future. If given another chance, I would organize my CSS more efficiently using a component-based approach or possibly introduce a CSS framework like Tailwind or Bootstrap to improve scalability and maintainability. I would also explore using JavaScript for more interactive features, such as animated menus or dynamic content loading. Additionally, I would plan my file structure and naming conventions more carefully from the beginning to avoid confusion and make the code easier to navigate. Lastly, I would consider learning and applying version control systems like Git to manage changes and keep track of my progress more effectively.

In conclusion, the final outcome is a cohesive, responsive, and professional website that reflects The Chicken Rice Shop’s brand with a modern interface. It effectively demonstrates my ability to turn a design mockup into a real-world digital product. This project not only improved my confidence in web development but also gave me a clearer understanding of the end-to-end process of building and refining a digital interface. I look forward to applying these lessons in future projects and continuously improving my design and coding skills.

Comments

Post a Comment

Popular posts from this blog

Image
 ILLUSTRATION AND VISUAL NARRATIVE  October 09, 2024 Week1 - Week 3 Lee Jong Yun / 0358356 Bachelors of Design in Creative Media _________________________________________________________________________________________________ Table of Contents   1. Lectures 2. Instructions 3. Feedback 4. Reflection --- Lectures   Weeks 1 & 2: Character Design In these sessions, we explored the fundamentals of character design, focusing on three essential principles:   - Iconicity: Designing characters with strong, recognizable silhouettes.   - Simplicity: Ensuring each character’s design serves a clear purpose.   - Uniqueness: Creating memorable characters that stand apart visually. Key design techniques emphasized included:   - Emphasis and Contrast: Enhancing visual elements to make characters stand out.   - Harmony: Maintaining a visual hierarchy where all design components complement one another.   - Expre...
Read more
Image
TYPHOGRAPHY  Task 1  October 08, 2024 / Week 1 - Week 6 Lee Jong Yun (0358356) ___________________________________________________________________________________ TABLE OF CONTENTS 1. Lectures 2. Instructions 3. Process Work 4. Feedback 5. Reflection 6. Further Reading ___________________________________________________________________________________ LECTURES  WEEK 1 Lecture: Introduction to ePortfolio Design  We were introduced to the key components of setting up an ePortfolio, highlighting its importance in showcasing individual progress and design thinking. Lecture: Typography Fundamentals  Drawing from Kane’s *A Type Primer* (2002), the focus was on early Western letterform evolution, with an understanding that these narratives often omit contributions from other regions, particularly Asia. Development of Letterforms: From Phoenician to Roman   The origins of typography can be traced back to ancient practices where early letterforms were etched in...
Read more