INTERACTIVE DESIGN: EXERCISE 1: WEBSITE ANALYSIS

 ——

Start from 3.9.2025

23.9.25-1.10.2025/Week1- Week2

Ding Jiaqi/0379388 

Interactive Design/ Bachelor of interactive spatial design

——

EXERCISE 1: WEBSITE ANALYSIS

 

 

 1. Select Websites: Choose five (5) websites from the provided link.

2. Analyze Websites: For each selected website, review it carefully by considering:

The purpose and goals of the website and whether they are effectively communicated to users.

The visual design and layout, including the use of color, typography, and imagery.

Functionality and usability, including navigation, forms, and interactive elements.

The quality and relevance of the content, including its accuracy, clarity, and organization.

The website’s performance, such as load times, responsiveness, and compatibility with different devices and browsers.

Identify the strengths and weaknesses of each website and how they impact the user experience.

3. Write Reports: Write a brief report for each website, summarizing your findings and recommendations. Each report should be at least 200 words. Ensure the report formatting is clear with headings/subheadings. You can include screen captures of each section or page of the website to explain.

4. Submit: Submit your e-portfolio link for submission.

——

WEEK 1:

In this class, the teacher gave an overview of the topics we will cover this semester, with a main focus on website design. The teacher also introduced the software we need to prepare for the course. At the end of the class, the teacher explained the first exercise: we are required to choose five different types of websites from the provided materials and conduct a detailed analysis of each one.

——

Fig 1.2.1 Five website

Website1：Hungry Tiger created by Artemii Lebedev

Fig 2.1 Hungry Tiger

1. Purpose and Goal 

Hungry Tiger is a brand website that focuses on showcasing its bold Indian sauces, such as Tikka Masala. The website aims to build a strong brand identity around rich, flavorful cooking and to connect people with Indian spice culture. It targets a wide audience, including home cooks, food lovers, and anyone interested in exploring new flavors. 

The site provides clear information about each product, including ingredients, nutrition facts, and how the sauces are made. It also shares creative recipes that show how to use the sauces in everyday cooking. Through interactive features like the “Game” section, storytelling, and strong visuals, the website creates a fun and memorable brand experience.

 Hungry Tiger highlights transparency, natural ingredients, and authentic taste. Its main goal is to inspire people to try and buy the sauces, turning visitors into loyal customers.

2. Visual Design and Layout

a) Color

Main colors: warm golden yellow/amber and deep brownish red.

Fig 2.2 Main Color

Advantages: These colors create a warm and bold visual identity that effectively captures users’ attention. Their strong contrast improves readability, while also reflecting the brand’s rich, flavorful character. This color combination aligns perfectly with the brand’s focus on “bold Indian sauces.”

b) Typography

                                                                               Fig 2.3 Typography

Title (WHY THE JAR MATTERS)

The title uses Arial Black, a bold and compact sans-serif font. It is in all caps with tight letter spacing, creating a strong visual impact. This makes it suitable for big, attention-grabbing headings. 

Body Text (FRESHNESS / AROMA & FLAVOR / Paragraphs)

The body text uses a simple sans-serif font in Medium weight. Subheadings are in all caps, while the main text uses normal case. This keeps the layout clear and easy to read.

c) Imagery

Fig 2.4 Imagery

The designer created a 3D animation of the product rotating, opening the lid, and sauce spilling out, which is a major highlight of the website. It has a strong visual impact and attracts users’ attention more effectively than static images.

 Through the rotation and opening actions, users can view the product details from multiple angles.

d) Layout

Fig 2.5 Layout

The website uses a scrolling layout, which helps users explore the content step by step as they scroll, instead of being overwhelmed by too much information at once.

Fig 2.6 Layout

Fig 2.7 Layout

It looks like a very free and flexible design, but it actually follows a hidden grid system with centered alignment, making the page look neat and well-structured.

3. Functionality and Usability

a) Navigation

Fig 2.8 Navigation

Fig 2.9 Navigation

At the top of the page, there is a clear main navigation with sections like Sauce, Recipes, About, Game, and Contact, allowing users to quickly find the main parts of the site.

b) Interactive elements

1. 3D / Animation / Interactive Effects

In the product section, there is a 3D animation showing the lid opening, the jar rotating, and the sauce spilling out. This makes the product display more attractive and lets users see the details from different angles, helping them understand and remember the product better.

                                                                          Fig 2.10 3D Animation

 2. Mini Game “Game”

The website has a mini game called “Catch 100 sauces.” Users can control the tiger with the arrow keys, and after the game ends, there is a “back to home” button.

Fig 2.11 Mini Game

3. About

