Interactive design Exercises / Website Analysis
24.04.2025 - 1.05.2025 ( Week 1 - Week 2)
ZHOU YUTONG / 0378676
GCD61004 / Interactive design / Bachelor of Design (Honours) in Creative Media
Exercises / Website Analysis CSS Document Development
TABLE OF CONTENT
- Website Analysis (Week 2 - 10 Marks)
Smile is a website that spreads joy and hope through video content. By showcasing advertisements, music videos, and entertainment shorts, Smile shares these outstanding works with users to nurture talent and promote creativity. When I browsed the site, the videos displayed directly on the homepage immediately caught my attention. From bold and imaginative designs to touching public service announcements, the content evokes a range of emotions—joy, surprise, and empathy—effectively achieving the website's intended impact.
Smile adopts a modular layout with clearly defined sections. The choice of yellow for the text is very eye-catching, avoiding overlap with dynamic content. At the same time, the design has strong visual appeal—the website presents dynamic videos directly, including its smiley-face logo and other information interspersed across the page in motion. This design gives me a strong sense of vitality and creativity.
The site’s navigation is clear, with the main content placed on the homepage so users don’t have to search through multiple pages. Interactive elements, such as hovering over text turning it into lines of code, add a playful and interesting touch.
In terms of content quality, Smile’s videos carry a high level of emotional resonance. The content is updated at a moderate pace, and the video length is not overly long, making it suitable for a broad audience.
Regarding performance, the website loads quickly, videos play smoothly without noticeable lag, and pages respond swiftly, providing an overall seamless user experience. It also runs well across different devices and major browsers.
The overall layout of Quechua — 2025 Lookbook is very simple. The beige background is soft and does not distract from the main content. This makes the visuals look clean and comfortable to view. The Perspective Scroll Gallery design brings the product introductions and features to life. This playful design encourages users to explore product details further.
The website’s navigation is clear, with all the main content presented on a single page. Users can find the products they are looking for through the menu. The use of scroll wheel navigation to display content allows users to access information without flipping through multiple pages. Interactive elements, such as product photos appearing as the cursor moves, help deepen the user's impression of the products.
In terms of content quality, the website mainly focuses on product introductions and user feedback. Quechua — 2025 Lookbook provides many real user photos and reviews, as well as detailed product information. The high-resolution images give users a strong sense that the products are reliable.
Regarding performance, the website loads quickly. Page scrolling and interactive modules show no noticeable lag, and the pages respond swiftly, offering an overall smooth user experience. It functions well across different devices and major browsers, demonstrating a high level of technical optimization and multilingual support.
3.Preloader animationfromProVoke
Provoke is a website that integrates branding, social media marketing, photography, and web design. Its purpose is to introduce partner products to users. The artistic visuals placed on the page sparked my curiosity and made me want to click in. Once I entered, I couldn’t help but read the information inside, which means they successfully achieved their goal of introducing the products.
The overall layout is very minimalistic, with yellow and white as the main background colors, which makes important content stand out at a glance and gives a pleasant visual experience. The choice of font size is appropriate, and the font is consistent throughout, so the page doesn’t feel cluttered. The neat layout makes it comfortable to view. I think the website mainly uses a modular layout, where the information is organized into modules, making each product introduction clear.
The website navigation is clear, and the main content is all on one page, which is very concise. Text is paired with images, allowing customers to immediately understand the type of product. Scrolling with the mouse reveals the content of the site, so users don’t have to search through multiple pages one by one.
In terms of content quality, it mainly focuses on product introductions and related manufacturing company information. Provoke provides many real product photos and written feedback, along with detailed product information.
Regarding performance, the website loads quickly. Page scrolling and interactive modules are smooth, with no noticeable lag. The page responds quickly, and the overall user experience is fluid. It runs well on different devices and mainstream browsers, showing a high level of technical optimization. However, it does not support multiple languages.
Mugaritz is a renowned high-end restaurant in Spain. The core purpose of its website is to convey the brand's philosophy—treating food as a sensory, cultural, and philosophical experience, while continuously innovating, experimenting, and exploring through cuisine. At the same time, it aims to attract potential customers to make reservations and learn about the restaurant’s philosophy, team, menu, and experiences.
The overall layout is very minimalistic, using bright yellow and blue as the main background colors, which creates a quiet, high-end, and artistic atmosphere that matches the upscale positioning of the restaurant. The font size is appropriate, and the typography is consistent, so the page does not feel cluttered. There is ample white space, which emphasizes visual rhythm and a sense of spaciousness. The neat layout provides a comfortable viewing experience. The images mainly consist of high-definition, artistic photographs that highlight texture and detail.
The website’s navigation is clear. Most of the main content is placed on a single page, making it very concise. Text is paired with images, allowing customers to immediately understand the type of content. The scrolling layout guides the presentation of content. It primarily uses a scroll-based single-page design, which is intuitive to operate. Although there are few interactive elements, the system is complete.
In terms of content quality, the website focuses on conveying the brand philosophy. The written content is logically organized. Although there is not a large amount of information, each section has a clear communicative purpose.
Regarding performance, the website loads quickly. Scrolling through pages and interactive elements shows no noticeable lag. The page responds promptly, and the overall user experience is smooth. No compatibility issues were found when tested on mainstream browsers. The site shows a high level of technical optimization and supports both English and Spanish.
| Evaluation Dimension | Assessment |
|---|---|
| Purpose Communication | Clear and highly consistent, successfully establishes brand identity |
| Visual Design | High-end, artistic, cohesive, with strong visual impact |
| Functionality & Navigation | Reasonable interactivity, navigation encourages exploration |
| Content Quality | Concise and philosophical, though slightly abstract |
| Performance & Compatibility | Excellent performance, well-optimized for mobile devices |
The main purpose of the SMAT website is to provide support and resources to help users quit smoking, reduce smoking rates, and promote health. The website clearly communicates its purpose and goals through concise language and clear calls to action.
The website uses soft color tones, creating a comfortable and relaxing atmosphere that is suitable for the theme of smoking cessation. It uses appropriate headings and subsections, making the content structure clear. The font size is appropriate, and the typography is consistent, so the page does not feel cluttered. However, the website lacks sufficient images to enhance the attractiveness of the content.
The website navigation is clear, and important functions such as registration and contacting experts are prominent and easy to access. The registration form and contact information are straightforward and easy to use, lowering the barrier for users.
The content provides reliable information on quitting smoking, referencing scientific research and professional advice. The language is simple and clear, making it suitable for the target audience.
In terms of performance, the website loads quickly, with smooth page scrolling and no noticeable lag in interactive modules. The page responds promptly, and the overall user experience is smooth. No compatibility issues were found when tested on mainstream browsers, and the site shows a high level of technical optimization.
This website analysis exercise deepened my understanding of design evaluation in all aspects of layout, usability, interactivity and content delivery. By reviewing five different websites - Smile, Quechua 2025 Lookbook, Provoke, Mugaritz, and SMAT - I was able to compare different design strategies and identify strengths and areas for improvement.
Each site takes a unique design approach: Smile emphasizes emotional engagement and interactivity through dynamic visuals; Quechua focuses on clean layouts and immersive product displays; Provoke conveys minimalism and brand clarity; Mugaritz emphasizes aesthetic depth and cultural storytelling; and SMAT prioritizes clarity and accessibility for public health communications. .
Through this analysis, I gained a real-world understanding of how design decisions (such as layout consistency, color schemes, font choices, and responsive navigation) directly impact the user experience. I also recognized the importance of aligning visual design with the purpose of the site and the expectations of the audience.
This assignment improved my critical thinking skills and gave me a deeper understanding of visual and functional principles when approaching future design projects.
Comments
Post a Comment