INTERACTIVE DESIGN - Exercise 1: Websie Analysis

INTERACTIVE DESIGN - Exercise 1: Websie Analysis

|| 24/9/2025 – 1/10/2025 (Week 1 – Week 2)
|| BAI ZHUO QING, 0370042
|| Interactive Design / Bachelor of Design (Honours) in Creative Media
|| Exercise 1 / Website Analysis

---

TABLE OF CONTENTS

1. Instructions
2. Process Work
3. Reflection

---

1. Instructions：

 

---

2. Process Work：

Exercise 1: 

Requirements：

In the first exercise, we'll analyze five websites from a list of links provided by the professor. By observing and studying these websites, we'll systematically evaluate their design style, page layout, content quality, and functionality. This process will not only help us understand how to judge the quality of a website and its user experience, but also help us identify issues and develop suggestions for improvement.

What needs to be analyzed：

1. Website Purpose and Objectives: Evaluate whether they are clearly and effectively communicated to users.
2. Visual Design and Layout: Observe the appropriate use of color, fonts, and images.
3. Functionality and Usability: Examine the ease of use of navigation, forms, and interactive elements.
4. Content Quality: Focus on the accuracy, clarity, and organization of the content.
5. Performance and Compatibility: Evaluate loading speed, responsiveness, and cross-device compatibility.

Website 1：perico.energy by Silve Studio

From：https://www.csswinner.com/winners

1. Website Purpose and Objectives

Fig 1.1 perico.energy

The primary purpose of this website is clear: to promote and sell Perico brand energy drinks and cultivate their "clean, natural, and side-effect-free" brand image. The homepage's tagline, "Instant refresh. Clean boost. Zero crash," directly communicates the product's positioning. Upon entering, users immediately understand that this is a brand dedicated to healthy, clean energy drinks. Furthermore, features like displaying different flavors (Limojito, Espresso Martini, Mimosa), ingredient information, and an ordering portal are designed to guide users toward ordering. Overall, the website's purpose is clear—to attract consumers seeking a healthy energy boost and drive purchases.

2. Visual Design and Layout

a) Color  

• The design uses vibrant shades of green, lemon yellow, and orange.
• These colors emphasize themes of nature, freshness, and energy, creating a lively and inviting atmosphere.

Fig 1.2 perico.energy

Fig 1.3 perico.energy

Fig 1.4 perico.energy

b) Typography

• The font style is clean and modern.

• Large, eye-catching headlines draw immediate attention, while the concise body text font keeps the content readable and prevents visual overload.

Fig 1.5 perico.energy

Fig 1.6 perico.energy

c) Imagery

• Each flavor is represented with a corresponding image, such as lemons, coffee beans, or fruit slices.

• These visuals serve as intuitive cues, helping users quickly connect with the flavor and enhancing the playful brand identity.

Fig 1.7 perico.energy

d) Layout

• The page structure follows a logical marketing sequence:

  1. Main image → 2. Slogan → 3. Product selling points → 4. Flavor selection → 5. Ordering interface → 6. Ingredients → 7. Supporting content.

• While effective, the homepage includes many visual elements (illustrations, decorative graphics, and product renderings).

Fig 1.8 perico.energy

3. Functionality and Usability

a) Navigation

• The top navigation bar includes clear options such as Products, About Us, Contact, FAQ, Shop All, and Flavors, enabling users to easily access key pages.

• The Call-to-Action (CTA) button (Order Now / Buy Now) is prominently displayed, streamlining the shopping process by reducing the need to search for it.

Fig 1.9 perico.energy

Fig 1.10 perico.energy

b) Interactive Elements

• Forms, including Subscribe and Contact Us, are designed to be simple and intuitive.

• Interactive features such as flavor selection and image scrolling function smoothly, enhancing user engagement.

Fig 1.11 perico.energy

Fig 1.12 perico.energy

Fig 1.13 perico.energy

4. Content Quality

a) Quality

• The content is clean, concise, and free of unnecessary details.

