Name: TANG YUYING
Student ID: 0370676
Programmed: Interactive special design
Module name: Interactive Design (202504-LLecture)
Exercise 1
Exercise 1 Requirements （4/26/2025）
In this exercise, we need to select 5 websites from the 5 collections provided by the instructor as our analysis subjects. The main aspects to analyze are: the website's purpose and goals, visual design and layout, functionality and usability, content quality and relevance, and website performance.
5 web link：
Web1: GRUPPO SAIDA
1、Website's purpose and goals
The main purpose of this website is to introduce, showcase, and sell various types of glass bottles to customers. During the presentation, it highlights the manufacturer's dedication to craftsmanship and commitment to quality, as well as their passion for and dedication to customer service. The manufacturer also offers customized glass containers tailored to the specific needs of each client.
2、 Visual design and layout
The entire website design uses blue as the primary color tone, conveying a sense of cleanliness, order, stability, and professionalism. The color scheme across the rest of the site is also well-coordinated, with no jarring contrasts.
Upon first entering the site, the animated visuals and headline clearly highlight the website's main focus—selling a wide variety of bottles. However, the layout is quite compact, and the images tend to draw more attention than the headline itself.
Finally, in the section showcasing the production process of the products, the arrangement of some headings, subheadings, and animations appears crowded. There is also an inconsistency in the sizes of the heading fonts, which affects the overall visual harmony.
（Heading）
（Product production process display page）
（The font sizes of subheadings on the same page are different）
3、Functionality and usability
The navigation bar is clearly designed, with a well-structured layout divided into sections such as "About Us," "Services," "Technology," "Project Cases," "News," and "Contact Us." This organization is very logical and allows visitors to find information at a glance.
（Navigation bar）
In addition, sliding animations have been added to the product display section, which not only enhances viewer interest but also increases the visibility of the products.
（Product display）
4. Content quality and relevance
In terms of content, the website provides detailed information about the company background, types of services, and project descriptions, accompanied by relevant images that convey a sense of professionalism. However, the layout is very compact, which can create a sense of fragmentation when browsing and reduce reading efficiency. While the content successfully demonstrates expertise, it also contains a large number of technical terms, which may make it difficult for non-professional visitors to understand.
5. Website performance
When accessing the website on a computer, the response speed is quite fast, and many of the display animations run smoothly. However, when opened on a mobile device, there are delays in the appearance of animations and images due to image loading issues. That said, the website handles size transitions between desktop and mobile very well, with no functionality lost or impaired due to the change in device.
Web2: ICONIXX
1、Website's purpose and goals
Iconixx Media is a content creation and production company specializing in media planning, brand promotion, and video production. The website highlights its core strengths in creativity, broad service offerings, and a strong portfolio of successful cases.
Upon entering the homepage, large images or videos immediately showcase the company's creative visual works, clearly establishing its focus on visual innovation.
Additionally, the bold slogan "Rebel Against Boring" prominently displayed on the homepage emphasizes the company's commitment to fresh and original ideas, effectively communicating its philosophy and innovative spirit to visitors.
（A clearly targeted slogan）
（The changing images showcase the company's creativity and the range of its work）
2、 Visual design and layout
On the homepage, the website primarily uses black and white as its background colors, interspersed with dynamic images, subtle scroll animations, and smooth transition effects. The dominant black background, paired with white text and bright accent colors (such as yellow and pink), creates a strong visual impact that aligns well with the brand’s creative identity. Overall, the site feels energetic and trend-conscious.
In terms of typography and layout, the sizes of the main titles, subtitles, and body text are well-balanced, making the content easy to read and clearly structured, without any confusion in hierarchy.
The layout features large visuals accompanied by brief text, which is concise and to the point, emphasizing key content and ensuring a smooth reading experience.
（The headings and content are well-coordinated and paired with large images, providing clear and effective visual-text explanations）
 |
