{Interactive Design}Exercise 1

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 constructs a cohesive narrative. The flowing deep blue represents the uncharted depths and complexity of life science exploration, while the fluorescent blue accent acts as a metaphor for breakthrough scientific technology—akin to a beam of light penetrating the abyss. It signifies the company's innovative commitment to delivering cutting-edge therapies into clinical practice, offering hope to patients. This chromatic language metaphorically suggests that joining Takara Leben entails engaging in the significant endeavor of transforming profound scientific inquiry (deep blue#011431) into practical clinical solutions (fluorescent blue #094462), thereby achieving a synergy between personal fulfillment and the mission of societal contribution.

Guiding animaton 1

This sunset-inspired palette (#3f1e14, #713d11, #81681e) metaphorically represents Takara Leben's stable and promising nature. The deep burgundy signifies a solid R&D foundation, while the warm golden-brown evokes a harvest sunset, implying that dedication here leads to substantial growth and value realization.

Guiding animaton 2

Sunset color scheme. The deep night sky blue (#1c203a) transitions into dusk (#2f3045), with the last warm glow of the horizon (#483f4a) embodying Takara Leben's warmth and humanistic care. It heralds boundless vitality.

Main page

This palette establishes a professional base with near-black (#070708), uses medium gray (#494c4f) for clear information hierarchy, and employs a vivid blue (#236fc3) as the primary interactive color, creating a clear, rational, and trustworthy visual experience.

The entire website uses white text (#fffff) against intricate backgrounds to highlight the content. This ensures high readability.

(2)Layout

 horizontal layout and rectangular frames

The horizontal layout and rectangular frames create a sense of order and stability, guiding the eye laterally. The use of standard regular script font reinforces professionalism and trustworthiness, conveying a rigorous and reliable corporate image.

(3)Typeface

regular scrip

The entire text on the website is in regular script.The use of standard regular script font reinforces professionalism and trustworthiness, conveying a rigorous and reliable corporate image.

（4）Animation

The animation of the undulating sea invites contemplation, thoughts drifting along with the gentle flow of water.

The animation unfolding from sunrise to sunset stirs emotions and thoughts, foreshadowing that choosing to join Takra Leben will make life as magnificent and fulfilling as the sunset itself.

Animation effects break away from the traditional, formal, and somewhat rigid image of conventional job sites, attracting younger generations to apply. They instantly capture users' attention and entice them to continue browsing.

3. Functionality and Usability

（1) Navigation

top fixed navigation bar

bottom section displays

The top fixed navigation bar features onboarding registration and eligibility requirements, while the bottom section displays detailed company information and a button to navigate to the company website. Everything is well-organized and clearly presented.

（2) Interactive elements

Many directional signs, such as arrows, guide users effectively, providing a positive user experience.

The website employs hover animations throughout, all of which function properly across different devices. This creates a strong sense of user interaction.

4. Quality and Relevance

(1) Quality

This is an excellent website. Information regarding job applications and company details is both included and clearly accessible, with a smooth user experience.

(2) Relevance

All the information a candidate needs to apply to this company is included, and the creative animations further appeal to younger audiences, catering to recent graduates.

5. Website's Performance

(1) Load time

This is the PageSpeed Insights test report. As shown in the image, this website runs somewhat sluggishly on mobile devices, primarily due to excessive animations; however, it performs at an appropriate pace on desktop computers.

(2) Responsiveness and Compatibility

After testing, I found it runs smoothly on phones, tablets, and computers with a clear and aesthetically pleasing interface—no distortion or compression issues. The only minor drawback is slightly longer animation times on phones, which slightly impacts the experience.

6. Conclusion

(1) Strengths

An outstanding website in every aspect. Each animation is purposefully designed to guide users' thinking. Content is clear and easy to read. Button interactions are smooth and provide a pleasant user experience.

(2) Weaknesses

The only drawback is that the excessive animations cause some lag when browsing on mobile devices.

WEBSITE 2

1. Purpose and Goal:

This is the shopping page for "Paper + Land" this design brand.

Paper + Land is a design brand specializing in paper art and natural aesthetics. The brand skillfully blends the delicate texture of paper with the serene beauty of the natural world, creating exquisite products such as 3D greeting cards, decorative art, and paper sculptures. With a minimalist and modern design style, it often incorporates elements like plants, mountains, and animals, evoking a sense of warmth and tranquility. Paper + Land emphasizes both artistic expression and the craftsmanship of hand-made pieces, aiming to add a touch of poetry and beauty to everyday life and special moments.

2. Visual Design and Layout

（1）Blendent and Visual style

The homepage color palette (#ec7926, #da8775, #b5a44b, #2d9889) of Paper + Land's website is brilliantly conceived. These earthy and botanical tones perfectly echo the brand's "paper + nature" ethos. The high-contrast, gradient blending creates an eye-catching effect reminiscent of sunlight filtering through leaves or ink blooming on paper. This cleverly infuses the digital interface with a handmade warmth and natural poetry, instantly immersing users in its serene and creative aesthetic world.

The use of solid color blocks—vibrant lemon yellow, mint green, pure white, or soft pink—for other interfaces is a masterful design strategy. It creates a dynamic rhythm with the homepage's gradient: shifting focus from "nature's richness" to "emotional purity." Each page's color acts as a clean backdrop for the paper art, mimicking the tactile experience of flipping through colored cardstock. This approach not only highlights the content but also reinforces the brand's handmade and fresh aesthetic.

(2)Layout

The vertical text layout and modular color-block design directly evoke the tactile feel of assembled paper cards or stacked artisanal paper. This structure creates a clean, rhythmic hierarchy, guiding the eye naturally down the page. The interplay of solid blocks feels both modern and craft-oriented, perfectly mirroring the brand's core of transforming simple paper into ordered, beautiful compositions.

(3)Typeface

The use of a rounded, minimalist typeface complements the brand's aesthetic perfectly.Its simplicity ensures clarity against the vibrant color blocks. This combination creates a warm, accessible, and modern tone.

3. Functionality and Usability

(1)Navigation

The page navigation changes color accordingly based on different background colors, ensuring it remains consistently clear and prominent.The images used are also simple and easy to understand.

（2) Interactive elements

When scrolling down the interface, text animates with a subtle bounce or fades in gradually, creating a particularly engaging effect. The hover-to-zoom feature for images allows users to quickly and conveniently examine product details. The loading screen employs a dynamic transition between magenta and black blocks, layered like colored paper—a visually artistic touch that aligns perfectly with the brand's aesthetic.

4. Quality and Relevance

(1) Quality

It runs smoothly, but the loading animation is a bit slow

(2) Relevance

The overall design aligns with the brand concept, and the text is relevant to the corresponding content.

5. Website's Performance

(1) Load time

PageSpeed Insights test results indicate that this website performs adequately on both mobile and desktop devices without any noticeable lag.

 (2) Responsiveness and Compatibility

In my testing, I found this website works smoothly on mobile phones, iPads, and computers, with a high-quality interface and no issues encountered.

6. Conclusion

 (1) Strengths

This website excels in both design and usability. The page layout aligns seamlessly with the brand identity, featuring rich yet unobtrusive button animations and practical textual content. Navigation flows smoothly without lag or sluggishness.

(2) Weaknesses

 The loading animation when transitioning to the next page is a bit lengthy, which may impact efficiency for users who are focused on specific products and aim to reach their target items directly.

WEBSITE 3

1. Purpose and Goal:

This website is about Restaurant Osakamania.

Osakamania is a small izakaya located in Osaka City, Osaka Prefecture, Japan. Its philosophy is "dedicated to passionate enthusiasts of Osaka flavors," aiming to convey authentic Osaka food culture to diners.

2. Visual Design and Layout

（1）Blendent and Visual style

The website features a light beige palette accented with vibrant rainbow hues, aligning perfectly with its lively comic-style design and evoking a cheerful, upbeat vibe. This aesthetic also complements the slightly exaggerated flair of the shop name's "enthusiast" theme.

（2)Layout

The layout is neat and orderly, yet incorporates numerous decorative elements, creating a lively and relaxed atmosphere rather than a solemn impression.

(3)Typeface

Different fonts are used in different areas, making the interface vibrant and rich without appearing cluttered. This complements the overall bright, lively, and relaxed style.

3. Functionality and Usability

(1) Navagation

The navigation in the upper left corner is clear and easily visible. The button design emphasizes practicality and aligns with the overall style of the website.

(2) Interactive Element

The main page color automatically cycles through vibrant hues, creating a lively and engaging experience. The charming transition animations during page changes add an extra layer of fun. When swiping through products, the auto-pause feature prevents accidental overscrolling, ensuring a smooth and intuitive user experience.

4. Quality and Relevance

(1) Quality

The website is of excellent quality. It features a strong style and distinct highlights.

(2) Relevance

All information on this website pertains to the hotel featured on the site; no irrelevant information was found.

5. Website's Performance

(1) Load time

Based on the PageSpeed Insights test results, this website is not sufficiently optimized for accessibility and SEO on both mobile and desktop devices, with particularly low performance scores.

(2) Responsiveness and Compatibility

However, testing on my phone, tablet, and computer revealed no issues—it runs smoothly with no compressed or low-quality visuals on the interface.

6. Conclusion

(1) Strengths

This website features a distinct and bold style, creating a vibrant and memorable impression that effectively draws users in. Its aesthetic appeal is excellent.

(2) Weaknesses

The website quality is not entirely flawless, and users may encounter issues when using a variety of devices.

WEBSITE 4

1. Purpose and Goal:

This is a website that echoes people's efforts to protect forests.

2. Visual Design and Layout

（1）Blendent and Visual style

The primary color scheme is green, reminiscent of a forest, evoking a vibrant and lively feeling. The overall visual style adopts a soothing, illustrated book aesthetic, creating a warm and comforting atmosphere.

（2) Interactive elements