• Each flavor includes a short description, ingredients, benefits, and flavor profile, making information quick and accessible.

• Selling points such as nutritional information, clean ingredients, sugar-free, and non-GMO are highlighted, reinforcing credibility and building user trust.

b) Relevance

• The information provided aligns directly with what users want to know when evaluating a product.

• The content is well organized and follows a logical sequence: Homepage → Products → Brand Philosophy → Support/FAQ.

• This structure ensures that users can easily find both product details and brand-related information without confusion.

5. Performance and Compatibility

a) Loading Time

• The website loads quickly on standard broadband connections, even though it is somewhat image-heavy.

• Images appear to be optimized, which helps maintain speed.

• A potential drawback is that the use of high-quality product images and decorative graphics may slow loading times on slower or unstable mobile networks, leading to noticeable delays.

b) Responsiveness & Compatibility

• The responsive design is strong: the layout adapts seamlessly to different screen sizes.

• Images and text remain clear without distortion or obstruction.

• The site performs smoothly across major browsers such as Chrome, Firefox, and Safari, ensuring broad compatibility.

Fig 1.14 perico.energy Computer performance test

Fig 1.15 perico.energy Mobile performance test

Summary and improvement suggestions：

Overall, Perico Energy's website excels in brand positioning and visual design. Its refreshing color scheme and intuitive imagery effectively convey the product's value. Its clear navigation and comprehensive functionality provide a smooth overall user experience.

However, the page's imagery is somewhat cluttered, which may cause loading delays, and the lack of convenient features compromises the user experience. Adding objective data and user reviews, and optimizing loading speed, would enhance the website's professionalism and credibility.

Website 2：Beverage brands under Royal Beverage

From：https://www.csswinner.com/winners

1. Website Purpose and Objectives

Royal Beverage's website's purpose is clear: to showcase its beverage brands and convey the company's strengths and vision. The homepage lists multiple beverage products, company profiles, news updates, and brand stories, aiming to strengthen brand trust and expand its influence.

Fig 2.1 Royal Beverage

2. Visual Design and Layout

a) Color

• The color scheme relies on a white background combined with bright, primary product colors.

• This contrast ensures that the product images stand out clearly and remain the focal point of the design.

Fig 2.2 Royal Beverage

b) Typography

• The font is clean, simple, and easy to read.

• The typeface aligns with the overall brand aesthetic, contributing to a professional and modern look.

Fig 2.3 Royal Beverage

c) Imagery

• The homepage features a large product display image used as the background, creating a strong “beverage showcase” feel.

• This imagery highlights the product as the central element of the visual experience.

Fig 2.4 Royal Beverage

d) Layout

• The structure follows a logical sequence: Main Visual → Company Profile → Product Display → News/Brand → Contact Us.

3. Functionality and Usability

a) Navigation

• The navigation bar is straightforward, featuring common sections such as Home, About, Products, Production, News, and Contact.

• This structure allows users to quickly access essential areas of the site without confusion.

Fig 2.5 Royal Beverage

b) Interactive Elements

• Product pages include a clear “View Product” button, enabling users to explore specific items directly.

• The News section provides a “Read More” button, guiding users seamlessly to full articles.

Fig 2.6 Royal Beverage

Fig 2.7 Royal Beverage

4. Content Quality

a) Quality

• The content is concise, well-structured, and avoids unnecessary information.

• Clear sections cover the company’s history, brand vision, product lines, and news/events.

• Frequent news updates highlight the company’s ongoing activity, reinforcing credibility and professionalism.

Fig 2.8 Royal Beverage

b) Relevance

• Each beverage in the product showcase is paired with a name, flavor profile, or keynote (e.g., “Bold and Zesty,” “Fuel the Storm”), which helps users grasp the product’s tone and personality.

• While the marketing copy is engaging, the absence of in-depth background, R&D details, or market data may reduce the informational depth.

• This gap could leave users feeling unsatisfied if they seek a systematic understanding of the brand’s foundations and evidence of product development.