Card-based scrolling interaction presents each card as an independent information unit, making it easy for users to browse content step by step. Users can simply scroll or swipe to view the next card, which is easy to use and matches their habits. The layout has a good sense of rhythm, avoids long and monotonous text, and makes reading easier and more structured.

Fig 2.12 About

4. Quality and Relevance

a) Quality Overall, Hungry Tiger is a well-designed website. Its visuals are bold and clean, and the layout is clear, making key information easy to understand at a glance. Whether it’s product details, brand stories, or recipes, everything is presented in an organized way. High-quality images, animations, and structured sections make browsing more engaging. Users can move smoothly between different sections and quickly find the information they’re looking for. 

b) Relevance The content is highly relevant to the target audience — people who enjoy cooking, exploring new flavors, and are interested in Indian sauces. Product information, creative recipes, and interactive elements like the mini game all fit well with the brand’s “Bold Flavor” theme. While the content is focused and may not appeal to everyone, it effectively meets the interests and needs of the core audience.

5. Website's Performance

I used PageSpeed Insights, and the website' s desktop performance is excellent. It fully passed the test.

Fig 2.13  website' s performance

6. Conclusion

Overall, this is a good website. It has strong visual impact and a clear brand identity. The 3D animations and interactive elements enhance the user experience. The layout and content categories are well organized, and the site is highly aligned with its target audience.

——

Website 2: Suno AI created by Feels Like

 1. Purpose and Goal：

Suno is an AI music company that aims to make music creation accessible to everyone. By combining advanced generative AI with an intuitive user experience, it enables people of all backgrounds and skill levels to create original songs effortlessly. Its mission is to empower creativity and reshape how music is made and shared, allowing users to express themselves through music without needing professional tools or training.

2. Visual Design and Layout ：

a) Color

Fig 3.1 Main Color

The main colors used are black and white, which make up more than 95% of the website’s color scheme. As a result, the titles and text always maintain a strong contrast with the background, ensuring clear readability.

Fig 3.2 Color

The background is mainly composed of purple-red, dark brown-yellow, and dark reddish-brown, while high-saturation magenta and orange-red are used as accent colors. The website uses large gradient backgrounds to blend dark and bright tones smoothly, enhancing the sense of space and visual depth.

                                                                                    Fig 3.3 Color

Bright colors like blue, green, yellow, orange, and red create a strong contrast with the dark background, making key content stand out. Many high-saturation colors are used, but each color is linked to a different section, which keeps the layout clear. Users can quickly recognize functions and sections by color, improving browsing efficiency.

b) Typography

The website uses two types of fonts:

Serif font – used for titles and body text (“Make a song about the moon.”, About, Team sections)

Sans-serif font – used for the logo (Suno), navigation (About / Team / Blog), and buttons (Make a song)

Fig 3.4 Typography

Fig 3.5 Typography

c) Lmagery

Fig 3.6 Imagery

The images are presented in a horizontal card layout, with a clear and organized arrangement.

d）layout

The top of the homepage has a Hero section with a large title（“Make a country song about Jess being late”）, gradient background, and a centered input box. This full-width design creates strong visual impact and draws user attention.

Fig 3.7 Layout

In the horizontal card scroll area, song covers are displayed like album cards in a row. This makes it easy for users to preview multiple works and creates a modern, smooth browsing experience.

Fig 3.8 Layout

3. Functionality and Usability：

a) Navigation

The navigation experience is good. The menu structure is clear and easy to understand.

b）Interactive element

Fig 3.9 Interactive element

The main interactive element is the horizontal card scroll area. When the mouse hovers over any image, it enlarges, giving users interactive feedback.

Fig 3.10 Interactuve element

This sliding interactive design attracts users’ attention and makes the page more fun and engaging.

4.Quality and Relevance：

a) Quality

Overall, this is a high-quality website. The visuals are clean and modern, and the layout is well structured. The use of bold typography, smooth scrolling, and interactive elements creates a strong user experience. 

b) Relevance

All the content and information on the website closely align with the platform’s purpose — making music creation accessible to everyone.

5. Website's Performance

I used PageSpeed Insights, and the website’s desktop performance is excellent. It fully passed the test.

Fig 3.11 website's performance

It can be seen from the figure that…

a）Strengths：

Fast First Contentful Paint (FCP) — 0.5 s, users can see content quickly.

Excellent server response time — TTFB is 0.3 s, showing good backend speed.

Very low interaction delay — INP is 59 ms, the page responds smoothly.

b）Weaknesses：

Slow Largest Contentful Paint (LCP) — 3.5 s, slower than the ideal 2.5 s.

High Cumulative Layout Shift (CLS) — 0.18, causing visible layout movement.