（2) Typeface

A minimalist font is employed, perfectly aligning with the website's core theme. Its clean, approachable lines evoke a sense of ease and comfort, while its simplicity ensures clarity even against diverse backgrounds. This combination fosters a warm, inviting atmosphere.

3. Functionality and Usability

(1) Navagation

The avigation bar without clear boundaries,removed borders can enhance the visual simplicity of the page, creating a light and modern feel while reducing visual clutter. This helps users focus more on the content, making it particularly suitable for this content-first website.Moreover, the solid-color, minimalist background effectively compensates for the drawback that frameless navigation bars can be less noticeable, making them both clean and easily visible.

(2) Interactive Element

Its opening animation unfolds layer by layer like turning the pages of a picture book, gradually revealing the sky beyond the forest, evoking a sense of lightness and warmth. The animation of hands cradling a sapling and the sprouting of the young tree, both appearing on the page, brim with vitality and hope, compelling viewers to join the effort to protect the forest.

4. Quality and Relevance

(1) Quality

The website maintains a high overall quality, being both clean and functional without sacrificing aesthetics.

(2) Relevance

The overall design style and textual content of the page are highly relevant to the website's core mission of protecting forests.

5. Website's Performance

(1) Load time

Testing has shown that this website performs well on both mobile devices and computers without any major issues.