Fig 2.9 Royal Beverage

Fig 2.10 Royal Beverage

5. Performance and Compatibility

The website loads smoothly overall, with no noticeable lag despite the large number of images. The responsive design is well executed, with the navigation and module layout adjusting appropriately when the window size is reduced or when viewed on mobile. Compatibility with major browsers is acceptable. However, high-definition images may slow down loading times on poor network conditions, especially the heavy background image on the homepage and the product gallery.

Summary and improvement suggestions：

Overall, Royal Beverage's official website does a good job of brand presentation and business image building. Its clean design, visual harmony, and logical structure provide visitors with a direct impression of the brand and products, helping to build trust.

However, there is still room for improvement: We recommend further compressing or lazy-loading image resources to reduce loading pressure. Beyond product and news content, we could add more in-depth content (such as R&D processes, market performance, and user/customer case studies) to enhance the sense of professionalism and depth of information. Furthermore, we should adjust the white space and spacing between modules to allow for a more visually comfortable experience on the page.

Website 3：Studio Herrström's brand website

From：https://www.csswinner.com/winners

1. Website Purpose and Objectives

This website is clearly positioned as a brand showcase for a "culture-focused" design studio. Its goal is to showcase its design capabilities and project portfolio to potential clients (particularly music, technology, and cultural brands). The opening statement, "A design studio for brands that move culture," directly states its positioning. Many of the project's project portals (such as Spotify, Meta, and Back Market) evoke the types of clients the studio collaborates with, aiming to raise brand awareness, attract the right clients, and establish credibility within the industry.

Fig 3.1 Studio Herrström

2. Visual Design and Layout

a) Color

• The color scheme is primarily neutral, with a black-and-white base.

• A few accent colors are used strategically, ensuring the focus remains on the content and case studies.

Fig 3.2 Studio Herrström

b) Typography

• The font is clean and easy to read.

Fig 3.3 Studio Herrström

c) Imagery

• The homepage opens with a large image or background combined with concise text, creating a strong brand presence.

• Visuals are minimalist and modern, reinforcing the overall aesthetic style.

Fig 3.4 Studio Herrström

d) Layout

• The layout follows a clear sequence: Core slogan → Representative cases → Workflow → News updates → Contact information.

• The design uses rhythmic spacing and sufficient white space, preventing the page from looking crowded.

• Section-to-section flow feels balanced and professional.

3. Functionality and Usability

a) Navigation

• The navigation is simple, with clear sections such as Work, About, Contact, and The Echo™.

• This straightforward structure allows users to easily find the sections they are interested in.

Fig 3.5 Studio Herrström

Fig 3.6 Studio Herrström

b) Interactive Elements

• The scrolling experience is smooth, and entering a case study requires only a single click, making the process intuitive.

• Interaction points are clearly defined, including newsletter subscriptions, social media links, and email addresses, which make connecting with the studio easy and seamless.

Fig 3.7 Studio Herrström

4. Content Quality

a) Quality

• The content is concise and well-presented, focusing on case studies with project titles, short descriptions, and links.

• Accompanying images and logos are visually compelling, encouraging users to explore further.

• The workflow section uses a clear three-step structure (Immerse → Create → Impact), which effectively communicates operational principles.

• News, interviews, and awards are included, enhancing credibility and reinforcing a professional tone.

• Overall, the style is consistent and professional, ensuring clarity and engagement.

b) Relevance

• The content provides enough information to attract user interest but remains surface-level.

• There is a lack of in-depth analysis of design concepts, detailed client feedback, or results data, which may leave more research-focused users unsatisfied.

• While visually and narratively engaging, the content may fall short for audiences seeking comprehensive insights or measurable outcomes.

5. Performance and Compatibility

