Interactive Design Exercise 2：Creating a Recipe Card

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: 
  1. Title text changes color on hover
  2.  Text boxes enlarge on hover 
  3. 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.

Comments

Post a Comment

Popular posts from this blog

{Interactive Design}Exercise 1

Image
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...
Read more

Advanced Modeling and Animation (Assignment1-2)

Image
Advanced Modeling and Animation Assignment 1: Create Models for an Interactive Space 7 October2025- 22 October 2025 LI YUHAN (0379857) Design and Concept I started by looking at some images for inspiration, gradually establishing the general look I wanted for the two models and creating a mood board for them. Mood Board Then I conceptualized the specific forms and content of the two models. My idea is to create a mechanical octopus-themed VR attraction called Kraken Core and a drop tower ride styled like a spacecraft launcher named Vector Ascension .Then I sketched them in Procreate to facilitate subsequent 3D modeling. Kraken Core: Its head is a massive holographic projection that moves in sync with the storyline—rising, falling, rotating, and vibrating. Unlike traditional rides offering only a single sensory experience, Kraken Core combines multiple senses to deliver a truly profound immersive VR experience. Vector Ascension: Vector Ascension is a lift-and-spin ride I designed inspi...
Read more

Embedded Systems Course

Image
Embedded Systems Week 1/ Introduction to Embedded System Week 2/ Prototyping Embedded Systems Week 3/ Introduction to Sensor Modules Week 4/ Embedded System Development Life Week 5/ Embedded Systems Development Essentials Week 6/ Producing the Final Assignment Week 7/ Revision of Final Assignment Week 1:   This class deepened my understanding of embedded systems, which integrate hardware and software for specific tasks across various applications, from home appliances to automotive controls. It covered their categorization by generation, performance, and real-time capabilities, highlighting their critical role in medical devices and automobiles. The course also showcased their use in smart offices, such as NFC music walls, smart lights, and door locks, enhancing efficiency while raising privacy and data storage concerns. Overall, it underscored the importance of embedded systems in modern life and the ethical considerations in their design. During the practical class, our teacher i...
Read more