CHIAH CAI JUN 0365352
Bachelor of Interactive Spatial Design / Taylor's University
Interactive Design / Sept 2025
Week 01 - Week 02
---------------------------------------------------------------------------------------------------------------------------
EXERCISE 01: WEB ANALYSIS
Instructions
In this exercise, we are required to select 5 websites from the links provided by Mr Shamsul. We need to review the websites that we have selected and analyse them based on the guidelines below:
- Consider the purpose and goals of the website and evaluate whether they are effectively communicated to the user
- Evaluate the visual design and layout of the website, including the use of colour, typography and imagery
- Consider the functionality and usability of the website, including its navigation, forms and interactive elements
- Evaluate the quality and relevance of the website's content, including the accuracy, clarity and organisation
- Consider the website's performance, load times, responsiveness and compatibility with different devices and browsers
By identifying the strengths and weaknesses of each website, we are able to understand how designers impact user experience through web design.
WEBSITE 01: Miyazaki World created by Julianna Beda (Education)
Figure 1.1 Miyazaki World Website (Cover Page)
Purpose & Goals
Miyazaki World aims to educate visitors about the background of Studio Ghibli's animation, which is a collection of timeless masterpieces created by Hayao Miyazaki. Studio Ghibli has become known for its hand-drawn art, deeply imaginative storytelling, and emotional resonance, which have captured the hearts of audiences all around the world. The website focuses on how Hayao Miyazaki transformed cartoons into warm stories by highlighting each character's inner strength and growth, encouraging children to develop their personal qualities within themselves.
Visual Design & Layout
Colour
Blue and red are widely used on the website, with a ratio of about 7:3. The combination of both colours shows temperature contrast, which Blue usually presents as cold (reduces visual stress by making a good foundation) and red presents as hot (creating a sense of excitement and grabs attention). The contrast between two colours creates a visual hierarchy that helps with readability and attention flow while maintaining balance and harmony.
White is the main colour used for the website’s text. The blue background simulates the sky, making the white text stand out. Yellow and dark blue are used to highlight keywords within sentences. As complementary colours, blue and yellow work together to create a strong contrast and draw attention to important elements.
Figure 1.2 Colour Scheme
Typography
There are two sans-serif typefaces used on the website: "League Gothic" and "Satoshi". "League Gothic" is used for the major headings and headings on the website to make the topics stand out from the content. "Satoshi" is used for the texts in the paragraph.
The size of the title is 264px, aiming to emphasise the main theme of the website. The second largest font size used is up to 140px and 180px (headings and major headings). For some subheadings that highlight certain values and thoughts of Hayao Miyazaki, the font size will be 30px and 80px, while the smallest font size used is 15px and 16px (body text). Most of the texts are Roman, with only some highlighted sentences in paragraphs being Italic.
Figure 1.3 Typography
Imagery
The website has a heavy use of illustrative images, concept art or character frames from Studio Ghibli's films. The graphics are equally spread, together with headings and contents placed on the side that explain the characteristics of Miyazaki's artwork. By making the images large and full-width, it can grab the user's attention while also integrating visual and verbal content at the same time. In desktop mode, the images take up a lot of space, which I think is too much because I can't see the artwork at once on my computer. Having more whitespace will enhance the overall experience, although large images allow visitors to observe the details of each cartoon character.
In mobile mode, the graphics act as the transition between one section to another, which I think makes it easy to differentiate between different contents. The image sizes can fit completely into the phone's screen, without multiple scrolls needed to view one image.
Figure 1.4 Imagery (Desktop)
Figure 1.5 Imagery (Mobile)
Layout
The website has been using a split-screen layout and a single-column layout. In some sections, the text is placed on one side, while an image is placed on the opposite side, creating a split-screen effect. This works especially well on desktop to create a balance between narrative and visuals. Next, the entire scroll experience is essentially a single vertical column, which helps guide users through different sections. This layout can be shown clearly on mobile as everything stacks vertically. It allows users to read section by section according to an organised order.
The hero sections and certain transitions use full viewport height and width imagery and text, creating an immersive moment for cinematic storytelling. Many images and text combinations are not perfectly centred or mirrored as some sections emphasised visual hierarchy by making the image dominant on one side and small text on the other, which adds visual interest and shows asymmetrical balance on the webpage.
Functionality & Usability
Navigation
The website is created as a scroll-based journey, making it easy to explore because the webpage information can be moved up or down by just scrolling. Users will not get lost because each component is clearly separated by headings and visual breaks. However, there isn't any global navigation bar or shortcuts that direct users to different sections with just a simple click, making the navigation less user-friendly.
Interactive Element
The website makes use of strong interactive storytelling elements to introduce Studio Ghibli to users. The main interactive element is scrolling, which triggers various animations and transitions when users move down the webpage. As users move between different sections, the visual transitions create a continuous narrative feel. The vertical scrolling layout has created a feeling of one long and animated storyboard, which makes the user journey more immersed.
Additionally, the website has hover interactions that allow users to click on certain icons with their mouse. Users' understanding of the Studio Ghibli characters can be enhanced when they place their cursor on the info icon, which displays a brief introduction of the pointed character.
Quality & Relevance
Overall, this is a high-quality website. The visuals are clean and the content is clearly stated and organised. Different sections that talk about values, nature, characters and imagination have been reinforcing who Miyazaki is. The use of attractive thematic characters and scrolling animations makes the user journey more immersed. Yet, since the website is very vertically long, users may have difficulty skipping to specific areas, requiring some readers to scroll through everything.
The content provided on this website appears to be appropriate for its stated purpose, which is to educate readers about the stories behind Miyazaki and Studio Ghibli. It adds value by providing depth, allowing readers to learn not only about the films created but also why the masterpieces are meaningful.
Website Performance
Load Time
Mr Shamsul mentioned PageSpeed Insights, so I tested the website's performance using it. The performance score for both desktop and mobile is dragged average due to the heavy consumption of graphical content, including the scrolling animations and huge drawings showcasing Studio Ghibli's themed cartoons. The Largest Contentful Paint (LCP) is slower than ideal, likely due to the large background images. At the same time, the Cumulative Layout Shift is a significant issue, as elements change after load, affecting usability.
However, the website achieved a higher score in First Contentful Paint (FCP), indicating that the text and graphics were rendered rapidly. The total blocking time (TBT) and speed index on desktop are both within a healthy range, suggesting smooth interactivity between users and the website, which will leave a positive impression on visitors. Overall performance on mobile is worse than on desktop for a variety of reasons, including hardware differences, network speeds, layout complexity and more.
Figure 1.8 Web Performance Score
Responsiveness & Compatibility
The website adapts to desktop and mobile, allowing reasonable adjustments when viewed on different screen sizes. Since the website is structured as a linear scroll, it adapts smoothly to mobile browsing, allowing readers to just swipe down to continue the story, a feature which seems more natural on touchscreens.
---------------------------------------------------------------------------------------------------------------------------
WEBSITE 02: Heritage In Art created by Lumen Artspace (Gallery)
Figure 2.1: Heritage In Art Website (Cover Page)
Purpose & Goals
Heritage In Art aims to introduce visitors to Lumen Artspace's online gallery, which is a gateway that is dedicated to showcasing the beauty and richness of Vietnamese art. Lumen Artspace believes that art has the power to transcend borders and connect cultures. Therefore, they aim to preserve this heritage while fostering a deeper understanding of Vietnamese culture. The website introduces the curated collection of 14 exquisite lacquer pieces that represent skills, passion and unique stories of Vietnam's heritage, landscapes and artistic innovation, inviting website visitors to explore and fall in love with the luminous world of lacquer art.
Visual Design & Layout
Colour
Black is widely used in this website, which acts as a good background to make the artworks stand out. White is used to show the content and stories behind each artwork, showing contrast with the dark background.
Additionally, the website features images of lacquer paintings that have warm, earthy, and classic tones. Vietnamese lacquer artwork is usually coloured in deep reds, browns, and gold, giving the website a feeling of richness, warmth, and heritage. The cohesive colour palette used made the website feel harmonious, which aligns well with the idea of lacquer art as a heritage craft.
Typography
There are two typefaces used on the website: "Ivy Presto Display" and "Neue Montreal". "Ivy Presto Display" is the serif typeface used for the major headings and headings on the website to make the topics stand out from the content. "Neue Montreal" is used for the body text in the paragraph.
The title is scaled in 252px, aiming to emphasise the ancient theme of the website. The second largest font size used is up to 164px and 86px (major headings and headings). For some subheadings that highlight the names of the artworks presented, the font size will be 32px and 47px, while the smallest font size used is 16px and 12px (body text and remarks). Most of the texts are Roman, with only some highlighted keywords in headings being Italic.
Imagery
The imagery is heavily focused on Vietnamese lacquer paintings
Layout
Functionality & Usability
Navigation
Interactive Element
Quality & Relevance
Overall, this is a high-quality website with a strong thematic identity that celebrates Vietnamese cultural tradition, particularly lacquer paintings. The lacquer painting images have highlighted details of the artworks, such as the stories and timelines behind each creation. Furthermore, the contents are properly structured into different sections in a menu, making it simple for users to find what they are looking for. The website's design further expresses elegance through the use of colours, fonts, spacing and high-quality photographs that work together to create a quiet and respectful atmosphere for the artworks.
The mission of preserving and showcasing Vietnamese art is delivered through the content that celebrates craftsmanship. It is friendly to art enthusiasts and admirers of Vietnamese culture because the content delivered, such as artworks, high-resolution images and narratives, can fulfil the target audience's needs. It uses a poetic way to tell the cultural stories of artworks, which provides depth that carries a value of being appreciated not only for their craftsmanship, but also for their role in heritage preservation.
However, there are some artworks which are not labelled and are just left "Untitled", which I think is quite problematic, as users might not know what the artwork is about. Other than that, I think everything is quite good.
Website Performance
Load Time
The performance score for both desktop and mobile is dragged average due to the transitions and animations used when scrolling the webpage. The Largest Contentful Paint on mobile is significantly slower than ideal, showing that the large images and animations take much longer to load compared to desktop.
However, the website achieved a strong score in First Contentful Paint on desktop, indicating the text and key visuals appear quickly for users. The Total Blocking Time and Speed Index also suggest smooth interaction and fast rendering. The overall performance on mobile is much worse than on desktop, with slower FCP, LCP and Speed Index that might be caused by heavier content processing on mobile.
Figure 2.8: Web Performance Score
Responsiveness & Compatibility
The website adapts to desktop and mobile, allowing reasonable adjustments when viewed on different screen sizes. When using smaller screens, the artwork visuals and background images will scale down smoothly, maintaining balance and readability without losing the details or cropping important parts of the website.
---------------------------------------------------------------------------------------------------------------------------
WEBSITE 03: UI/UX & Brand Designer created by Lydia Amaruch (Portfolio)
Figure 3.1 UI/UX Brand Designer Website (Cover Page)
Purpose & Goals
Lydia Amaruch aims to introduce visitors to her professional design world, showcasing her expertise in UI/UX and brand design. Her portfolio serves as a gateway to her creative vision, which is dedicated to blending aesthetic clarity with strategic thinking in digital design. The website presents a curated selection of her design work, including brand identities, web interfaces and UI/UX case studies, which represent her skill set, creativity, and the unique solutions she has crafted. Her goal is to share projects that reflect her process, thoughtfulness, and impact across brands and user experiences.
Visual Design & Layout
Colour
Typography
Imagery
Layout
Functionality & Usability
Navigation
Interactive Element
Quality & Relevance
Website Performance
Load Time
The desktop and mobile performance are both below average. Similar to the previous websites I studied, the animations that occur while scrolling have increased the workload on the website, making the speed of showing content visually slow while increasing the time it takes to load. As the majority of the page performance data presented is poor, website users may become frustrated and leave the site.
Figure 3.8: Web Performance Score
---------------------------------------------------------------------------------------------------------------------------
WEBSITE 04: Mammoth Murals created by By Huy MONOLOG Studio (Business)
Figure 4.1 Mammoth Murals Website (Cover Page)
Purpose & Goals
Mammoth Murals aims to introduce visitors to its portfolio of bold, hand-crafted murals and signage, working with real estate developers, design-driven brands, and institutions to turn ordinary walls into memorable landmarks. The website serves as a gateway to the company’s craft, which is dedicated to combining artistry, durability, and visibility in ways that spark conversation. Mammoth Murals showcases work for trusted partners, testimonials that reflect the transformative power of their artistry and transparent information about the process from zero to one.
Visual Design & Layout
Colour
Typography
Imagery
Layout
Functionality & Usability
Navigation
Interactive Element
Quality & Relevance
Website Performance
Load Time
Both mobile and desktop performance are above average, with the majority of data remaining within a healthy range, although it may be enhanced even further. Overall, the website performs better on desktop than on mobile, with a lower response time in all areas, leaving a positive impression with users. This website has the greatest performance score of the five websites I studied, indicating that it also has the highest user satisfaction.
Figure 4.8: Web Performance Score
---------------------------------------------------------------------------------------------------------------------------
WEBSITE 05: Moooi created by Build In Amsterdam (Business)
Figure 5.1 Moooi Website (Cover Page)
Purpose & Goals
Moooi aims to introduce visitors to the world of imaginative design, where lighting, furniture and home accessories become expressive by defining the personalities of spaces and adding a touch of creativity and beauty to ordinary interiors. The website features a curated collection of Moooi's signature products, including lighting, furniture, and home decor, as well as product narratives that illustrate the artistic aspect of material use. Through high-impact visuals, detailed product information, descriptive storytelling and categorised collections, Moooi encourages visitors to discover and ultimately transform their living spaces with artistic, design-driven pieces.
Visual Design & Layout
Colour
The colours used are
Typography
Imagery
Layout
Functionality & Usability
Navigation
Interactive Element
Quality & Relevance
Website Performance
Load Time
Both desktop and mobile performance are below average, with mobile overall performance receiving the lowest score of any of the five websites. On mobile, the site records the longest Total Blocking Time, the slowest Largest Contentful Paint, and the highest Speed Index, which means content takes a long time to appear and respond to user interaction. This creates a frustrating first impression for users, as they are left waiting before they can meaningfully engage with the site. The website struggles across both desktop and mobile, but mobile performance is particularly problematic.
Figure 5.8: Web Performance Score
Comments
Post a Comment