（Mouse-following image animations）
|
3、Functionality and usability While browsing the page, the navigation bar is clearly fixed at the top right corner. When clicked, it reveals a comprehensive menu that thoroughly introduces the company background, services, workflow, published articles, and more.
（The navigation bar is very clear）
One refreshing element in the interactive experience is the images that move with the mouse, creating a great sense of interactivity with the viewer. Additionally, the text and titles that appear as the page scrolls enhance the feeling of strong interaction, encouraging visitors to keep scrolling and explore the page further.
（The text and titles that appear as the page scrolls）
Finally, at the bottom of the homepage, feedback from different clients who have worked with the company is featured. I believe this section is very effective as it enhances interaction between customers and also conveys the high quality and popularity of their work.
4. Content quality and relevance
In terms of content, Iconixx Media often uses case studies to showcase their work. Each case study is accompanied by a detailed description, including the client's needs, the challenges faced, the changes made, and the final product (such as websites or ads) for visitors to reference.
In browsing the case studies, the balance between content, titles, and images is well-coordinated, making the reading experience smooth and structured with clear distinctions between primary and secondary information. The combination of images and text effectively highlights the key points, allowing customers to also see the production process.
（Clear case study process sharing）
5. Website performance
The overall website loading speed is average due to the large number of images that need to be loaded. At the beginning, some animations may not run smoothly and there may be delays. However, the responsiveness is well-handled, and regardless of whether it's the desktop or mobile version, there are no issues with functionality loss due to changes in size.
Web 3:BBC STORY WORKS-GHOST GEAR
1、Website's purpose and goals
（Homepage）
2、 Visual design and layout
The overall design of the website provides an immersive experience that evokes the feeling of ocean ecology. Blue is used as the primary background color, aligning with the ocean theme and also indirectly conveying a sense of seriousness and calm reflection. This, in turn, encourages visitors to carefully read and contemplate the severity of "Ghost Gear."
n terms of typography and layout, the hierarchy is well-managed, guiding visitors to first see the title, then the quote, and finally the content. The fonts are also very clear, making it easy to read and distinguish the information.
（Headings and content.）
In terms of layout, a scrolling reading style is used, with small background animations accompanying each section, making the reading experience less monotonous. However, the downside is that there is a lot of content, so reading through it can take quite some time.
3、Functionality and usability
The website lacks the traditional top navigation bar. Instead, the navigation bar is placed at the bottom, and when clicked, it redirects to a website about the ocean conservation collaboration between HYUNDAI and Healthy Seas. This design is both innovative and has its drawbacks. The innovation lies in its effective promotion of ocean protection. However, it can confuse first-time visitors who may not immediately find the navigation bar and feel unsure about how to navigate the site.
The interaction is driven by a scrolling reading experience, where the text and titles gradually appear as the user scrolls. Another interactive element is the movement of background animations (such as fishing nets and fish), creating the illusion of being immersed in a real underwater environment.
（动画+字体）
4. Content quality and relevance
During the browsing experience, I found that the content is very well-organized, similar to reading a report. It begins with the problem statement, followed by case studies, data presentation, and finally, solutions. This progressive structure is very persuasive, allowing visitors to clearly understand the severity of the issue.
However, the downside is that the content is quite lengthy, which can lead to reader fatigue.
5. Website performance
In a poor network environment, the loading speed of images, videos, and animations can be slow. However, the website performs well on devices like mobile phones and computers, showing good compatibility.
（手机浏览页面）
However, during testing, I noticed that regardless of whether it is on a mobile phone or a computer, the small animations in the text experience some stuttering or lack of smoothness when opening the webpage.
Web 4: COCCOLE AL LATTE D' ASINA
1、Website's purpose and goals
The purpose of the Coccole al latte d'asina website is very clear—it aims to promote Donkey Milk skincare products. Upon opening the homepage, visitors are immediately presented with the product name and skincare items, letting them know that the website is focused on Donkey Milk skincare products.
（On the homepage, the brand name and products are clearly visible.）
2、 Visual design and layout
The website primarily uses orange, complemented by light purple, pink, white, and yellow to separate different sections of the layout. This color combination is very vibrant and refreshing, without feeling chaotic. At the same time, the high saturation of these colors effectively highlights the products, making them catch the visitor's attention at first glance.（The color of the modules complements the products very well, creating a great contrast and enhancing the overall presentation）
The font sizes chosen for the displayed content and titles are reasonable. The use of artistic fonts in the titles adds a stylish and lively touch, preventing the overall design from feeling dull.
In terms of layout, the website uses different colors to distinguish between sections, helping visitors recognize the change in areas and information. This is complemented by images, including product pictures, product graphics, and images of the production location, which assist visitors in understanding and getting to know the products and their functions.
3、Functionality and usability
The navigation bar is located at the top, making it very convenient for users to find and use. Additionally, as users browse the content, the navigation bar stays fixed, allowing easy switching between different pages.
（The position of the navigation bar）
（The navigation bar follows the page as you scroll）
Additionally, in terms of interaction, in the product display area at the top of the homepage, the products move in response to the mouse movement, giving the feeling that the customer is actually interacting with the product.
Another form of interaction is between customers, where feedback from customers who have used the product creates a connection with those who are exploring the product, fostering interaction and building trust.
（Customer feedback）
4. Content quality and relevance
During the browsing experience, I believe the order and quality of the content are very well structured. It starts with the product, followed by the introduction of the brand philosophy, product types, materials used, origin, and ends with customer feedback. This clearly showcases the brand, products, and professionalism to the customers. Additionally, the content is concise and easy to understand, without requiring much time to read or comprehend. There is also a minimal use of technical jargon, making the reading process very accessible.
5. Website performance
The browsing experience on a computer is very smooth, with no stuttering or delays in animations and images. However, when opened on a mobile phone, there are some delays with certain images and animations, requiring a brief wait. Nevertheless, there are no issues with missing features due to switching devices.(Mobile browsing experience.)
Web 5: PRAXIS LEANDRA ISLER
1、Website's purpose and goals
Upon opening the homepage of the website, the large slogan "Practice for Atlasology, and Naturopathy" clearly and explicitly indicates that the site belongs to a health clinic.
As you scroll down, you'll see an introduction to the services offered by the website, promoting Leandra Isler's naturopathy and atlasology (spinal correction) services. It targets individuals in need of body adjustments and health improvements, clearly informing visitors of their professional expertise.
2、 Visual design and layout
The design style is very simple and full of a natural feel, with a background featuring beige and light brown tones, complemented by green plants. This perfectly reflects the clinic's emphasis on "naturopathy." The color combination also creates a warm and soothing atmosphere, making visitors feel at ease rather than tense or overwhelmed.
For the titles, large fonts are used to highlight key terms, keeping everything simple and clear without any artistic fonts, ensuring that people of all age groups can easily read and understand. The font used in the content is also easy to recognize. There's a clear distinction between the font sizes of the titles and the content, making reading very easy. The same font is used throughout, creating a harmonious and cohesive overall design.
3、Functionality and usability
The navigation bar is located at the top, with very clear categories. Visitors can easily navigate to different pages based on their needs. The animation in the navigation bar is also thoughtfully designed, allowing it to pop up without the need for a click.
（Navigation bar）
During browsing, there is an animation that is particularly well-designed. As the page scrolls down, the characters and text continuously change, almost as if the characters in the images are engaging in a conversation with the visitors. This creates a very engaging and interactive experience, adding an element of fun.
4. Content quality and relevance
In terms of content, the homepage title directly points out the scope of services, and the text provides a thorough explanation.
In the professional field, for different treatment options, there are corresponding background information and details about the treatment plans, showcasing their expertise and reliability. The layout of the treatment content is also very simple and organized, making it easy to understand at a glance.
Perhaps adding some more visual elements or case studies could further enhance the content, making it even more engaging for visitors.
5. Website performance
The website loads quickly, but there is some delay in the animations, causing them to sometimes run smoothly. The compatibility is good, as it works on both desktop and mobile devices.
For example, the animations on this page, while smooth on mobile, can give a slightly lagging feeling compared to the desktop version. Perhaps simplifying the animations for mobile devices could improve the browsing experience and make the website feel more fluid.
Exercise 2
In this exercise, we need to duplicate the pages of two web pages and try to restore them exactly. Here is my exercise.
Web 1: Adidas
（Screenshot of the copying process 5/8/2025）
Copying process:
Step 1 : Design the whiteboard to be the same size as the web screenshot
The software I use is figma, so I import web screenshots into it and adjust the size of the frame to be the same as the screenshots.
Step 2: Use the ruler to plan the size and position of each section
Use the ruler tool to lay out the top section of the webpage. Then, use the Frame tool to outline each section. Refer to the original website and screenshots to fill in text and icons accordingly. Repeat this process for the rest of the webpage.
Step 3: Find images similar to those on the original website
For the images displayed on the site, I first measure their dimensions using the ruler tool, then draw the appropriate area using a frame. I select visually similar images from free image websites to replace the originals. Since the site is an e-commerce platform, I make sure that the spacing between images is consistent and accurate.
Step 4: Buttons
Based on the measurements taken with the ruler, I use rectangular shapes to outline button areas. I refer to the original site’s buttons to determine whether corner radius is used, and then apply the correct background color and text inside the buttons.
Step 5: Text
Using the Text (T) tool, I insert text in the corresponding areas. I try to match the font style and size as closely as possible to what is shown in the website screenshot.
Step 6: Icons
Referring to the icons in the screenshot, I search for free matching icons on online platforms. After selecting icons with the correct shape and size, I save them in PNG format and import them into Figma for editing. I make sure the position, color, and size are consistent with the original design.
（Screenshot of the copying process 6/8/2025）
Step 1: Create a whiteboard and import the website screenshot
First, create a whiteboard and import the website screenshot. Then, adjust the size of the whiteboard to match the dimensions of the screenshot.
Step 2: Use the ruler to plan the page layout
Use the ruler tool to mark the positions of key elements on the page such as text, images, buttons, icons, and the logo. This ensures that all elements are placed accurately during the reproduction process.
Step 3: Create the navigation bar and buttons
Using the rectangle tool, draw the navigation bar and buttons based on the positions marked with the ruler. Adjust the corner radius to match the original design. For buttons that have triangular ends, I used the “Move (V)” tool to reshape the rectangles accordingly.
（The rectangle in the picture can be shaped using the "move(v)" tool.）
Step 4: Select and insert images
Choose images that closely resemble those in the website screenshot. Download and import them into Figma. Predefine the image area using the Frame tool, then drag the imported images into place and adjust their sizes accordingly.
Step 5: Logo placement
Since the captured website uses many logos, I first take screenshots of the logos used. Then, I use an online background removal tool to isolate each logo and save them as PNG files. After importing them into the design in Figma, I position and resize each logo according to the ruler guidelines to match the original layout precisely.
（Import the processed logo, resize and position it appropriately）
Step 5: Text
Use the “Text (T)” tool to insert text in the corresponding locations. Select fonts that closely resemble those in the screenshot, and try to match the font size as closely as possible to the original.
评论
发表评论