Core Web Vitals not passed — LCP and CLS need improvement for better performance.

6. Conclusion

a) Strengths

The website has a strong visual impact with a clean, modern layout. Its color palette and typography are well-chosen, creating a stylish and cohesive look. Navigation is simple and intuitive, allowing users to easily explore content. Interactive elements, such as sliding cards, make the browsing experience engaging and fun.

b) Weaknesses

The desktop performance has some issues. The loading speed is not ideal, with a relatively long LCP and some layout shifts. 

——

Website 3: Joy Form Africa created by SALT AND PEPPER

1. Purpose and Goal 

The main purpose and goal of the JFA Awards website is to introduce and promote the JFA Awards.
It provides clear information for participants, judges, and the public, including the award’s mission, selection standards, past winners, and how to enter.
The goal is to help more people learn about the awards, increase their influence, and create a professional platform for the design and creative industry.

1. Purpose and Goal：

Main Colors: 

The site primarily uses off-white / light cream tones as its background, with accent colors like soft mint green, pastel blue, and light sand. A vivid coral red is used as a highlight/attention color.

Fig 4.1 Main Colors

Fig 4.2 Main Colors

b) Typography

This website mainly uses two types of fonts for titles and body text:

Serif font: Used for main and subheadings, such as “Find the joy between the mountain and the sea” and “BRINGING COMMUNITIES TOGETHER.” It is medium weight, with a size of 60–80px, creating a strong visual impact.

Sans-serif font: Used for body text, such as the introduction paragraphs. It is regular weight, with a size of about 18–22px.

Fig 4.3 Typography

Fig 4.4 Typography

Fig 4.5 Typography

c) Imagery

The staggered arrangement of images makes the page more dynamic and gives a sense of space.
The clear separation between text and images adds a storytelling feel.

Fig 4.6 Imagery

Fig 4.7 Imagery

Fig 4.8 Imagery

d）Layout

1.Segmented Modular Layout

The designer divides the content into multiple modules such as “Our Story / Centre Court/Installations.” Each module has its own title, text, and decorative illustrations.

Fig 4.9 Layout

2.Vertical Scrolling with Transitions

The page uses a vertical scrolling layout. Users browse each module from top to bottom, with animations or fade transitions between sections.

Fig 4.10 Layout

3.Center Alignment with Side Images

Main text is usually centered or slightly left-aligned, while illustrations or decorative images are placed around or on the sides as visual accents.

Fig 4.11 Layout

3. Functionality and Usability：

a) Navigation

The navigation experience is good. The menu structure is clear and easy to understand.

                                                                       Fig 4.12 Navigation

b）Interactive element

Fig 4.13 Interactive element

At the beginning, there is an interactive effect where users can reveal hidden parts of an image by moving the mouse. This quickly captures their attention and encourages them to explore the website, making the page more lively and engaging.

                                                                  Fig 4.14 Interactive element

When users touch the edge of the illustration, the edge changes, creating interaction and giving instant feedback. This makes the browsing experience more immersive.

4.Quality and Relevance：

a) Quality

The content and layout are well designed, with a good mix of illustrations, white space, and text.
The structure is clear, showing the “Victoria Wharf” installations, stories, and exhibition details, making it easy for visitors to understand the theme and purpose of this section.

b) Relevance

All the context and information in this website is relevant with the aim of this agency.

5. Website's Performance

I used PageSpeed Insights, and the website’s desktop performance is excellent. It fully passed the test.

Fig 4.15 Website's Performance

6. Conclusion

The website has many interactive elements, giving users a good experience and increasing their interest in reading.
The content is clearly structured, making it easy for users to get information.
The overall layout is tight, with unified elements, good visual effects, and a strong match with the brand.

——

Website 4：Neu Inc By FunTech Inc

 1. Purpose and Goal：

Neu is a Tokyo-based advertising company that focuses on performance-based SNS advertising.
It mainly runs ads on platforms like Meta, TikTok, and YouTube, and also provides landing page and short video production services.

The goal of Neu is to help companies grow through social media advertising, where clients only pay for real results with no upfront or fixed fees.
It aims to use creative ideas, data analysis, and ad strategies to bring more exposure, better conversion, and long-term growth for brands.

2. Visual Design and Layout ：

a) Color

The main colors of the page are blue and gray, so the text and background always keep a strong contrast.
The large use of blue creates a sense of technology and modernity, ensuring unity and a strong brand image.

Fig 5.1 Main Color

b) Typography

The website mainly uses sans-serif fonts.
The title (“SNSを主とした成果報酬型広告”) uses Bold, and the subheadings (“Research & Planning”, “Creative Production”) use Medium, The body text uses Regular.