The page loads fairly smoothly. Under the network conditions I tested, there was no noticeable lag. Responsiveness is also good: the modules automatically adjust their order and size when viewing on smaller screens or mobile devices. It's compatible with major browsers (Chrome, Safari, etc.). However, due to the large number of large images and media assets, loading delays may occur under poor network conditions. If the user is on a slow connection, the homepage background image and case studies may load slowly.

Summary and improvement suggestions：

Overall, Studio Herrström's official website does a great job of branding and showcasing its work. Its clear positioning, clean visual design, and logical layout allow visitors to quickly grasp the studio's style and strengths. The website's rich and regularly updated portfolio also enhances its professional image and credibility.

However, there is room for improvement: We recommend compressing or lazy-loading image resources to reduce initial loading pressure, and adding more in-depth project narratives, client feedback, or data-driven results within the portfolios to enhance their persuasiveness.

Website 4：Concept BMW

From：https://www.csswinner.com/winners

1. Website Purpose and Objectives

This website is a BMW M3 showcase, not an official brand site. Its purpose is to showcase the history, performance specifications, racing background, model demonstrations, and the charm of the classic BMW M3's fandom. The target audience is car enthusiasts with a keen interest in vintage BMW M3s. Through detailed images, performance data, and historical information, this content aims to enhance a sense of belonging and nostalgia among fans.

Fig 4.1 BMW

2. Visual Design and Layout

a) Color

• The entire website is in beige with a white background.

• This color choice highlights the cars, ensuring they remain the main focal point.

• Strong contrast between text and images further enhances visibility and emphasis.

Fig 4.2 BMW

b) Typography

• The font is clean, clear, and easy to read.

• The strong contrast with the background supports readability and user comfort.

Fig 4.3 BMW

c) Imagery

• The design relies heavily on large-scale car photography and model images.

• These visuals dominate the presentation, creating a sense of realism and immersion.

Fig 4.4 BMW

d) Layout

• The page follows a long scrolling structure, divided into sections.

• Each section features a distinct image, title, and caption.

• The layout style emphasizes presentation and immersion, creating a powerful visual impact.

Fig 4.5 BMW

3. Functionality and Usability

a) Navigation

• The navigation bar includes Home, Models, About, News, Instagram, Facebook, and X, enabling users to move easily between key sections.

• The structure is straightforward and covers both informational pages and external social media platforms.

Fig 4.6 BMW

b) Interactive Elements

• The scrolling experience is smooth, with images loading seamlessly and text transitioning naturally.

• Some content, such as “Learn More” links, provides access to more detailed information.

• Interactive features are minimal overall, as the site is primarily designed for viewing rather than active engagement.

Fig 4.7 BMW

4. Content Quality

a) Quality

• The content covers the history of the BMW M3, specifications of different model years, racing records, and model images.

• While not highly comprehensive, the information is engaging and enjoyable for car enthusiasts.

• Technical data such as power output, speed, and acceleration times are clearly presented, appealing to users who value precise performance details.

• The content style is narrative and illustrative, which keeps it interesting but less structured.

Fig 4.8 BMW

b) Relevance

• The information is well-suited for casual readers and automotive enthusiasts seeking quick insights into the BMW M3.

• However, as an unofficial site, users may need to verify the accuracy of data sources independently.

• The lack of interactive or dynamic update mechanisms (e.g., comparison tools, data updates, or filtering) reduces its usefulness for users seeking deeper engagement or systematic research.

5. Performance and Compatibility

In my experience, page loading was generally smooth. Due to the large number of images and models being rendered, there may be some lag on unstable networks or devices with low performance. The responsive design is acceptable: the viewport adjusts to different screen sizes, but images may be partially cropped or text may be covered on extremely small screens (such as small phones). Compatibility with major browsers is normal.

Summary and improvement suggestions：

Overall, BMW PeachWorld is a showcase site. It satisfies enthusiasts' nostalgia and curiosity about the classic BMW M3 through rich visual content, intriguing historical and performance data. The overall browsing experience is enjoyable, allowing visitors to immerse themselves in the history and performance of the car.

