LiYuhan's blogs

Interactive Design Final Project  21 November 2025 - 11January 2025 LI YUHAN (0379857) In Project 2 of the course, I designed a warm and elegant web interface for Bean Depart coffee shop using Figma. As the final assignment, I needed to bring this design to life through coding. After diligent work, I successfully completed this project in VSCode and now wish to share this journey from design to code. 1. Project Overview and Technology Selection This project is a brand website that integrates display, interaction, and information acquisition functions into a cohesive digital platform. The core pages include Homepage, Product Showcase, Service Menu, Brand Story, Customer Testimonials, and Contact Us. Each page serves a distinct purpose while maintaining visual and functional consistency throughout the entire website experience. Technically, I chose to use a pure native technology stack consisting of HTML5, CSS3, and Vanilla JavaScript, deliberately avoiding any frameworks or librarie...

Interactive Design Project 2： Website Redesign Prototype 18 November 2025 - 26November 2025 LI YUHAN (0379857) Project 2: Website Redesign Prototype Visual Reference Brief summary of prototype Prototype / Final Submission Beans Depot is a warm and cozy café renowned for its delicious coffee. For this project, I designed a total of six pages: the homepage, reviews page, our story page, menu page, contact us page, and product page. I made significant changes to every page, streamlining the layout for a cleaner, more organized appearance that's easier on the eyes. The primary focus was reducing the clutter and visual fatigue present in the original site. A unified beige background with accents of dark brown and red was implemented to ensure consistent color throughout the website. I specifically redesigned the homepage to feature popular products, replacing the previous store renovation showcase. This highlights the coffee shop's offerings to boost sales and product visibility, be...

Interactive Design Exercise 2： Creating a Recipe Card 8 September 2025- 15 October 2025 LI YUHAN (0379857) This exercise requires us to create a menu website. I chose my favorite hometown dish—Fuzhou Lychee Meat. https://bejewelled-zuccutto-cd4ad9.netlify.app/ Following the steps taught in class, I set the background color, added illustrations, and incorporated text to make my website more polished and visually appealing. Heading Font Normal Font I also added some small interactive features to enhance the website's authority:  Title text changes color on hover  Text boxes enlarge on hover  Body text reveals a background color on hover Through this exercise, I've realized I still have a lot to learn. For instance, next time I want to learn how to create navigation pages to make my website more polished and move beyond a single, monotonous page.

Interactive Design Project 1： Website Analysis 18 October 2025 - 29 October 2025 LI YUHAN (0379857) This assignment requires selecting a website I believe has issues for analysis and modification. I chose BeansDepot, a coffee shop I love, because its warm atmosphere and beautiful decor make it a frequent spot for me to enjoy coffee and do homework. However, I consistently encounter problems when using its website to place orders, so I feel this site is the perfect choice for this assignment. The  link to website： https://www.beansdepot.com/# I created a PowerPoint presentation covering these five aspects of the project: 1.Website Description: A brief overview of the selected website. 2.Website Analysis: Current Design Evaluation User Experience (UX) Functionality 3. Redesign Objectives: Goals Target Audience 4.Design Proposal: Visual Design Concepts Rationale for Design Choices 5. User Experience Enhancements: Proposed changes to improve user experienceTechnical Considerations Thro...

Interactive Design Exercise 2： Simple Personal Profile Page 8 September 2025- 15 October 2025 LI YUHAN (0379857) In this lesson, we took our first steps in building web pages through coding. Though it was just a simple introductory exercise, the entire process felt incredibly novel and completely changed my understanding of web development. During the hands-on practice, I first created a page file named "index.html," then gradually added the basic framework of the webpage. In the <head> section, I filled in the page title, used <h1> and <h2> to set heading levels, wrote two paragraphs of self-introduction with <p>, and even tried using ordered lists <ol> and <li> to list this semester's courses, favorite foods, and movies. Each step felt like gradually piecing together my own little online space. The feeling was truly magical when I finished writing the code in the text editor for the first time, saved it, and successfully opened it in ...

Interactive Design (Weekly Learning) WEEK 1-WEEK 14 LI YUHAN (0379857) Week 1:  This week, the instructor systematically outlined the semester's teaching structure and core tasks, emphasizing the central role of user experience in web design. We clarified the requirements for the first practical project—selecting five high-quality websites with improvement potential for in-depth analysis, with specific advice to avoid e-commerce and news websites to broaden design thinking. Through the teacher's detailed explanation, we acquired the necessary software tools, laying a solid foundation for subsequent learning. The specific content of my homework： Project 1 Week 2:  The course focused on the core concept of "designing for user satisfaction." We delved into the iterative process of design thinking: from understanding problems and defining solutions to conceptualizing ideas, prototyping, and user testing—a cycle requiring continuous refinement. The session highlighted five...

Interactive Design Exercise 1： Website Analysis 22 September 2025- 1 October 2025 YUHAN (0379857) LI  WEBSITE 1 1. Purpose and Goal: This is a recruitment website created for Takara Leben Co., Ltd.  Takara Leben is a Japanese biotechnology company specializing in the fields of regenerative medicine and cell therapy. It can be understood as a "bridge" company that translates cutting-edge bioscientific research into practical medical applications.  This website serves to recruit talent for Takara Leben, assisting individuals in achieving self-actualization while contributing to human health through biomedical advancements.  2. Visual Design and Layout （1）Blendent  and Visual style Launch animation The color palette's profound symbolism aligns with Takara Leben's mission to translate advanced cell and gene therapies into tangible realities for patient benefit. Beyond its efficacy in alleviating anxiety and enhancing focus among job seekers, the color imagery constr...