Fig 5.2 Typography

c) Imagery

The images mainly show team members' photos. The zigzag layout displays the images alternately, creating a “Z”-shaped reading path. This layout is visually engaging as it guides the user’s eyes from one side of the screen to the other, creating a dynamic interaction.

Fig 5.3 Imagery

d）Layout

On the homepage, the website uses a full-screen layout. Large images and bold text fill the screen, creating a strong visual impact and quickly catching the user’s attention.

                                                                               Fig 5.4 Layout

3. Functionality and Usability：

a) Navigation

The navigation experience is good. The menu structure is clear and easy to understand.

The animation during navigation is smooth and dynamic.

Fig 5.5 Navigation

b）Interactive element

1.

This interactive effect is a scroll-follow animation. When users scroll down, page elements change and guide their reading direction. The animation is closely linked to user actions, increasing interactivity and immersion.

Fig 5.6 Interactive element

2.

Wherever the user moves the mouse, it leaves a trace, adding a sense of fun.

Fig 5.7 Interactive element

3.

Fig 5.8 Interactive element

Users trigger the animation by moving the mouse or swiping, which increases the interactive experience.
The animation naturally guides their eyes and actions, encouraging them to keep exploring the page.

4.Quality and Relevance：

a) Quality

The content and design work well together. The mix of graphics and text creates a rich but not overly complex visual structure.

The layout is clear. Sections like services, team, and case studies are well organized, making it easy for users to find what they need.

The brand style is consistent. Colors, fonts, and graphic elements are unified across the site, making it look professional and cohesive.

b) Relevance

All the context and information in this website is relevant with the aim of this agency.

5. Website's Performance

The overall loading and interaction performance is excellent, but the layout stability is poor. It is far above the recommended standard (≤0.1), which means that elements shift during loading, causing a poor reading experience.

Fig 5.9 Website's Performance

6. Conclusion

a）Strengths

1. The color and typography are consistent, giving a strong brand identity.

2. Strong visual impact with rich interactive effects.

3. Clear content structure, easy to understand.

4. Overall good website performance.

b）Weaknesses

1. The layout stability is poor (high CLS), and element shifting may affect the user experience.

——

Website 5：Sporthotel Lorünser by Teel

1. Purpose and Goal：

Lorünser is a luxury mountain hotel located in Zürs am Arlberg, Austria. It has a long history and is known for its Alpine style, traditional hospitality, and skiing experience since 1927.

The website aims to introduce the hotel’s history, philosophy, environment, and services. It shares the brand story and shows the rooms, dining, skiing access, and hotel atmosphere to help visitors understand its unique value.

The goal is to attract travelers who enjoy mountain holidays, skiing, and classic luxury experiences, and encourage them to choose Lorünser.

2. Visual Design and Layout ：

a) Color

The background mainly uses off-white, making the page look soft and clean, and providing a good base for text and images. The font uses wine red, which conveys a sense of history and elegance.

Fig 6.1 Main Color

b) Typography

Serif font: used for main titles and subtitles (“Beloved by Generations of Skiers”). Bold, around 70px.
Sans-serif font: used for body text. Regular, around 20px.

Fig 6.2 Typography

c) Imagery

The combination of many high-quality images and text layout quickly grabs users’ attention, making the page more attractive and giving it a sense of storytelling

Fig 6.3 Imagery

Fig 6.4 Imagery

Some images take up the main and secondary sections of the page, creating an artistic feel.

Fig 6.5 Imagery

d）Layout

Fig 6.7 Layout

The website uses a full-screen photo layout and places images in large areas of the page. Both layouts focus on visuals. The full-screen photo layout maximizes visual impact by covering the entire screen with images, creating an immersive and bold presentation. This layout draws attention to the images, making them the core of the user experience.

3. Functionality and Usability：

a) Navigation

The navigation experience is good. The menu structure is clear and intuitive enough for user intuitive. The animation during navigation is smooth and dynamic.

b）animation

The opening animation is beautifully designed. The use of off-white with red architectural line drawings conveys a sense of history and luxury for the brand.

Fig 6.8 animation

4.Quality and Relevance：

a) Quality

Overall, the quality of this website is quite good. There are no obvious highlights and no major weaknesses. The content is communicated effectively.

b) Relevance

All the context and information in this website is relevant with the aim of this agency.

5. Website's Performance

I used PageSpeed Insights, and the website’s desktop performance is excellent. It fully passed the test.

Fig 6.9 Website's Performance

6. Conclusion

The website is very complete, with clear categories and structure. The color scheme is also very brand-oriented. I think adding more interactive elements would make it more memorable.