However, due to its non-commercial or official nature, it doesn't emphasize user conversion or engagement. To enhance the user experience, consider adding a user review section or interactive elements (such as allowing visitors to upload photos of their own cars, leave comments, or rate them). Additionally, the image and text layout could be fine-tuned for smaller screens to avoid obstruction or excessive font size.

Website 5：shakuro's Mirko Romanelli

From：https://www.csswinner.com/winners

1. Website Purpose and Objectives

The primary purpose of this website is to serve as a platform for Mirko Romanelli's portfolio and design identity. He is a Florence-based product designer. The website aims to showcase his design style and expertise through his work, philosophy, and process, allowing potential clients and partners to understand who he is, what he does, and how he does it. The homepage title, "Product and Industrial designer based in Florence, focused on creating complete product experiences," clearly indicates his professional identity.

Fig 5.1 Mirko Romanelli

2. Visual Design and Layout

a) Color

• The primary palette is neutral, built on a sharp contrast between dark gray and white.

• This creates a clean, minimalist, and striking visual tone.

Fig 5.2 Mirko Romanelli

b) Typography

• Text use is minimal, ensuring focus remains on the visuals.

• The simplicity of the font supports readability and aligns with the minimalist style.

Fig 5.3 Mirko Romanelli

c) Imagery

• Large images dominate the design, giving each work a strong sense of stage presence.

• The imagery becomes the central storytelling element, with text used sparingly as support.

Fig 5.4 Mirko Romanelli

d) Layout

• The structure follows a clear sequence: representative works → introductions → case studies.

• Smooth transitions between modules enhance flow and user experience.

• Ample white space balances the visuals, preventing crowding and reinforcing the minimalist style.

3. Functionality and Usability

a) Navigation

• The top navigation is minimal, with only Home, About, Contact, and Works.

• This simplicity provides a clear and straightforward user path, reducing cognitive load.

Fig 5.5 Mirko Romanelli

b) Interactive Elements

• Scrolling and interactive animations are subtle, contributing to a smooth and elegant user experience.

• Page transitions and case study navigation are fluid.

• Both images and text are clickable, leading users to deeper work pages.

• User guidance is present but gentle, ensuring usability without overwhelming interaction demands.

Fig 5.6 Mirko Romanelli

4. Content Quality

a) Quality

• The content mainly includes the project name, brief description, images of the work, and publication date.

• It is concise and precise, avoiding unnecessary detail.

• Each case highlights the design concept and formal beauty rather than relying on lengthy text.

• The About section also adopts concise language to express the design philosophy.

• Overall, the style is consistent, professional, and visually oriented.

Fig 5.7 Mirko Romanelli

b) Relevance

The concise format ensures users can quickly grasp the design concepts without being overwhelmed by text.

The consistent use of visuals and core vocabulary effectively conveys the brand’s value.

However, for users seeking deeper context or detailed project insights, the limited text may feel insufficient.

5. Performance and Compatibility

In my experience, this website loads smoothly. It's also very responsive: the layout adapts to mobile devices and smaller devices. It's compatible with all major browsers.

Summary and improvement suggestions：

Overall, Mirko Romanelli's website is based on a minimalist style, focusing on his design work and philosophy rather than the interface itself. This "less is more" philosophy is consistently applied throughout, allowing visitors to focus on the work itself rather than being distracted by the website's embellishments. The interactive details and animations are well-handled, creating a smooth, professional, and sophisticated impression of the designer.

However, minimalist presentation can also lead to information gaps. For visitors interested in processes, technologies, collaborations, or client experiences, the website's current content may seem shallow. Including additional information on each portfolio page, such as project background, design process, material selection, and user feedback, would significantly enhance its persuasiveness.

---

3. Reflection：

By analyzing multiple websites, I not only learned to evaluate them from perspectives such as purpose, design, functionality, content, and performance, but also realized the differences in the balance between aesthetics and practicality between different websites. This gave me a deeper understanding of the importance of user experience and inspired me to think about balancing visual expression and information value in my designs.