Interactive Design Exercise 1: Website Analysis
21/9/2025-4/10/2025 ( Week 1- Week 2 )
Imagery is widely used across this website, serving both informational and decorative purposes. The images effectively capture users’ attention while also enhancing their understanding of the presented information.
However, too many images will then distract the user without a proper layout.
d) layout
5. Website's Performance
1. Purpose & Goals
b) interactive element
b) relevance
The navigation menu includes a hover effect, similar to the buttons on other pages, but with added transitions that enhance interactivity. However, the accompanying image pop-ups can be distracting and may reduce the overall usability.
c) imagery
Choong Yee Leng || 0381980
Interactive Design || Bachelor Degree in Creative Media || Taylor’s University
Exercise 1: Website Analysis
1.Instructions
2.Websites Analysis
3.Feedback
4.Reflection
LECTURES
INSTRUCTIONS
TASK 1-Websites Analysis
For this task, I am required to choose five (5) websites from the link provided and analyze them carefully. I will review each website based on its design, layout, content, and functionality. In my analysis, I will identify the strengths and weaknesses of each website and explain how these factors affect the overall user experience.
What to Include in the Analysis:
Purpose & Goals
Consider the main purpose of the website.
Evaluate whether the goals are effectively communicated to users.
Assess the use of colors, typography, imagery, and overall layout.
Consider whether the design supports clarity and readability.
Functionality & Usability
Evaluate the navigation system, forms, buttons, and interactive elements.
Check whether the website is intuitive and easy to use.
Content Quality & Relevance
Review the accuracy, clarity, and organization of the content.
Consider whether the content is relevant to the intended audience.
Performance & Responsiveness
Evaluate the website’s load times and responsiveness across devices (desktop, tablet, mobile).
Consider its compatibility with different browsers.
Deliverables
- A brief report summarizing the analysis of each of the 5 websites, with not less than 200 words per website.
- Use clear formatting with headings and subheadings (e.g., Purpose, Design, Content, Usability, Performance).
- Include screen captures of relevant sections/pages of the websites to support your analysis.
Website 1:Spark & Riot (Portfolio & Service Presentation)-Casper van Osch, Dennis Janssen, Roel Creemers, Ramon van de laar, Daan Heesbeen
Figure 1.1 Homepage of Spark & Riot
1. Purpose & GoalsSpark & Riot is a female-founded, creatively driven commercial production house and film & television studio.
This website introduces the studio by spotlighting acclaimed directors, representative films, and major awards—while emphasizing its deeper commitment to weaving social impact into every project. With a mission to produce high-quality branded content that inspires change, Spark & Riot integrates storytelling and filmmaking with purpose. The site highlights a prominent “Contact Us” feature, reflecting the studio’s vision to expand its creativity through collaboration and to amplify social impact by engaging with others in meaningful, story-driven ways.
2. Visual Design & Layout
a) colour
The primary colors used on this website are black, white, and neon yellow. Black often serves as the background color, while white is applied as the default font color. Neon yellow is reserved for text or elements that need emphasis and immediate attention.
b) typography
Figure 1.2 Website colour palette
A strong example can be seen on the homepage, where the neon yellow text and the mouse pointer stand out vividly against the black background and white typography, creating a striking visual contrast that instantly captures the user’s focus.
Figure 1.3 Website mouse pointer design
An area to note is the highlighted text, which appears bold rather than layered with a distinct color. This makes the highlighted section less visible and not as attention-grabbing.
Figure 1.4 Highlighted text
b) typography
A total of three fonts is used throughout the website:
Helvetica – a clean sans-serif, applied as the default typeface for body text.
Futura Bold – a geometric sans-serif, featured prominently in the homepage heading.
Calvino Light Italic – a refined serif, used selectively to emphasize specific words and phrases.
Figure 1.5 Fonts used in homepage
The typography feels slightly inconsistent when Futura is used on the homepage, as it doesn’t capture attention as effectively as the serif fonts. A stronger choice would be to display “Spark Riot” in a serif typeface such as Calvino, which is already widely used across the website and creates a more cohesive visual identity.
Figure 1.6 Fonts used in other pages
c) imagery
On the homepage, a series of creator's work is displayed. However, this can feel a bit overwhelming and confusing for users, as they are immediately presented with too much information rather than being introduced to the website’s theme and purpose. A more effective approach would be to clearly highlight the website’s main message on the homepage, while showcasing the creator’s work in a dedicated gallery section.
Figure 1.7 Homepage (pc)
Figure 1.6 Homepage (mobile)
Figure 1.7 Function of imagery
Figure 1.8 Desktop imagery
In mobile page, it appears to be clear and neat.
Figure 1.9 Mobile Imagery
The website uses different layouts across its subsites, which gives it a modern and dynamic feel instead of sticking to a strict grid system.
While that makes it visually interesting, it also means the content isn’t always well-structured. With so many visuals competing for attention, it can get a bit overwhelming to browse through. Each section looks good on its own, but they don’t really flow together, so scrolling down the site doesn’t feel smooth or connected. Because of this, users might be unsure about what to focus on or what the main takeaway of the site is.
Figure 1.10 Homepage Layout
3. Functionality and Usability
a) Navigation
Navigation is clear, especially on mobile. 
Figure 1.11 Navigation page in mobile
On desktop, however, the main “CONTACT” button isn’t placed alongside other navigation buttons, making it less noticeable.
Figure 1.12 Navigation in desktop
On the Directors page, there’s no clear “Back to Roster” button—only a small “DIRECTORS” text link. The same issue occurs on the Work page, where users must rely on a subtle “WORK” link to return. This goes against user expectations and can cause frustration.
b)interactive element
Interactive elements are a key highlight of the website.
Hover Effects
Hover interactions are used widely across the site. On the Directors page, names shift and glow neon when hovered. On the Press page, the background lights up with neon spots as the cursor moves.
Figure 1.13 Director Page
Figure 1.14 Press Page
Transitions
Scrolling transitions add an immersive feel. On the Film page, films change dynamically on the canvas as users scroll, creating a cinematic experience. On the About page, text and images transition smoothly, almost like a video, making browsing more engaging.
Figure 1.15 Film Page
4. Quality and Relevance
Figure 1.16 About Page
a) quality
The website demonstrates high quality through its professional presentation and clear call-to-action. The design effectively showcases the studio's premium work through well-organized director profiles and film highlights, while the prominent "Contact Us" feature provides a clear pathway for potential collaboration.
b) relevance
All content is highly relevant to the studio's mission, focusing specifically on their social impact approach and creative excellence. The selection of directors, films, and awards directly supports their positioning as purpose-driven storytellers, making the content strategically aligned with attracting like-minded clients and partners.
a) Load time
The performance is tested using PageSpeed Insight.
The performance was dragged down mostly affected by the video playing in the homepage.
In mobile page, the video usually loads about a minute to showcase. The loading session will repeat while switching to other videos.
Figure 1.17 Speed test of mobile
Figure 1.18 Speed test of desktop
b) Responsiveness and Compatibility
The website is fully responsive. The layout, navigation, and video players adapt correctly to different screen sizes, including tablets and mobile phones. The user experience remains coherent and functional across all devices. However, some interactive elements like animations or transitions might be disabled or simpler on the mobile website.
Figure 1.19 Comparison between mobile and desktop
6. Conclusion
Strengths
The website excels in visual storytelling, using high-quality imagery and video to capture attention. Its clean layout and minimal design keep the focus on creative work, while smooth interactive elements — such as hover effects, transitions, and seamless video playback — make the browsing experience more engaging. Clear navigation and strong responsiveness across devices further enhance usability.
Weaknesses
The site relies heavily on visuals with limited descriptive text, which can leave some projects lacking context. Readability issues, such as small body fonts and low-contrast overlays, also affect accessibility. The homepage in particular can take time to load due to its heavy use of video and large imagery, which may frustrate users with slower connections.
Website 2-Cesarec(fashion)-Enūma Eliš
Figure 2.1 Cesarec homepage
Cesarec is a Croatian studio that sells high-end fashion, accessories, and luxury lifestyle products. The website aims to show Cesarec as more than just a shop—it presents the brand as stylish, artistic, and culturally rich. While the main goal is to sell products, the site also builds a strong brand image. Clear shopping features like “Shop” and “Discover” highlight its e-commerce purpose, while the editorial-style visuals draw users into the brand’s fashionable world.
2. Visual Design & Layout
a) colour
Figure 2.2 website colour palette
This website mainly uses orange and indigo as background colors. In contrast, these colors are also applied to elements like headings and buttons, allowing them to stand out against each other. Since both colors are already bold and eye-catching, white is used as the default font color to create strong contrast and improve readability.
b)typography
Figure 2.3 The celestial scrolls page
San-serif and serif fonts are both used in same pages to create a hierarchy
SG Alternative: San-serif font, often used in labels & price to differentiate it from body text
Messer : Serif font, often used in heading & body text to attract users' attention
Figure 2.4 Font used in the celestial scrolls page
c) imageryOn this website, images are used sparingly but effectively. They don’t overwhelm the layout, yet they help users understand the content. For instance, on the Celestial Scrolls page, a single image is used to support the article. 
Figure 2.5 Article in celestial scrolls page
The main highlight of the site is the 3D rotation effect on products, allowing users to view items from all angles, which builds trust and reliability before purchase. 
Figure 2.6 Product page in desktop
Figure 2.7 Product page in mobile
A video plays automatically before entering the site, which seems intended to add a modern and mysterious touch. However, this may confuse users and lead them to skip it. A better approach could be replacing the video with an interactive image transition that encourages users to scroll and engage, rather than wait passively.
Figure 2.8 Homepage in desktop
d)layout
Figure 2.9 Homepage in mobile
This website uses a grid system in desktop, aligning text and graphics symmetrically to create a clean layout and improve readability for users.
Figure 2.10 Layouts in desktop
However, on mobile devices, the website switches to a bilateral system, where information is aligned centrally in a single column. Thanks to its minimalist layout, the content remains clean and easy to read, without appearing overwhelming on the smaller screen.
Figure 2.11 Layouts in mobile
3. Functionality and Usabilitya) navigation
The overall navigation experience is good, as both a navigation page and navigation sections are provided on every page, giving users a clear and consistent guide.
However, there is a minor issue that could be improved. On the navigation page, the text size for “The Creators” should match the size used for the “Celestial Scrolls” page. Currently, words like “Collection” and “Accessories” are displayed in the same large size as “The Creators,” but they are not clickable. Only the smaller subtext links direct users to the intended pages, which may cause confusion.
Figure 2.12 Website navigation
b) interactive element
Hover and transition effects add interactivity to the website, creating a more engaging user experience. On desktop, these effects appear smooth and well-executed.
Figure 2.13 hover effect in product page
Figure 2.14 transition effect in the creators page
Transition effects are applied on the mobile site as well; however, hover effects are not supported. This reduces the level of interactivity on mobile, making the experience less engaging, especially since hover effects are one of the website’s main highlights.
4. Quality and Relevance
a) quality
The website reflects high quality through its strong performance, clean visual design, and professional content organization. It effectively communicates its message—not only promoting its products but also sharing their background stories. Clear e-commerce features inspire user confidence, while well-structured product categories make browsing easy and intuitive.
The content is well aligned with the brand’s fashion-luxury identity. Collection names, visuals, and layout all reinforce a sense of high design. Product categories are immediately clear, so users quickly understand what the brand offers which is kerchief. Practical shopper needs are also addressed, with details on products, shipping, and returns clearly provided.
5. Website's Performance
a) load time
The performance is tested using PageSpeed Insight
Both desktop and mobile websites have been dragged down by the intro video.
Figure 2.15 Speed test of mobile 
b) Responsiveness and Compatibility
Figure 2.16 Speed test of desktop
On the desktop site, performance is strong and messages are effectively delivered. The mobile version also communicates the brand’s message well, though some interactive elements are not supported. In particular, videos and 3D rotation effects are sometimes blocked on mobile, as shown in the figure below.
Figure 2.17 3D rotation effect issue
6.Conclusion
Strengths
The Cesarec.eu website excels in creating a strong and immersive visual identity. The site also incorporates subtle 3D effects on product visuals and transitions, giving the browsing experience more depth and making the collections feel more dynamic and interactive. The minimalistic layout allows products to remain the focus, while the shopping cart is clearly accessible at all times, reinforcing its e-commerce functionality.
Weaknesses
Despite its premium design, the website has several drawbacks that affect usability. The heavy reliance on large, high-resolution imagery and the introductory overlay significantly slow download times, especially on the homepage. Users with weaker connections may find this frustrating. On mobile devices, the 3D rotation effect sometimes pauses or stops, requiring additional time to load and diminishing the smoothness of the interactive experience.
1. Purpose and Goal:
The Public Diagnosis is a campaign site run by The Brain Cancer Centre. Its goal is to raise awareness about brain cancer by sharing real stories from patients and their families. This is aimed at generating empathy, public support, and ultimately more resources for research and treatment. The site also provides ways to contribute or donate, working in partnership with organizations like Carrie’s Beanies 4 Brain Cancer.
2. Visual Design & Layout
a) colour
The website uses a calm and serious color palette, featuring shades like turquoise and indigo. Neutral tones such as white, gray, and black are widely applied to keep the focus on text and information. These colors are commonly associated with the medical field, reinforcing a sense of professionalism and trust.
Figure 3.2 Colour palette
Bright colors are used sparingly, mainly to emphasize the website’s mission. For example, the “Donate Now” button is highlighted in magenta to immediately draw the user’s attention, ensuring the main purpose of the site is not overlooked.
b) typography
Figure 3.3 Donation section
The website primarily uses sans-serif fonts, allowing users to focus on the written content without being distracted from the information presented.
Roboto- San-serif font, mainly used in headline to attract user's attention
Helvetica, Arial-San-serif font, clean and clear font to increase readability, mainly used in body text
Figure 3.4 Shared diagnoses page
c) imageryPhotos and images on the website are emotionally evocative, used sparingly but with intention. They often feature people and real moments, serving not just as decoration but as a way to build empathy in users. On the Shared Diagnoses page, for example, images of patients and their families emphasize that these are real experiences, making it easier for users to connect with the stories. This approach works well in storytelling pages.
Figure 3.5 Imagery in desktop
Figure 3.6 Imagery in mobile
However, in the navigation page, such images appear out of place and distracting, as shown in the figure below.
Figure 3.7 Imagery in navigation page
d)layoutThe website presents great hierarchy through a clean grid layout that is well-aligned and easy to read. This structure helps users quickly understand the content without feeling overwhelmed.
It also balances visuals and text while guiding readers through a logical flow—from the striking premise and supporting data to the mission, call for donations, and human impact.
Figure 3.8 Grid system used in website
On mobile, the website aligns information to the left to maintain readability while still preserving a clear hierarchy.
Figure 3.9 Layout in mobile
3. Functionality and Usability
a) navigation
The overall navigation experience is strong, with both a navigation page and sections available on desktop and mobile. Within the navigation section, menus and partners are clearly separated. Hierarchy is maintained, as the main menu items use larger fonts to guide users, while partner links appear smaller and are accompanied by an arrow, indicating that they lead to external websites.
On every page, users must scroll down to interact with the site and follow the storytelling as well as the information presented. When users stop or do not start scrolling, an arrow appears to guide them downward. 
However, this feature is only available on desktop. An improvement would be to extend this guidance to the mobile version for a more consistent user experience.
Figure 2.10 Website navigation
Figure 3.11 Navigation arrow
b)interactive element
Interactive elements play a key role in this website, especially on the homepage. It begins with a plain white chair and a premise: “The more people that know about brain cancer, the more support can be generated for The Brain Cancer Centre, helping them reach a day when no lives are lost.” As the user scrolls, hundreds of particles gradually form a human figure, visually reinforcing the message that unity and collective action make a difference. This design helps users feel that even small contributions matter. The website strengthens this storytelling with smooth transitions, videos, and finally the donation section, strategically placed at the end of the interactive journey—when users are most emotionally engaged.
Figure 3.12 Homepage interaction (gif)
Figure 3.13 Navigation menu interaction(gif)
4. Quality & Relevance
a) quality
This website demonstrates high quality and maturity, showing it is well-prepared to engage with users. It carefully considers the user’s perspective through strong readability, an organized layout, and meaningful interactive elements. The site communicates effectively, successfully delivering its purpose of building empathy and encouraging support for the community affected by brain cancer.
b) relevance
Every part of the website’s content is closely aligned with the campaign’s mission: to raise awareness, evoke empathy, and drive donations. The “Shared Diagnoses” stories are especially effective, offering real-world connections that resonate with users. Links to partners and the “Contribute” section are also well-placed and appropriate. Importantly, there is no unnecessary content—every element serves the purpose. Data, comparisons, storytelling, and visual design all work together to reinforce the central message and guide users toward the goal of donating.
5. Website Performance
a) load time
The website performance is tested with PageSpeed Insight.
The homepage requires a longer loading time due to the large number of interactive elements, which negatively impacts overall website performance, especially on mobile devices. On desktop, a loading percentage indicator is provided to manage user expectations, but this feature is absent on mobile. The lack of such feedback on mobile may decrease user patience and increase the likelihood of drop-offs.
Figure 3.14 Speed test of mobile
b) Responsiveness & Compatibility
Figure 3.15 Speed test of desktop
The website is fully responsive. The layout, text, charts, and donation form adapt smoothly to all screen sizes, keeping the experience consistent and effective for a wide audience. The homepage works well across devices since the main visuals and interactive elements remain the same, making the story equally powerful. On desktop, users see a navigation arrow and loading percentage, but these are missing on mobile, so adding them would improve the experience.
6. Conclusion
Strengths
The Public Diagnosis succeeds in its mission through emotional storytelling, clean design, and effective calls to action. It balances visuals and text in a way that feels respectful and powerful, and interactive elements like video, sharing, and donation links are placed where they matter most. The simple navigation and clear messaging make it easy for users to understand the purpose and find how to help.
Weaknesses
Some media elements, such as videos and imagery, can slow loading times, especially on mobile devices or with slower internet connections. The strong focus on a single narrative and call to action may feel limiting for users seeking broader information about The Brain Cancer Centre, though links in the footer help address this. The reliance on a scroll-triggered narrative may also disorient users who prefer a more direct, non-linear way of browsing.
Website 4: David Whyte Experience (Art & Illustration)-Immersive Garden
Figure 4.1 Homepage
1. Purpose & GoalsThe David Whyte Experience is an immersive web project that combines poetry, art, and interactive design. Its goal is to guide visitors through “watercolor landscapes shaped by the places that inspired poet David Whyte,” creating a form of creative and experiential storytelling. The website engages users both emotionally and visually through landscape imagery, poems, interactive watercolor effects, full-screen text, gradual landscape reveals, and gesture-based navigation. After offering this rich, immersive journey, the site also promotes David Whyte’s Work Companion subscription, giving users access to his complete body of work.
2. Visual Design & Layout
a) colour
This website primarily uses black as the main colour, with touches of grey in the navigation and brown for the mouse pointer. Black is applied to the text to create strong contrast against the paper-like canvas while avoiding distraction from the watercolor artwork. The combination strikes a good balance, allowing the artwork to stand out while keeping the content readable and visually harmonious.
Figure 4.2 Colour palette
b) typography
This website uses a combination of clean sans-serif and serif fonts, each serving its own purpose.
Canela – serif font, used in logo and poem.
Roobert – sans-serif font, used in extra info like subtext and navigation so it won’t distract from the main subject, which is the poem.
Figure 4.3 Font used
c) imageryThis website does not use real photos; instead, illustrations dominate the entire webpage. The imagery forms the heart of the experience, consisting of breathtaking, full-screen watercolor landscapes that act as visual metaphors for the poetry. Each landscape also includes a zoom-in function, allowing users to explore the watercolor artwork more immersive. 
Figure 4.4 Imagery in desktop
However, this imagery is less effective on mobile: the zoom-in feature is missing, and the images appear less clear, partly obscured by a white, cloud-like overlay. While this overlay helps maintain text readability, it compromises the immersive visual experience intended for users. 
Figure 4.5 Imagery in mobile
d) LayoutSince the website provides limited textual information, the content is primarily aligned to the left in both the poet and illustration sections. This alignment creates consistency and maintains focus on the visuals. For the informational sections, a clean and structured grid system is applied, which improves readability while allowing the full illustrations to serve as engaging backgrounds. 
On mobile devices, the text is also left-aligned, preserving hierarchy and ensuring that users can easily follow the content without distraction.
Figure 4.6 Grid system in desktop
On mobile devices, the text is also left-aligned, preserving hierarchy and ensuring that users can easily follow the content without distraction.
Figure 4.7 mobile layout
3. Functionality & Usabilitya) navigation
The website features an interactive mouse pointer that spreads water across the watercolor illustrations, adding to the immersive experience. However, since the FAQ is combined with the subscription benefits, users may find it difficult to locate this section again once they scroll away. Additionally, the website lacks a dedicated navigation page; navigation is limited to a small menu at the top of the page, both on desktop and mobile, which may reduce ease of access.
b) interactive elements
Interactive elements are the highlight of the website, allowing users to immerse themselves in the watercolor illustrations alongside the poetry, creating the feeling of stepping into the artwork. A hover effect adds a rippling water interaction when the cursor moves over the illustrations, while scrolling reveals text, shifts images, and transitions scenes, making the story feel dynamic and alive. Users can also zoom into specific landscapes for a closer, more detailed view. 
Figure 4.8 Hover effect
However, the scrolling feels heavy and slow on both desktop and mobile, which may cause users who are simply seeking quick information to lose patience.
Figure 4.9 Scenes transition
4.Quality & Relevance
a) quality
The website demonstrates strong quality through its immersive visuals, smooth transitions, and professional design execution. Every interactive feature—such as watercolor hover effects and cinematic scroll-based animations—feels intentional and adds depth to the poetic atmosphere. Typography is carefully applied, ensuring the poetry remains the centerpiece of the experience. However, quality is slightly compromised by performance issues. The heavy use of animations and large visuals can slow down responsiveness on less powerful devices or weaker internet connections, causing interruptions in what is intended to be a seamless journey.
b) relevance
The content is highly relevant to the site’s artistic mission: immersing users in David Whyte’s poetry and offering a unique way to experience language and imagery. The design strongly aligns with themes of nature, reflection, and emotion, making the poems feel alive and deeply contextualized. Importantly, the website also promotes David Whyte’s subscription-based companion platform, which aligns well with its goal of deepening audience engagement.
5. Performance & Responsiveness
a)Load time
The website performance is tested with PageSpeed Insight
Though the website provides a immersive interactive experience, it requires more loading time, that eventually dragged down the website's performance.
Figure 4.10 Speed test of mobile
Figure 4.11 Speed test of desktop
b) Performance & Responsiveness
As with many immersive web experiences, performance is a concern. The site uses heavy visuals, real-time effects, and transitions that demand strong internet bandwidth and modern device capabilities. On desktop, these effects may run smoothly, but on mobile or older hardware, load times could be slow and animations may stutter. Responsiveness is addressed in that the site scales to different devices, but certain interactions such as hover effects and long-press reveals may not translate seamlessly to mobile touchscreens.
6.Conclusion
Strengths
The David Whyte Experience is visually striking. It creates a strong emotional and artistic atmosphere through its use of full-screen poems, interactive landscape reveals, watercolor effect, and gesture-based transitions. Because of its minimal colour palette and sparing use of typography, every visual and interaction feels intentionally placed. The immersive layout gives the user space to get lost in the experience, which is fitting for a poetic intent.
Weaknesses
The immersive, artistic style can backfire for usability. Those rich interactive visuals may load slowly or perform poorly on less powerful devices or slow networks. The navigation cues are likely minimal, which may confuse users who expect more structure or guidance. Also, because content is sparse (poems + visuals), those interested in more context or information may find it lacking. Accessibility (for users with disabilities, older devices, or limited input methods) might also suffer due to gesture-based interactions or heavy visual effects.
Website 5- Din Tai Fung (food)-Plenatery
Figure 5.1 Homepage
1.Purpose & GoalDin Tai Fung is a well-known international restaurant brand, especially famous for its dumplings and Taiwanese cuisine. The website’s purpose is multi-fold, which is to showcase its menu offerings, guide users to store locations, enable reservations or ordering, and promote brand engagement like membership and souvenirs. It aims to attract both local diners and international visitors, providing clear calls to action such as “Find a location,” “Join Bao Bao Insiders,” and “Order Online.” These features reflect the goal of converting site visits into foot traffic, orders, and loyalty.
2. Visual Design & Layout
a) colour
The colour scheme is clean and neutral, which mostly white or light backgrounds that let the food photos shine. Accents of red appear in icons or buttons. This palette supports an inviting, appetizing aesthetic without overwhelming the user.
Figure 5.2 Colour palette
b) typography
The typography is simple and functional, using both serif and sans-serif fonts. Headers are bold and enlarged, clearly dividing each section, while the body text is medium-weight, ensuring readability across all devices. The hierarchy between dish names, descriptions, and notes is clear and consistent.
Heldane Display: serif font, used in headlines
However, the major heading in every pages contains mixed font, which is uppercase and lowercase italic font. It might distract users' attention and decrease the readability
Figure 5.4 Major Heading
The imagery on the Din Tai Fung website serves both informational and promotional purposes.
Large background images placed behind major headlines help guide users and immediately convey the purpose of each page.
High-quality food photography enhances visual appeal, stimulates appetite, and effectively introduces the restaurant’s signature cuisine.
Meanwhile, images featuring the founder and the first Din Tai Fung store strengthen the emotional connection with users, offering authenticity and a clearer sense of the brand’s history and legacy.
Figure 5.5 Images used
d) layoutThis website also relies on grid system, since a lot of information has to be delivered to the users, readability has to be enhanced by using a clean and structured system. The use of white space gives breathing room to each element, ensuring the interface feels neat and digestible.
On mobile, the layout stacks vertically and maintains a clear hierarchy with easily accessible buttons and dropdown menus.
Figure 5.6 Grid system in desktop
3.Functionality & Usability
Figure 5.7 Grid system in mobile
a) Navigation
This website offers excellent navigation for users. A fixed navigation bar remains visible at the top of the page as users scroll or move between sections, ensuring quick and consistent access to key pages at any time in desktop, while a navigation page is provided in the mobile website, with clear typography and layout. Additionally, the website includes a language switcher that allows users to easily toggle between English and Chinese, enhancing accessibility and accommodating a wider audience.
Figure 5.8 Navigation system
b) Interactive element
The website features minimal interactive elements, which suits its informational purpose. As an information-based platform, excessive interactivity could distract users from the main content.
Transitions
On the Discover page, users can explore the history of Din Tai Fung through an interactive timeline, allowing them to experience the restaurant’s evolution in an engaging and immersive way without overwhelming the browsing experience.
Figure 5.10 Hover Effect
Figure 5.9 Discover page transition
Hover Effect
Subtle hover effects are thoughtfully used to indicate clickable buttons, serving as clear navigational cues.
c) Form
This website encourages users to join their member, which is the Bao Bao Insiders, which members can get the latest information about Din Tai Fung. Thus, there's a sign-up section in the end of every page. In mobile, it will even pop-up when the user clicked into the menu section.
4.Quality & Relevance
Figure 5.11
a) quality
This website demonstrates a high level of quality, maturity, and thoughtful preparation. It clearly understands its purpose and successfully builds the entire user experience around it. The site showcases excellent production value, with consistent branding and a polished, professional presentation throughout. Every page maintains a cohesive design language — from typography and layout to spacing and imagery — reflecting strong attention to detail and a well-executed visual identity.
b) relevance
The content is directly relevant to Din Tai Fung’s goals and audience. It highlights authentic food, dining experience, and brand legacy without unnecessary clutter. Each section aligns with user intent — providing menus for diners, stories for enthusiasts, and contact information for visitors.
5.Website Performance
a) load Time
The website is tested using PageSpeed Insight.
Due to the abundance of high-resolution images, the homepage may take several seconds to load on slower network, especially in mobile devices. Thus,the use of image optimization or lazy loading could further improve speed.
Figure 5.12 Seed test of mobile
Figure 5.13 Speed test of desktop
b) Responsiveness & Compatibility
The website performs well across different devices and browsers. On mobile, the design adjusts seamlessly to smaller screens, maintaining image clarity and consistent navigation. The responsive scaling of grids and menus ensures that both desktop and mobile experiences remain coherent and functional.
6. Conclusion
Strengths
The Din Tai Fung website effectively represents the brand’s identity through clean design, elegant color palettes, and mouthwatering food photography. Its intuitive navigation, professional presentation, and strong responsiveness create a smooth user experience. Interactive elements, though minimal, enhance usability without compromising clarity or performance. The overall tone is sophisticated, approachable, and visually appetizing.
Weaknesses
The site’s heavy reliance on large images slows loading times, especially on the homepage. While functional, the interactive experience feels somewhat limited and lacks emotional storytelling depth. A more immersive narrative and optimized performance could elevate the browsing experience further.
Feedback
No feedback was given, since the work is approved.
Reflection
During this exercise, I was able to identify both the strengths and weaknesses of various websites from different perspectives. Through this process, I learned what key factors should be considered when building a website, including its purpose and goals, visual and layout design, functionality and usability, as well as content quality and relevance. By analyzing these aspects, I was able to understand what distinguishes a good website from a poor one, and how certain design or structural improvements can enhance overall user experience. I believe this exercise will be highly beneficial in helping me apply these insights when developing my own website in the future
Comments
Post a Comment