(2) Responsiveness and Compatibility

My testing has confirmed that browsing the website works flawlessly across all three devices—mobile phones, tablets, and computers—with smooth performance and crisp, visually appealing graphics.

6. Conclusion

(1) Strengths

The website's design style aligns perfectly with its theme. The hand-drawn illustrated book aesthetic and green color palette are tailor-made for the forest concept, making them an excellent choice. Overall performance is also up to par, with the site displaying flawlessly across all devices.

(2) Weaknesses

The app currently offers limited interactive features for users. Perhaps adding a function where users can submit suggestions for forest conservation could be considered. Pooling ideas from the community could significantly boost everyone's enthusiasm for participation.

WEBSIT 5

1. Purpose and Goal:

This website can be used to listen to music and play simple music games.

2. Visual Design and Layout

（1）Blendent and Visual style

This website high-saturation pink and blue color scheme creates strong visual impact, conveying a dreamlike yet tech-savvy aesthetic. Pink symbolizes romance and creativity, while blue represents depth and professionalism. Combined with the imagery of starry sky and pink cloud sea, it evokes the boundless imagination of the music world. The white moon balances the composition and guides visual focus.

（2) Interactive elements

The website features minimal content with a layout that diverges significantly from conventional designs, resembling an exquisite illustration that seamlessly integrates content into the visual composition. The design is simple yet aesthetically pleasing, with every element perfectly balanced. A moon serves as the visual focal point, guiding the viewer's gaze throughout the page. This design philosophy aligns perfectly with the site's name, "The World of Music."

（3) Interactive elements

The font is also a simple, basic typeface. Its clean lines ensure that the vibrantly colored visuals remain beautifully balanced without appearing cluttered. The straight lines lend a distinctly modern aesthetic that aligns perfectly with the website's theme of a "little world of music." Overall, it achieves a clean, easy-to-read design with a pleasing visual appeal.

3. Functionality and Usability

(1) Navagation

The website lacks a specific navigation bar due to its single-purpose functionality; upon entering, users immediately select a song to proceed to the next simple rhythm game segment.

Yet this simplicity creates a pure and unadulterated experience, like stepping into a world crafted solely from pure music.

(2) Interactive Element

The webpage's splash animation features a rotating music player-style pattern that perfectly complements the theme. The clouds gradually dissipate in the scene, transitioning into the homepage with a dreamlike animation that evokes the sensation of parting clouds to enter a simple, hidden little world. The hover animations for music selections further enrich the user experience.

The interactive animation that lets you play a simple rhythm game while listening to music offers a unique charm. It helps you focus more deeply on the music without distractions, truly embodying the musical world promised by the website's name.

4. Quality and Relevance

(1) Quality

The website has fewer simple features but offers smooth operation and high quality.

(2) Relevance

Both content and functionality are closely tied to the theme, delivering a truly immersive musical experience.

5. Website's Performance

(1) Load time

Testing indicates that this website's performance is subpar and requires improvement. 

(2) Responsiveness and Compatibility

I've used this website on my phone, tablet, and computer. It runs smoothly without any noticeable issues, and the visuals are perfectly intact. Overall, it's excellent.

6. Conclusion

(1) Strengths

The website is aesthetically pleasing and simple, perfectly aligning with the theme of a pure musical world. It functions flawlessly, allowing users to fully immerse themselves in the music.

(2) Weaknesses

The functionality is somewhat limited, with only four song options available and no background playback capability, making it unsuitable for use as a music player. Performance is subpar, potentially encountering minor issues when dealing with diverse devices.